Port rerender tests (#24)

Author: RoFlection Bot

src/__tests__/act.spec.lua

@@ -51,9 +51,7 @@ return function()
 		task.wait()
 		effectCb:mockClear()
 		fireEvent.click(buttonNode)
-		-- ROBLOX deviation START: replace toHaveTextContext
-		jestExpect(buttonNode.Text).toBe("1")
-		-- ROBLOX deviation END
+		jestExpect(buttonNode).toHaveTextContent("1")
 		jestExpect(effectCb).toHaveBeenCalledTimes(1)
 	end)
 

src/__tests__/auto-cleanup.spec.lua

@@ -16,8 +16,6 @@ return function()
 	end)
 
 	it("second", function()
-		-- ROBLOX deviation START: not using toBeEmptyDOMElement
-		jestExpect(#document:GetChildren()).toBe(0)
-		-- ROBLOX deviation END
+		jestExpect(document).toBeEmptyDOMElement()
 	end)
 end

src/__tests__/end-to-end.spec.lua

@@ -93,7 +93,7 @@ return function()
 							return screen.getByText("Loading...")
 						end
 						waitForElementToBeRemoved(loading):expect()
-						jestExpect(screen.getByTestId("message").Text).toMatch(RegExp("Hello World"))
+						jestExpect(screen.getByTestId("message")).toHaveTextContent(RegExp("Hello World"))
 					end)
 					:expect()
 			end)
@@ -106,9 +106,7 @@ return function()
 							return screen.getByText(RegExp("Loaded this message:"))
 						end
 						waitFor(message):expect()
-						-- ROBLOX deviation START: replace .toHaveTextContent
-						jestExpect(screen.getByTestId("message").Text).toMatch(RegExp("Hello World"))
-						-- ROBLOX deviation END
+						jestExpect(screen.getByTestId("message")).toHaveTextContent(RegExp("Hello World"))
 					end)
 					:expect()
 			end)
@@ -117,9 +115,7 @@ return function()
 				return Promise.resolve()
 					:andThen(function()
 						render(React.createElement(ComponentWithLoader, nil))
-						-- ROBLOX deviation START: replace .resolves.toHaveTextContent
-						jestExpect((screen.findByTestId("message"):expect()).Text).toMatch(RegExp("Hello World"))
-						-- ROBLOX deviation END
+						jestExpect((screen.findByTestId("message"):expect())).toHaveTextContent(RegExp("Hello World"))
 					end)
 					:expect()
 			end)

src/__tests__/rerender.spec.lua

@@ -0,0 +1,52 @@
+-- ROBLOX upstream: https://github.com/testing-library/react-testing-library/blob/v12.1.5/src/__tests__/rerender.js
+return function()
+	local Packages = script.Parent.Parent.Parent
+
+	local JestGlobals = require(Packages.Dev.JestGlobals)
+	local jestExpect = JestGlobals.expect
+
+	local React = require(Packages.React)
+	local render = require(script.Parent.Parent)(afterEach).render
+
+	it("rerender will re-render the element", function()
+		local function Greeting(props)
+			return React.createElement("TextLabel", { Text = props.message })
+		end
+		local ref = render(React.createElement(Greeting, { message = "hi" }))
+		local container, rerender = ref.container, ref.rerender
+		-- ROBLOX deviation START: replace firstChild with Instance equivalent
+		jestExpect(container:GetChildren()[1]).toHaveTextContent("hi")
+		rerender(React.createElement(Greeting, { message = "hey" }))
+		jestExpect(container:GetChildren()[1]).toHaveTextContent("hey")
+		-- ROBLOX deviation END
+	end)
+
+	-- ROBLOX deviation START: hydrate not supported
+	-- it("hydrate will not update props until next render", function()
+	-- 	local initialInputElement = document:createElement("input")
+	-- 	local container = document:createElement("div")
+	-- 	container:appendChild(initialInputElement)
+	-- 	document.body:appendChild(container)
+	-- 	local firstValue = "hello"
+	-- 	initialInputElement.value = firstValue
+	-- 	local rerender = render(
+	-- 		React.createElement("input", {
+	-- 			value = "",
+	-- 			onChange = function()
+	-- 				return nil
+	-- 			end,
+	-- 		}),
+	-- 		{ container = container, hydrate = true }
+	-- 	).rerender
+	-- 	jestExpect(initialInputElement).toHaveValue(firstValue)
+	-- 	local secondValue = "goodbye"
+	-- 	rerender(React.createElement("input", {
+	-- 		value = secondValue,
+	-- 		onChange = function()
+	-- 			return nil
+	-- 		end,
+	-- 	}))
+	-- 	jestExpect(initialInputElement).toHaveValue(secondValue)
+	-- end)
+	-- ROBLOX deviation END
+end

src/jsHelpers/jest-dom.lua

@@ -42,4 +42,41 @@ local function toBeEmptyDOMElement(self, received: Instance, expected)
 end
 exports.toBeEmptyDOMElement = toBeEmptyDOMElement
 
+local function toHaveTextContent(self, received: Instance, expected)
+	local matcherName = "toHaveTextContent"
+	if received:IsA("TextBox") then
+		error("toHaveTextContent is not meant to be used with TextBox")
+	end
+
+	local text = (received :: any).Text
+	local checkingWithEmptyString = not expected or expected == "" or text == ""
+
+	local check
+	if typeof(expected) == "string" then
+		check = string.find(text, expected, 1, true)
+	elseif typeof(expected) == "table" and typeof(expected.test) == "function" then
+		check = expected:test(text)
+	else
+		error("Unhandled expected value type: string or regex is required")
+	end
+
+	local options = {
+		isNot = self.isNot,
+		promise = self.promise,
+	}
+
+	local pass = not checkingWithEmptyString and not not check
+	local message = function()
+		return self.utils.matcherHint(matcherName, nil, nil, options) :: string
+			.. "\n\n"
+			.. (
+				if checkingWithEmptyString
+					then "Checking with empty string will always match, use .toBeEmptyDOMElement() instead"
+					else "Expected element " .. (if self.isNot then "not to" else "to") .. " have text content"
+			)
+	end
+	return { message = message, pass = pass }
+end
+exports.toHaveTextContent = toHaveTextContent
+
 return exports