-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #496 from creative-commoners/pulls/5.0/react-testi…
…ng-library MNT Use React Testing Library
- Loading branch information
Showing
24 changed files
with
1,410 additions
and
2,489 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
164 changes: 47 additions & 117 deletions
164
client/src/components/BackupCodes/tests/Register-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,127 +1,57 @@ | ||
| /* global jest */ | ||
| /* global jest, test */ | ||
|
|
||
| import React from 'react'; | ||
| import Enzyme, { shallow } from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-16'; | ||
| import Register from '../Register'; | ||
|
|
||
| Enzyme.configure({ adapter: new Adapter() }); | ||
| import { render, fireEvent, screen } from '@testing-library/react'; | ||
|
|
||
| window.ss = { | ||
| i18n: { _t: (key, string) => string }, | ||
| }; | ||
|
|
||
| const mockMethod = { | ||
| urlSegment: 'aye', | ||
| name: 'Aye', | ||
| description: 'Register using aye', | ||
| supportLink: 'https://google.com', | ||
| component: 'Test', | ||
| }; | ||
|
|
||
| describe('Register - Recovery Codes', () => { | ||
| it('will show a recently copied message when using the copy test button', () => { | ||
| const preventDefault = jest.fn(); | ||
|
|
||
| const wrapper = shallow( | ||
| <Register | ||
| method={mockMethod} | ||
| codes={['123', '456']} | ||
| copyFeedbackDuration={30} | ||
| /> | ||
| ); | ||
|
|
||
| const copyLink = wrapper.find('.mfa-register-backup-codes__copy-to-clipboard'); | ||
|
|
||
| expect(copyLink.text()).toBe('Copy codes'); | ||
| copyLink.simulate('click', { preventDefault }); | ||
|
|
||
| expect(preventDefault.mock.calls).toHaveLength(1); | ||
|
|
||
| wrapper.update(); | ||
|
|
||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()).toBe('Copied!'); | ||
| }); | ||
|
|
||
| it('will hide the recently copied message after a short delay', done => { | ||
| const preventDefault = jest.fn(); | ||
|
|
||
| const wrapper = shallow( | ||
| <Register | ||
| method={mockMethod} | ||
| codes={['123', '456']} | ||
| copyFeedbackDuration={30} | ||
| /> | ||
| ); | ||
|
|
||
| const copyLink = wrapper.find('.mfa-register-backup-codes__copy-to-clipboard'); | ||
|
|
||
| expect(copyLink.text()).toBe('Copy codes'); | ||
| copyLink.simulate('click', { preventDefault }); | ||
|
|
||
| expect(preventDefault.mock.calls).toHaveLength(1); | ||
|
|
||
| wrapper.update(); | ||
|
|
||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()).toBe('Copied!'); | ||
|
|
||
| setTimeout(() => { | ||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()) | ||
| .toBe('Copy codes'); | ||
| done(); | ||
| }, 40); | ||
| }); | ||
|
|
||
| it('re-copying the codes will reset the recently copied timer', done => { | ||
| const preventDefault = jest.fn(); | ||
|
|
||
| const wrapper = shallow( | ||
| <Register | ||
| method={mockMethod} | ||
| codes={['123', '456']} | ||
| copyFeedbackDuration={300} | ||
| /> | ||
| ); | ||
|
|
||
| const copyLink = wrapper.find('.mfa-register-backup-codes__copy-to-clipboard'); | ||
|
|
||
| expect(copyLink.text()).toBe('Copy codes'); | ||
| copyLink.simulate('click', { preventDefault }); | ||
|
|
||
| expect(preventDefault.mock.calls).toHaveLength(1); | ||
|
|
||
| wrapper.update(); | ||
|
|
||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()).toBe('Copied!'); | ||
|
|
||
| setTimeout(() => { | ||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()) | ||
| .toBe('Copied!'); | ||
| copyLink.simulate('click', { preventDefault }); | ||
| expect(preventDefault.mock.calls).toHaveLength(2); | ||
| wrapper.update(); | ||
| }, 150); | ||
|
|
||
| setTimeout(() => { | ||
| expect(wrapper.find('.mfa-register-backup-codes__copy-to-clipboard').text()) | ||
| .toBe('Copied!'); | ||
| done(); | ||
| }, 400); | ||
| }); | ||
|
|
||
| it('will call the given onComplete function when pressing the "finish" button', () => { | ||
| const completeFunction = jest.fn(); | ||
|
|
||
| const wrapper = shallow( | ||
| <Register | ||
| method={mockMethod} | ||
| codes={['123', '456']} | ||
| onCompleteRegistration={completeFunction} | ||
| /> | ||
| ); | ||
|
|
||
| wrapper.find('button.btn-primary').simulate('click'); | ||
| window.prompt = () => {}; | ||
|
|
||
| function makeProps(obj = {}) { | ||
| return { | ||
| method: { | ||
| urlSegment: 'aye', | ||
| name: 'Aye', | ||
| description: 'Register using aye', | ||
| supportLink: 'https://google.com', | ||
| component: 'Test', | ||
| }, | ||
| codes: ['123', '456'], | ||
| copyFeedbackDuration: 30, | ||
| ...obj | ||
| }; | ||
| } | ||
|
|
||
| test('Register will show a recently copied message when using the copy test button and hide after a short delay', async () => { | ||
| const { container } = render(<Register {...makeProps()}/>); | ||
| let link = container.querySelector('.mfa-register-backup-codes__copy-to-clipboard'); | ||
| expect(link.textContent).toBe('Copy codes'); | ||
| fireEvent.click(link); | ||
| link = await screen.findByText('Copied!'); | ||
| expect(link.classList).toContain('mfa-register-backup-codes__copy-to-clipboard'); | ||
| expect(screen.queryByText('Copy codes!')).toBeNull(); | ||
| link = await screen.findByText('Copy codes'); | ||
| expect(link.classList).toContain('mfa-register-backup-codes__copy-to-clipboard'); | ||
| expect(screen.queryByText('Copied!')).toBeNull(); | ||
| // Can do this multiple times | ||
| fireEvent.click(link); | ||
| link = await screen.findByText('Copied!'); | ||
| expect(link).not.toBeNull(); | ||
| link = await screen.findByText('Copy codes'); | ||
| expect(link).not.toBeNull(); | ||
| }); | ||
|
|
||
| expect(completeFunction.mock.calls).toHaveLength(1); | ||
| }); | ||
| test('Register will call the given onComplete function when pressing the "finish" button', () => { | ||
| const onCompleteRegistration = jest.fn(); | ||
| const { container } = render( | ||
| <Register {...makeProps({ | ||
| onCompleteRegistration | ||
| })} | ||
| /> | ||
| ); | ||
| fireEvent.click(container.querySelector('button.btn-primary')); | ||
| expect(onCompleteRegistration).toHaveBeenCalled(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,45 @@ | ||
| /* global jest */ | ||
| /* global jest, test */ | ||
|
|
||
| import React from 'react'; | ||
| import Enzyme, { shallow } from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-16'; | ||
| import Verify from '../Verify'; | ||
|
|
||
| Enzyme.configure({ adapter: new Adapter() }); | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
|
|
||
| window.ss = { | ||
| i18n: { _t: (key, string) => string }, | ||
| }; | ||
|
|
||
| describe('Login - Recovery Codes', () => { | ||
| it('has a disabled button on load', () => { | ||
| const wrapper = shallow(<Verify />); | ||
|
|
||
| expect(wrapper.find('button').prop('disabled')).toBe(true); | ||
| }); | ||
|
|
||
| it('will un-disable the button when input is provided', () => { | ||
| const wrapper = shallow(<Verify />); | ||
|
|
||
| wrapper.setState({ | ||
| value: 'something', | ||
| }); | ||
| wrapper.update(); | ||
|
|
||
| expect(wrapper.find('button').prop('disabled')).toBe(false); | ||
| }); | ||
|
|
||
| it('renders the given "more options control"', () => { | ||
| const moreOptions = <div>More options!</div>; | ||
|
|
||
| const wrapper = shallow(<Verify moreOptionsControl={moreOptions} />); | ||
|
|
||
| expect(wrapper.html()).toMatch(/<div>More options!<\/div>/); | ||
| }); | ||
|
|
||
| it('triggers login completion with the right value when the button is pressed', () => { | ||
| const completeFunction = jest.fn(); | ||
| const preventDefault = jest.fn(); | ||
|
|
||
| const wrapper = shallow(<Verify onCompleteVerification={completeFunction} />); | ||
| test('Verify has a disabled button on load', () => { | ||
| const { container } = render(<Verify />); | ||
| expect(container.querySelector('button.btn-primary').disabled).toBe(true); | ||
| }); | ||
|
|
||
| wrapper.setState({ | ||
| value: 'something', | ||
| }); | ||
| test('Verify will un-disable the button when input is provided', () => { | ||
| const { container } = render(<Verify />); | ||
| const input = container.querySelector('input.mfa-verify-backup-codes__input'); | ||
| fireEvent.change(input, { target: { value: 'x' } }); | ||
| expect(container.querySelector('button.btn-primary').disabled).toBe(false); | ||
| }); | ||
|
|
||
| wrapper.find('button').simulate('click', { preventDefault }); | ||
| test('Verify renders the given "more options control"', () => { | ||
| const { container } = render( | ||
| <Verify {...{ | ||
| moreOptionsControl: <div>More options!</div> | ||
| }} | ||
| /> | ||
| ); | ||
| expect(container.querySelectorAll('.mfa-action-list__item')[1].textContent).toBe('More options!'); | ||
| }); | ||
|
|
||
| expect(preventDefault.mock.calls).toHaveLength(1); | ||
| expect(completeFunction.mock.calls).toHaveLength(1); | ||
| expect(completeFunction.mock.calls[0]).toEqual([{ code: 'something' }]); | ||
| }); | ||
| test('Verify triggers login completion with the right value when the button is pressed', () => { | ||
| const onCompleteVerification = jest.fn(); | ||
| const { container } = render( | ||
| <Verify {...{ | ||
| onCompleteVerification | ||
| }} | ||
| /> | ||
| ); | ||
| const input = container.querySelector('input.mfa-verify-backup-codes__input'); | ||
| fireEvent.change(input, { target: { value: 'something' } }); | ||
| fireEvent.click(container.querySelector('button.btn-primary')); | ||
| expect(onCompleteVerification).toBeCalledWith({ code: 'something' }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.