-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat #3 - Create input field component + refactor button component + bump storybook version and fix glob error Closes #3
- Loading branch information
1 parent
946ca1a
commit cc4fdff
Showing
10 changed files
with
676 additions
and
237 deletions.
There are no files selected for viewing
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react' | ||
| import InputField, { InputFieldProps } from './index' | ||
| import { Meta, Story } from '@storybook/react/types-6-0' | ||
|
|
||
| export default { | ||
| argTypes: { | ||
| classes: { control: 'array' }, | ||
| fieldLabel: { defaultValue: 'Field Label' }, | ||
| value: { control: { disable: true } } | ||
| }, | ||
| component: InputField, | ||
| title: 'InputField' | ||
| } as Meta | ||
|
|
||
| const Template: Story<InputFieldProps> = args => <InputField {...args} /> | ||
|
|
||
| export const Default = Template.bind({}) | ||
|
|
||
| export const Loading = Template.bind({}) | ||
| Loading.args = { loading: true } | ||
|
|
||
| export const FullWidth = Template.bind({}) | ||
| FullWidth.args = { fullWidth: true } | ||
|
|
||
| export const Error = Template.bind({}) | ||
| Error.args = { error: true } |
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 |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { Input } from 'antd' | ||
| import React from 'react' | ||
| import Skeleton from 'react-loading-skeleton' | ||
| import InputField, { InputFieldProps } from './index' | ||
| import { mount, ReactWrapper, shallow } from 'enzyme' | ||
|
|
||
| let wrapper: ReactWrapper | ||
|
|
||
| const mockProps: InputFieldProps = { | ||
| fieldLabel: 'Field Label' | ||
| } | ||
|
|
||
| beforeEach(() => { | ||
| wrapper = mount(<InputField {...mockProps} />) | ||
| }) | ||
|
|
||
| describe('InputField', () => { | ||
| it('renders', () => { | ||
| const inputField = wrapper.find(InputField) | ||
|
|
||
| expect(inputField).toHaveLength(1) | ||
| }) | ||
|
|
||
| it('renders a label if one exists', () => { | ||
| const inputField = wrapper.find(InputField) | ||
|
|
||
| expect(inputField.text()).toContain('Field Label') | ||
| }) | ||
|
|
||
| it('throws an error if value is passed without an onClick', () => { | ||
| expect(() => shallow(<InputField value='abc' />)).toThrow() | ||
| }) | ||
|
|
||
| it('should pass onChange and value to the input component if the props exist', () => { | ||
| const mockOnChange = jest.fn() | ||
| wrapper = mount(<InputField onChange={mockOnChange} value='abc' />) | ||
|
|
||
| expect(wrapper.find(Input).props().onChange).toEqual(mockOnChange) | ||
| expect(wrapper.find(Input).props().value).toEqual('abc') | ||
| }) | ||
|
|
||
| it('correctly passes the disabled prop', () => { | ||
| wrapper = mount(<InputField disabled />) | ||
|
|
||
| expect(wrapper.find(Input).props().disabled).toBeTruthy() | ||
| }) | ||
|
|
||
| it('correctly passes the placeholder prop', () => { | ||
| wrapper = mount(<InputField placeholder='Testing' />) | ||
|
|
||
| expect(wrapper.find(Input).props().placeholder).toEqual('Testing') | ||
| }) | ||
|
|
||
| describe('type', () => { | ||
| it('defaults to type text if no type is specified', () => { | ||
| expect(wrapper.find(Input).props().type).toEqual('text') | ||
| }) | ||
|
|
||
| it('correctly passes the input type prop', () => { | ||
| wrapper = mount(<InputField type='password' />) | ||
|
|
||
| expect(wrapper.find(Input).props().type).toEqual('password') | ||
| }) | ||
| }) | ||
|
|
||
| describe('loading', () => { | ||
| it('renders a loading skeleton', () => { | ||
| wrapper = mount(<InputField loading />) | ||
|
|
||
| expect(wrapper.find(Skeleton)).toHaveLength(1) | ||
| }) | ||
|
|
||
| it('renders a loading skeleton for the label if there is one', () => { | ||
| wrapper = mount(<InputField fieldLabel='test' loading />) | ||
|
|
||
| expect(wrapper.find(Skeleton)).toHaveLength(2) | ||
| }) | ||
| }) | ||
|
|
||
| describe('fullWidth', () => { | ||
| beforeEach(() => { | ||
| // Mounting to document.body throws a React error, so create a temporary container div for the tests to mount the element to | ||
| const div = document.createElement('div') | ||
| div.setAttribute('id', 'container') | ||
| document.body.appendChild(div) | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| const div = document.getElementById('container') | ||
|
|
||
| if (div) { | ||
| document.body.removeChild(div) | ||
| } | ||
| }) | ||
|
|
||
| it('renders a container that will span the width of its parent container if set to true', () => { | ||
| wrapper = mount(<InputField fullWidth />, { | ||
| attachTo: document.getElementById('container') | ||
| }) | ||
|
|
||
| const element = document.getElementsByClassName( | ||
| wrapper.getDOMNode().className | ||
| )[0] | ||
| const style = window.getComputedStyle(element) | ||
|
|
||
| expect(style.width).toEqual('100%') | ||
| }) | ||
|
|
||
| it('does not render a container that will span the width of its parent container by default', () => { | ||
| wrapper = mount(<InputField />, { | ||
| attachTo: document.getElementById('container') | ||
| }) | ||
|
|
||
| const element = document.getElementsByClassName( | ||
| wrapper.getDOMNode().className | ||
| )[0] | ||
| const style = window.getComputedStyle(element) | ||
|
|
||
| expect(style.width).not.toEqual('100%') | ||
| }) | ||
| }) | ||
|
|
||
| describe('required', () => { | ||
| it('passes the correct required class to field label container', () => { | ||
| wrapper = mount(<InputField fieldLabel='Field Label' required />) | ||
|
|
||
| expect(wrapper.getDOMNode().children[0].className).toContain( | ||
| 'required' | ||
| ) | ||
| }) | ||
| }) | ||
|
|
||
| describe('error', () => { | ||
| it('passes the correct error class to input', () => { | ||
| wrapper = mount(<InputField error />) | ||
|
|
||
| expect(wrapper.find(Input).hasClass(/error-*/)).toBeTruthy() | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.