From 87c3487eaaa0581ec91e3dbc5bd98d38031479f3 Mon Sep 17 00:00:00 2001 From: Hubert Boma Manilla Date: Mon, 7 Aug 2023 07:40:17 +0000 Subject: [PATCH] Bug 1828573 - [devtools] Convert all component jest tests from jsx r=devtools-reviewers,nchevobbe Depends on D184937 Differential Revision: https://phabricator.services.mozilla.com/D185521 --- .../Editor/tests/Breakpoints.spec.js | 2 +- .../Editor/tests/ConditionalPanel.spec.js | 2 +- .../components/Editor/tests/DebugLine.spec.js | 9 +- .../components/Editor/tests/Footer.spec.js | 9 +- .../PrimaryPanes/tests/ProjectSearch.spec.js | 31 +++- .../Breakpoints/tests/Breakpoint.spec.js | 4 +- .../Breakpoints/tests/ExceptionOption.spec.js | 12 +- .../SecondaryPanes/Frames/tests/Frame.spec.js | 12 +- .../Frames/tests/Frames.spec.js | 11 +- .../SecondaryPanes/Frames/tests/Group.spec.js | 2 +- .../SecondaryPanes/tests/CommandBar.spec.js | 8 +- .../tests/EventListeners.spec.js | 4 +- .../SecondaryPanes/tests/Expressions.spec.js | 4 +- .../tests/XHRBreakpoints.spec.js | 2 +- .../shared/Button/tests/CloseButton.spec.js | 11 +- .../Button/tests/CommandBarButton.spec.js | 12 +- .../Button/tests/PaneToggleButton.spec.js | 10 +- .../components/shared/tests/Accordion.spec.js | 14 +- .../src/components/shared/tests/Badge.spec.js | 8 +- .../shared/tests/BracketArrow.spec.js | 7 +- .../components/shared/tests/Dropdown.spec.js | 7 +- .../src/components/shared/tests/Modal.spec.js | 39 +++-- .../components/shared/tests/Popover.spec.js | 140 ++++++++++-------- .../shared/tests/PreviewFunction.spec.js | 6 +- .../shared/tests/ResultList.spec.js | 7 +- .../shared/tests/SearchInput.spec.js | 34 ++--- .../src/components/test/A11yIntention.spec.js | 8 +- .../src/components/test/OutlineFilter.spec.js | 2 +- .../src/components/test/WelcomeBox.spec.js | 3 +- .../src/components/test/WhyPaused.spec.js | 4 +- 30 files changed, 267 insertions(+), 157 deletions(-) diff --git a/devtools/client/debugger/src/components/Editor/tests/Breakpoints.spec.js b/devtools/client/debugger/src/components/Editor/tests/Breakpoints.spec.js index 97305591ee87..c86db655e849 100644 --- a/devtools/client/debugger/src/components/Editor/tests/Breakpoints.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/Breakpoints.spec.js @@ -29,7 +29,7 @@ function generateDefaults(overrides) { function render(overrides = {}) { const props = generateDefaults(overrides); - const component = shallow(); + const component = shallow(React.createElement(BreakpointsComponent, props)); return { component, props }; } diff --git a/devtools/client/debugger/src/components/Editor/tests/ConditionalPanel.spec.js b/devtools/client/debugger/src/components/Editor/tests/ConditionalPanel.spec.js index 05e4dcb727b7..61546d030a2f 100644 --- a/devtools/client/debugger/src/components/Editor/tests/ConditionalPanel.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/ConditionalPanel.spec.js @@ -57,7 +57,7 @@ function render(log, line, column, condition, logValue, overrides = {}) { logValue ); const props = { ...defaults, ...overrides }; - const wrapper = mount(); + const wrapper = mount(React.createElement(ConditionalPanel, props)); return { wrapper, props }; } diff --git a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js index a7fcb53a2da2..c1e469ddbbe0 100644 --- a/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/DebugLine.spec.js @@ -52,9 +52,12 @@ function render(overrides = {}) { const doc = createMockDocument(clear); setDocument("foo", doc); - const component = shallow(, { - lifecycleExperimental: true, - }); + const component = shallow( + React.createElement(DebugLine.WrappedComponent, props), + { + lifecycleExperimental: true, + } + ); return { component, props, clear, editor, doc }; } diff --git a/devtools/client/debugger/src/components/Editor/tests/Footer.spec.js b/devtools/client/debugger/src/components/Editor/tests/Footer.spec.js index b58ba45cb3ea..fdb51721e808 100644 --- a/devtools/client/debugger/src/components/Editor/tests/Footer.spec.js +++ b/devtools/client/debugger/src/components/Editor/tests/Footer.spec.js @@ -42,9 +42,12 @@ function render(overrides = {}, position = { line: 0, column: 0 }) { const doc = createMockDocument(clear, position); setDocument(props.selectedSource.id, doc); - const component = shallow(, { - lifecycleExperimental: true, - }); + const component = shallow( + React.createElement(SourceFooter.WrappedComponent, props), + { + lifecycleExperimental: true, + } + ); return { component, props, clear, doc }; } diff --git a/devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js b/devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js index 7db67a79dbaf..a792adc6dbad 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js +++ b/devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js @@ -148,18 +148,33 @@ function render(overrides = {}, mounted = false) { if (mounted) { return mount( - - - , - { context, childContextTypes: { shortcuts: PropTypes.object } } + React.createElement( + Provider, + { + store: store, + }, + React.createElement(ProjectSearch, props) + ), + { + context, + childContextTypes: { + shortcuts: PropTypes.object, + }, + } ).childAt(0); } return shallow( - - - , - { context } + React.createElement( + Provider, + { + store: store, + }, + React.createElement(ProjectSearch, props) + ), + { + context, + } ).dive(); } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js index db8fb9d6da79..58c98917b308 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/Breakpoint.spec.js @@ -57,7 +57,9 @@ const location = { source: { id: "foo/original" }, line: 5, column: 7 }; function render(overrides = {}, breakpointOverrides = {}) { const props = generateDefaults(overrides, breakpointOverrides); - const component = shallow(); + const component = shallow( + React.createElement(Breakpoint.WrappedComponent, props) + ); const defaultState = component.state(); const instance = component.instance(); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js index 238551cc1090..e6c548d6117f 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/tests/ExceptionOption.spec.js @@ -10,12 +10,12 @@ import ExceptionOption from "../ExceptionOption"; describe("ExceptionOption renders", () => { it("with values", () => { const component = shallow( - null} - className="testClassName" - /> + React.createElement(ExceptionOption, { + label: "testLabel", + isChecked: true, + onChange: () => null, + className: "testClassName", + }) ); expect(component).toMatchSnapshot(); }); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js index 70728fd0a974..a463ac3aa25d 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frame.spec.js @@ -33,7 +33,7 @@ function render(frameToSelect = {}, overrides = {}, propsOverrides = {}) { const selectedFrame = { ...frame, ...frameToSelect }; const props = frameProperties(frame, selectedFrame, propsOverrides); - const component = shallow(); + const component = shallow(React.createElement(Frame, props)); return { component, props }; } @@ -66,7 +66,7 @@ describe("Frame", () => { const frame = makeMockFrame("1", source, undefined, 10, "renderFoo"); const props = frameProperties(frame, null); - const component = mount(); + const component = mount(React.createElement(Frame, props)); expect(component.text()).toBe("    renderFoo foo-view.js:10"); }); @@ -76,7 +76,7 @@ describe("Frame", () => { const frame = makeMockFrame("1", source, undefined, 10, "renderFoo"); const props = frameProperties(frame, null, { displayFullUrl: true }); - const component = mount(); + const component = mount(React.createElement(Frame, props)); expect(component.text()).toBe(`    renderFoo ${url}:10`); }); @@ -87,7 +87,9 @@ describe("Frame", () => { frame.asyncCause = "setTimeout handler"; const props = frameProperties(frame); - const component = mount(, { context: { l10n: L10N } }); + const component = mount(React.createElement(Frame, props), { + context: { l10n: L10N }, + }); expect(component.find(".location-async-cause").text()).toBe( `    (Async: setTimeout handler)` ); @@ -101,7 +103,7 @@ describe("Frame", () => { const props = frameProperties(frame, null, { getFrameTitle: x => `Jump to ${x}`, }); - const component = shallow(); + const component = shallow(React.createElement(Frame, props)); expect(component.prop("title")).toBe(`Jump to ${url}:10`); expect(component).toMatchSnapshot(); }); diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js index dd97021f0804..5b411ccc8654 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Frames.spec.js @@ -18,9 +18,14 @@ function render(overrides = {}) { }; const props = { ...defaultProps, ...overrides }; - const component = shallow(, { - context: { l10n: L10N }, - }); + const component = shallow( + React.createElement(Frames.WrappedComponent, props), + { + context: { + l10n: L10N, + }, + } + ); return component; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js index 535670afae96..cd7c529185c4 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/tests/Group.spec.js @@ -25,7 +25,7 @@ function render(overrides = {}) { }; const props = { ...defaultProps, ...overrides }; - const component = shallow(, { + const component = shallow(React.createElement(Group, props), { context: { l10n: L10N }, }); return { component, props }; diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js index 1e683ec3da1d..d2ca826bd943 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/CommandBar.spec.js @@ -22,7 +22,9 @@ describe("CommandBar", () => { // the shortcuts.on function const context = { shortcuts: { on: jest.fn() } }; - shallow(, { context }); + shallow(React.createElement(CommandBar.WrappedComponent, props), { + context, + }); // get the keyboard event listeners recorded from the "on" spy. // this will be an array where each item is itself a two item array @@ -55,7 +57,9 @@ describe("CommandBar", () => { // the shortcuts.on function const context = { shortcuts: { on: jest.fn() } }; - shallow(, { context }); + shallow(React.createElement(CommandBar.WrappedComponent, props), { + context, + }); // get the keyboard event listeners recorded from the "on" spy. // this will be an array where each item is itself a two item array diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js index f82b2093c9e4..1ade13ea285b 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/EventListeners.spec.js @@ -37,7 +37,9 @@ function generateDefaults(overrides = {}) { function render(overrides = {}) { const props = generateDefaults(overrides); - const component = shallow(); + const component = shallow( + React.createElement(EventListeners.WrappedComponent, props) + ); return { component, props }; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js index ad1419027638..cf7fa77f9ec2 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/Expressions.spec.js @@ -35,7 +35,9 @@ function generateDefaults(overrides) { function render(overrides = {}) { const props = generateDefaults(overrides); - const component = shallow(); + const component = shallow( + React.createElement(Expressions.WrappedComponent, props) + ); return { component, props }; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js index e269e89ac529..ad34d056495c 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js +++ b/devtools/client/debugger/src/components/SecondaryPanes/tests/XHRBreakpoints.spec.js @@ -46,7 +46,7 @@ function generateDefaultState(propsOverride) { function renderXHRBreakpointsComponent(propsOverride) { const props = generateDefaultState(propsOverride); const xhrBreakpointsComponent = mount( - + React.createElement(XHRBreakpoints.WrappedComponent, props) ); return xhrBreakpointsComponent; } diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js index cb426ddada04..9e0587173fc9 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CloseButton.spec.js @@ -10,14 +10,21 @@ describe("CloseButton", () => { it("renders with tooltip", () => { const tooltip = "testTooltip"; const wrapper = shallow( - {}} /> + React.createElement(CloseButton, { + tooltip: tooltip, + handleClick: () => {}, + }) ); expect(wrapper).toMatchSnapshot(); }); it("handles click event", () => { const handleClickSpy = jest.fn(); - const wrapper = shallow(); + const wrapper = shallow( + React.createElement(CloseButton, { + handleClick: handleClickSpy, + }) + ); wrapper.simulate("click"); expect(handleClickSpy).toHaveBeenCalled(); }); diff --git a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js index 1da7dc9fedd4..5e51fc541ff2 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/CommandBarButton.spec.js @@ -8,14 +8,22 @@ import { CommandBarButton, debugBtn } from "../"; describe("CommandBarButton", () => { it("renders", () => { - const wrapper = shallow(); + const wrapper = shallow( + React.createElement(CommandBarButton, { + children: [], + className: "", + }) + ); expect(wrapper).toMatchSnapshot(); }); it("renders children", () => { const children = [1, 2, 3, 4]; const wrapper = shallow( - + React.createElement(CommandBarButton, { + children: children, + className: "", + }) ); expect(wrapper.find("button").children()).toHaveLength(4); }); diff --git a/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js b/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js index 59fbe11fc65f..cd266cd7d57d 100644 --- a/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js +++ b/devtools/client/debugger/src/components/shared/Button/tests/PaneToggleButton.spec.js @@ -9,11 +9,11 @@ import { PaneToggleButton } from "../"; describe("PaneToggleButton", () => { const handleClickSpy = jest.fn(); const wrapper = shallow( - + React.createElement(PaneToggleButton, { + handleClick: handleClickSpy, + collapsed: false, + position: "start", + }) ); it("renders default", () => { diff --git a/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js b/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js index c15dbb827c46..5583336cee66 100644 --- a/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js +++ b/devtools/client/debugger/src/components/shared/tests/Accordion.spec.js @@ -12,27 +12,31 @@ describe("Accordion", () => { { header: "Test Accordion Item 1", className: "accordion-item-1", - component:
, + component: React.createElement("div", null), opened: false, onToggle: jest.fn(), }, { header: "Test Accordion Item 2", className: "accordion-item-2", - component:
, - buttons: