PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert some Enzyme tests to RTL (#9163)

Browse source
This commit is contained in:
Michael Telatynski 2022-08-11 01:00:53 +01:00 committed by GitHub
parent 0697d1d6d4
commit 801858a091
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
test/accessibility/RovingTabIndex-test.tsx
View file

@ -15,8 +15,7 @@ limitations under the License.
*/ */
import * as React from "react"; import * as React from "react";
// eslint-disable-next-line deprecate/import import { render } from "@testing-library/react";
import { mount, ReactWrapper } from "enzyme";
import { import {
IState, IState,
@ -32,10 +31,10 @@ const Button = (props) => {
return <button {...props} onFocus={onFocus} tabIndex={isActive ? 0 : -1} ref={ref} />; return <button {...props} onFocus={onFocus} tabIndex={isActive ? 0 : -1} ref={ref} />;
}; };
const checkTabIndexes = (buttons: ReactWrapper, expectations: number[]) => { const checkTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]) => {
expect(buttons.length).toBe(expectations.length); expect(buttons.length).toBe(expectations.length);
for (let i = 0; i < buttons.length; i++) { for (let i = 0; i < buttons.length; i++) {
expect(buttons.at(i).prop("tabIndex")).toBe(expectations[i]); expect(buttons[i].tabIndex).toBe(expectations[i]);
} }
}; };
@ -52,15 +51,15 @@ Object.defineProperty(HTMLElement.prototype, "offsetParent", {
describe("RovingTabIndex", () => { describe("RovingTabIndex", () => {
it("RovingTabIndexProvider renders children as expected", () => { it("RovingTabIndexProvider renders children as expected", () => {
const wrapper = mount(<RovingTabIndexProvider> const { container } = render(<RovingTabIndexProvider>
{ () => <div><span>Test</span></div> } { () => <div><span>Test</span></div> }
</RovingTabIndexProvider>); </RovingTabIndexProvider>);
expect(wrapper.text()).toBe("Test"); expect(container.textContent).toBe("Test");
expect(wrapper.html()).toBe('<div><span>Test</span></div>'); expect(container.innerHTML).toBe('<div><span>Test</span></div>');
}); });
it("RovingTabIndexProvider works as expected with useRovingTabIndex", () => { it("RovingTabIndexProvider works as expected with useRovingTabIndex", () => {
const wrapper = mount(<RovingTabIndexProvider> const { container, rerender } = render(<RovingTabIndexProvider>
{ () => <React.Fragment> { () => <React.Fragment>
{ button1 } { button1 }
{ button2 } { button2 }
@ -69,40 +68,44 @@ describe("RovingTabIndex", () => {
</RovingTabIndexProvider>); </RovingTabIndexProvider>);
// should begin with 0th being active // should begin with 0th being active
checkTabIndexes(wrapper.find("button"), [0, -1, -1]); checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
// focus on 2nd button and test it is the only active one // focus on 2nd button and test it is the only active one
wrapper.find("button").at(2).simulate("focus"); container.querySelectorAll("button")[2].focus();
wrapper.update(); checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
checkTabIndexes(wrapper.find("button"), [-1, -1, 0]);
// focus on 1st button and test it is the only active one // focus on 1st button and test it is the only active one
wrapper.find("button").at(1).simulate("focus"); container.querySelectorAll("button")[1].focus();
wrapper.update(); checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
checkTabIndexes(wrapper.find("button"), [-1, 0, -1]);
// check that the active button does not change even on an explicit blur event // check that the active button does not change even on an explicit blur event
wrapper.find("button").at(1).simulate("blur"); container.querySelectorAll("button")[1].blur();
wrapper.update(); checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
checkTabIndexes(wrapper.find("button"), [-1, 0, -1]);
// update the children, it should remain on the same button // update the children, it should remain on the same button
wrapper.setProps({ rerender(<RovingTabIndexProvider>
children: () => [button1, button4, button2, button3], { () => <React.Fragment>
}); { button1 }
wrapper.update(); { button4 }
checkTabIndexes(wrapper.find("button"), [-1, -1, 0, -1]); { button2 }
{ button3 }
</React.Fragment> }
</RovingTabIndexProvider>);
checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0, -1]);
// update the children, remove the active button, it should move to the next one // update the children, remove the active button, it should move to the next one
wrapper.setProps({ rerender(<RovingTabIndexProvider>
children: () => [button1, button4, button3], { () => <React.Fragment>
}); { button1 }
wrapper.update(); { button4 }
checkTabIndexes(wrapper.find("button"), [-1, -1, 0]); { button3 }
</React.Fragment> }
</RovingTabIndexProvider>);
checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
}); });
it("RovingTabIndexProvider works as expected with RovingTabIndexWrapper", () => { it("RovingTabIndexProvider works as expected with RovingTabIndexWrapper", () => {
const wrapper = mount(<RovingTabIndexProvider> const { container } = render(<RovingTabIndexProvider>
{ () => <React.Fragment> { () => <React.Fragment>
{ button1 } { button1 }
{ button2 } { button2 }
@ -118,12 +121,11 @@ describe("RovingTabIndex", () => {
</RovingTabIndexProvider>); </RovingTabIndexProvider>);
// should begin with 0th being active // should begin with 0th being active
checkTabIndexes(wrapper.find("button"), [0, -1, -1]); checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
// focus on 2nd button and test it is the only active one // focus on 2nd button and test it is the only active one
wrapper.find("button").at(2).simulate("focus"); container.querySelectorAll("button")[2].focus();
wrapper.update(); checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
checkTabIndexes(wrapper.find("button"), [-1, -1, 0]);
}); });
describe("reducer functions as expected", () => { describe("reducer functions as expected", () => {
@ -206,7 +208,7 @@ describe("RovingTabIndex", () => {
const ref3 = React.createRef<HTMLElement>(); const ref3 = React.createRef<HTMLElement>();
const ref4 = React.createRef<HTMLElement>(); const ref4 = React.createRef<HTMLElement>();
mount(<React.Fragment> render(<React.Fragment>
<span ref={ref1} /> <span ref={ref1} />
<span ref={ref2} /> <span ref={ref2} />
<span ref={ref3} /> <span ref={ref3} />

15
test/utils/tooltipify-test.tsx
View file

@ -15,8 +15,7 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
// eslint-disable-next-line deprecate/import import { render } from '@testing-library/react';
import { mount } from 'enzyme';
import { tooltipifyLinks } from '../../src/utils/tooltipify'; import { tooltipifyLinks } from '../../src/utils/tooltipify';
import PlatformPeg from '../../src/PlatformPeg'; import PlatformPeg from '../../src/PlatformPeg';
@ -27,8 +26,7 @@ describe('tooltipify', () => {
.mockReturnValue({ needsUrlTooltips: () => true } as unknown as BasePlatform); .mockReturnValue({ needsUrlTooltips: () => true } as unknown as BasePlatform);
it('does nothing for empty element', () => { it('does nothing for empty element', () => {
const component = mount(<div />); const { container: root } = render(<div />);
const root = component.getDOMNode();
const originalHtml = root.outerHTML; const originalHtml = root.outerHTML;
const containers: Element[] = []; const containers: Element[] = [];
tooltipifyLinks([root], [], containers); tooltipifyLinks([root], [], containers);
@ -37,8 +35,7 @@ describe('tooltipify', () => {
}); });
it('wraps single anchor', () => { it('wraps single anchor', () => {
const component = mount(<div><a href="/foo">click</a></div>); const { container: root } = render(<div><a href="/foo">click</a></div>);
const root = component.getDOMNode();
const containers: Element[] = []; const containers: Element[] = [];
tooltipifyLinks([root], [], containers); tooltipifyLinks([root], [], containers);
expect(containers).toHaveLength(1); expect(containers).toHaveLength(1);
@ -49,8 +46,7 @@ describe('tooltipify', () => {
}); });
it('ignores node', () => { it('ignores node', () => {
const component = mount(<div><a href="/foo">click</a></div>); const { container: root } = render(<div><a href="/foo">click</a></div>);
const root = component.getDOMNode();
const originalHtml = root.outerHTML; const originalHtml = root.outerHTML;
const containers: Element[] = []; const containers: Element[] = [];
tooltipifyLinks([root], [root.children[0]], containers); tooltipifyLinks([root], [root.children[0]], containers);
@ -59,8 +55,7 @@ describe('tooltipify', () => {
}); });
it("does not re-wrap if called multiple times", () => { it("does not re-wrap if called multiple times", () => {
const component = mount(<div><a href="/foo">click</a></div>); const { container: root } = render(<div><a href="/foo">click</a></div>);
const root = component.getDOMNode();
const containers: Element[] = []; const containers: Element[] = [];
tooltipifyLinks([root], [], containers); tooltipifyLinks([root], [], containers);
tooltipifyLinks([root], [], containers); tooltipifyLinks([root], [], containers);