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

View File

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