Skip to content

Commit 4cf0a64

Browse files
sundasnoreen12sundasnoreen12
authored
Merge pull request #1541 from WGU-Open-edX/1526/injectIntl-4of4
Replace of injectIntl with useIntl() 4/4
2 parents 55a9308 + db3d007 commit 4cf0a64

File tree

6 files changed

+53
-69
lines changed

6 files changed

+53
-69
lines changed

‎src/register/RegistrationFields/CountryField/CountryField.test.jsx‎

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

43
import { mergeConfig } from '@edx/frontend-platform';
5-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
4+
import { IntlProvider } from '@edx/frontend-platform/i18n';
65
import { fireEvent, render } from '@testing-library/react';
76
import { BrowserRouter as Router } from 'react-router-dom';
87
import configureStore from 'redux-mock-store';
98

109
import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
1110
import { CountryField } from '../index';
1211

13-
const IntlCountryField = injectIntl(CountryField);
1412
const mockStore = configureStore();
1513

1614
jest.mock('react-router-dom', () => {
@@ -82,7 +80,7 @@ describe('CountryField', () => {
8280
};
8381

8482
it('should run country field validation when onBlur is fired', () => {
85-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
83+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
8684
const countryInput = container.querySelector('input[name="country"]');
8785

8886
fireEvent.blur(countryInput, {
@@ -97,7 +95,7 @@ describe('CountryField', () => {
9795
});
9896

9997
it('should run country field validation when country name is invalid', () => {
100-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
98+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
10199
const countryInput = container.querySelector('input[name="country"]');
102100

103101
fireEvent.blur(countryInput, {
@@ -112,7 +110,7 @@ describe('CountryField', () => {
112110
});
113111

114112
it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
115-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
113+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
116114
const countryInput = container.querySelector('input[name="country"]');
117115
const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');
118116

@@ -125,7 +123,7 @@ describe('CountryField', () => {
125123
});
126124

127125
it('should update errors for frontend validations', () => {
128-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
126+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
129127
const countryInput = container.querySelector('input[name="country"]');
130128

131129
fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
@@ -135,7 +133,7 @@ describe('CountryField', () => {
135133
});
136134

137135
it('should clear error on focus', () => {
138-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
136+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
139137
const countryInput = container.querySelector('input[name="country"]');
140138

141139
fireEvent.focus(countryInput);
@@ -153,7 +151,7 @@ describe('CountryField', () => {
153151
},
154152
});
155153

156-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
154+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
157155

158156
container.querySelector('input[name="country"]');
159157
expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
@@ -164,7 +162,7 @@ describe('CountryField', () => {
164162
});
165163

166164
it('should set option on dropdown menu item click', () => {
167-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
165+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
168166

169167
const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
170168
fireEvent.click(dropdownButton);
@@ -181,7 +179,7 @@ describe('CountryField', () => {
181179

182180
it('should set value on change', () => {
183181
const { container } = render(
184-
routerWrapper(reduxWrapper(<IntlCountryField {...props} />)),
182+
routerWrapper(reduxWrapper(<CountryField {...props} />)),
185183
);
186184

187185
const countryInput = container.querySelector('input[name="country"]');
@@ -200,7 +198,7 @@ describe('CountryField', () => {
200198
errorMessage: 'country error message',
201199
};
202200

203-
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />)));
201+
const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
204202

205203
const feedbackElement = container.querySelector('div[feedback-for="country"]');
206204
expect(feedbackElement).toBeTruthy();

‎src/register/RegistrationFields/EmailField/EmailField.test.jsx‎

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

43
import { getConfig } from '@edx/frontend-platform';
5-
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
4+
import { IntlProvider } from '@edx/frontend-platform/i18n';
65
import { fireEvent, render } from '@testing-library/react';
76
import { BrowserRouter as Router } from 'react-router-dom';
87
import configureStore from 'redux-mock-store';
98

109
import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
1110
import { EmailField } from '../index';
1211

13-
const IntlEmailField = injectIntl(EmailField);
1412
const mockStore = configureStore();
1513

1614
jest.mock('react-router-dom', () => {
@@ -80,7 +78,7 @@ describe('EmailField', () => {
8078
};
8179

8280
it('should run email field validation when onBlur is fired', () => {
83-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
81+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
8482

8583
const emailInput = container.querySelector('input#email');
8684
fireEvent.blur(emailInput, { target: { value: '', name: 'email' } });
@@ -92,7 +90,7 @@ describe('EmailField', () => {
9290
});
9391

9492
it('should update errors for frontend validations', () => {
95-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
93+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
9694

9795
const emailInput = container.querySelector('input#email');
9896
fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } });
@@ -105,7 +103,7 @@ describe('EmailField', () => {
105103
});
106104

107105
it('should clear error on focus', () => {
108-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
106+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
109107

110108
const emailInput = container.querySelector('input#email');
111109
fireEvent.focus(emailInput, { target: { value: '', name: 'email' } });
@@ -119,7 +117,7 @@ describe('EmailField', () => {
119117

120118
it('should call backend validation api on blur event, if frontend validations have passed', () => {
121119
store.dispatch = jest.fn(store.dispatch);
122-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
120+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
123121

124122
// Enter a valid email so that frontend validations are passed
125123
const emailInput = container.querySelector('input#email');
@@ -129,7 +127,7 @@ describe('EmailField', () => {
129127
});
130128

131129
it('should give email suggestions for common service provider domain typos', () => {
132-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
130+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
133131

134132
const emailInput = container.querySelector('input#email');
135133
fireEvent.blur(emailInput, { target: { value: '[email protected]', name: 'email' } });
@@ -139,7 +137,7 @@ describe('EmailField', () => {
139137
});
140138

141139
it('should be able to click on email suggestions and set it as value', () => {
142-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
140+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
143141

144142
const emailInput = container.querySelector('input#email');
145143
fireEvent.blur(emailInput, { target: { value: '[email protected]', name: 'email' } });
@@ -154,7 +152,7 @@ describe('EmailField', () => {
154152
});
155153

156154
it('should give error for common top level domain mistakes', () => {
157-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
155+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
158156

159157
const emailInput = container.querySelector('input#email');
160158
fireEvent.blur(emailInput, { target: { value: '[email protected]', name: 'email' } });
@@ -164,7 +162,7 @@ describe('EmailField', () => {
164162
});
165163

166164
it('should give error and suggestion for invalid email', () => {
167-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
165+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
168166

169167
const emailInput = container.querySelector('input#email');
170168
fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } });
@@ -194,7 +192,7 @@ describe('EmailField', () => {
194192

195193
store.dispatch = jest.fn(store.dispatch);
196194

197-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
195+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
198196

199197
const emailInput = container.querySelector('input#email');
200198
fireEvent.focus(emailInput, { target: { value: '[email protected]', name: 'email' } });
@@ -203,7 +201,7 @@ describe('EmailField', () => {
203201
});
204202

205203
it('should clear email suggestions when close icon is clicked', () => {
206-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
204+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
207205

208206
const emailInput = container.querySelector('input#email');
209207
fireEvent.blur(emailInput, { target: { value: '[email protected]', name: 'email' } });
@@ -224,7 +222,7 @@ describe('EmailField', () => {
224222
confirmEmailValue: '[email protected]',
225223
};
226224

227-
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />)));
225+
const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
228226
const emailInput = container.querySelector('input#email');
229227
fireEvent.blur(emailInput, { target: { value: '[email protected]', name: 'email' } });
230228

‎src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx‎

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

75
import { HonorCode } from '../index';
86

9-
const IntlHonorCode = injectIntl(HonorCode);
10-
117
describe('HonorCodeTest', () => {
128
mergeConfig({
139
PRIVACY_POLICY: 'http://privacy-policy.com',
@@ -28,7 +24,7 @@ describe('HonorCodeTest', () => {
2824
const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Honor Code`;
2925
const { container } = render(
3026
<IntlProvider locale="en">
31-
<IntlHonorCode
27+
<HonorCode
3228
errorMessage={errorMessage}
3329
onChangeHandler={changeHandler}
3430
/>
@@ -43,7 +39,7 @@ describe('HonorCodeTest', () => {
4339
const expectedMsg = 'I agree to the Your Platform Name Here\u00a0Honor Codein a new tab';
4440
const { container } = render(
4541
<IntlProvider locale="en">
46-
<IntlHonorCode onChangeHandler={changeHandler} />
42+
<HonorCode onChangeHandler={changeHandler} />
4743
</IntlProvider>,
4844
);
4945

@@ -56,7 +52,7 @@ describe('HonorCodeTest', () => {
5652
it('should render Terms of Service and Honor code field', () => {
5753
const { container } = render(
5854
<IntlProvider locale="en">
59-
<IntlHonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
55+
<HonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
6056
</IntlProvider>,
6157
);
6258
const expectedMsg = 'By creating an account, you agree to the Terms of Service and Honor Code and you '

‎src/register/RegistrationFields/NameField/NameField.test.jsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
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 { BrowserRouter as Router } from 'react-router-dom';
76
import configureStore from 'redux-mock-store';
87

98
import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
109
import { NameField } from '../index';
1110

12-
const IntlNameField = injectIntl(NameField);
1311
const mockStore = configureStore();
1412

1513
jest.mock('react-router-dom', () => {
@@ -69,7 +67,7 @@ describe('NameField', () => {
6967
const fieldValidation = { name: 'Enter your full name' };
7068

7169
it('should run name field validation when onBlur is fired', () => {
72-
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
70+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
7371

7472
const nameInput = container.querySelector('input#name');
7573
fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
@@ -82,7 +80,7 @@ describe('NameField', () => {
8280
});
8381

8482
it('should update errors for frontend validations', () => {
85-
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
83+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
8684

8785
const nameInput = container.querySelector('input#name');
8886
fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
@@ -95,7 +93,7 @@ describe('NameField', () => {
9593
});
9694

9795
it('should clear error on focus', () => {
98-
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
96+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
9997

10098
const nameInput = container.querySelector('input#name');
10199
fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
@@ -113,7 +111,7 @@ describe('NameField', () => {
113111
...props,
114112
shouldFetchUsernameSuggestions: true,
115113
};
116-
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
114+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
117115

118116
const nameInput = container.querySelector('input#name');
119117
// Enter a valid name so that frontend validations are passed
@@ -135,7 +133,7 @@ describe('NameField', () => {
135133
});
136134

137135
store.dispatch = jest.fn(store.dispatch);
138-
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
136+
const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
139137

140138
const nameInput = container.querySelector('input#name');
141139

‎src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
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 { fireEvent, render } from '@testing-library/react';
64

75
import { TermsOfService } from '../index';
86

9-
const IntlTermsOfService = injectIntl(TermsOfService);
10-
117
describe('TermsOfServiceTest', () => {
128
let value = false;
139

@@ -23,7 +19,7 @@ describe('TermsOfServiceTest', () => {
2319
const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Terms of Service`;
2420
const { container } = render(
2521
<IntlProvider locale="en">
26-
<IntlTermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
22+
<TermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
2723
</IntlProvider>,
2824
);
2925
const errorElement = container.querySelector('.form-text-size');
@@ -33,7 +29,7 @@ describe('TermsOfServiceTest', () => {
3329
it('should render Terms of Service field', () => {
3430
const { container } = render(
3531
<IntlProvider locale="en">
36-
<IntlTermsOfService onChangeHandler={changeHandler} />
32+
<TermsOfService onChangeHandler={changeHandler} />
3733
</IntlProvider>,
3834
);
3935

@@ -48,7 +44,7 @@ describe('TermsOfServiceTest', () => {
4844
it('should change value when Terms of Service field is checked', () => {
4945
const { container } = render(
5046
<IntlProvider locale="en">
51-
<IntlTermsOfService onChangeHandler={changeHandler} />
47+
<TermsOfService onChangeHandler={changeHandler} />
5248
</IntlProvider>,
5349
);
5450
const field = container.querySelector('input#tos');

0 commit comments

Comments
 (0)