Skip to content

Commit 43a584e

Browse files
diana-villalvazo-wgudiana-villalvazo-wgu
authored
refactor: Replace of injectIntl with useIntl (#1538)
1 parent 4cf0a64 commit 43a584e

File tree

5 files changed

+76
-86
lines changed

5 files changed

+76
-86
lines changed

‎src/common-components/tests/FormField.test.jsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react';
21
import { Provider } from 'react-redux';
32

4-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
3+
import { IntlProvider } from '@edx/frontend-platform/i18n';
54
import { fireEvent, render } from '@testing-library/react';
65
import { act } from 'react-dom/test-utils';
76
import { MemoryRouter } from 'react-router-dom';
@@ -37,7 +36,6 @@ describe('FormGroup', () => {
3736

3837
describe('PasswordField', () => {
3938
const mockStore = configureStore();
40-
const IntlPasswordField = injectIntl(PasswordField);
4139
let props = {};
4240
let store = {};
4341

@@ -66,7 +64,7 @@ describe('PasswordField', () => {
6664
});
6765

6866
it('should show/hide password on icon click', () => {
69-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
67+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
7068
const passwordInput = getByLabelText('Password');
7169

7270
const showPasswordButton = getByLabelText('Show password');
@@ -79,7 +77,7 @@ describe('PasswordField', () => {
7977
});
8078

8179
it('should show password requirement tooltip on focus', async () => {
82-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
80+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
8381
const passwordInput = getByLabelText('Password');
8482
jest.useFakeTimers();
8583
await act(async () => {
@@ -96,7 +94,7 @@ describe('PasswordField', () => {
9694
...props,
9795
value: '',
9896
};
99-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
97+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
10098
const passwordInput = getByLabelText('Password');
10199
jest.useFakeTimers();
102100
await act(async () => {
@@ -119,7 +117,7 @@ describe('PasswordField', () => {
119117
});
120118

121119
it('should update password requirement checks', async () => {
122-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
120+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
123121
const passwordInput = getByLabelText('Password');
124122
jest.useFakeTimers();
125123
await act(async () => {
@@ -142,7 +140,7 @@ describe('PasswordField', () => {
142140
});
143141

144142
it('should not run validations when blur is fired on password icon click', () => {
145-
const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
143+
const { container, getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
146144
const passwordInput = container.querySelector('input[name="password"]');
147145

148146
const passwordIcon = getByLabelText('Show password');
@@ -163,7 +161,7 @@ describe('PasswordField', () => {
163161
...props,
164162
handleBlur: jest.fn(),
165163
};
166-
const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
164+
const { container } = render(reduxWrapper(<PasswordField {...props} />));
167165
const passwordInput = container.querySelector('input[name="password"]');
168166

169167
fireEvent.blur(passwordInput, {
@@ -181,7 +179,7 @@ describe('PasswordField', () => {
181179
...props,
182180
handleErrorChange: jest.fn(),
183181
};
184-
const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
182+
const { container } = render(reduxWrapper(<PasswordField {...props} />));
185183
const passwordInput = container.querySelector('input[name="password"]');
186184

187185
fireEvent.blur(passwordInput, {
@@ -204,7 +202,7 @@ describe('PasswordField', () => {
204202
handleErrorChange: jest.fn(),
205203
};
206204

207-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
205+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
208206

209207
const passwordIcon = getByLabelText('Show password');
210208

@@ -224,7 +222,7 @@ describe('PasswordField', () => {
224222
handleErrorChange: jest.fn(),
225223
};
226224

227-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
225+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
228226

229227
const passwordIcon = getByLabelText('Show password');
230228

@@ -248,7 +246,7 @@ describe('PasswordField', () => {
248246
...props,
249247
handleErrorChange: jest.fn(),
250248
};
251-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
249+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
252250
const passwordField = getByLabelText('Password');
253251
fireEvent.blur(passwordField, {
254252
target: {
@@ -268,7 +266,7 @@ describe('PasswordField', () => {
268266
handleErrorChange: jest.fn(),
269267
handleBlur: jest.fn(),
270268
};
271-
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
269+
const { getByLabelText } = render(reduxWrapper(<PasswordField {...props} />));
272270

273271
const passwordIcon = getByLabelText('Show password');
274272

‎src/forgot-password/tests/ForgotPasswordPage.test.jsx‎

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

43
import { mergeConfig } from '@edx/frontend-platform';
5-
import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
4+
import { configure, IntlProvider } from '@edx/frontend-platform/i18n';
65
import {
76
fireEvent, render, screen,
87
} from '@testing-library/react';
@@ -26,7 +25,6 @@ jest.mock('react-router-dom', () => ({
2625
useNavigate: () => mockedNavigator,
2726
}));
2827

29-
const IntlForgotPasswordPage = injectIntl(ForgotPasswordPage);
3028
const mockStore = configureStore();
3129

3230
const initialState = {
@@ -78,7 +76,7 @@ describe('ForgotPasswordPage', () => {
7876
);
7977

8078
it('not should display need other help signing in button', () => {
81-
const { queryByTestId } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
79+
const { queryByTestId } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
8280
const forgotPasswordButton = queryByTestId('forgot-password');
8381
expect(forgotPasswordButton).toBeNull();
8482
});
@@ -87,14 +85,14 @@ describe('ForgotPasswordPage', () => {
8785
mergeConfig({
8886
LOGIN_ISSUE_SUPPORT_LINK: '/support',
8987
});
90-
render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
88+
render(reduxWrapper(<ForgotPasswordPage {...props} />));
9189
const forgotPasswordButton = screen.findByText('Need help signing in?');
9290
expect(forgotPasswordButton).toBeDefined();
9391
});
9492

9593
it('should display email validation error message', async () => {
9694
const validationMessage = 'We were unable to contact you.Enter a valid email address below.';
97-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
95+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
9896

9997
const emailInput = screen.getByLabelText('Email');
10098

@@ -115,7 +113,7 @@ describe('ForgotPasswordPage', () => {
115113
const expectedMessage = 'We were unable to contact you.'
116114
+ 'An error has occurred. Try refreshing the page, or check your internet connection.';
117115

118-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
116+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
119117

120118
const alertElements = container.querySelectorAll('.alert-danger');
121119
const validationErrors = alertElements[0].textContent;
@@ -124,7 +122,7 @@ describe('ForgotPasswordPage', () => {
124122

125123
it('should display empty email validation message', async () => {
126124
const validationMessage = 'We were unable to contact you.Enter your email below.';
127-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
125+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
128126

129127
const submitButton = screen.getByText('Submit');
130128
fireEvent.click(submitButton);
@@ -141,15 +139,15 @@ describe('ForgotPasswordPage', () => {
141139
forgotPassword: { status: 'forbidden' },
142140
});
143141

144-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
142+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
145143

146144
const alertElements = container.querySelectorAll('.alert-danger');
147145
const validationErrors = alertElements[0].textContent;
148146
expect(validationErrors).toBe(rateLimitMessage);
149147
});
150148

151149
it('should not display any error message on change event', () => {
152-
render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
150+
render(reduxWrapper(<ForgotPasswordPage {...props} />));
153151

154152
const emailInput = screen.getByLabelText('Email');
155153

@@ -172,7 +170,7 @@ describe('ForgotPasswordPage', () => {
172170
};
173171

174172
store.dispatch = jest.fn(store.dispatch);
175-
render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
173+
render(reduxWrapper(<ForgotPasswordPage {...props} />));
176174
const emailInput = screen.getByLabelText('Email');
177175

178176
fireEvent.blur(emailInput);
@@ -187,7 +185,7 @@ describe('ForgotPasswordPage', () => {
187185
emailValidationError: validationMessage,
188186
email: '',
189187
};
190-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
188+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
191189
const validationElement = container.querySelector('.pgn__form-text-invalid');
192190
expect(validationElement.textContent).toEqual(validationMessage);
193191
});
@@ -205,7 +203,7 @@ describe('ForgotPasswordPage', () => {
205203

206204
store.dispatch = jest.fn(store.dispatch);
207205

208-
render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
206+
render(reduxWrapper(<ForgotPasswordPage {...props} />));
209207
const emailInput = screen.getByLabelText('Email');
210208

211209
fireEvent.focus(emailInput);
@@ -219,7 +217,7 @@ describe('ForgotPasswordPage', () => {
219217
emailValidationError: '',
220218
email: '',
221219
};
222-
render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
220+
render(reduxWrapper(<ForgotPasswordPage {...props} />));
223221
const errorElement = screen.queryByTestId('email-invalid-feedback');
224222
expect(errorElement).toBeNull();
225223
});
@@ -236,7 +234,7 @@ describe('ForgotPasswordPage', () => {
236234
+ 'receive a password reset message after 1 minute, verify that you entered the correct email address,'
237235
+ ' or check your spam folder. If you need further assistance, contact technical support.';
238236

239-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
237+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
240238
const successElement = findByTextContent(container, successMessage);
241239

242240
expect(successElement).toBeDefined();
@@ -254,15 +252,15 @@ describe('ForgotPasswordPage', () => {
254252
+ 'This password reset link is invalid. It may have been used already. '
255253
+ 'Enter your email below to receive a new link.';
256254

257-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
255+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
258256
const successElement = findByTextContent(container, successMessage);
259257

260258
expect(successElement).toBeDefined();
261259
expect(successElement.textContent).toEqual(successMessage);
262260
});
263261

264262
it('should redirect onto login page', async () => {
265-
const { container } = render(reduxWrapper(<IntlForgotPasswordPage {...props} />));
263+
const { container } = render(reduxWrapper(<ForgotPasswordPage {...props} />));
266264

267265
const navElement = container.querySelector('nav');
268266
const anchorElement = navElement.querySelector('a');

‎src/login/LoginPage.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
1+
import { useEffect, useMemo, useState } from 'react';
22
import { connect } from 'react-redux';
33

44
import { getConfig } from '@edx/frontend-platform';
55
import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
6-
import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
6+
import { useIntl } from '@edx/frontend-platform/i18n';
77
import {
88
Form, StatefulButton,
99
} from '@openedx/paragon';
@@ -365,4 +365,4 @@ export default connect(
365365
loginRequest,
366366
getTPADataFromBackend: getThirdPartyAuthContext,
367367
},
368-
)(injectIntl(LoginPage));
368+
)(LoginPage);

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
import React from 'react';
2-
31
import { mergeConfig } from '@edx/frontend-platform';
4-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
2+
import { IntlProvider } from '@edx/frontend-platform/i18n';
53
import {
64
render, screen,
75
} from '@testing-library/react';
86

97
import AccountActivationMessage from '../AccountActivationMessage';
108
import { ACCOUNT_ACTIVATION_MESSAGE } from '../data/constants';
119

12-
const IntlAccountActivationMessage = injectIntl(AccountActivationMessage);
13-
1410
describe('AccountActivationMessage', () => {
1511
beforeEach(() => {
1612
mergeConfig({
@@ -21,7 +17,7 @@ describe('AccountActivationMessage', () => {
2117
it('should match account already activated message', () => {
2218
render(
2319
<IntlProvider locale="en">
24-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
20+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
2521
</IntlProvider>,
2622
);
2723

@@ -36,7 +32,7 @@ describe('AccountActivationMessage', () => {
3632
it('should match account activated success message', () => {
3733
render(
3834
<IntlProvider locale="en">
39-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
35+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
4036
</IntlProvider>,
4137
);
4238

@@ -53,7 +49,7 @@ describe('AccountActivationMessage', () => {
5349
it('should match account activation error message', () => {
5450
render(
5551
<IntlProvider locale="en">
56-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
52+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
5753
</IntlProvider>,
5854
);
5955

@@ -69,7 +65,7 @@ describe('AccountActivationMessage', () => {
6965
it('should not display anything for invalid message type', () => {
7066
const { container } = render(
7167
<IntlProvider locale="en">
72-
<IntlAccountActivationMessage messageType="invalid-message" />
68+
<AccountActivationMessage messageType="invalid-message" />
7369
</IntlProvider>,
7470
);
7571

@@ -88,7 +84,7 @@ describe('EmailConfirmationMessage', () => {
8884
it('should match email already confirmed message', () => {
8985
render(
9086
<IntlProvider locale="en">
91-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
87+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.INFO} />
9288
</IntlProvider>,
9389
);
9490

@@ -103,7 +99,7 @@ describe('EmailConfirmationMessage', () => {
10399
it('should match email confirmation success message', () => {
104100
render(
105101
<IntlProvider locale="en">
106-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
102+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.SUCCESS} />
107103
</IntlProvider>,
108104
);
109105
const expectedMessage = 'Success! You have confirmed your email.Sign in to continue.';
@@ -117,7 +113,7 @@ describe('EmailConfirmationMessage', () => {
117113
it('should match email confirmation error message', () => {
118114
render(
119115
<IntlProvider locale="en">
120-
<IntlAccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
116+
<AccountActivationMessage messageType={ACCOUNT_ACTIVATION_MESSAGE.ERROR} />
121117
</IntlProvider>,
122118
);
123119
const expectedMessage = 'Your email could not be confirmed'

0 commit comments

Comments
 (0)