hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 01:51:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

added test for prop state change

Browse source
This commit is contained in:
eric-burel 2018-11-26 14:52:35 +01:00
parent f30efa5299
commit 463b954be2
1 changed files with 57 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
packages/vulcan-forms/test/components.test.js
View file

@ -7,9 +7,10 @@ import FormComponent from '../lib/components/FormComponent';
import '../lib/components/FormNestedArray';
import expect from 'expect';
import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Adapter from 'enzyme-adapter-react-16.3';
import { Components } from 'meteor/vulcan:core';
// setup enzyme
// TODO: write a reusable helper and move this to the tests setup
Enzyme.configure({ adapter: new Adapter() });
@ -43,7 +44,7 @@ const fooSchema = {
type: String,
...permissions
}
}
};
//
const addressSchema = {
street: {
@ -140,7 +141,7 @@ const createDummyCollection = (typeName, schema) =>
resolvers: getDefaultResolvers(typeName + 's'),
mutations: getDefaultMutations(typeName + 's')
});
const Foos = createDummyCollection('Foo', fooSchema)
const Foos = createDummyCollection('Foo', fooSchema);
const ArrayOfObjects = createDummyCollection('ArrayOfObject', arrayOfObjectSchema);
const Objects = createDummyCollection('Object', objectSchema);
const ArrayOfUrls = createDummyCollection('ArrayOfUrl', arrayOfUrlSchema);
@ -185,20 +186,20 @@ describe('vulcan-forms/components', function() {
// since some props are now handled by HOC we need to provide them manually
const defaultProps = {
collectionName: '',
typeName:''
}
typeName: ''
};
describe('Form generation', function () {
describe('Form generation', function() {
// getters
const getArrayFormGroup = wrapper => wrapper.find('FormGroup').find({ name: 'addresses' });
const getFields = arrayFormGroup => arrayFormGroup.prop('fields');
describe('basic collection - no nesting', function () {
it('shallow render', function () {
describe('basic collection - no nesting', function() {
it('shallow render', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={Addresses} />);
expect(wrapper).toBeDefined();
});
});
describe('nested object (not in array)', function () {
describe('nested object (not in array)', function() {
it('shallow render', () => {
const wrapper = shallowWithContext(<Form collectionName="" collection={Objects} />);
expect(wrapper).toBeDefined();
@ -225,18 +226,18 @@ describe('vulcan-forms/components', function() {
expect(addressField.nestedSchema.street).toBeDefined();
});
});
describe('array of objects', function () {
describe('array of objects', function() {
it('shallow render', () => {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfObjects} />);
expect(wrapper).toBeDefined();
});
it('render a FormGroup for addresses', function () {
it('render a FormGroup for addresses', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfObjects} />);
const formGroup = wrapper.find('FormGroup').find({ name: 'addresses' });
expect(formGroup).toBeDefined();
expect(formGroup).toHaveLength(1);
});
it('passes down the array child fields', function () {
it('passes down the array child fields', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfObjects} />);
const formGroup = getArrayFormGroup(wrapper);
const fields = getFields(formGroup);
@ -245,8 +246,8 @@ describe('vulcan-forms/components', function() {
expect(arrayField.nestedFields).toHaveLength(Object.keys(addressSchema).length);
});
});
describe('array with custom children inputs (e.g array of url)', function () {
it('shallow render', function () {
describe('array with custom children inputs (e.g array of url)', function() {
it('shallow render', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfUrls} />);
expect(wrapper).toBeDefined();
});
@ -258,13 +259,13 @@ describe('vulcan-forms/components', function() {
expect(arrayField.arrayField).toBeDefined();
});
});
describe('array of objects with custom children inputs', function () {
it('shallow render', function () {
describe('array of objects with custom children inputs', function() {
it('shallow render', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfCustomObjects} />);
expect(wrapper).toBeDefined();
});
// TODO: does not work, schema_utils needs an update
it.skip('passes down the custom input', function () {
it.skip('passes down the custom input', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayOfCustomObjects} />);
const formGroup = getArrayFormGroup(wrapper);
const fields = getFields(formGroup);
@ -272,46 +273,62 @@ describe('vulcan-forms/components', function() {
expect(arrayField.arrayField).toBeDefined();
});
});
describe('array with a fully custom input (array itself and children)', function () {
it('shallow render', function () {
describe('array with a fully custom input (array itself and children)', function() {
it('shallow render', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayFullCustom} />);
expect(wrapper).toBeDefined();
});
it('passes down the custom input', function () {
it('passes down the custom input', function() {
const wrapper = shallowWithContext(<Form collectionName="" collection={ArrayFullCustom} />);
const formGroup = getArrayFormGroup(wrapper);
const fields = getFields(formGroup);
const arrayField = fields[0];
expect(arrayField.arrayField).toBeDefined();
});
})
});
});
describe('Form state management', function(){
describe('Form state management', function() {
//const simulateKeyPresses = (wrapper, value) => {
// wrapper.find('input').first().simulate('change', {target:{value:'bar'}})
// return wrapper
//}
it('store typed value', function(){
console.log('context', context)
const wrapper = mountWithContext(<Form {...defaultProps} collection={Foos}/>)
console.log(wrapper.find('input').length)
console.log(wrapper.find('input').first)
wrapper.find('input').first().simulate('change', {target:{value:'bar'}})
console.log(wrapper.state())
//expect(wrapper.state())
// TODO: the change callback is triggerd but `foo` becomes null instead of "bar
// so it's added to the deletedValues and not changedValues
it.skip('store typed value', function() {
const wrapper = mountWithContext(<Form {...defaultProps} collection={Foos} />);
//console.log(wrapper.state());
wrapper
.find('input')
.first()
.simulate('change', { target:{value:'bar'} });
console.log(wrapper.find('input').first().html())
console.log(wrapper.state());
expect(wrapper.state().currentValues).toEqual({foo:'bar'})
});
// TODO: store those props in a config object of the Form
const RESET_PROPS = [
'collection', 'collectionName', 'typeName', 'document', 'schema', 'currentUser'
]
it('reset state when relevant props change', function() {
const wrapper = shallowWithContext(<Form {...defaultProps} collectionName="Foos" collection={Foos} />);
wrapper.setState({ currentValues: { foo: 'bar' } })
expect(wrapper.state('currentValues')).toEqual({foo:'bar'})
wrapper.setProps({ collectionName: 'Bars' })
expect(wrapper.state('currentValues')).toEqual({})
});
it('does not reset state when external prop change', function(){
//const prefilledProps = { bar: 'foo' } // TODO
const changeCallback= () => 'CHANGE'
const wrapper = shallowWithContext(<Form {...defaultProps} collection={Foos} changeCallback={changeCallback} />);
wrapper.setState({ currentValues: { foo: 'bar' } })
expect(wrapper.state('currentValues')).toEqual({foo:'bar'})
const newChangeCallback = () => 'NEW'
wrapper.setProps({ changeCallback: newChangeCallback })
expect(wrapper.state('currentValues')).toEqual({ foo:'bar'})
})
it('reset state when relevant props change', function(){
})
it('does not reset state when irrelevant props change', function(){
})
})
});
});
describe('FormComponent (select the components to render and handle state)', function() {