Skip to content

Commit 0ae9a51

Browse files
author
RoFlection Bot
committed
UIBLOX-821: Add mouseEnter and mouseLeave support to react testing library (#66)
* Add mouseEnter and mouseLeave suport to react testing library * oops! * how and why * Upgrade again * Fix test * Add size to textbutton * Set engine timeframe * .... task delay? * isn't this the same thing? * i hate that lest isn't working * Remove unused imports * new version who dis * cleanup cleanup (ha get it) * ok * omg
1 parent 2be01fc commit 0ae9a51

File tree

5 files changed

+39
-37
lines changed

5 files changed

+39
-37
lines changed

‎rotriever.toml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "ReactTestingLibrary"
3-
version = "12.2.1"
3+
version = "12.2.2"
44
authors = [
55
"Ignacio Falk <flakolefluk@gmail.com>",
66
"Allan Jeremy <dev@allanjeremy.com>",
@@ -11,7 +11,7 @@ files = ["*", "!**/__tests__/**"]
1111
[dependencies]
1212
LuauPolyfill = "github.com/roblox/luau-polyfill@1"
1313
Promise = "github.com/roblox/roblox-lua-promise@3.3.0"
14-
DomTestingLibrary = "github.com/roblox/dom-testing-library-lua@8.14.2"
14+
DomTestingLibrary = "github.com/roblox/dom-testing-library-lua@8.14.5-rotriever.1"
1515
React = "github.com/roblox/roact-alignment@17.0.1-rc.16"
1616
ReactRoblox = "github.com/roblox/roact-alignment@17.0.1-rc.16"
1717
Scheduler = "github.com/roblox/roact-alignment@17.0.1-rc.16"

‎src/__tests__/cleanup.spec.lua‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,9 @@ local jest = JestGlobals.jest
1111

1212
local LuauPolyfill = require(Packages.LuauPolyfill)
1313
local console = LuauPolyfill.console
14-
local setTimeout = LuauPolyfill.setTimeout
1514

1615
local document = require(Packages.DomTestingLibrary).document
1716

18-
local Promise = require(Packages.Promise)
1917
local getElementByName = require(script.Parent.Parent.jsHelpers.Element).getElementByName
2018

2119
local React = require(Packages.React)
@@ -76,7 +74,7 @@ describe("fake timers and missing act warnings", function()
7674
-- assert messages explicitly
7775
end)
7876
-- ROBLOX deviation END
79-
jest.useFakeTimers()
77+
jest.useFakeTimers().setEngineFrameTime(1000 / 60)
8078
end)
8179

8280
afterEach(function()
@@ -90,8 +88,8 @@ describe("fake timers and missing act warnings", function()
9088
local _, setDeferredCounter = React.useState(nil :: number?)
9189
React.useEffect(function()
9290
local cancelled = false
93-
-- ROBLOX deviation START: Lua Promise.resolve is not scheduled. Must use delay(0) for the same behavior
94-
Promise.delay(0):andThen(function()
91+
-- ROBLOX deviation START: Using task.delay for mockability
92+
task.delay(0, function()
9593
microTaskSpy()
9694
-- eslint-disable-next-line jest/no-if -- false positive
9795
if not cancelled then
@@ -129,12 +127,12 @@ describe("fake timers and missing act warnings", function()
129127
local _, setDeferredCounter = React.useState(nil :: number?)
130128
React.useEffect(function()
131129
local cancelled = false
132-
setTimeout(function()
130+
task.delay(0, function()
133131
deferredStateUpdateSpy()
134132
if not cancelled then
135133
setDeferredCounter(counter)
136134
end
137-
end, 0)
135+
end)
138136

139137
return function()
140138
cancelled = true
@@ -144,9 +142,9 @@ describe("fake timers and missing act warnings", function()
144142
return nil
145143
end
146144
render(React.createElement(Test, nil))
147-
task.wait()
148145

149-
jest.runAllTimers()
146+
jest.advanceTimersByTime(0)
147+
150148
cleanup()
151149

152150
expect(deferredStateUpdateSpy).toHaveBeenCalledTimes(1)

‎src/__tests__/events.spec.lua‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@ local eventTypes = {
3434
elementType = "TextBox",
3535
init = { key = Enum.KeyCode.Return },
3636
},
37-
}
38-
-- ROBLOX deviation END
39-
40-
-- ROBLOX deviation START: subset with implemented methods in RTL, but not implemented in DTL
41-
local unhandledEventTypes = {
4237
{
4338
type = "Mouse",
4439
events = {
45-
{ fireEventName = "mouseEnter" },
46-
{ fireEventName = "mouseLeave" },
40+
{ fireEventName = "mouseEnter", instanceEventName = "MouseEnter" },
41+
{ fireEventName = "mouseLeave", instanceEventName = "MouseLeave" },
4742
},
4843
elementType = "TextButton",
4944
},
45+
}
46+
-- ROBLOX deviation END
47+
48+
-- ROBLOX deviation START: subset with implemented methods in RTL, but not implemented in DTL
49+
local unhandledEventTypes = {
5050
{
5151
type = "Pointer",
5252
events = {
@@ -171,7 +171,7 @@ Array.forEach(unhandledEventTypes, function(ref)
171171
render(React.createElement(elementType, { ref = ref }))
172172
expect(function()
173173
fireEvent[event.fireEventName](ref.current, init)
174-
end).toThrowError("Event not found")
174+
end).toThrowError(string.format("Event '%s' not supported", event.fireEventName))
175175
end)
176176
end)
177177
end)

‎src/__tests__/stopwatch.spec.lua‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,11 @@ function StopWatch:render()
5656
"Frame",
5757
nil,
5858
React.createElement("TextLabel", { Text = lapse .. " ms" }),
59-
React.createElement(
60-
"TextButton",
61-
{ [React.Event.Activated] = self.handleRunClick, Text = if running then "Stop" else "Start" }
62-
),
59+
React.createElement("TextButton", {
60+
Text = if running then "Stop" else "Start",
61+
Size = UDim2.fromOffset(100, 100),
62+
[React.Event.Activated] = self.handleRunClick,
63+
}),
6364
React.createElement("TextButton", { [React.Event.Activated] = self.handleClearClick, Text = "Clear" })
6465
)
6566
end
@@ -77,7 +78,8 @@ test("unmounts a component", function()
7778
-- ROBLOX deviation END
7879
local ref = render(React.createElement(StopWatch, nil))
7980
local unmount, container = ref.unmount, ref.container
80-
fireEvent.click(screen.getByText("Start"))
81+
local label = screen.getByText("Start")
82+
fireEvent.click(label)
8183
unmount()
8284
-- hey there reader! You don't need to have an assertion like this one
8385
-- this is just me making sure that the unmount function works.

‎src/fire-event.lua‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,21 @@ Array.forEach(Object.keys(dtlFireEvent), function(key)
2626
end
2727
end)
2828

29-
-- React event system tracks native mouseOver/mouseOut events for
30-
-- running onMouseEnter/onMouseLeave handlers
31-
-- @link https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/events/EnterLeaveEventPlugin.js#L24-L31
32-
local mouseEnter = fireEvent.mouseEnter
33-
local mouseLeave = fireEvent.mouseLeave
34-
fireEvent.mouseEnter = function(...: any)
35-
mouseEnter(...)
36-
return fireEvent.mouseOver(...)
37-
end
38-
fireEvent.mouseLeave = function(...: any)
39-
mouseLeave(...)
40-
return fireEvent.mouseOut(...)
41-
end
29+
-- ROBLOX deviation START: mouseEnter/mouseLeave handled by dom-testing-library
30+
-- -- React event system tracks native mouseOver/mouseOut events for
31+
-- -- running onMouseEnter/onMouseLeave handlers
32+
-- -- @link https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/events/EnterLeaveEventPlugin.js#L24-L31
33+
-- local mouseEnter = fireEvent.mouseEnter
34+
-- local mouseLeave = fireEvent.mouseLeave
35+
-- fireEvent.mouseEnter = function(...: any)
36+
-- mouseEnter(...)
37+
-- return fireEvent.mouseOver(...)
38+
-- end
39+
-- fireEvent.mouseLeave = function(...: any)
40+
-- mouseLeave(...)
41+
-- return fireEvent.mouseOut(...)
42+
-- end
43+
-- ROBLOX deviation END
4244

4345
local pointerEnter = fireEvent.pointerEnter
4446
local pointerLeave = fireEvent.pointerLeave

0 commit comments

Comments
 (0)