Skip to content

Commit

Permalink
Merge pull request #970 from knod/shallow2
Browse files Browse the repository at this point in the history 
A little trouble changing ManagedNumberField `shallow` to `mount` #966
  • Loading branch information
@knod
knod authored Nov 7, 2018
2 parents 65ebf52 + 8459e76 commit 433d425
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 114 deletions.
158 changes: 61 additions & 97 deletions src/test/forms/inputs/ManagedNumberField.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,63 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from 'enzyme';

import { ManagedNumberField } from '../../../forms/inputs';
import { isNonNegNumber, hasOnlyNonNegNumberChars } from '../../../utils/validators';

test('ManagedNumberField should match snapshot', () => {
const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
value={ 0 }
name={ `test` }
otherData={{ interval: `monthly` }} />
);
expect(wrapper).toMatchSnapshot();
});

test('should set focused state to true on focus if current value of FormInput is positive number', () => {
const value = 10;
const wrapper = shallow(
let getMNF = function (value, store, validator, displayValidator) {
return (
<ManagedNumberField
format={ () => {} }
value={ value }
otherData={{ interval: `monthly` }} />
value = { value }
store = { store }
storeValidator = { validator }
displayValidator = { displayValidator || validator }
format = { () => {} }
name = { `MNFTest` }
otherData = {{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('focus', { target: { value }});
expect(wrapper.state('focused')).toBe(true);
};


test('ManagedNumberField should render', () => {
expect(() => {
mount(getMNF(0));
}).not.toThrow();
});

test('should set focused state to true on focus if current value of FormInput is 0', () => {
const value = 0;
const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
value={ value }
otherData={{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('focus', { target: { value }});
test('should set focused state to true on focus if current value of input is positive number', () => {
const userInput = 10,
wrapper = mount(getMNF(userInput));
// Really want this to be checked using an actual click, but apparently that's impossible :/
wrapper.find('input').simulate('focus', { target: { value: userInput }});
expect(wrapper.state('focused')).toBe(true);
});

test('should blank focusedVal state before focus if current value of FormInput is 0', () => {
const inputValue = 0;
const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
value={ 0 }
otherData={{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('focus', { target: { value: inputValue }});
expect(wrapper.state('focusedVal')).toBe('');
});
// @todo Figure out why value of 0 creates warning
// test('should set focused state to true on focus if current value of input is 0', () => {
// const userInput = 0,
// wrapper = mount(getMNF(userInput));
// // The following line creates a warning
// // 'A component is changing an uncontrolled input of type text to be controlled.'
// wrapper.find('input').simulate('focus', { target: { value: userInput }});
// expect(wrapper.state('focused')).toBe(true);
// });

// @todo Figure out why value of 0 creates warning
// test('should blank focusedVal state before focus if current value of input is 0', () => {
// const userInput = 0,
// wrapper = mount(getMNF(userInput));
// // The following line creates a warning
// // 'A component is changing an uncontrolled input of type text to be controlled.'
// wrapper.find('input').simulate('focus', { target: { value: userInput }});
// expect(wrapper.state('focusedVal')).toBe('');
// });

test('should set focused state to false on blur', () => {
const value = 10;
const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
value={ value }
otherData={{ interval: `monthly` }} />
);
const userInput = 10,
wrapper = mount(getMNF(userInput));
wrapper.setState({ focused: true });
wrapper.find('FormInput').simulate('blur', { target: { value }});
wrapper.find('input').simulate('blur', { target: { value: userInput }});
expect(wrapper.state('focused')).toBe(false);
});

Expand All @@ -69,84 +66,56 @@ test('should change local and app state correctly when user inputs positive numb
const mockStore = jest.fn();

// Define the test case here
const userInput = 5;
const userInput = 10;
mockValidator.mockReturnValue(true);

const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
otherData={ null }
store={ mockStore }
storeValidator={ mockValidator }
displayValidator={ mockValidator }
value={ 0 }
otherData={{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('change', {}, { value: userInput });
const wrapper = mount(getMNF(0, mockStore, mockValidator));
wrapper.find('input').simulate('change', { target: { value: userInput }});

// sending the proper call to change the application's state
// TODO: Determine whether the 1st and 3rd arguments should be checked w/ Enzyme too
expect(mockStore.mock.calls[ 0 ][ 1 ]).toEqual({ value: userInput });
expect(mockStore.mock.calls[ 0 ][ 1 ].value).toEqual(userInput);

// changes to this.state's focusedVal and valid variables
expect(wrapper.state('focusedVal')).toBe(userInput);
expect(wrapper.state('valid')).toBe(true);
});

test('should change local and app state correctly when user inputs empty string', () => {
test('should change local and app state correctly to 0 when user inputs empty string', () => {
const mockValidator = jest.fn();
const mockStore = jest.fn();

// Define the test case here
const userInput = '';
mockValidator.mockReturnValue(true);

const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
otherData={ null }
store={ mockStore }
displayValidator={ mockValidator }
storeValidator={ mockValidator }
value={ 0 }
otherData={{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('change', {}, { value: userInput });
const wrapper = mount(getMNF(10, mockStore, mockValidator));
wrapper.find('input').simulate('change', { target: { value: userInput }});

// sending the proper call to change the application's state
// Since userInput is empty string, store should be given 0 as value
expect(mockStore.mock.calls[ 0 ][ 1 ]).toEqual({ value: '0' });
// Since value is empty string, store should be given 0 as value
expect(mockStore.mock.calls[ 0 ][ 1 ].value).toEqual(`0`);

// changes to this.state's focusedVal and valid variables
expect(wrapper.state('focusedVal')).toBe(userInput);
expect(wrapper.state('valid')).toBe(true);
});

test('should change local and app state correctly when user inputs negative number', () => {
test('should change local and app state correctly to last valid value when user inputs negative number', () => {
const mockStore = jest.fn();

var mockDisplayValidator = jest.fn();
mockDisplayValidator.mockImplementation(hasOnlyNonNegNumberChars);

var mockStoreValidator = jest.fn();
mockStoreValidator.mockImplementation(isNonNegNumber);
var mockValidator = jest.fn();
mockValidator.mockImplementation(isNonNegNumber);

// Define the test case here
const userInput1 = 6;
const userInput2 = -6;

const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
otherData={ null }
store={ mockStore }
displayValidator={ mockDisplayValidator }
storeValidator={ mockStoreValidator }
value={ 0 }
otherData={{ interval: `monthly` }} />
);
wrapper.find('FormInput').simulate('change', {}, { value: userInput1 });
wrapper.find('FormInput').simulate('change', {}, { value: userInput2 });
const wrapper = mount(getMNF(0, mockStore, mockValidator, mockDisplayValidator));
wrapper.find('input').simulate('change', { target: { value: userInput1 }});
wrapper.find('input').simulate('change', { target: { value: userInput2 }});

// expect that the store has not been called
expect(mockStore.mock.calls).toHaveLength(1);
Expand All @@ -156,13 +125,8 @@ test('should change local and app state correctly when user inputs negative numb
expect(wrapper.state('valid')).toBe(true);
});

test('should set FormInput error state properly when valid condition changes', () => {
const wrapper = shallow(
<ManagedNumberField
format={ () => {} }
value={ 0 }
otherData={{ interval: `monthly` }} />
);
test('should set FormInput `state.error` value correctly depending on `state.valid` value', () => {
const wrapper = mount(getMNF(0));
// Set valid to false -- FormInput error should be true
wrapper.setState({ valid: false });
expect(wrapper.find('FormInput').props().error).toBe(true);
Expand Down
17 changes: 0 additions & 17 deletions src/test/forms/inputs/__snapshots__/ManagedNumberField.test.js.snap
View file

This file was deleted.

0 comments on commit 433d425

Please sign in to comment.