OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Migrate LiveDurationDropdown-test.tsx to react-testing-library (#10151)

pull/28217/head
Michael Weimann 2023-02-14 08:53:36 +01:00 committed by GitHub
parent b4565f5024
commit 742fc25a11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
test/components/views/location/LiveDurationDropdown-test.tsx
View File

@ -15,14 +15,13 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { act } from "react-dom/test-utils";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import LiveDurationDropdown, {
DEFAULT_DURATION_MS,
} from "../../../../src/components/views/location/LiveDurationDropdown";
import { findById, mockPlatformPeg } from "../../../test-utils";
import { mockPlatformPeg } from "../../../test-utils";
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
@ -31,45 +30,40 @@ describe("<LiveDurationDropdown />", () => {
timeout: DEFAULT_DURATION_MS,
onChange: jest.fn(),
};
const getComponent = (props = {}) => mount(<LiveDurationDropdown {...defaultProps} {...props} />);
const renderComponent = (props = {}) => render(<LiveDurationDropdown {...defaultProps} {...props} />);
const getOption = (wrapper: ReactWrapper, timeout: number) => findById(wrapper, `live-duration__${timeout}`).at(0);
const getSelectedOption = (wrapper: ReactWrapper) => findById(wrapper, "live-duration_value");
const openDropdown = (wrapper: ReactWrapper) =>
act(() => {
wrapper.find('[role="button"]').at(0).simulate("click");
wrapper.setProps({});
});
const getOption = (duration: string) => screen.getByRole("option", { name: `Share for ${duration}` });
const getSelectedOption = (duration: string) => screen.getByRole("button", { name: `Share for ${duration}` });
const openDropdown = async () => {
await userEvent.click(screen.getByRole("button"));
};
it("renders timeout as selected option", () => {
const wrapper = getComponent();
expect(getSelectedOption(wrapper).text()).toEqual("Share for 15m");
renderComponent();
expect(getSelectedOption("15m")).toBeInTheDocument();
});
it("renders non-default timeout as selected option", () => {
const timeout = 1234567;
const wrapper = getComponent({ timeout });
expect(getSelectedOption(wrapper).text()).toEqual(`Share for 21m`);
renderComponent({ timeout });
expect(getSelectedOption("21m")).toBeInTheDocument();
});
it("renders a dropdown option for a non-default timeout value", () => {
it("renders a dropdown option for a non-default timeout value", async () => {
const timeout = 1234567;
const wrapper = getComponent({ timeout });
openDropdown(wrapper);
expect(getOption(wrapper, timeout).text()).toEqual(`Share for 21m`);
renderComponent({ timeout });
await openDropdown();
expect(getOption("21m")).toBeInTheDocument();
});
it("updates value on option selection", () => {
it("updates value on option selection", async () => {
const onChange = jest.fn();
const wrapper = getComponent({ onChange });
renderComponent({ onChange });
const ONE_HOUR = 3600000;
openDropdown(wrapper);
act(() => {
getOption(wrapper, ONE_HOUR).simulate("click");
});
await openDropdown();
await userEvent.click(getOption("1h"));
expect(onChange).toHaveBeenCalledWith(ONE_HOUR);
});