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

Migrate `ZoomButtons-test` to react-testing-library (#10104)

pull/28217/head
Michael Weimann 2023-02-08 09:31:24 +01:00 committed by GitHub
parent cb67457860
commit 2c30e6d909
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/views/location/ZoomButtons.tsx
View File

@ -39,7 +39,7 @@ const ZoomButtons: React.FC<Props> = ({ map }) => {
<div className="mx_ZoomButtons">
<AccessibleButton
onClick={onZoomIn}
data-test-id="map-zoom-in-button"
data-testid="map-zoom-in-button"
title={_t("Zoom in")}
className="mx_ZoomButtons_button"
>
@ -47,7 +47,7 @@ const ZoomButtons: React.FC<Props> = ({ map }) => {
</AccessibleButton>
<AccessibleButton
onClick={onZoomOut}
data-test-id="map-zoom-out-button"
data-testid="map-zoom-out-button"
title={_t("Zoom out")}
className="mx_ZoomButtons_button"
>

21
test/components/views/location/ZoomButtons-test.tsx
View File

@ -1,5 +1,5 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -15,13 +15,10 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import * as maplibregl from "maplibre-gl";
import { act } from "react-dom/test-utils";
import { render, screen } from "@testing-library/react";
import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
import { findByTestId } from "../../../test-utils";
describe("<ZoomButtons />", () => {
const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
@ -29,7 +26,7 @@ describe("<ZoomButtons />", () => {
const defaultProps = {
map: mockMap,
};
const getComponent = (props = {}) => mount(<ZoomButtons {...defaultProps} {...props} />);
const getComponent = (props = {}) => render(<ZoomButtons {...defaultProps} {...props} />);
beforeEach(() => {
jest.clearAllMocks();
@ -37,15 +34,12 @@ describe("<ZoomButtons />", () => {
it("renders buttons", () => {
const component = getComponent();
expect(component).toMatchSnapshot();
expect(component.asFragment()).toMatchSnapshot();
});
it("calls map zoom in on zoom in click", () => {
const component = getComponent();
act(() => {
findByTestId(component, "map-zoom-in-button").at(0).simulate("click");
});
screen.getByTestId("map-zoom-in-button").click();
expect(mockMap.zoomIn).toHaveBeenCalled();
expect(component).toBeTruthy();
@ -53,10 +47,7 @@ describe("<ZoomButtons />", () => {
it("calls map zoom out on zoom out click", () => {
const component = getComponent();
act(() => {
findByTestId(component, "map-zoom-out-button").at(0).simulate("click");
});
screen.getByTestId("map-zoom-out-button").click();
expect(mockMap.zoomOut).toHaveBeenCalled();
expect(component).toBeTruthy();

8
test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
View File

@ -135,7 +135,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
>
<AccessibleButton
className="mx_ZoomButtons_button"
data-test-id="map-zoom-in-button"
data-testid="map-zoom-in-button"
element="div"
onClick={[Function]}
role="button"
@ -144,7 +144,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
>
<div
className="mx_AccessibleButton mx_ZoomButtons_button"
data-test-id="map-zoom-in-button"
data-testid="map-zoom-in-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
@ -159,7 +159,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
</AccessibleButton>
<AccessibleButton
className="mx_ZoomButtons_button"
data-test-id="map-zoom-out-button"
data-testid="map-zoom-out-button"
element="div"
onClick={[Function]}
role="button"
@ -168,7 +168,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
>
<div
className="mx_AccessibleButton mx_ZoomButtons_button"
data-test-id="map-zoom-out-button"
data-testid="map-zoom-out-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}

76
test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
View File

@ -1,74 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ZoomButtons /> renders buttons 1`] = `
<ZoomButtons
map={
MockMap {
"_events": {},
"_eventsCount": 0,
"_maxListeners": undefined,
"addControl": [MockFunction],
"fitBounds": [MockFunction],
"removeControl": [MockFunction],
"setCenter": [MockFunction],
"setStyle": [MockFunction],
"zoomIn": [MockFunction],
"zoomOut": [MockFunction],
Symbol(kCapture): false,
}
}
>
<DocumentFragment>
<div
className="mx_ZoomButtons"
class="mx_ZoomButtons"
>
<AccessibleButton
className="mx_ZoomButtons_button"
data-test-id="map-zoom-in-button"
element="div"
onClick={[Function]}
<div
class="mx_AccessibleButton mx_ZoomButtons_button"
data-testid="map-zoom-in-button"
role="button"
tabIndex={0}
tabindex="0"
title="Zoom in"
>
<div
className="mx_AccessibleButton mx_ZoomButtons_button"
data-test-id="map-zoom-in-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Zoom in"
>
<div
className="mx_ZoomButtons_icon"
/>
</div>
</AccessibleButton>
<AccessibleButton
className="mx_ZoomButtons_button"
data-test-id="map-zoom-out-button"
element="div"
onClick={[Function]}
class="mx_ZoomButtons_icon"
/>
</div>
<div
class="mx_AccessibleButton mx_ZoomButtons_button"
data-testid="map-zoom-out-button"
role="button"
tabIndex={0}
tabindex="0"
title="Zoom out"
>
<div
className="mx_AccessibleButton mx_ZoomButtons_button"
data-test-id="map-zoom-out-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Zoom out"
>
<div
className="mx_ZoomButtons_icon"
/>
</div>
</AccessibleButton>
class="mx_ZoomButtons_icon"
/>
</div>
</div>
</ZoomButtons>
</DocumentFragment>
`;