Skip to content

Commit 5bd6926

Browse files
diana-villalvazo-wgudiana-villalvazo-wgu
authored
refactor: Replace of injectIntl with useIntl (#1539)
1 parent 43a584e commit 5bd6926

File tree

6 files changed

+64
-81
lines changed

6 files changed

+64
-81
lines changed

‎src/login/tests/ChangePasswordPrompt.test.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import React from 'react';
2-
31
import { getConfig } from '@edx/frontend-platform';
4-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
2+
import { IntlProvider } from '@edx/frontend-platform/i18n';
53
import {
64
fireEvent, render, screen,
75
} from '@testing-library/react';
@@ -11,7 +9,6 @@ import { MemoryRouter } from 'react-router-dom';
119
import { RESET_PAGE } from '../../data/constants';
1210
import ChangePasswordPrompt from '../ChangePasswordPrompt';
1311

14-
const IntlChangePasswordPrompt = injectIntl(ChangePasswordPrompt);
1512
const mockedNavigator = jest.fn();
1613

1714
jest.mock('react-router-dom', () => ({
@@ -44,7 +41,7 @@ describe('ChangePasswordPromptTests', () => {
4441
render(
4542
<IntlProvider locale="en">
4643
<MemoryRouter>
47-
<IntlChangePasswordPrompt {...props} />
44+
<ChangePasswordPrompt {...props} />
4845
</MemoryRouter>
4946
</IntlProvider>,
5047
);
@@ -61,7 +58,7 @@ describe('ChangePasswordPromptTests', () => {
6158
render(
6259
<IntlProvider locale="en">
6360
<MemoryRouter>
64-
<IntlChangePasswordPrompt {...props} />
61+
<ChangePasswordPrompt {...props} />
6562
</MemoryRouter>
6663
</IntlProvider>,
6764
);

‎src/login/tests/LoginFailure.test.jsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import React from 'react';
2-
3-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
1+
import { IntlProvider } from '@edx/frontend-platform/i18n';
42
import {
53
render, screen,
64
} from '@testing-library/react';
@@ -26,8 +24,6 @@ jest.mock('@edx/frontend-platform/auth', () => ({
2624
getAuthService: jest.fn(),
2725
}));
2826

29-
const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
30-
3127
describe('LoginFailureMessage', () => {
3228
let props = {};
3329

@@ -48,7 +44,7 @@ describe('LoginFailureMessage', () => {
4844

4945
render(
5046
<IntlProvider locale="en">
51-
<IntlLoginFailureMessage {...props} />
47+
<LoginFailureMessage {...props} />
5248
</IntlProvider>,
5349
);
5450

@@ -76,7 +72,7 @@ describe('LoginFailureMessage', () => {
7672

7773
render(
7874
<IntlProvider locale="en">
79-
<IntlLoginFailureMessage {...props} />
75+
<LoginFailureMessage {...props} />
8076
</IntlProvider>,
8177
);
8278

@@ -106,7 +102,7 @@ describe('LoginFailureMessage', () => {
106102

107103
render(
108104
<IntlProvider locale="en">
109-
<IntlLoginFailureMessage {...props} />
105+
<LoginFailureMessage {...props} />
110106
</IntlProvider>,
111107
);
112108

@@ -132,7 +128,7 @@ describe('LoginFailureMessage', () => {
132128

133129
render(
134130
<IntlProvider locale="en">
135-
<IntlLoginFailureMessage {...props} />
131+
<LoginFailureMessage {...props} />
136132
</IntlProvider>,
137133
);
138134

@@ -152,7 +148,7 @@ describe('LoginFailureMessage', () => {
152148

153149
render(
154150
<IntlProvider locale="en">
155-
<IntlLoginFailureMessage {...props} />
151+
<LoginFailureMessage {...props} />
156152
</IntlProvider>,
157153
);
158154

@@ -176,7 +172,7 @@ describe('LoginFailureMessage', () => {
176172

177173
render(
178174
<IntlProvider locale="en">
179-
<IntlLoginFailureMessage {...props} />
175+
<LoginFailureMessage {...props} />
180176
</IntlProvider>,
181177
);
182178

@@ -196,7 +192,7 @@ describe('LoginFailureMessage', () => {
196192

197193
render(
198194
<IntlProvider locale="en">
199-
<IntlLoginFailureMessage {...props} />
195+
<LoginFailureMessage {...props} />
200196
</IntlProvider>,
201197
);
202198

@@ -216,7 +212,7 @@ describe('LoginFailureMessage', () => {
216212

217213
render(
218214
<IntlProvider locale="en">
219-
<IntlLoginFailureMessage {...props} />
215+
<LoginFailureMessage {...props} />
220216
</IntlProvider>,
221217
);
222218

@@ -236,7 +232,7 @@ describe('LoginFailureMessage', () => {
236232

237233
render(
238234
<IntlProvider locale="en">
239-
<IntlLoginFailureMessage {...props} />
235+
<LoginFailureMessage {...props} />
240236
</IntlProvider>,
241237
);
242238

@@ -255,7 +251,7 @@ describe('LoginFailureMessage', () => {
255251

256252
render(
257253
<IntlProvider locale="en">
258-
<IntlLoginFailureMessage {...props} />
254+
<LoginFailureMessage {...props} />
259255
</IntlProvider>,
260256
);
261257

@@ -275,7 +271,7 @@ describe('LoginFailureMessage', () => {
275271

276272
render(
277273
<IntlProvider locale="en">
278-
<IntlLoginFailureMessage {...props} />
274+
<LoginFailureMessage {...props} />
279275
</IntlProvider>,
280276
);
281277

@@ -301,7 +297,7 @@ describe('LoginFailureMessage', () => {
301297
render(
302298
<IntlProvider locale="en">
303299
<MemoryRouter>
304-
<IntlLoginFailureMessage {...props} />
300+
<LoginFailureMessage {...props} />
305301
</MemoryRouter>
306302
</IntlProvider>,
307303
);
@@ -327,7 +323,7 @@ describe('LoginFailureMessage', () => {
327323
render(
328324
<IntlProvider locale="en">
329325
<MemoryRouter>
330-
<IntlLoginFailureMessage {...props} />
326+
<LoginFailureMessage {...props} />
331327
</MemoryRouter>
332328
</IntlProvider>,
333329
);
@@ -359,7 +355,7 @@ describe('LoginFailureMessage', () => {
359355

360356
render(
361357
<IntlProvider locale="en">
362-
<IntlLoginFailureMessage {...props} />
358+
<LoginFailureMessage {...props} />
363359
</IntlProvider>,
364360
);
365361

‎src/logistration/Logistration.test.jsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React from 'react';
21
import { Provider } from 'react-redux';
32

43
import { getConfig, mergeConfig } from '@edx/frontend-platform';
54
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
6-
import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
5+
import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
76
import { fireEvent, render, screen } from '@testing-library/react';
87
import { MemoryRouter } from 'react-router-dom';
98
import configureStore from 'redux-mock-store';
@@ -23,7 +22,6 @@ jest.mock('@edx/frontend-platform/analytics', () => ({
2322
jest.mock('@edx/frontend-platform/auth');
2423

2524
const mockStore = configureStore();
26-
const IntlLogistration = injectIntl(Logistration);
2725

2826
describe('Logistration', () => {
2927
let store = {};
@@ -95,7 +93,7 @@ describe('Logistration', () => {
9593
});
9694

9795
it('should do nothing when user clicks on the same tab (login/register) again', () => {
98-
const { container } = render(reduxWrapper(<IntlLogistration />));
96+
const { container } = render(reduxWrapper(<Logistration />));
9997
// While staying on the registration form, clicking the register tab again
10098
fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
10199

@@ -107,14 +105,14 @@ describe('Logistration', () => {
107105
ALLOW_PUBLIC_ACCOUNT_CREATION: true,
108106
});
109107

110-
const { container } = render(reduxWrapper(<IntlLogistration />));
108+
const { container } = render(reduxWrapper(<Logistration />));
111109

112110
expect(container.querySelector('RegistrationPage')).toBeDefined();
113111
});
114112

115113
it('should render login page', () => {
116114
const props = { selectedPage: LOGIN_PAGE };
117-
const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
115+
const { container } = render(reduxWrapper(<Logistration {...props} />));
118116

119117
expect(container.querySelector('LoginPage')).toBeDefined();
120118
});
@@ -125,15 +123,15 @@ describe('Logistration', () => {
125123
});
126124

127125
let props = { selectedPage: LOGIN_PAGE };
128-
const { rerender } = render(reduxWrapper(<IntlLogistration {...props} />));
126+
const { rerender } = render(reduxWrapper(<Logistration {...props} />));
129127

130128
// verifying sign in heading
131129
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
132130

133131
// register page is still accessible when SHOW_REGISTRATION_LINKS is false
134132
// but it needs to be accessed directly
135133
props = { selectedPage: REGISTER_PAGE };
136-
rerender(reduxWrapper(<IntlLogistration {...props} />));
134+
rerender(reduxWrapper(<Logistration {...props} />));
137135

138136
// verifying register heading
139137
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Register');
@@ -160,7 +158,7 @@ describe('Logistration', () => {
160158
});
161159

162160
const props = { selectedPage: LOGIN_PAGE };
163-
const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
161+
const { container } = render(reduxWrapper(<Logistration {...props} />));
164162

165163
// verifying sign in heading for institution login false
166164
expect(screen.getByRole('heading', { level: 3 }).textContent).toEqual('Sign in');
@@ -190,7 +188,7 @@ describe('Logistration', () => {
190188
});
191189

192190
const props = { selectedPage: LOGIN_PAGE };
193-
render(reduxWrapper(<IntlLogistration {...props} />));
191+
render(reduxWrapper(<Logistration {...props} />));
194192
expect(screen.getByText('Institution/campus credentials')).toBeDefined();
195193

196194
// on clicking "Institution/campus credentials" button, it should display institution login page
@@ -221,7 +219,7 @@ describe('Logistration', () => {
221219
});
222220

223221
const props = { selectedPage: LOGIN_PAGE };
224-
render(reduxWrapper(<IntlLogistration {...props} />));
222+
render(reduxWrapper(<Logistration {...props} />));
225223
fireEvent.click(screen.getByText('Institution/campus credentials'));
226224

227225
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
@@ -253,7 +251,7 @@ describe('Logistration', () => {
253251
delete window.location;
254252
window.location = { hostname: getConfig().SITE_NAME, href: getConfig().BASE_URL };
255253

256-
render(reduxWrapper(<IntlLogistration />));
254+
render(reduxWrapper(<Logistration />));
257255
fireEvent.click(screen.getByText('Institution/campus credentials'));
258256
expect(screen.getByText('Test University')).toBeDefined();
259257

@@ -264,22 +262,22 @@ describe('Logistration', () => {
264262

265263
it('should fire action to backup registration form on tab click', () => {
266264
store.dispatch = jest.fn(store.dispatch);
267-
const { container } = render(reduxWrapper(<IntlLogistration />));
265+
const { container } = render(reduxWrapper(<Logistration />));
268266
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
269267
expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
270268
});
271269

272270
it('should fire action to backup login form on tab click', () => {
273271
store.dispatch = jest.fn(store.dispatch);
274272
const props = { selectedPage: LOGIN_PAGE };
275-
const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
273+
const { container } = render(reduxWrapper(<Logistration {...props} />));
276274
fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
277275
expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
278276
});
279277

280278
it('should clear tpa context errorMessage tab click', () => {
281279
store.dispatch = jest.fn(store.dispatch);
282-
const { container } = render(reduxWrapper(<IntlLogistration />));
280+
const { container } = render(reduxWrapper(<Logistration />));
283281
fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
284282
expect(store.dispatch).toHaveBeenCalledWith(clearThirdPartyAuthContextErrorMessage());
285283
});

0 commit comments

Comments
 (0)