Skip to content

Commit

Permalink
Fix tests and prop types (#553)
Browse files Browse the repository at this point in the history 
* Hotfix

* Be more specific

* Fix select test warnings

* Fix textarea test warnings

* Fix file input test warnings

* Dedupe yarn.lock file to help resolve issues
  • Loading branch information
@chawes13
chawes13 authored Jun 15, 2022
1 parent 8bab561 commit 016a81d
Show file tree
Hide file tree
Showing 6 changed files with 1,728 additions and 2,981 deletions.
2 changes: 1 addition & 1 deletion src/forms/helpers/field-prop-types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,5 +138,5 @@ const file = PropTypes.shape({
})

export const fileInputPropTypes = fieldPropTypesWithValue(
PropTypes.arrayOf(file).isRequired,
PropTypes.oneOfType([PropTypes.oneOf([""]), file, PropTypes.arrayOf(file)])
)
1 change: 1 addition & 0 deletions stories/forms/inputs/file-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import dynamicInput from '../../dynamic-input'

const FileInput = dynamicInput({
valuePath: 'input.value',
initialValue: [],
onChangePath: 'input.onChange'
})(StaticFileInput)

Expand Down
42 changes: 21 additions & 21 deletions test/forms/inputs/file-input.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('FileInput', () => {
})

test('renders file name when file is non-image type or value is empty', () => {
const file = { name: 'fileName', type: 'application/pdf' }
const file = { name: 'fileName', url: 'data:,', type: 'application/pdf' }
const props = { input: { name, value: file, onChange: defaultOnChange }, meta: {} }
const wrapper = mount(<FileInput { ...props } />)
expect(wrapper.find('p').text()).toEqual('fileName')
Expand Down Expand Up @@ -47,7 +47,7 @@ describe('FileInput', () => {

test('sets custom preview from props', () => {
const Preview = ({ file }) => <p>{ file && file.name }</p> // eslint-disable-line react/prop-types
const props = { input: { name, value: { name: 'fileName', type: 'image/png' }, onChange: defaultOnChange }, meta: {} }
const props = { input: { name, value: { name: 'fileName', url: 'data:,', type: 'image/png' }, onChange: defaultOnChange }, meta: {} }
const wrapper = mount(<FileInput previewComponent={ Preview } { ...props }/>)
expect(wrapper.find('p').exists()).toEqual(true)
expect(wrapper.find('p').text()).toEqual('fileName')
Expand All @@ -70,7 +70,7 @@ describe('FileInput', () => {
})

test('reads files and calls change handler correctly', async () => {
const FILE = { name: 'my file' }
const FILE = { name: 'my file', url: 'data:,' }
const FILEDATA = 'my file data'
mockFileReader(FILEDATA)
const onChange = jest.fn()
Expand All @@ -85,7 +85,7 @@ describe('FileInput', () => {

test("does not re-read existing files", async () => {
const lastModified = Date.now()
const firstFile = { name: 'first', lastModified }
const firstFile = { name: 'first', url: 'data:,', lastModified }
const readFiles = jest.fn()
const onChange = jest.fn()
const props = { input: { name, value: firstFile, onChange }, meta: {}, readFiles }
Expand All @@ -99,8 +99,8 @@ describe('FileInput', () => {

test('only allows one file by default', async () => {
const lastModified = Date.now()
const firstFile = { name: 'first', lastModified }
const secondFile = { name: 'second', lastModified }
const firstFile = { name: 'first', url: 'data:,', lastModified }
const secondFile = { name: 'second', url: 'data:,', lastModified }
const readFiles = jest.fn((arr) => arr.map((file) => ({ ...file, url: 'my-data-url' })))
const onChange = jest.fn()
const props = { input: { name, value: [firstFile], onChange }, meta: {}, readFiles }
Expand All @@ -126,7 +126,7 @@ describe('FileInput', () => {

test('shows error messages that occur from reading', async () => {
const ERROR_MESSAGE = 'cannot read'
const file = { name: 'fileName' }
const file = { name: 'fileName', url: 'data:,' }
const readFiles = jest.fn(() => Promise.reject(ERROR_MESSAGE))
const props = { input: { name, value: '', onChange: defaultOnChange }, meta: {}, readFiles }
const wrapper = mount(<FileInput {...props}/>)
Expand All @@ -141,7 +141,7 @@ describe('FileInput', () => {

test('shows error that occurs from reading', async () => {
const ERROR_MESSAGE = 'cannot read'
const file = { name: 'fileName' }
const file = { name: 'fileName', url: 'data:,' }
const readFiles = jest.fn(() => {
throw new Error(ERROR_MESSAGE)
})
Expand All @@ -159,8 +159,8 @@ describe('FileInput', () => {
describe('with "multiple" enabled', () => {
test('allows multiple files to be added incrementally', async () => {
const lastModified = Date.now()
const firstFile = { name: 'first', lastModified }
const secondFile = { name: 'second', lastModified }
const firstFile = { name: 'first', url: 'data:,', lastModified }
const secondFile = { name: 'second', url: 'data:,', lastModified }
const FILEDATA = 'my file data'
mockFileReader(FILEDATA)
const onChange = jest.fn()
Expand All @@ -175,8 +175,8 @@ describe('FileInput', () => {

test('selects first file when prop changes from true to false', async () => {
const lastModified = Date.now()
const firstFile = { name: 'first', lastModified }
const secondFile = { name: 'second', lastModified }
const firstFile = { name: 'first', url: 'data:,', lastModified }
const secondFile = { name: 'second', url: 'data:,', lastModified }
const onChange = jest.fn()
const props = { input: { name, value: [firstFile, secondFile], onChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput {...props} />)
Expand All @@ -188,13 +188,13 @@ describe('FileInput', () => {
})

test('shows remove button component by default', () => {
const props = { input: { name, value: [{ name: 'fileName', type: 'image/png' }], onChange: defaultOnChange }, meta: {}, multiple: true }
const props = { input: { name, value: [{ name: 'fileName', url: 'data:,', type: 'image/png' }], onChange: defaultOnChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput { ...props }/>)
expect(wrapper.find('button.remove-file').exists()).toBe(true)
})

test('shows a clear input button component when multiple prop is false and a file is selected', () => {
const props = { input: { name, value: [{ name: 'fileName', type: 'image/png' }], onChange: defaultOnChange }, meta: {}, multiple: false }
const props = { input: { name, value: [{ name: 'fileName', url: 'data:,', type: 'image/png' }], onChange: defaultOnChange }, meta: {}, multiple: false }
const wrapper = mount(<FileInput { ...props }/>)
expect(wrapper.find('button.remove-file').exists()).toBe(true)
})
Expand All @@ -206,23 +206,23 @@ describe('FileInput', () => {
})

test('adds custom aria-label to default remove button', () => {
const file = { name: 'fileName.png', type: 'image/png' }
const file = { name: 'fileName.png', url: 'data:,', type: 'image/png' }
const props = { input: { name, value: [file], onChange: defaultOnChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput {...props} />)
expect(wrapper.find('button.remove-file').prop('aria-label')).toContain(file.name)
})

test('sets custom remove component from props', () => {
const RemoveComponent = () => <button className="remove-custom">Remove me!!!</button>
const props = { input: { name, value: { name: 'fileName', type: 'image/png' }, onChange: defaultOnChange }, meta: {}, multiple: true }
const props = { input: { name, value: { name: 'fileName', url: 'data:,', type: 'image/png' }, onChange: defaultOnChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput removeComponent={RemoveComponent} { ...props }/>)
expect(wrapper.find('button.remove-custom').exists()).toBe(true)
expect(wrapper.find('button.remove-file').exists()).toBe(false)
})

test('calls custom onRemove prop', async () => {
const onRemove = jest.fn()
const file = { name: 'fileName', type: 'image/png' }
const file = { name: 'fileName', url: 'data:,', type: 'image/png' }
const props = { input: { name, value: [file], onChange: defaultOnChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput onRemove={onRemove} { ...props }/>)
wrapper.find('button.remove-file').simulate('click')
Expand All @@ -232,9 +232,9 @@ describe('FileInput', () => {
})

test('removes correct file', async () => {
const firstFile = { name: 'firstFile', type: 'image/png' }
const secondFile = { name: 'secondFile', type: 'image/png' }
const thirdFile = { name: 'thirdFile', type: 'image/png' }
const firstFile = { name: 'firstFile', url: 'data:,', type: 'image/png' }
const secondFile = { name: 'secondFile', url: 'data:,', type: 'image/png' }
const thirdFile = { name: 'thirdFile', url: 'data:,', type: 'image/png' }
const onChange = jest.fn()
const props = { input: { name, value: [firstFile, secondFile, thirdFile], onChange }, meta: {}, multiple: true }
const wrapper = mount(<FileInput { ...props }/>)
Expand All @@ -248,7 +248,7 @@ describe('FileInput', () => {

test('shows error when remove fails', async () => {
const ERROR_MESSAGE = 'cannot read'
const file = { name: 'fileName' }
const file = { name: 'fileName', url: 'data:,' }
const readFiles = jest.fn()
const onRemove = jest.fn(() => Promise.reject(ERROR_MESSAGE))

Expand Down
19 changes: 14 additions & 5 deletions test/forms/inputs/select.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,37 @@ import { mount } from 'enzyme'
import { Select } from '../../../src/'

const DEFAULT_PLACEHOLDER = 'Select'
const onChange = () => {}

test('Select adds string options to select tag', () => {
const OPTION = 'MY OPTION'
const props = {
input: {
name: 'test',
value: '',
},
onChange,
},
meta: {},
options: [OPTION],
placeholder: false,
placeholder: '',
}
const wrapper = mount(<Select { ...props }/>)
expect(wrapper.find('option').contains(OPTION)).toEqual(true)
expect(wrapper.find('option').prop('value')).toEqual(OPTION)
})

test('Select adds object options to select tag', () => {
test ('Select adds object options to select tag', () => {
const KEY = 'MY KEY'
const VALUE = 'MY OPTION'
const props = {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
options: [{ key: KEY, value: VALUE }],
placeholder: false,
placeholder: '',
}
const wrapper = mount(<Select { ...props }/>)
expect(wrapper.find('option').contains(KEY)).toEqual(true)
Expand All @@ -43,6 +46,7 @@ test('Select adds placeholder option to select tag', () => {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
options: [],
Expand All @@ -59,6 +63,7 @@ test('Select enables the placeholder option to be selected correctly', () => {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
options: [],
Expand All @@ -76,10 +81,11 @@ test('Select renders option groups correctly', () => {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
optionGroups: [options],
placeholder: false,
placeholder: '',
}
const wrapper = mount(<Select { ...props }/>)
expect(wrapper.find('optgroup').first().prop('label')).toEqual('groupName')
Expand All @@ -91,6 +97,7 @@ test('Select has a placeholder by default', () => {
input: {
name: 'test',
value: '',
onChange,
},
options: [],
meta: {},
Expand All @@ -108,6 +115,7 @@ test('Select adds an aria-describedby attribute when there is an input error', (
input: {
name,
value: '',
onChange,
},
meta: {
touched: true,
Expand All @@ -126,6 +134,7 @@ test('Select does not receive invalid dom attributes', () => {
input: {
name,
value: '',
onChange,
},
meta: {},
options: [OPTION],
Expand Down
8 changes: 8 additions & 0 deletions test/forms/inputs/textarea.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@ import React, { createRef } from 'react'
import { mount } from 'enzyme'
import { Textarea } from '../../../src/'

const onChange = () => {}

test('Textarea passes down defaults and does not show character count', () => {
const props = {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
}
Expand All @@ -20,6 +23,7 @@ test('Textarea passes down max length and shows character count correctly', () =
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
maxLength: 5,
Expand All @@ -34,6 +38,7 @@ test('Textarea hides character count correctly', () => {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
maxLength: 5,
Expand All @@ -50,6 +55,7 @@ test('Textarea is given an aria-describedby attribute when there is an input err
input: {
name,
value: '',
onChange,
},
meta: {
touched: true,
Expand All @@ -68,6 +74,7 @@ test('Textarea does not receive invalid dom attributes', () => {
input: {
name,
value: '',
onChange,
},
meta: {},
maxLength: 5,
Expand All @@ -85,6 +92,7 @@ test('Textarea passes down forwardedRef to input correctly', () => {
input: {
name: 'test',
value: '',
onChange,
},
meta: {},
forwardedRef: inputRef,
Expand Down
Loading

0 comments on commit 016a81d

Please sign in to comment.