Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Replace of injectIntl with useIntl

Browse Source
This commit is contained in:
diana-villalvazo-wgu
2025-08-04 12:35:53 -05:00
parent 55a930840f
commit db3d007c51
6 changed files with 53 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/register/RegistrationFields/CountryField/CountryField.test.jsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { mergeConfig } from '@edx/frontend-platform'; import { mergeConfig } from '@edx/frontend-platform';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
@@ -10,7 +9,6 @@ import configureStore from 'redux-mock-store';
import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator'; import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
import { CountryField } from '../index'; import { CountryField } from '../index';
const IntlCountryField = injectIntl(CountryField);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -82,7 +80,7 @@ describe('CountryField', () => {
}; };
it('should run country field validation when onBlur is fired', () => { it('should run country field validation when onBlur is fired', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, { fireEvent.blur(countryInput, {
@@ -97,7 +95,7 @@ describe('CountryField', () => {
}); });
it('should run country field validation when country name is invalid', () => { it('should run country field validation when country name is invalid', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, { fireEvent.blur(countryInput, {
@@ -112,7 +110,7 @@ describe('CountryField', () => {
}); });
it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => { it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button'); const dropdownArrowIcon = container.querySelector('.btn-icon.pgn__form-autosuggest__icon-button');
@@ -125,7 +123,7 @@ describe('CountryField', () => {
}); });
it('should update errors for frontend validations', () => { it('should update errors for frontend validations', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
fireEvent.blur(countryInput, { target: { value: '', name: 'country' } }); fireEvent.blur(countryInput, { target: { value: '', name: 'country' } });
@@ -135,7 +133,7 @@ describe('CountryField', () => {
}); });
it('should clear error on focus', () => { it('should clear error on focus', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
fireEvent.focus(countryInput); fireEvent.focus(countryInput);
@@ -153,7 +151,7 @@ describe('CountryField', () => {
}, },
}); });
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
container.querySelector('input[name="country"]'); container.querySelector('input[name="country"]');
expect(props.onChangeHandler).toHaveBeenCalledTimes(1); expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
@@ -164,7 +162,7 @@ describe('CountryField', () => {
}); });
it('should set option on dropdown menu item click', () => { it('should set option on dropdown menu item click', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button'); const dropdownButton = container.querySelector('.pgn__form-autosuggest__icon-button');
fireEvent.click(dropdownButton); fireEvent.click(dropdownButton);
@@ -181,7 +179,7 @@ describe('CountryField', () => {
it('should set value on change', () => { it('should set value on change', () => {
const { container } = render( const { container } = render(
routerWrapper(reduxWrapper(<IntlCountryField {...props} />)), routerWrapper(reduxWrapper(<CountryField {...props} />)),
); );
const countryInput = container.querySelector('input[name="country"]'); const countryInput = container.querySelector('input[name="country"]');
@@ -200,7 +198,7 @@ describe('CountryField', () => {
errorMessage: 'country error message', errorMessage: 'country error message',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlCountryField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<CountryField {...props} />)));
const feedbackElement = container.querySelector('div[feedback-for="country"]'); const feedbackElement = container.querySelector('div[feedback-for="country"]');
expect(feedbackElement).toBeTruthy(); expect(feedbackElement).toBeTruthy();

26
src/register/RegistrationFields/EmailField/EmailField.test.jsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { getConfig } from '@edx/frontend-platform'; import { getConfig } from '@edx/frontend-platform';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
@@ -10,7 +9,6 @@ import configureStore from 'redux-mock-store';
import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions'; import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
import { EmailField } from '../index'; import { EmailField } from '../index';
const IntlEmailField = injectIntl(EmailField);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -80,7 +78,7 @@ describe('EmailField', () => {
}; };
it('should run email field validation when onBlur is fired', () => { it('should run email field validation when onBlur is fired', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: '', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: '', name: 'email' } });
@@ -92,7 +90,7 @@ describe('EmailField', () => {
}); });
it('should update errors for frontend validations', () => { it('should update errors for frontend validations', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'ab', name: 'email' } });
@@ -105,7 +103,7 @@ describe('EmailField', () => {
}); });
it('should clear error on focus', () => { it('should clear error on focus', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.focus(emailInput, { target: { value: '', name: 'email' } }); fireEvent.focus(emailInput, { target: { value: '', name: 'email' } });
@@ -119,7 +117,7 @@ describe('EmailField', () => {
it('should call backend validation api on blur event, if frontend validations have passed', () => { it('should call backend validation api on blur event, if frontend validations have passed', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
// Enter a valid email so that frontend validations are passed // Enter a valid email so that frontend validations are passed
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
@@ -129,7 +127,7 @@ describe('EmailField', () => {
}); });
it('should give email suggestions for common service provider domain typos', () => { it('should give email suggestions for common service provider domain typos', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -139,7 +137,7 @@ describe('EmailField', () => {
}); });
it('should be able to click on email suggestions and set it as value', () => { it('should be able to click on email suggestions and set it as value', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'john@yopmail.com', name: 'email' } });
@@ -154,7 +152,7 @@ describe('EmailField', () => {
}); });
it('should give error for common top level domain mistakes', () => { it('should give error for common top level domain mistakes', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -164,7 +162,7 @@ describe('EmailField', () => {
}); });
it('should give error and suggestion for invalid email', () => { it('should give error and suggestion for invalid email', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'john@gmail', name: 'email' } });
@@ -194,7 +192,7 @@ describe('EmailField', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.focus(emailInput, { target: { value: 'a@gmail.com', name: 'email' } }); fireEvent.focus(emailInput, { target: { value: 'a@gmail.com', name: 'email' } });
@@ -203,7 +201,7 @@ describe('EmailField', () => {
}); });
it('should clear email suggestions when close icon is clicked', () => { it('should clear email suggestions when close icon is clicked', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'john@gmail.mistake', name: 'email' } });
@@ -224,7 +222,7 @@ describe('EmailField', () => {
confirmEmailValue: 'confirmEmail@yopmail.com', confirmEmailValue: 'confirmEmail@yopmail.com',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlEmailField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<EmailField {...props} />)));
const emailInput = container.querySelector('input#email'); const emailInput = container.querySelector('input#email');
fireEvent.blur(emailInput, { target: { value: 'differentEmail@yopmail.com', name: 'email' } }); fireEvent.blur(emailInput, { target: { value: 'differentEmail@yopmail.com', name: 'email' } });

12
src/register/RegistrationFields/HonorCodeField/HonorCode.test.jsx
View File

@@ -1,13 +1,9 @@
import React from 'react';
import { getConfig, mergeConfig } from '@edx/frontend-platform'; import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import { HonorCode } from '../index'; import { HonorCode } from '../index';
const IntlHonorCode = injectIntl(HonorCode);
describe('HonorCodeTest', () => { describe('HonorCodeTest', () => {
mergeConfig({ mergeConfig({
PRIVACY_POLICY: 'http://privacy-policy.com', PRIVACY_POLICY: 'http://privacy-policy.com',
@@ -28,7 +24,7 @@ describe('HonorCodeTest', () => {
const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Honor Code`; const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Honor Code`;
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlHonorCode <HonorCode
errorMessage={errorMessage} errorMessage={errorMessage}
onChangeHandler={changeHandler} onChangeHandler={changeHandler}
/> />
@@ -43,7 +39,7 @@ describe('HonorCodeTest', () => {
const expectedMsg = 'I agree to the Your Platform Name Here\u00a0Honor Codein a new tab'; const expectedMsg = 'I agree to the Your Platform Name Here\u00a0Honor Codein a new tab';
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlHonorCode onChangeHandler={changeHandler} /> <HonorCode onChangeHandler={changeHandler} />
</IntlProvider>, </IntlProvider>,
); );
@@ -56,7 +52,7 @@ describe('HonorCodeTest', () => {
it('should render Terms of Service and Honor code field', () => { it('should render Terms of Service and Honor code field', () => {
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlHonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} /> <HonorCode fieldType="tos_and_honor_code" onChangeHandler={changeHandler} />
</IntlProvider>, </IntlProvider>,
); );
const expectedMsg = 'By creating an account, you agree to the Terms of Service and Honor Code and you ' const expectedMsg = 'By creating an account, you agree to the Terms of Service and Honor Code and you '

14
src/register/RegistrationFields/NameField/NameField.test.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
@@ -9,7 +8,6 @@ import configureStore from 'redux-mock-store';
import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions'; import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
import { NameField } from '../index'; import { NameField } from '../index';
const IntlNameField = injectIntl(NameField);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -69,7 +67,7 @@ describe('NameField', () => {
const fieldValidation = { name: 'Enter your full name' }; const fieldValidation = { name: 'Enter your full name' };
it('should run name field validation when onBlur is fired', () => { it('should run name field validation when onBlur is fired', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
const nameInput = container.querySelector('input#name'); const nameInput = container.querySelector('input#name');
fireEvent.blur(nameInput, { target: { value: '', name: 'name' } }); fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
@@ -82,7 +80,7 @@ describe('NameField', () => {
}); });
it('should update errors for frontend validations', () => { it('should update errors for frontend validations', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
const nameInput = container.querySelector('input#name'); const nameInput = container.querySelector('input#name');
fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } }); fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
@@ -95,7 +93,7 @@ describe('NameField', () => {
}); });
it('should clear error on focus', () => { it('should clear error on focus', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
const nameInput = container.querySelector('input#name'); const nameInput = container.querySelector('input#name');
fireEvent.focus(nameInput, { target: { value: '', name: 'name' } }); fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
@@ -113,7 +111,7 @@ describe('NameField', () => {
...props, ...props,
shouldFetchUsernameSuggestions: true, shouldFetchUsernameSuggestions: true,
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
const nameInput = container.querySelector('input#name'); const nameInput = container.querySelector('input#name');
// Enter a valid name so that frontend validations are passed // Enter a valid name so that frontend validations are passed
@@ -135,7 +133,7 @@ describe('NameField', () => {
}); });
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<NameField {...props} />)));
const nameInput = container.querySelector('input#name'); const nameInput = container.querySelector('input#name');

12
src/register/RegistrationFields/TermsOfServiceField/TermsOfService.test.jsx
View File

@@ -1,13 +1,9 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform'; import { getConfig } from '@edx/frontend-platform';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { TermsOfService } from '../index'; import { TermsOfService } from '../index';
const IntlTermsOfService = injectIntl(TermsOfService);
describe('TermsOfServiceTest', () => { describe('TermsOfServiceTest', () => {
let value = false; let value = false;
@@ -23,7 +19,7 @@ describe('TermsOfServiceTest', () => {
const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Terms of Service`; const errorMessage = `You must agree to the ${getConfig().SITE_NAME} Terms of Service`;
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlTermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} /> <TermsOfService errorMessage={errorMessage} onChangeHandler={changeHandler} />
</IntlProvider>, </IntlProvider>,
); );
const errorElement = container.querySelector('.form-text-size'); const errorElement = container.querySelector('.form-text-size');
@@ -33,7 +29,7 @@ describe('TermsOfServiceTest', () => {
it('should render Terms of Service field', () => { it('should render Terms of Service field', () => {
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlTermsOfService onChangeHandler={changeHandler} /> <TermsOfService onChangeHandler={changeHandler} />
</IntlProvider>, </IntlProvider>,
); );
@@ -48,7 +44,7 @@ describe('TermsOfServiceTest', () => {
it('should change value when Terms of Service field is checked', () => { it('should change value when Terms of Service field is checked', () => {
const { container } = render( const { container } = render(
<IntlProvider locale="en"> <IntlProvider locale="en">
<IntlTermsOfService onChangeHandler={changeHandler} /> <TermsOfService onChangeHandler={changeHandler} />
</IntlProvider>, </IntlProvider>,
); );
const field = container.querySelector('input#tos'); const field = container.querySelector('input#tos');

36
src/register/RegistrationFields/UsernameField/UsernameField.test.jsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import { IntlProvider } from '@edx/frontend-platform/i18n';
import { fireEvent, render } from '@testing-library/react'; import { fireEvent, render } from '@testing-library/react';
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; import configureStore from 'redux-mock-store';
@@ -9,7 +8,6 @@ import configureStore from 'redux-mock-store';
import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations } from '../../data/actions'; import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations } from '../../data/actions';
import { UsernameField } from '../index'; import { UsernameField } from '../index';
const IntlUsernameField = injectIntl(UsernameField);
const mockStore = configureStore(); const mockStore = configureStore();
jest.mock('react-router-dom', () => { jest.mock('react-router-dom', () => {
@@ -73,7 +71,7 @@ describe('UsernameField', () => {
}; };
it('should run username field validation when onBlur is fired', () => { it('should run username field validation when onBlur is fired', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.blur(usernameField, { target: { value: '', name: 'username' } }); fireEvent.blur(usernameField, { target: { value: '', name: 'username' } });
@@ -86,7 +84,7 @@ describe('UsernameField', () => {
}); });
it('should update errors for frontend validations', () => { it('should update errors for frontend validations', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } }); fireEvent.blur(usernameField, { target: { value: 'user#', name: 'username' } });
@@ -99,7 +97,7 @@ describe('UsernameField', () => {
}); });
it('should clear error on focus', () => { it('should clear error on focus', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField, { target: { value: '', name: 'username' } }); fireEvent.focus(usernameField, { target: { value: '', name: 'username' } });
@@ -112,7 +110,7 @@ describe('UsernameField', () => {
}); });
it('should remove space from field on focus if space exists', () => { it('should remove space from field on focus if space exists', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } }); fireEvent.focus(usernameField, { target: { value: ' ', name: 'username' } });
@@ -125,7 +123,7 @@ describe('UsernameField', () => {
it('should call backend validation api on blur event, if frontend validations have passed', () => { it('should call backend validation api on blur event, if frontend validations have passed', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
// Enter a valid username so that frontend validations are passed // Enter a valid username so that frontend validations are passed
@@ -135,7 +133,7 @@ describe('UsernameField', () => {
}); });
it('should remove space from the start of username on change', () => { it('should remove space from the start of username on change', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } }); fireEvent.change(usernameField, { target: { value: ' test-user', name: 'username' } });
@@ -146,7 +144,7 @@ describe('UsernameField', () => {
}); });
it('should not set username if it is more than 30 character long', () => { it('should not set username if it is more than 30 character long', () => {
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } }); fireEvent.change(usernameField, { target: { value: 'why_this_is_not_valid_username_', name: 'username' } });
@@ -157,7 +155,7 @@ describe('UsernameField', () => {
it('should clear username suggestions when username field is focused in', () => { it('should clear username suggestions when username field is focused in', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField); fireEvent.focus(usernameField);
@@ -179,7 +177,7 @@ describe('UsernameField', () => {
errorMessage: 'It looks like this username is already taken', errorMessage: 'It looks like this username is already taken',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip'); const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3); expect(usernameSuggestions.length).toEqual(3);
}); });
@@ -198,7 +196,7 @@ describe('UsernameField', () => {
value: ' ', value: ' ',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip'); const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3); expect(usernameSuggestions.length).toEqual(3);
}); });
@@ -218,7 +216,7 @@ describe('UsernameField', () => {
errorMessage: 'username error', errorMessage: 'username error',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip'); const usernameSuggestions = container.querySelectorAll('button.username-suggestions--chip');
expect(usernameSuggestions.length).toEqual(3); expect(usernameSuggestions.length).toEqual(3);
}); });
@@ -232,7 +230,7 @@ describe('UsernameField', () => {
}, },
}); });
render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
expect(props.handleChange).toHaveBeenCalledTimes(1); expect(props.handleChange).toHaveBeenCalledTimes(1);
expect(props.handleChange).toHaveBeenCalledWith( expect(props.handleChange).toHaveBeenCalledWith(
{ target: { name: 'username', value: ' ' } }, { target: { name: 'username', value: ' ' } },
@@ -253,7 +251,7 @@ describe('UsernameField', () => {
value: ' ', value: ' ',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameSuggestion = container.querySelector('.username-suggestions--chip'); const usernameSuggestion = container.querySelector('.username-suggestions--chip');
fireEvent.click(usernameSuggestion); fireEvent.click(usernameSuggestion);
expect(props.handleChange).toHaveBeenCalledTimes(1); expect(props.handleChange).toHaveBeenCalledTimes(1);
@@ -277,7 +275,7 @@ describe('UsernameField', () => {
value: ' ', value: ' ',
}; };
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
let closeButton = container.querySelector('button.username-suggestions__close__button'); let closeButton = container.querySelector('button.username-suggestions__close__button');
fireEvent.click(closeButton); fireEvent.click(closeButton);
expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions()); expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -287,7 +285,7 @@ describe('UsernameField', () => {
errorMessage: 'username error', errorMessage: 'username error',
}; };
render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
closeButton = container.querySelector('button.username-suggestions__close__button'); closeButton = container.querySelector('button.username-suggestions__close__button');
fireEvent.click(closeButton); fireEvent.click(closeButton);
expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions()); expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions());
@@ -309,7 +307,7 @@ describe('UsernameField', () => {
store.dispatch = jest.fn(store.dispatch); store.dispatch = jest.fn(store.dispatch);
const { container } = render(routerWrapper(reduxWrapper(<IntlUsernameField {...props} />))); const { container } = render(routerWrapper(reduxWrapper(<UsernameField {...props} />)));
const usernameField = container.querySelector('input#username'); const usernameField = container.querySelector('input#username');
fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } }); fireEvent.focus(usernameField, { target: { value: 'test', name: 'username' } });