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

fix: Migrate common components tests to RTL (#1117)

Browse Source
This commit is contained in:
Attiya Ishaque
2023-12-20 15:25:33 +05:00
committed by GitHub
parent 924488c29b
commit 800a5fc6be
3 changed files with 97 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/common-components/tests/FormField.test.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Provider } from 'react-redux';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { MemoryRouter } from 'react-router-dom';
import configureStore from 'redux-mock-store';
@@ -21,11 +21,17 @@ describe('FormGroup', () => {
};
it('should show help text on field focus', () => {
const formGroup = mount(<FormGroup {...props} />);
expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').exists()).toBeFalsy();
const { queryByText, getByLabelText } = render(<FormGroup {...props} />);
const emailInput = getByLabelText('Email');
formGroup.find('input#email').simulate('focus');
expect(formGroup.find('.pgn-transition-replace-group').find('div#email-1').text()).toEqual('Email field help text');
expect(queryByText('Email field help text')).toBeNull();
fireEvent.focus(emailInput);
const helpText = queryByText('Email field help text');
expect(helpText).toBeTruthy();
expect(helpText.textContent).toEqual('Email field help text');
});
});
@@ -60,25 +66,29 @@ describe('PasswordField', () => {
});
it('should show/hide password on icon click', () => {
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = getByLabelText('Password');
passwordField.find('button[aria-label="Show password"]').simulate('click');
expect(passwordField.find('input').prop('type')).toEqual('text');
const showPasswordButton = getByLabelText('Show password');
fireEvent.click(showPasswordButton);
expect(passwordInput.type).toBe('text');
passwordField.find('button[aria-label="Hide password"]').simulate('click');
expect(passwordField.find('input').prop('type')).toEqual('password');
const hidePasswordButton = getByLabelText('Hide password');
fireEvent.click(hidePasswordButton);
expect(passwordInput.type).toBe('password');
});
it('should show password requirement tooltip on focus', async () => {
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = getByLabelText('Password');
jest.useFakeTimers();
await act(async () => {
passwordField.find('input').simulate('focus');
fireEvent.focus(passwordInput);
jest.runAllTimers();
});
passwordField.update();
const passwordRequirementTooltip = document.querySelector('#password-requirement-left');
expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
expect(passwordRequirementTooltip).toBeTruthy();
});
it('should show all password requirement checks as failed', async () => {
@@ -86,48 +96,66 @@ describe('PasswordField', () => {
...props,
value: '',
};
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = getByLabelText('Password');
jest.useFakeTimers();
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
await act(async () => {
passwordField.find('input').simulate('focus');
fireEvent.focus(passwordInput);
jest.runAllTimers();
});
passwordField.update();
expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon mr-1 text-light-700');
const letterCheckIcon = document.querySelector('#letter-check span');
const numberCheckIcon = document.querySelector('#number-check span');
const charactersCheckIcon = document.querySelector('#characters-check span');
expect(letterCheckIcon).toBeTruthy();
expect(letterCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
expect(numberCheckIcon).toBeTruthy();
expect(numberCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
expect(charactersCheckIcon).toBeTruthy();
expect(charactersCheckIcon.className).toContain('pgn__icon mr-1 text-light-700');
});
it('should update password requirement checks', async () => {
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = getByLabelText('Password');
jest.useFakeTimers();
await act(async () => {
passwordField.find('input').simulate('focus');
fireEvent.focus(passwordInput);
jest.runAllTimers();
});
passwordField.update();
expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
expect(passwordField.find('#number-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
expect(passwordField.find('#characters-check span').prop('className')).toEqual('pgn__icon text-success mr-1');
const letterCheckIcon = document.querySelector('#letter-check span');
const numberCheckIcon = document.querySelector('#number-check span');
const charactersCheckIcon = document.querySelector('#characters-check span');
expect(letterCheckIcon).toBeTruthy();
expect(letterCheckIcon.className).toContain('pgn__icon text-success mr-1');
expect(numberCheckIcon).toBeTruthy();
expect(numberCheckIcon.className).toContain('pgn__icon text-success mr-1');
expect(charactersCheckIcon).toBeTruthy();
expect(charactersCheckIcon.className).toContain('pgn__icon text-success mr-1');
});
it('should not run validations when blur is fired on password icon click', () => {
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { container, getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = container.querySelector('input[name="password"]');
passwordField.find('button[aria-label="Show password"]').simulate('blur', {
const passwordIcon = getByLabelText('Show password');
fireEvent.blur(passwordInput, {
target: {
name: 'password',
value: 'invalid',
},
relatedTarget: {
name: 'passwordIcon',
},
relatedTarget: passwordIcon,
});
expect(passwordField.find('div[feedback-for="password"]').exists()).toBeFalsy();
expect(container.querySelector('div[feedback-for="password"]')).toBeNull();
});
it('should call props handle blur if available', () => {
@@ -135,9 +163,10 @@ describe('PasswordField', () => {
...props,
handleBlur: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = container.querySelector('input[name="password"]');
passwordField.find('input#password').simulate('blur', {
fireEvent.blur(passwordInput, {
target: {
name: 'password',
value: '',
@@ -152,9 +181,10 @@ describe('PasswordField', () => {
...props,
handleErrorChange: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { container } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordInput = container.querySelector('input[name="password"]');
passwordField.find('input#password').simulate('blur', {
fireEvent.blur(passwordInput, {
target: {
name: 'password',
value: '',
@@ -174,9 +204,11 @@ describe('PasswordField', () => {
handleErrorChange: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
passwordField.find('button[aria-label="Show password"]').simulate('focus', {
const passwordIcon = getByLabelText('Show password');
fireEvent.focus(passwordIcon, {
target: {
name: 'passwordIcon',
value: '',
@@ -192,9 +224,11 @@ describe('PasswordField', () => {
handleErrorChange: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
passwordField.find('button[aria-label="Show password"]').simulate('focus', {
const passwordIcon = getByLabelText('Show password');
fireEvent.focus(passwordIcon, {
target: {
name: 'password',
value: 'invalid',
@@ -214,9 +248,9 @@ describe('PasswordField', () => {
...props,
handleErrorChange: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
passwordField.find('button[aria-label="Show password"]').simulate('blur', {
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
const passwordField = getByLabelText('Password');
fireEvent.blur(passwordField, {
target: {
name: 'password',
value: 'password123',
@@ -234,9 +268,11 @@ describe('PasswordField', () => {
handleErrorChange: jest.fn(),
handleBlur: jest.fn(),
};
const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
const { getByLabelText } = render(reduxWrapper(<IntlPasswordField {...props} />));
passwordField.find('button[aria-label="Show password"]').simulate('blur', {
const passwordIcon = getByLabelText('Show password');
fireEvent.blur(passwordIcon, {
target: {
name: 'passwordIcon',
value: undefined,