Skip to content

Commit

Permalink
Merge pull request #35 from leandrohsilveira/field-props-change
Browse files Browse the repository at this point in the history 
Field props change and test coverage
  • Loading branch information
@leandrohsilveira
leandrohsilveira committed Oct 16, 2017
2 parents 6d07cd2 + 4d7ffc2 commit 8c40654
Show file tree
Hide file tree
Showing 11 changed files with 1,451 additions and 183 deletions.
553 changes: 548 additions & 5 deletions packages/react-formctrl/__tests__/field.test.jsx
View file

Large diffs are not rendered by default.

238 changes: 178 additions & 60 deletions packages/react-formctrl/__tests__/form.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@ import {mount, configure} from 'enzyme';

import {FormProvider, Form, FormControl, Field} from '../src'

import {inputInject, formControlInject} from '../tests-utils'
import {inputInject} from './field.test'

export const formControlInject = (formCtrl) => ({
name: formCtrl.formName,
formCtrl
})

configure({adapter: new Adapter()})

Expand All @@ -29,92 +33,206 @@ describe('About <Form /> component', () => {
const fieldValue1 = "fieldValue1"
const fieldValue2 = "fieldValue2"

let dom, submited, form, input1, input2
beforeEach(() => {
submited = null
dom = mount((
<FormProvider>
<Form name={formName1} onSubmit={(values) => submited = values}>
<Input form={formName1} name={fieldName1} />
<Input form={formName1} name={fieldName2} />
</Form>
</FormProvider>
))
form = dom.find(Form)
input1 = dom.find(`input[name="${fieldName1}"]`)
input2 = dom.find(`input[name="${fieldName2}"]`)
})

describe('When is submited', () => {

test('With empty values', () => {
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
describe('With the submit handler attached', () => {

let dom, submited, form, input1, input2
beforeEach(() => {
submited = null
dom = mount((
<FormProvider>
<Form name={formName1} onSubmit={(values) => submited = values}>
<Input form={formName1} name={fieldName1} />
<Input form={formName1} name={fieldName2} />
</Form>
</FormProvider>
))
form = dom.find(Form)
input1 = dom.find(`input[name="${fieldName1}"]`)
input2 = dom.find(`input[name="${fieldName2}"]`)
})

test('With filled fields', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: fieldValue1, [fieldName2]: fieldValue2})

describe('When is submited', () => {

test('With empty values', () => {
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

test('With filled fields', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: fieldValue1, [fieldName2]: fieldValue2})
})

})

describe('When is reseted and then submited', () => {

test('With empty values before reset', () => {
form.simulate('reset')
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

test('With filled fields before reset', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('reset')
form.simulate('submit')

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

})

})

describe('When is reseted and then submited', () => {

test('With empty values before reset', () => {
form.simulate('reset')
form.simulate('submit')
describe('Without an submit handler', () => {

let dom, form, input1, input2, formCtrl
beforeEach(() => {
dom = mount((
<FormProvider>
<Form name={formName1}>
<Input form={formName1} name={fieldName1} />
<Input form={formName1} name={fieldName2} />
</Form>
</FormProvider>
))
form = dom.find(Form)
formCtrl = dom.state('forms')[formName1]
input1 = dom.find(`input[name="${fieldName1}"]`)
input2 = dom.find(`input[name="${fieldName2}"]`)
})

describe('When is submited', () => {

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
test('With empty values', () => {
form.simulate('submit')

expect(formCtrl.values).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

test('With filled fields', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('submit')

expect(formCtrl.values).toEqual({[fieldName1]: fieldValue1, [fieldName2]: fieldValue2})
})

})
test('With filled fields before reset', () => {

describe('When is reseted and then submited', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('reset')
form.simulate('submit')
test('With empty values before reset', () => {
form.simulate('reset')
form.simulate('submit')

expect(formCtrl.values).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

expect(submited).toEqual({[fieldName1]: '', [fieldName2]: ''})
test('With filled fields before reset', () => {

input1.simulate('change', {target: {value: fieldValue1}})
input2.simulate('change', {target: {value: fieldValue2}})
form.simulate('reset')
form.simulate('submit')

expect(formCtrl.values).toEqual({[fieldName1]: '', [fieldName2]: ''})
})

})


})


})

})

describe('About <FormControl /> component', () => {

const formName = 'formName1'
const FormTest = ({name, children}) => <Form name={name}>{children}</Form>
const formName = 'formName1'

describe('The <FormControl /> property injection', () => {
describe('The <FormControl/> children', () => {

let dom, form
beforeEach(() => {
test('With two or more childrens', () => {

expect(() => {
mount((
<FormProvider>
<FormControl form={formName} inject={formControlInject}>
<FormTest />
<FormTest />
</FormControl>
</FormProvider>
))
}).toThrowError(`The FormControl component for "${formName}" should have only one child, but has 2.`)

dom = mount((
<FormProvider>
<FormControl form={formName} inject={formControlInject}>
<FormTest />
</FormControl>
</FormProvider>
))
form = dom.find(FormTest)
})
})

describe('The <FormControl /> property injection', () => {

describe('With the inject property', () => {

test('Injects formCtrl property', () => {
expect(form.prop('formCtrl')).toBeDefined()
let dom, form
beforeEach(() => {

dom = mount((
<FormProvider>
<FormControl form={formName} inject={formControlInject}>
<FormTest />
</FormControl>
</FormProvider>
))
form = dom.find(FormTest)
})

test('Injects formCtrl property', () => {
expect(form.prop('formCtrl')).toBeDefined()
})

test('Injects name (formName) property', () => {
expect(form.prop('name')).toBe(formName)
})
})

test('Injects form (formName) property', () => {
expect(form.prop('name')).toBe(formName)
describe('Without the inject property', () => {

const FormTest2 = ({formCtrl, children}) => <Form name={formCtrl.formName}>{children}</Form>

let dom, form
beforeEach(() => {

dom = mount((
<FormProvider>
<FormControl form={formName}>
<FormTest2 />
</FormControl>
</FormProvider>
))
form = dom.find(FormTest2)
})

test('Does not injects formCtrl property', () => {
expect(form.prop('formCtrl')).toBeDefined()
})

test('Does not injects name (formName) property', () => {
expect(form.prop('name')).not.toBeDefined()
})

})

})
Expand Down
2 changes: 1 addition & 1 deletion packages/react-formctrl/__tests__/provider.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {mount, configure} from 'enzyme';

import {FormProvider, Form, Field} from '../src'

import {inputInject} from '../tests-utils'
import {inputInject} from './field.test'

configure({adapter: new Adapter()})

Expand Down
Loading

0 comments on commit 8c40654

Please sign in to comment.