From ebddda46cce2c8a49d7be37bbeaa5bca76868110 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 26 Jul 2024 16:56:41 -0700 Subject: [PATCH 1/6] add data-testid attr to valid icon --- products/statement-generator/src/components/Input.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/products/statement-generator/src/components/Input.tsx b/products/statement-generator/src/components/Input.tsx index 6ad17734..17fd0e9a 100644 --- a/products/statement-generator/src/components/Input.tsx +++ b/products/statement-generator/src/components/Input.tsx @@ -146,7 +146,12 @@ const InputArea: React.FC = ({ {adornment !== undefined && {adornment}} - {valid ? : null} + {valid ? ( + + ) : null} } autoComplete="off" From 54c499c3a0d5f5142860853b809e12e97fc7a7f4 Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Fri, 26 Jul 2024 17:22:36 -0700 Subject: [PATCH 2/6] add tests for inputs --- .../src/tests/inputs.test.tsx | 162 ++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 products/statement-generator/src/tests/inputs.test.tsx diff --git a/products/statement-generator/src/tests/inputs.test.tsx b/products/statement-generator/src/tests/inputs.test.tsx new file mode 100644 index 00000000..c55f3e24 --- /dev/null +++ b/products/statement-generator/src/tests/inputs.test.tsx @@ -0,0 +1,162 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import userEvent from '@testing-library/user-event'; + +import { ThemeProvider } from '@material-ui/core/styles'; +import customMuiTheme from 'styles/customMuiTheme'; + +import Input from '../components/Input'; + +describe('Input component', () => { + test('Input renders and displays correct default value', () => { + const { getByPlaceholderText } = render( + + {}} + defaultValue="Type here" + placeholder="Type here" + type="text" + /> + + ); + + const input = getByPlaceholderText(/Type here/i); + + expect(input).toBeInTheDocument(); + }); + + test('Inputs validate number responses', async () => { + const { getByTestId, getByRole } = render( + + {}} + defaultValue="0" + placeholder="0" + type="number" + /> + + ); + + const input = getByRole(/spinbutton/i) as HTMLInputElement; + + // number inputs don't allow numbers < 0 + // + // + + // valid responses show valid icon + userEvent.type(input, '35'); + + const icon = getByTestId('valid-icon'); + expect(icon).toBeInTheDocument(); + + // removing a response will remove valid icon + userEvent.clear(input); + expect(icon).not.toBeInTheDocument(); + }); + + test('Inputs validate text responses', () => { + const { getByTestId, getByRole } = render( + + {}} + defaultValue="0" + placeholder="0" + type="text" + /> + + ); + + const input = getByRole(/textbox/i) as HTMLInputElement; + + // valid responses show valid icon + userEvent.type(input, 'Firstname Lastname'); + + const icon = getByTestId('valid-icon'); + expect(icon).toBeInTheDocument(); + + // removing a response will remove valid icon + userEvent.clear(input); + expect(icon).not.toBeInTheDocument(); + }); + + test('Input props are passed correctly', () => { + interface ExpectedProps { + placeholder: string; + id: string; + type: string; + } + + const checkInputProps = ( + input: HTMLElement, + expectedProps: ExpectedProps + ) => { + expect(input).toHaveAttribute('placeholder', expectedProps.placeholder); + expect(input).toHaveAttribute('id', expectedProps.id); + expect(input).toHaveAttribute('type', expectedProps.type); + }; + + const { getByPlaceholderText } = render( + + {}} + placeholder="Text" + type="text" + /> + {}} + placeholder="Number" + type="number" + /> + + ); + + const textInput = getByPlaceholderText(/Text/i); + const numInput = getByPlaceholderText(/Number/i); + + // passed correct placeholder, id, and type + checkInputProps(textInput, { + placeholder: 'Text', + id: 'text', + type: 'text', + }); + checkInputProps(numInput, { + placeholder: 'Number', + id: 'number', + type: 'number', + }); + }); + + test('Input is accessible and focusable', () => { + const { getAllByText, getByPlaceholderText } = render( + + {}} + type="text" + /> + + ); + + // label is associated with the input + const label = getAllByText(/accessibleInput/i)[0]; + expect(label).toBeInTheDocument(); + expect(label).toHaveAttribute('for', 'accessible-input'); + + // input is focusable + const input = getByPlaceholderText('Type here'); + userEvent.click(input); + expect(input).toHaveFocus(); + + // input does not trap focus + userEvent.tab(); + expect(input).not.toHaveFocus(); + }); +}); From e7e03c9c2a33cf631f48de63c7f0f64d9814503e Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Sun, 28 Jul 2024 22:45:54 -0700 Subject: [PATCH 3/6] update number input testing --- .../src/tests/inputs.test.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/products/statement-generator/src/tests/inputs.test.tsx b/products/statement-generator/src/tests/inputs.test.tsx index c55f3e24..324c0c16 100644 --- a/products/statement-generator/src/tests/inputs.test.tsx +++ b/products/statement-generator/src/tests/inputs.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; @@ -33,8 +33,8 @@ describe('Input component', () => { {}} - defaultValue="0" placeholder="0" + defaultValue="0" type="number" /> @@ -43,8 +43,8 @@ describe('Input component', () => { const input = getByRole(/spinbutton/i) as HTMLInputElement; // number inputs don't allow numbers < 0 - // - // + fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' }); + expect(input).toHaveValue(0); // valid responses show valid icon userEvent.type(input, '35'); @@ -60,13 +60,7 @@ describe('Input component', () => { test('Inputs validate text responses', () => { const { getByTestId, getByRole } = render( - {}} - defaultValue="0" - placeholder="0" - type="text" - /> + {}} placeholder="" type="text" /> ); @@ -94,9 +88,14 @@ describe('Input component', () => { input: HTMLElement, expectedProps: ExpectedProps ) => { - expect(input).toHaveAttribute('placeholder', expectedProps.placeholder); - expect(input).toHaveAttribute('id', expectedProps.id); - expect(input).toHaveAttribute('type', expectedProps.type); + const attributes: (keyof typeof expectedProps)[] = [ + 'placeholder', + 'id', + 'type', + ]; + attributes.forEach((attr) => { + expect(input).toHaveAttribute(attr, expectedProps[attr]); + }); }; const { getByPlaceholderText } = render( From 52e82017844f8f2bc0350b5888b7f5be05dc0cce Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Wed, 2 Oct 2024 19:14:39 -0700 Subject: [PATCH 4/6] remove JSS console warnings since they don't disrupt the tests --- products/statement-generator/src/setupTests.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 products/statement-generator/src/setupTests.js diff --git a/products/statement-generator/src/setupTests.js b/products/statement-generator/src/setupTests.js new file mode 100644 index 00000000..88802113 --- /dev/null +++ b/products/statement-generator/src/setupTests.js @@ -0,0 +1,13 @@ +import '@testing-library/jest-dom'; + +// Override console.warn to suppress specific warnings +const originalWarn = console.warn; +console.warn = (...args) => { + if ( + !args[0].includes( + '[JSS] Rule is not linked. Missing sheet option "link: true".' + ) + ) { + originalWarn(...args); + } +}; From b06b78317e1f56d2dcba24e55b2835bed6845e9e Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Wed, 2 Oct 2024 19:20:31 -0700 Subject: [PATCH 5/6] disable eslint console warnings using inline comments --- products/statement-generator/src/setupTests.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/products/statement-generator/src/setupTests.js b/products/statement-generator/src/setupTests.js index 88802113..b58f6154 100644 --- a/products/statement-generator/src/setupTests.js +++ b/products/statement-generator/src/setupTests.js @@ -1,7 +1,8 @@ import '@testing-library/jest-dom'; // Override console.warn to suppress specific warnings -const originalWarn = console.warn; +const originalWarn = console.warn; // eslint-disable-line no-console +// eslint-disable-next-line no-console console.warn = (...args) => { if ( !args[0].includes( From 2cd878dc9a1e9a069f96229124aba8bca9e460fa Mon Sep 17 00:00:00 2001 From: Eileen Burdekin Date: Sun, 6 Oct 2024 23:44:04 -0700 Subject: [PATCH 6/6] undo adding eslint comments inline, broke the warning suppression --- products/statement-generator/src/setupTests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/products/statement-generator/src/setupTests.js b/products/statement-generator/src/setupTests.js index b58f6154..abef1fb7 100644 --- a/products/statement-generator/src/setupTests.js +++ b/products/statement-generator/src/setupTests.js @@ -1,8 +1,8 @@ import '@testing-library/jest-dom'; // Override console.warn to suppress specific warnings -const originalWarn = console.warn; // eslint-disable-line no-console -// eslint-disable-next-line no-console +const originalWarn = console.warn; + console.warn = (...args) => { if ( !args[0].includes(