diff options
Diffstat (limited to 'web/src/js/__tests__/components/Modal')
3 files changed, 320 insertions, 78 deletions
diff --git a/web/src/js/__tests__/components/Modal/OptionSpec.js b/web/src/js/__tests__/components/Modal/OptionSpec.js new file mode 100644 index 00000000..a275aee6 --- /dev/null +++ b/web/src/js/__tests__/components/Modal/OptionSpec.js @@ -0,0 +1,99 @@ +import React from 'react' +import renderer from 'react-test-renderer' +import { Options, ChoicesOption } from '../../../components/Modal/Option' + +describe('BooleanOption Component', () => { + let BooleanOption = Options['bool'], + onChangeFn = jest.fn(), + booleanOption = renderer.create( + <BooleanOption value={true} onChange={onChangeFn}/> + ), + tree = booleanOption.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle onChange', () => { + let input = tree.children[0].children[0], + mockEvent = { target: { checked: true }} + input.props.onChange(mockEvent) + expect(onChangeFn).toBeCalledWith(mockEvent.target.checked) + }) +}) + +describe('StringOption Component', () => { + let StringOption = Options['str'], + onChangeFn = jest.fn(), + stringOption = renderer.create( + <StringOption value="foo" onChange={onChangeFn}/> + ), + tree = stringOption.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle onChange', () => { + let mockEvent = { target: { value: 'bar' }} + tree.props.onChange(mockEvent) + expect(onChangeFn).toBeCalledWith(mockEvent.target.value) + }) + +}) + +describe('NumberOption Component', () => { + let NumberOption = Options['int'], + onChangeFn = jest.fn(), + numberOption = renderer.create( + <NumberOption value={1} onChange={onChangeFn}/> + ), + tree = numberOption.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle onChange', () => { + let mockEvent = {target: { value: '2'}} + tree.props.onChange(mockEvent) + expect(onChangeFn).toBeCalledWith(2) + }) +}) + +describe('ChoiceOption Component', () => { + let onChangeFn = jest.fn(), + choiceOption = renderer.create( + <ChoicesOption value='a' choices={['a', 'b', 'c']} onChange={onChangeFn}/> + ), + tree = choiceOption.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle onChange', () => { + let mockEvent = { target: {value: 'b'} } + tree.props.onChange(mockEvent) + expect(onChangeFn).toBeCalledWith(mockEvent.target.value) + }) +}) + +describe('StringOption Component', () => { + let onChangeFn = jest.fn(), + StringSequenceOption = Options['sequence of str'], + stringSequenceOption = renderer.create( + <StringSequenceOption value={['a', 'b']} onChange={onChangeFn}/> + ), + tree = stringSequenceOption.toJSON() + + it('should render correctly', () => { + expect(tree).toMatchSnapshot() + }) + + it('should handle onChange', () => { + let mockEvent = { target: {value: 'a\nb\nc\n'}} + tree.props.onChange(mockEvent) + expect(onChangeFn).toBeCalledWith(['a', 'b', 'c', '']) + }) +}) diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap index af587ae4..bfd855bd 100644 --- a/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap +++ b/web/src/js/__tests__/components/Modal/__snapshots__/ModalSpec.js.snap @@ -47,94 +47,173 @@ exports[`Modal Component should render correctly 2`] = ` className="modal-body" > <div - className="menu-entry" + className="form-horizontal" > - <label> - booleanOption - <input - checked={false} - onChange={[Function]} - title="foo" - type="checkbox" - /> - </label> - </div> - <div - className="menu-entry" - > - <label - htmlFor="" + <div + className="form-group" > - choiceOption - <select - name="choiceOption" - onChange={[Function]} - selected="b" - title="foo" + <div + className="col-xs-6" > - <option - value="a" + <label + htmlFor="booleanOption" > - - a - - </option> - <option - value="b" + booleanOption + </label> + <div + className="help-block small" > - - b - - </option> - <option - value="c" + foo + </div> + </div> + <div + className="col-xs-6" + > + <div + className="" > - - c - - </option> - </select> - </label> - </div> - <div - className="menu-entry" - > - <label> - intOption - <input - onChange={[Function]} - onKeyDown={[Function]} - title="foo" - type="number" - value={1} - /> - </label> - </div> - <div - className="menu-entry" - > - <label> - strOption - <input - onChange={[Function]} - onKeyDown={[Function]} - title="foo" - type="text" - value="str content" - /> - </label> + <div + className="checkbox" + > + <label> + <input + checked={false} + name="booleanOption" + onChange={[Function]} + onKeyDown={[Function]} + type="checkbox" + /> + Enable + </label> + </div> + </div> + </div> + </div> + <div + className="form-group" + > + <div + className="col-xs-6" + > + <label + htmlFor="choiceOption" + > + choiceOption + </label> + <div + className="help-block small" + > + foo + </div> + </div> + <div + className="col-xs-6" + > + <div + className="" + > + <select + className="form-control" + name="choiceOption" + onChange={[Function]} + onKeyDown={[Function]} + selected="b" + > + <option + value="a" + > + a + </option> + <option + value="b" + > + b + </option> + <option + value="c" + > + c + </option> + </select> + </div> + </div> + </div> + <div + className="form-group" + > + <div + className="col-xs-6" + > + <label + htmlFor="intOption" + > + intOption + </label> + <div + className="help-block small" + > + foo + </div> + </div> + <div + className="col-xs-6" + > + <div + className="" + > + <input + className="form-control" + name="intOption" + onChange={[Function]} + onKeyDown={[Function]} + type="number" + value={1} + /> + </div> + </div> + </div> + <div + className="form-group" + > + <div + className="col-xs-6" + > + <label + htmlFor="strOption" + > + strOption + </label> + <div + className="help-block small" + > + foo + </div> + </div> + <div + className="col-xs-6" + > + <div + className="has-error" + > + <input + className="form-control" + name="strOption" + onChange={[Function]} + onKeyDown={[Function]} + type="text" + value="str content" + /> + </div> + <div + className="small text-danger" + /> + </div> + </div> </div> </div> <div className="modal-footer" - > - <button - className="btn btn-primary" - type="button" - > - Save Changes - </button> - </div> + /> </div> </div> </div> diff --git a/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap new file mode 100644 index 00000000..514e0eb5 --- /dev/null +++ b/web/src/js/__tests__/components/Modal/__snapshots__/OptionSpec.js.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BooleanOption Component should render correctly 1`] = ` +<div + className="checkbox" +> + <label> + <input + checked={true} + onChange={[Function]} + type="checkbox" + /> + Enable + </label> +</div> +`; + +exports[`ChoiceOption Component should render correctly 1`] = ` +<select + onChange={[Function]} + selected="a" +> + <option + value="a" + > + a + </option> + <option + value="b" + > + b + </option> + <option + value="c" + > + c + </option> +</select> +`; + +exports[`NumberOption Component should render correctly 1`] = ` +<input + onChange={[Function]} + type="number" + value={1} +/> +`; + +exports[`StringOption Component should render correctly 1`] = ` +<input + onChange={[Function]} + type="text" + value="foo" +/> +`; + +exports[`StringOption Component should render correctly 2`] = ` +<textarea + onChange={[Function]} + rows={2} + value="a +b" +/> +`; |