Migrate LiveDurationDropdown-test.tsx to react-testing-library (#10151)
parent
b4565f5024
commit
742fc25a11
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue