Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 913af09

Browse files
t3chguyt3chguy
authored
Convert some tests from Enzyme to RTL (#9483)
1 parent 9eb4f8d commit 913af09

14 files changed

+311
-448
lines changed

‎src/components/views/beacon/ShareLatestLocation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
4747
return <>
4848
<TooltipTarget label={_t('Open in OpenStreetMap')}>
4949
<a
50-
data-test-id='open-location-in-osm'
50+
data-testid='open-location-in-osm'
5151
href={mapLink}
5252
target='_blank'
5353
rel='noreferrer noopener'

‎test/components/views/beacon/BeaconListItem-test.tsx‎

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@ limitations under the License.
1515
*/
1616

1717
import React from 'react';
18-
// eslint-disable-next-line deprecate/import
19-
import { mount } from 'enzyme';
18+
import { fireEvent, render } from "@testing-library/react";
2019
import {
2120
Beacon,
2221
RoomMember,
@@ -28,7 +27,6 @@ import { act } from 'react-dom/test-utils';
2827
import BeaconListItem from '../../../../src/components/views/beacon/BeaconListItem';
2928
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
3029
import {
31-
findByTestId,
3230
getMockClientWithEventEmitter,
3331
makeBeaconEvent,
3432
makeBeaconInfoEvent,
@@ -76,11 +74,9 @@ describe('<BeaconListItem />', () => {
7674
beacon: new Beacon(aliceBeaconEvent),
7775
};
7876

79-
const getComponent = (props = {}) =>
80-
mount(<BeaconListItem {...defaultProps} {...props} />, {
81-
wrappingComponent: MatrixClientContext.Provider,
82-
wrappingComponentProps: { value: mockClient },
83-
});
77+
const getComponent = (props = {}) => render(<MatrixClientContext.Provider value={mockClient}>
78+
<BeaconListItem {...defaultProps} {...props} />
79+
</MatrixClientContext.Provider>);
8480

8581
const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
8682
const beacons = makeRoomWithBeacons(roomId, mockClient, beaconInfoEvents, locationEvents);
@@ -104,95 +100,92 @@ describe('<BeaconListItem />', () => {
104100
{ isLive: false },
105101
);
106102
const [beacon] = setupRoomWithBeacons([notLiveBeacon]);
107-
const component = getComponent({ beacon });
108-
expect(component.html()).toBeNull();
103+
const { container } = getComponent({ beacon });
104+
expect(container.innerHTML).toBeFalsy();
109105
});
110106

111107
it('renders null when beacon has no location', () => {
112108
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent]);
113-
const component = getComponent({ beacon });
114-
expect(component.html()).toBeNull();
109+
const { container } = getComponent({ beacon });
110+
expect(container.innerHTML).toBeFalsy();
115111
});
116112

117113
describe('when a beacon is live and has locations', () => {
118114
it('renders beacon info', () => {
119115
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
120-
const component = getComponent({ beacon });
121-
expect(component.html()).toMatchSnapshot();
116+
const { asFragment } = getComponent({ beacon });
117+
expect(asFragment()).toMatchSnapshot();
122118
});
123119

124120
describe('non-self beacons', () => {
125121
it('uses beacon description as beacon name', () => {
126122
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
127-
const component = getComponent({ beacon });
128-
expect(component.find('BeaconStatus').props().label).toEqual("Alice's car");
123+
const { container } = getComponent({ beacon });
124+
expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent("Alice's car");
129125
});
130126

131127
it('uses beacon owner mxid as beacon name for a beacon without description', () => {
132128
const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [aliceLocation1]);
133-
const component = getComponent({ beacon });
134-
expect(component.find('BeaconStatus').props().label).toEqual(aliceId);
129+
const { container } = getComponent({ beacon });
130+
expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent(aliceId);
135131
});
136132

137133
it('renders location icon', () => {
138134
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
139-
const component = getComponent({ beacon });
140-
expect(component.find('StyledLiveBeaconIcon').length).toBeTruthy();
135+
const { container } = getComponent({ beacon });
136+
expect(container.querySelector('.mx_StyledLiveBeaconIcon')).toBeTruthy();
141137
});
142138
});
143139

144140
describe('self locations', () => {
145141
it('renders beacon owner avatar', () => {
146142
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
147-
const component = getComponent({ beacon });
148-
expect(component.find('MemberAvatar').length).toBeTruthy();
143+
const { container } = getComponent({ beacon });
144+
expect(container.querySelector('.mx_BaseAvatar')).toBeTruthy();
149145
});
150146

151147
it('uses beacon owner name as beacon name', () => {
152148
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
153-
const component = getComponent({ beacon });
154-
expect(component.find('BeaconStatus').props().label).toEqual('Alice');
149+
const { container } = getComponent({ beacon });
150+
expect(container.querySelector('.mx_BeaconStatus_label')).toHaveTextContent("Alice");
155151
});
156152
});
157153

158154
describe('on location updates', () => {
159155
it('updates last updated time on location updated', () => {
160156
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation2]);
161-
const component = getComponent({ beacon });
157+
const { container } = getComponent({ beacon });
162158

163-
expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated 9 minutes ago');
159+
expect(container.querySelector('.mx_BeaconListItem_lastUpdated'))
160+
.toHaveTextContent('Updated 9 minutes ago');
164161

165162
// update to a newer location
166163
act(() => {
167164
beacon.addLocations([aliceLocation1]);
168-
component.setProps({});
169165
});
170166

171-
expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated a few seconds ago');
167+
expect(container.querySelector('.mx_BeaconListItem_lastUpdated'))
168+
.toHaveTextContent('Updated a few seconds ago');
172169
});
173170
});
174171

175172
describe('interactions', () => {
176173
it('does not call onClick handler when clicking share button', () => {
177174
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
178175
const onClick = jest.fn();
179-
const component = getComponent({ beacon, onClick });
176+
const { getByTestId } = getComponent({ beacon, onClick });
180177

181-
act(() => {
182-
findByTestId(component, 'open-location-in-osm').at(0).simulate('click');
183-
});
178+
fireEvent.click(getByTestId('open-location-in-osm'));
184179
expect(onClick).not.toHaveBeenCalled();
185180
});
186181

187182
it('calls onClick handler when clicking outside of share buttons', () => {
188183
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
189184
const onClick = jest.fn();
190-
const component = getComponent({ beacon, onClick });
185+
const { container } = getComponent({ beacon, onClick });
191186

192-
act(() => {
193-
// click the beacon name
194-
component.find('.mx_BeaconStatus_description').simulate('click');
195-
});
187+
// click the beacon name
188+
fireEvent.click(container.querySelector(".mx_BeaconStatus_description"));
196189
expect(onClick).toHaveBeenCalled();
197190
});
198191
});

‎test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ limitations under the License.
1616

1717
import React from 'react';
1818
import { mocked } from 'jest-mock';
19-
// eslint-disable-next-line deprecate/import
20-
import { mount } from 'enzyme';
19+
import { fireEvent, render } from "@testing-library/react";
2120
import { act } from 'react-dom/test-utils';
2221
import { Beacon, BeaconIdentifier } from 'matrix-js-sdk/src/matrix';
2322

@@ -48,9 +47,7 @@ jest.mock('../../../../src/stores/OwnBeaconStore', () => {
4847
);
4948

5049
describe('<LeftPanelLiveShareWarning />', () => {
51-
const defaultProps = {};
52-
const getComponent = (props = {}) =>
53-
mount(<LeftPanelLiveShareWarning {...defaultProps} {...props} />);
50+
const getComponent = (props = {}) => render(<LeftPanelLiveShareWarning {...props} />);
5451

5552
const roomId1 = '!room1:server';
5653
const roomId2 = '!room2:server';
@@ -85,8 +82,8 @@ describe('<LeftPanelLiveShareWarning />', () => {
8582
));
8683

8784
it('renders nothing when user has no live beacons', () => {
88-
const component = getComponent();
89-
expect(component.html()).toBe(null);
85+
const { container } = getComponent();
86+
expect(container.innerHTML).toBeFalsy();
9087
});
9188

9289
describe('when user has live location monitor', () => {
@@ -110,17 +107,15 @@ describe('<LeftPanelLiveShareWarning />', () => {
110107
});
111108

112109
it('renders correctly when not minimized', () => {
113-
const component = getComponent();
114-
expect(component).toMatchSnapshot();
110+
const { asFragment } = getComponent();
111+
expect(asFragment()).toMatchSnapshot();
115112
});
116113

117114
it('goes to room of latest beacon when clicked', () => {
118-
const component = getComponent();
115+
const { container } = getComponent();
119116
const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
120117

121-
act(() => {
122-
component.simulate('click');
123-
});
118+
fireEvent.click(container.querySelector("[role=button]"));
124119

125120
expect(dispatchSpy).toHaveBeenCalledWith({
126121
action: Action.ViewRoom,
@@ -134,28 +129,26 @@ describe('<LeftPanelLiveShareWarning />', () => {
134129
});
135130

136131
it('renders correctly when minimized', () => {
137-
const component = getComponent({ isMinimized: true });
138-
expect(component).toMatchSnapshot();
132+
const { asFragment } = getComponent({ isMinimized: true });
133+
expect(asFragment()).toMatchSnapshot();
139134
});
140135

141136
it('renders location publish error', () => {
142137
mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
143138
[beacon1.identifier],
144139
);
145-
const component = getComponent();
146-
expect(component).toMatchSnapshot();
140+
const { asFragment } = getComponent();
141+
expect(asFragment()).toMatchSnapshot();
147142
});
148143

149144
it('goes to room of latest beacon with location publish error when clicked', () => {
150145
mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
151146
[beacon1.identifier],
152147
);
153-
const component = getComponent();
148+
const { container } = getComponent();
154149
const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
155150

156-
act(() => {
157-
component.simulate('click');
158-
});
151+
fireEvent.click(container.querySelector("[role=button]"));
159152

160153
expect(dispatchSpy).toHaveBeenCalledWith({
161154
action: Action.ViewRoom,
@@ -172,9 +165,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
172165
mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
173166
[beacon1.identifier],
174167
);
175-
const component = getComponent();
168+
const { container, rerender } = getComponent();
176169
// error mode
177-
expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
170+
expect(container.querySelector('.mx_LeftPanelLiveShareWarning').textContent).toEqual(
178171
'An error occurred whilst sharing your live location',
179172
);
180173

@@ -183,28 +176,28 @@ describe('<LeftPanelLiveShareWarning />', () => {
183176
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.LocationPublishError, 'abc');
184177
});
185178

186-
component.setProps({});
179+
rerender(<LeftPanelLiveShareWarning />);
187180

188181
// default mode
189-
expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
182+
expect(container.querySelector('.mx_LeftPanelLiveShareWarning').textContent).toEqual(
190183
'You are sharing your live location',
191184
);
192185
});
193186

194187
it('removes itself when user stops having live beacons', async () => {
195-
const component = getComponent({ isMinimized: true });
188+
const { container, rerender } = getComponent({ isMinimized: true });
196189
// started out rendered
197-
expect(component.html()).toBeTruthy();
190+
expect(container.innerHTML).toBeTruthy();
198191

199192
act(() => {
200193
mocked(OwnBeaconStore.instance).isMonitoringLiveLocation = false;
201194
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.MonitoringLivePosition);
202195
});
203196

204197
await flushPromises();
205-
component.setProps({});
198+
rerender(<LeftPanelLiveShareWarning />);
206199

207-
expect(component.html()).toBe(null);
200+
expect(container.innerHTML).toBeFalsy();
208201
});
209202

210203
it('refreshes beacon liveness monitors when pagevisibilty changes to visible', () => {
@@ -228,43 +221,41 @@ describe('<LeftPanelLiveShareWarning />', () => {
228221
describe('stopping errors', () => {
229222
it('renders stopping error', () => {
230223
OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
231-
const component = getComponent();
232-
expect(component.text()).toEqual('An error occurred while stopping your live location');
224+
const { container } = getComponent();
225+
expect(container.textContent).toEqual('An error occurred while stopping your live location');
233226
});
234227

235228
it('starts rendering stopping error on beaconUpdateError emit', () => {
236-
const component = getComponent();
229+
const { container } = getComponent();
237230
// no error
238-
expect(component.text()).toEqual('You are sharing your live location');
231+
expect(container.textContent).toEqual('You are sharing your live location');
239232

240233
act(() => {
241234
OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
242235
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.BeaconUpdateError, beacon2.identifier, true);
243236
});
244237

245-
expect(component.text()).toEqual('An error occurred while stopping your live location');
238+
expect(container.textContent).toEqual('An error occurred while stopping your live location');
246239
});
247240

248241
it('renders stopping error when beacons have stopping and location errors', () => {
249242
mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
250243
[beacon1.identifier],
251244
);
252245
OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
253-
const component = getComponent();
254-
expect(component.text()).toEqual('An error occurred while stopping your live location');
246+
const { container } = getComponent();
247+
expect(container.textContent).toEqual('An error occurred while stopping your live location');
255248
});
256249

257250
it('goes to room of latest beacon with stopping error when clicked', () => {
258251
mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithLocationPublishError.mockReturnValue(
259252
[beacon1.identifier],
260253
);
261254
OwnBeaconStore.instance.beaconUpdateErrors.set(beacon2.identifier, new Error('error'));
262-
const component = getComponent();
255+
const { container } = getComponent();
263256
const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
264257

265-
act(() => {
266-
component.simulate('click');
267-
});
258+
fireEvent.click(container.querySelector("[role=button]"));
268259

269260
expect(dispatchSpy).toHaveBeenCalledWith({
270261
action: Action.ViewRoom,

‎test/components/views/beacon/ShareLatestLocation-test.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ limitations under the License.
1515
*/
1616

1717
import React from 'react';
18-
// eslint-disable-next-line deprecate/import
19-
import { mount } from 'enzyme';
20-
import { act } from 'react-dom/test-utils';
18+
import { fireEvent, render } from "@testing-library/react";
2119

2220
import ShareLatestLocation from '../../../../src/components/views/beacon/ShareLatestLocation';
2321
import { copyPlaintext } from '../../../../src/utils/strings';
@@ -34,26 +32,23 @@ describe('<ShareLatestLocation />', () => {
3432
timestamp: 123,
3533
},
3634
};
37-
const getComponent = (props = {}) =>
38-
mount(<ShareLatestLocation {...defaultProps} {...props} />);
35+
const getComponent = (props = {}) => render(<ShareLatestLocation {...defaultProps} {...props} />);
3936

4037
beforeEach(() => {
4138
jest.clearAllMocks();
4239
});
4340

4441
it('renders null when no location', () => {
45-
const component = getComponent({ latestLocationState: undefined });
46-
expect(component.html()).toBeNull();
42+
const { container } = getComponent({ latestLocationState: undefined });
43+
expect(container.innerHTML).toBeFalsy();
4744
});
4845

4946
it('renders share buttons when there is a location', async () => {
50-
const component = getComponent();
51-
expect(component).toMatchSnapshot();
47+
const { container, asFragment } = getComponent();
48+
expect(asFragment()).toMatchSnapshot();
5249

53-
await act(async () => {
54-
component.find('.mx_CopyableText_copyButton').at(0).simulate('click');
55-
await flushPromises();
56-
});
50+
fireEvent.click(container.querySelector('.mx_CopyableText_copyButton'));
51+
await flushPromises();
5752

5853
expect(copyPlaintext).toHaveBeenCalledWith('51,42');
5954
});

0 commit comments

Comments
 (0)