From 664cd95d9de64aa37120403c8ea4201da5b28230 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Thu, 2 Jan 2020 13:15:09 -0500 Subject: [PATCH 01/16] test(text-input): Switch tests to RTL --- .../text-input/react/spec/TextInput.spec.tsx | 111 +++++++++++------- 1 file changed, 68 insertions(+), 43 deletions(-) diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index d308e77dc0..e6e75c81c1 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -1,50 +1,75 @@ import * as React from 'react'; -import {mount} from 'enzyme'; -import ReactDOMServer from 'react-dom/server'; +import {render, fireEvent} from '@testing-library/react'; import TextInput from '../lib/TextInput'; +import ReactDOMServer from 'react-dom/server'; import {axe} from 'jest-axe'; import FormField from '@workday/canvas-kit-react-form-field'; -describe('TextInput', () => { - test('TextInput should spread extra props', () => { - const component = mount(); - const input = component - .find('input') // TODO: Standardize on prop spread location (see #150) - .getDOMNode(); - expect(input.getAttribute('data-propspread')).toBe('test'); - component.unmount(); - }); -}); - -describe('Text Input Accessibility', () => { - test('Text Input in a FormField should pass axe DOM accessibility guidelines', async () => { - const html = ReactDOMServer.renderToString( - - ; - - ); - expect(await axe(html)).toHaveNoViolations(); - }); +const id = 'Test Text Input'; +const label = "Test Text Input"; +const placeholder = "Test Text Input"; +const value = 'Test Text Input'; + +describe('Text Input', () => { + const cb = jest.fn(); + afterEach(() => { + cb.mockReset(); + }) + + describe('when rendered', () => { + describe('with an placeholder', () => { + test('should render a text input with placeholder', () => { + const {getByPlaceholderText} = render(); + expect(getByPlaceholderText(placeholder)).toHaveAttribute('placeholder', placeholder); + }) + }) + + describe('with a id', () => { + test('should render a text input with a id', () => { + const {getByPlaceholderText} = render(); + expect(getByPlaceholderText(placeholder)).toHaveAttribute('id', id); + }) + }) + + describe('with a value', () => { + test('should render a text input with a value', () => { + const {getByDisplayValue} = render(); + expect(getByDisplayValue(value)).toBeDefined(); + }) + }) + + describe('with disabled attribute', () => { + test('should render a disabled text input', () => { + const {getByDisplayValue} = render(); + expect(getByDisplayValue(value)).toBeDisabled(); + }) + }) + + describe('wrapped in a FormField', () => { + test('should pass axe DOM accessibility guidelines', async () => { + const html = ReactDOMServer.renderToString( + + + + ); + expect(await axe(html)).toHaveNoViolations(); + }); + }); + + describe('with extra, arbitrary props', () => { + test('should spread extra props', () => { + const attr = 'test'; + const {getByPlaceholderText} = render(); + expect(getByPlaceholderText(placeholder)).toHaveAttribute('data-propspread', attr); + }); + }); + }) - test('Text Input with `aria-labelledby` should pass axe DOM accessibility guidelines', async () => { - const html = ReactDOMServer.renderToString( - <> - - - ; - - ); - expect(await axe(html)).toHaveNoViolations(); + describe('when provided an input ref', () => { + test('input ref should be defined', () => { + const ref: React.RefObject = React.createRef(); + render(); + expect(ref.current).toBeDefined(); + }); }); -}); +}) \ No newline at end of file From a6ae5a6e464a9143e252d1e8b2f5896ad6311a88 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Thu, 9 Jan 2020 15:36:01 -0500 Subject: [PATCH 02/16] test(text-input): Add static state for testing --- modules/_labs/core/react/index.ts | 1 + .../react/stories/stories_TextInput.tsx | 45 +++++++++++++++++++ .../text-input/react/spec/TextInput.spec.tsx | 11 ----- 3 files changed, 46 insertions(+), 11 deletions(-) diff --git a/modules/_labs/core/react/index.ts b/modules/_labs/core/react/index.ts index 81de5ba2e3..f25080e645 100644 --- a/modules/_labs/core/react/index.ts +++ b/modules/_labs/core/react/index.ts @@ -5,4 +5,5 @@ import CanvasProvider from './lib/CanvasProvider'; export default type; export {type, space, CanvasProvider}; export * from './lib/type'; +export * from './lib/StaticStates'; export * from './lib/theming'; diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index 119b02ea37..b1e5749246 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -1,6 +1,7 @@ /// import * as React from 'react'; import {storiesOf} from '@storybook/react'; +import {StaticStates} from '@workday/canvas-kit-labs-react-core'; import withReadme from 'storybook-readme/with-readme'; import {controlComponent} from '../../../../utils/storybook'; @@ -152,3 +153,47 @@ storiesOf('Components|Inputs/Text Input/React/Left Label', module) {controlComponent()} )); + +storiesOf('Components|Inputs/Text Input/React/States', module) + .addParameters({component: TextInput}) + .addDecorator(withReadme(README)) + .add('All', () => { + const states = ['default', 'hover', 'focus active', 'disabled']; + const variants = [ + undefined, + FormField.ErrorType.Alert, + FormField.ErrorType.Error, + ] as const; + + return ( + + + + + + {states.map(state => ( + + ))} + + + + {variants.map(variant => ( + + + {states.map(state => ( + + ))} + + ))} + +
{state}
{variant} + + {controlComponent()} + +
+ + ); + }); \ No newline at end of file diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index e6e75c81c1..55f7865747 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -45,17 +45,6 @@ describe('Text Input', () => { }) }) - describe('wrapped in a FormField', () => { - test('should pass axe DOM accessibility guidelines', async () => { - const html = ReactDOMServer.renderToString( - - - - ); - expect(await axe(html)).toHaveNoViolations(); - }); - }); - describe('with extra, arbitrary props', () => { test('should spread extra props', () => { const attr = 'test'; From c52c0bf679fe25d2bf0df597d9980529f158942f Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 14:03:17 -0500 Subject: [PATCH 03/16] test(text-input): Update tests --- cypress/integration/TextInput.spec.ts | 46 +++++++++++++++++++ .../react/stories/stories_TextInput.tsx | 14 +++--- .../text-input/react/spec/TextInput.spec.tsx | 12 ++--- 3 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 cypress/integration/TextInput.spec.ts diff --git a/cypress/integration/TextInput.spec.ts b/cypress/integration/TextInput.spec.ts new file mode 100644 index 0000000000..ac461dbad6 --- /dev/null +++ b/cypress/integration/TextInput.spec.ts @@ -0,0 +1,46 @@ +import * as h from '../helpers'; + +const getTextInput = () => { + return cy.get(`[type="text"]`); +}; + +describe('TextInput', () => { + before(() => { + h.stories.visit(); + }); + ['Default', 'Alert', 'Error'].forEach(story => { + context(`given the '${story}' story is rendered`, () => { + beforeEach(() => { + h.stories.load('Components|Inputs/Text Input/React/Top Label', story); + }); + + it('should pass accessibility checks', () => { + cy.checkA11y(); + }); + + context('when clicked', () => { + beforeEach(() => { + getTextInput().click(); + }); + + it('should be focused', () => { + getTextInput().should('be.focused'); + }); + }); + }); + }); + + context(`given the 'Disabled' story is rendered`, () => { + beforeEach(() => { + h.stories.load('Components|Inputs/Text Input/React/Top Label', 'Disabled'); + }); + + it('should pass accessibility checks', () => { + cy.checkA11y(); + }); + + it('should be disabled', () => { + getTextInput().should('be.disabled'); + }); + }); +}); \ No newline at end of file diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index b1e5749246..fb0f475c91 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -154,15 +154,15 @@ storiesOf('Components|Inputs/Text Input/React/Left Label', module) )); -storiesOf('Components|Inputs/Text Input/React/States', module) +storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) .addParameters({component: TextInput}) .addDecorator(withReadme(README)) .add('All', () => { const states = ['default', 'hover', 'focus active', 'disabled']; const variants = [ - undefined, - FormField.ErrorType.Alert, - FormField.ErrorType.Error, + [undefined, "Default"], + [FormField.ErrorType.Alert, "Alert"], + [FormField.ErrorType.Error, "Error"], ] as const; return ( @@ -178,13 +178,13 @@ storiesOf('Components|Inputs/Text Input/React/States', module) {variants.map(variant => ( - - {variant} + + {variant[1]} {states.map(state => ( {controlComponent()} diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index 55f7865747..202722504a 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -18,35 +18,35 @@ describe('Text Input', () => { describe('when rendered', () => { describe('with an placeholder', () => { - test('should render a text input with placeholder', () => { + it('should render a text input with placeholder', () => { const {getByPlaceholderText} = render(); expect(getByPlaceholderText(placeholder)).toHaveAttribute('placeholder', placeholder); }) }) describe('with a id', () => { - test('should render a text input with a id', () => { + it('should render a text input with a id', () => { const {getByPlaceholderText} = render(); expect(getByPlaceholderText(placeholder)).toHaveAttribute('id', id); }) }) describe('with a value', () => { - test('should render a text input with a value', () => { + it('should render a text input with a value', () => { const {getByDisplayValue} = render(); expect(getByDisplayValue(value)).toBeDefined(); }) }) describe('with disabled attribute', () => { - test('should render a disabled text input', () => { + it('should render a disabled text input', () => { const {getByDisplayValue} = render(); expect(getByDisplayValue(value)).toBeDisabled(); }) }) describe('with extra, arbitrary props', () => { - test('should spread extra props', () => { + it('should spread extra props onto the text input', () => { const attr = 'test'; const {getByPlaceholderText} = render(); expect(getByPlaceholderText(placeholder)).toHaveAttribute('data-propspread', attr); @@ -55,7 +55,7 @@ describe('Text Input', () => { }) describe('when provided an input ref', () => { - test('input ref should be defined', () => { + it('should render a text input with ref defined', () => { const ref: React.RefObject = React.createRef(); render(); expect(ref.current).toBeDefined(); From 27323cfe6b39a99c56202357c262d1bce84dbe99 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 14:14:44 -0500 Subject: [PATCH 04/16] test(text-input): Update story name --- modules/form-field/react/stories/stories_TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index fb0f475c91..ab20182a6f 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -157,7 +157,7 @@ storiesOf('Components|Inputs/Text Input/React/Left Label', module) storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) .addParameters({component: TextInput}) .addDecorator(withReadme(README)) - .add('All', () => { + .add('States', () => { const states = ['default', 'hover', 'focus active', 'disabled']; const variants = [ [undefined, "Default"], From 155670c3f4ac83ebb96ae7bc43dfb3926d973583 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 14:29:07 -0500 Subject: [PATCH 05/16] test(text-input): Fix test --- modules/form-field/react/stories/stories_TextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index ab20182a6f..b284b132a5 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -160,7 +160,7 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) .add('States', () => { const states = ['default', 'hover', 'focus active', 'disabled']; const variants = [ - [undefined, "Default"], + [undefined, undefined], [FormField.ErrorType.Alert, "Alert"], [FormField.ErrorType.Error, "Error"], ] as const; From f5284c39a02bc3befab0e7e4c85d62ad15e24d5c Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 14:47:52 -0500 Subject: [PATCH 06/16] test(text-input): Fix test --- cypress/integration/TextInput.spec.ts | 2 +- .../react/stories/stories_TextInput.tsx | 13 +++-- .../text-input/react/spec/TextInput.spec.tsx | 48 +++++++++++-------- 3 files changed, 38 insertions(+), 25 deletions(-) diff --git a/cypress/integration/TextInput.spec.ts b/cypress/integration/TextInput.spec.ts index ac461dbad6..00ea0bf89b 100644 --- a/cypress/integration/TextInput.spec.ts +++ b/cypress/integration/TextInput.spec.ts @@ -43,4 +43,4 @@ describe('TextInput', () => { getTextInput().should('be.disabled'); }); }); -}); \ No newline at end of file +}); diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index b284b132a5..d42b62bcba 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -161,8 +161,8 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) const states = ['default', 'hover', 'focus active', 'disabled']; const variants = [ [undefined, undefined], - [FormField.ErrorType.Alert, "Alert"], - [FormField.ErrorType.Error, "Error"], + [FormField.ErrorType.Alert, 'Alert'], + [FormField.ErrorType.Error, 'Error'], ] as const; return ( @@ -186,7 +186,12 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) labelPosition={FormField.LabelPosition.Hidden} error={state === 'disabled' ? '' : variant[0]} > - {controlComponent()} + {controlComponent( + + )} ))} @@ -196,4 +201,4 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) ); - }); \ No newline at end of file + }); diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index 202722504a..079f7bf7d1 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -6,59 +6,67 @@ import {axe} from 'jest-axe'; import FormField from '@workday/canvas-kit-react-form-field'; const id = 'Test Text Input'; -const label = "Test Text Input"; -const placeholder = "Test Text Input"; +const label = 'Test Text Input'; +const placeholder = 'Test Text Input'; const value = 'Test Text Input'; describe('Text Input', () => { const cb = jest.fn(); afterEach(() => { cb.mockReset(); - }) + }); describe('when rendered', () => { describe('with an placeholder', () => { it('should render a text input with placeholder', () => { - const {getByPlaceholderText} = render(); + const {getByPlaceholderText} = render( + + ); expect(getByPlaceholderText(placeholder)).toHaveAttribute('placeholder', placeholder); - }) - }) - + }); + }); + describe('with a id', () => { it('should render a text input with a id', () => { - const {getByPlaceholderText} = render(); + const {getByPlaceholderText} = render( + + ); expect(getByPlaceholderText(placeholder)).toHaveAttribute('id', id); - }) - }) + }); + }); describe('with a value', () => { it('should render a text input with a value', () => { - const {getByDisplayValue} = render(); + const {getByDisplayValue} = render(); expect(getByDisplayValue(value)).toBeDefined(); - }) - }) + }); + }); describe('with disabled attribute', () => { it('should render a disabled text input', () => { - const {getByDisplayValue} = render(); + const {getByDisplayValue} = render( + + ); expect(getByDisplayValue(value)).toBeDisabled(); - }) - }) + }); + }); describe('with extra, arbitrary props', () => { it('should spread extra props onto the text input', () => { const attr = 'test'; - const {getByPlaceholderText} = render(); + const {getByPlaceholderText} = render( + + ); expect(getByPlaceholderText(placeholder)).toHaveAttribute('data-propspread', attr); }); }); - }) + }); describe('when provided an input ref', () => { it('should render a text input with ref defined', () => { const ref: React.RefObject = React.createRef(); - render(); + render(); expect(ref.current).toBeDefined(); }); }); -}) \ No newline at end of file +}); From ea527cd0a7acf11a128922b2db9b54fa3f444179 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 15:26:51 -0500 Subject: [PATCH 07/16] test(text-input): Fix test --- .../react/stories/stories_TextInput.tsx | 91 ++++++++++--------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index d42b62bcba..94a93726ce 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -157,48 +157,51 @@ storiesOf('Components|Inputs/Text Input/React/Left Label', module) storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) .addParameters({component: TextInput}) .addDecorator(withReadme(README)) - .add('States', () => { - const states = ['default', 'hover', 'focus active', 'disabled']; - const variants = [ - [undefined, undefined], - [FormField.ErrorType.Alert, 'Alert'], - [FormField.ErrorType.Error, 'Error'], - ] as const; + .add('States', () => ( + + + + + + + + + + + + + {[false, true].map(disabled => { + return ['Default', 'Alert', 'Error'].map(variant => { + const type = + variant === 'Alert' + ? FormField.ErrorType.Alert + : variant === 'Error' + ? FormField.ErrorType.Error + : undefined; - return ( - -
No stateHoverFocusedActive
- - - - {states.map(state => ( - - ))} - - - - {variants.map(variant => ( - - - {states.map(state => ( - - ))} - - ))} - -
{state}
{variant[1]} - - {controlComponent( - - )} - -
- - ); - }); + const key = `${ + disabled ? 'disabled' : 'enabled' + }-${variant}`; + + return ( + + {`${disabled ? 'Disabled ' : ''}${variant}`} + + {['', 'hover', 'focus', 'active'].map(className => ( + + {}} // eslint-disable-line no-empty-function + /> + + ))} + + ); + }); + })} + + + + )); \ No newline at end of file From 2f5d59edab5b308fb1a8d4318d31071a9b8074cf Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Mon, 13 Jan 2020 15:44:28 -0500 Subject: [PATCH 08/16] test(text-input): Fix test --- modules/form-field/react/stories/stories_TextInput.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index 94a93726ce..ea1509f4f0 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -179,9 +179,7 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) ? FormField.ErrorType.Error : undefined; - const key = `${ - disabled ? 'disabled' : 'enabled' - }-${variant}`; + const key = `${disabled ? 'disabled' : 'enabled'}-${variant}`; return ( @@ -204,4 +202,4 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) - )); \ No newline at end of file + )); From c0f1fd487b0c2b094a050bc5661488e96af21d25 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Wed, 15 Jan 2020 12:08:48 -0500 Subject: [PATCH 09/16] test(text-input): Update placeholder test --- modules/text-input/react/spec/TextInput.spec.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index 079f7bf7d1..f4960c5851 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; -import {render, fireEvent} from '@testing-library/react'; +import {render, fireEvent, getByTestId} from '@testing-library/react'; import TextInput from '../lib/TextInput'; -import ReactDOMServer from 'react-dom/server'; -import {axe} from 'jest-axe'; import FormField from '@workday/canvas-kit-react-form-field'; const id = 'Test Text Input'; @@ -20,9 +18,10 @@ describe('Text Input', () => { describe('with an placeholder', () => { it('should render a text input with placeholder', () => { const {getByPlaceholderText} = render( - + ); - expect(getByPlaceholderText(placeholder)).toHaveAttribute('placeholder', placeholder); + const container = document.body; + expect(getByTestId(container, id)).toHaveAttribute('placeholder', placeholder); }); }); From be7a9385f47fa2611d2be260ac5d866c84f71f00 Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Wed, 15 Jan 2020 15:48:54 -0500 Subject: [PATCH 10/16] test(text-input): Update input ref test --- modules/text-input/react/spec/TextInput.spec.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index f4960c5851..5c7682dbf0 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -62,10 +62,11 @@ describe('Text Input', () => { }); describe('when provided an input ref', () => { - it('should render a text input with ref defined', () => { + it('should set the ref to the input element', () => { const ref: React.RefObject = React.createRef(); - render(); - expect(ref.current).toBeDefined(); + render(); + expect(ref.current).not.toBeNull(); + expect(ref.current).toHaveAttribute('id', id); }); }); }); From 4d7a3a130bc7c282cf5ea79c6104d797843631cc Mon Sep 17 00:00:00 2001 From: Stephane Rangaya Date: Wed, 15 Jan 2020 16:41:09 -0500 Subject: [PATCH 11/16] test(text-input): Fix lint --- modules/text-input/react/spec/TextInput.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index 5c7682dbf0..e297ce9bbf 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -64,7 +64,7 @@ describe('Text Input', () => { describe('when provided an input ref', () => { it('should set the ref to the input element', () => { const ref: React.RefObject = React.createRef(); - render(); + render(); expect(ref.current).not.toBeNull(); expect(ref.current).toHaveAttribute('id', id); }); From a0d5df366031ddb5e8030ffbc97359eb26a886e8 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 24 Jan 2020 13:12:00 -0800 Subject: [PATCH 12/16] test(text-input): Update component state table --- .../react/stories/stories_TextInput.tsx | 92 ++++++++++--------- 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index ea1509f4f0..8ab16be9c4 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -1,9 +1,9 @@ /// import * as React from 'react'; import {storiesOf} from '@storybook/react'; -import {StaticStates} from '@workday/canvas-kit-labs-react-core'; import withReadme from 'storybook-readme/with-readme'; -import {controlComponent} from '../../../../utils/storybook'; +import {StaticStates} from '@workday/canvas-kit-labs-react-core/lib/StaticStates'; +import {controlComponent, ComponentStatesTable, permutateProps} from '../../../../utils/storybook'; import {TextInput} from '../../../text-input/react/index'; import FormField from '../index'; @@ -159,47 +159,51 @@ storiesOf('Components|Inputs/Text Input/React/Visual Testing', module) .addDecorator(withReadme(README)) .add('States', () => ( - - - - - - - - - - - - {[false, true].map(disabled => { - return ['Default', 'Alert', 'Error'].map(variant => { - const type = - variant === 'Alert' - ? FormField.ErrorType.Alert - : variant === 'Error' - ? FormField.ErrorType.Error - : undefined; - - const key = `${disabled ? 'disabled' : 'enabled'}-${variant}`; - - return ( - - - - {['', 'hover', 'focus', 'active'].map(className => ( - - ))} - - ); - }); - })} - -
No stateHoverFocusedActive
{`${disabled ? 'Disabled ' : ''}${variant}`} - {}} // eslint-disable-line no-empty-function - /> -
+ { + if (props.value === '' && !props.placeholder) { + return false; + } + return true; + } + )} + columnProps={permutateProps( + { + className: [ + {label: 'Default', value: ''}, + {label: 'Hover', value: 'hover'}, + {label: 'Focus', value: 'focus'}, + {label: 'Focus Hover', value: 'focus hover'}, + {label: 'Active', value: 'active'}, + {label: 'Active Hover', value: 'active hover'}, + ], + disabled: [{label: '', value: false}, {label: 'Disabled', value: true}], + }, + props => { + if (props.disabled && !['', 'hover'].includes(props.className)) { + return false; + } + return true; + } + )} + > + {props => ( + {}} // eslint-disable-line no-empty-function + /> + )} + )); From 54875f8dc69bb48985f38a648b01d43ece474942 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 24 Jan 2020 13:14:02 -0800 Subject: [PATCH 13/16] fix(text-input): Fix border for disabled text inputs in error --- modules/common/react/lib/styles/errorRing.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/common/react/lib/styles/errorRing.ts b/modules/common/react/lib/styles/errorRing.ts index 07a3293f22..d192473773 100644 --- a/modules/common/react/lib/styles/errorRing.ts +++ b/modules/common/react/lib/styles/errorRing.ts @@ -20,7 +20,7 @@ export default function errorRing(error?: ErrorType): CSSObject { borderColor: errorBorderColor, transition: '100ms box-shadow', boxShadow: errorBoxShadow, - '&:hover': { + '&:hover, &:disabled': { borderColor: errorBorderColor, }, '&:focus:not([disabled])': { From 21b04abf598c59361c2ee5c1fc9f417f1e99fc7e Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 24 Jan 2020 13:29:48 -0800 Subject: [PATCH 14/16] test(text-input): Add cypress test for typing into field --- cypress/integration/TextInput.spec.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/cypress/integration/TextInput.spec.ts b/cypress/integration/TextInput.spec.ts index 00ea0bf89b..e6bb629dd5 100644 --- a/cypress/integration/TextInput.spec.ts +++ b/cypress/integration/TextInput.spec.ts @@ -27,6 +27,16 @@ describe('TextInput', () => { getTextInput().should('be.focused'); }); }); + + context('when text is entered', () => { + beforeEach(() => { + getTextInput().type('Test'); + }); + + it('should reflect the text typed', () => { + getTextInput().should('have.value', 'Test'); + }); + }); }); }); From e971e159b215cc612f375e572e85d28d91809494 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 24 Jan 2020 13:31:49 -0800 Subject: [PATCH 15/16] chore: Remove unnecessary depth from imports --- modules/form-field/react/stories/stories_Checkbox.tsx | 2 +- modules/form-field/react/stories/stories_TextInput.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/form-field/react/stories/stories_Checkbox.tsx b/modules/form-field/react/stories/stories_Checkbox.tsx index c272ec541c..a48d16ceab 100644 --- a/modules/form-field/react/stories/stories_Checkbox.tsx +++ b/modules/form-field/react/stories/stories_Checkbox.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import {storiesOf} from '@storybook/react'; import withReadme from 'storybook-readme/with-readme'; -import {StaticStates} from '@workday/canvas-kit-labs-react-core/lib/StaticStates'; +import {StaticStates} from '@workday/canvas-kit-labs-react-core'; import { ControlledComponentWrapper, ComponentStatesTable, diff --git a/modules/form-field/react/stories/stories_TextInput.tsx b/modules/form-field/react/stories/stories_TextInput.tsx index 8ab16be9c4..349a5df1a9 100644 --- a/modules/form-field/react/stories/stories_TextInput.tsx +++ b/modules/form-field/react/stories/stories_TextInput.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import {storiesOf} from '@storybook/react'; import withReadme from 'storybook-readme/with-readme'; -import {StaticStates} from '@workday/canvas-kit-labs-react-core/lib/StaticStates'; +import {StaticStates} from '@workday/canvas-kit-labs-react-core'; import {controlComponent, ComponentStatesTable, permutateProps} from '../../../../utils/storybook'; import {TextInput} from '../../../text-input/react/index'; From 2d17ee84629e2bf3a07e0b81457b7ccb1a9fbf95 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Fri, 24 Jan 2020 13:43:45 -0800 Subject: [PATCH 16/16] test(text-input): Clean up and add RTL tests --- .../text-input/react/spec/TextInput.spec.tsx | 78 ++++++++++--------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/modules/text-input/react/spec/TextInput.spec.tsx b/modules/text-input/react/spec/TextInput.spec.tsx index e297ce9bbf..c5835f3159 100644 --- a/modules/text-input/react/spec/TextInput.spec.tsx +++ b/modules/text-input/react/spec/TextInput.spec.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -import {render, fireEvent, getByTestId} from '@testing-library/react'; +import {render, fireEvent} from '@testing-library/react'; import TextInput from '../lib/TextInput'; -import FormField from '@workday/canvas-kit-react-form-field'; const id = 'Test Text Input'; -const label = 'Test Text Input'; const placeholder = 'Test Text Input'; const value = 'Test Text Input'; @@ -15,49 +13,45 @@ describe('Text Input', () => { }); describe('when rendered', () => { - describe('with an placeholder', () => { - it('should render a text input with placeholder', () => { - const {getByPlaceholderText} = render( - - ); - const container = document.body; - expect(getByTestId(container, id)).toHaveAttribute('placeholder', placeholder); - }); + it('should render an input with type=text', () => { + const {getByRole} = render(); + expect(getByRole('textbox')).toHaveProperty('type', 'text'); }); + }); - describe('with a id', () => { - it('should render a text input with a id', () => { - const {getByPlaceholderText} = render( - - ); - expect(getByPlaceholderText(placeholder)).toHaveAttribute('id', id); - }); + describe('when rendered with an placeholder', () => { + it('should render a text input with placeholder', () => { + const {getByRole} = render(); + expect(getByRole('textbox')).toHaveAttribute('placeholder', placeholder); }); + }); + + describe('when rendered with an id', () => { + it('should render a text input with a id', () => { + const {getByRole} = render(); + expect(getByRole('textbox')).toHaveAttribute('id', id); + }); + }); - describe('with a value', () => { - it('should render a text input with a value', () => { - const {getByDisplayValue} = render(); - expect(getByDisplayValue(value)).toBeDefined(); - }); + describe('when rendered with a value', () => { + it('should render a text input with a value', () => { + const {getByDisplayValue} = render(); + expect(getByDisplayValue(value)).toBeDefined(); }); + }); - describe('with disabled attribute', () => { - it('should render a disabled text input', () => { - const {getByDisplayValue} = render( - - ); - expect(getByDisplayValue(value)).toBeDisabled(); - }); + describe('when rendered with disabled attribute', () => { + it('should render a disabled text input', () => { + const {getByRole} = render(); + expect(getByRole('textbox')).toBeDisabled(); }); + }); - describe('with extra, arbitrary props', () => { - it('should spread extra props onto the text input', () => { - const attr = 'test'; - const {getByPlaceholderText} = render( - - ); - expect(getByPlaceholderText(placeholder)).toHaveAttribute('data-propspread', attr); - }); + describe('when rendered with extra, arbitrary props', () => { + it('should spread extra props onto the text input', () => { + const attr = 'test'; + const {getByRole} = render(); + expect(getByRole('textbox')).toHaveAttribute('data-propspread', attr); }); }); @@ -69,4 +63,12 @@ describe('Text Input', () => { expect(ref.current).toHaveAttribute('id', id); }); }); + + describe('when typed into', () => { + it('should call a callback function', () => { + const {getByRole} = render(); + fireEvent.change(getByRole('textbox'), {target: {value: 'Test'}}); + expect(cb).toHaveBeenCalledTimes(1); + }); + }); });