Skip to content

Commit

Permalink
Feat/828 create tag component in elements (#866)
Browse files Browse the repository at this point in the history
* feat: #828 Add dropdown select component using rc-select

* put tag component into formik and testing

* fix lint

Co-authored-by: Vu Nguyen <[email protected]>
  • Loading branch information
leXuanNha and Vu Nguyen authored Apr 10, 2020
1 parent def5109 commit aeac1e8
Show file tree
Hide file tree
Showing 7 changed files with 590 additions and 1 deletion.
2 changes: 2 additions & 0 deletions packages/elements/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
],
"dependencies": {
"@storybook/theming": "^5.2.8",
"@types/rc-select": "^5.9.34",
"bulma": "^0.7.5",
"formik": "^2.0.4",
"gh-pages": "^2.2.0",
Expand All @@ -49,6 +50,7 @@
"pell": "^1.0.6",
"prop-types": "^15.7.2",
"rc-notification": "^4.0.0",
"rc-select": "^10.1.8",
"react-datasheet": "^1.4.0",
"react-datepicker": "^2.9.6",
"react-google-map": "^3.1.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Dropdown-select should match a snapshot 1`] = `
<div
className="field pb-4"
>
<div
className="control"
>
<Field
name="test"
>
<Component />
</Field>
</div>
</div>
`;
105 changes: 105 additions & 0 deletions packages/elements/src/components/DropdownSelect/__test__/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import * as React from 'react'
import { shallow, mount } from 'enzyme'
import { DropdownSelect, DropdownSelectProps } from '../index'
import { Formik, Form, FormikErrors } from 'formik'
import toJson from 'enzyme-to-json'
import { act } from 'react-dom/test-utils'

const mockedOptions = [
{ label: 'a', value: 'a' },
{ label: 'b', value: 'b' },
]
const dropdownSelectProps: DropdownSelectProps = {
name: 'demo',
labelText: 'demo',
}

const createFormikWrapper = () => {
const wrapper = mount(
<Formik onSubmit={jest.fn()} initialValues={{ demo: 'b' }}>
{() => (
<Form>
<div className="column is-half-desktop">
<DropdownSelect name="demo" mode="tags" labelText="Demo" options={mockedOptions} />
</div>
</Form>
)}
</Formik>,
)

return wrapper
}

const ErrorFomrikComponent = () => {
return (
<section className="section">
<Formik
validate={values => {
const errors: FormikErrors<any> = {
demo: '',
}
if (values.demo === 'b') {
errors.demo = 'Required'
return errors
}
return errors
}}
initialValues={{ demo: 'a' }}
onSubmit={jest.fn()}
>
{() => (
<Form>
<div className="column is-half-desktop">
<DropdownSelect name="demo" mode="tags" labelText="Demo" options={mockedOptions} />
</div>
</Form>
)}
</Formik>
</section>
)
}

describe('Dropdown-select', () => {
it('should match a snapshot', () => {
expect(toJson(shallow(<DropdownSelect {...dropdownSelectProps} />))).toMatchSnapshot()
})

describe('should work when integrating with Formik', () => {
it('Render error correctly', async () => {
const wrapper = mount(<ErrorFomrikComponent />)
const select = wrapper.find('Select')
await act(async () => {
select.simulate('change', { target: { name: 'demo', value: 'b' } })
})

wrapper.update()

expect(wrapper.find('Select').props().value).toBe('b')
})
})

it('Render label correctly', () => {
const wrapper = createFormikWrapper()
const label = wrapper.find('label').first()
expect(label.text()).toBe('Demo')
})

it('Map value correctly from formik', async () => {
const wrapper = createFormikWrapper()

await act(async () => {
wrapper.find('Select').simulate('change', {
target: {
name: 'demo',
value: 'a',
},
})
})
wrapper.update()
expect(wrapper.find('Select').prop('value')).toEqual('a')
})

afterEach(() => {
jest.resetAllMocks()
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react'
import { Form, Formik } from 'formik'

import { storiesOf } from '@storybook/react'
import { DropdownSelect } from '.'
import { action } from '@storybook/addon-actions'

const options = [
{ value: 'jack', label: 'Jack' },
{ value: 'lucy', label: 'Lucy' },
{ value: 'yiminghe', label: 'Yiminghe' },
]

storiesOf('DropdownSelect', module).add('Primary', () => {
return (
<section className="section">
<Formik
initialValues={{ value: '' }}
onSubmit={values => {
action('Form Values' + values)
}}
>
<Form>
<DropdownSelect name="dropdown-select-field" mode="tags" labelText="Dropdown Select" options={options} />
</Form>
</Formik>
</section>
)
})
Loading

0 comments on commit aeac1e8

Please sign in to comment.