Review comments

Ultimaker · Nov 7, 2018 · e4d7564 · e4d7564
1 parent 29a0fb3
commit e4d7564
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/src/components/input_fields/__tests__/code_field.test.tsx b/src/components/input_fields/__tests__/code_field.test.tsx
@@ -225,16 +225,20 @@ describe('The code input field component', () => {
         props.type = 'number';
         wrapper = mount(<CodeField {...props} />);
         wrapper.find('input').at(3).prop('onKeyDown')({key: 'ArrowUp', preventDefault});
-        expect(preventDefault).toHaveBeenCalledTimes(1);
         expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '2019');
+        wrapper.find('input').at(3).prop('onKeyDown')({key: 'ArrowUp', preventDefault});
+        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '2010');
+        expect(preventDefault).toHaveBeenCalledTimes(2);
     });
 
     it('should handle arrow down key for numbers', () => {
         props.type = 'number';
         wrapper = mount(<CodeField {...props} />);
         wrapper.find('input').at(2).prop('onKeyDown')({key: 'ArrowDown', preventDefault});
-        expect(preventDefault).toHaveBeenCalledTimes(1);
         expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '2008');
+        wrapper.find('input').at(2).prop('onKeyDown')({key: 'ArrowDown', preventDefault});
+        expect(preventDefault).toHaveBeenCalledTimes(2);
+        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '2098');
     });
 
     it('should handle arrow up key for text', () => {

diff --git a/src/components/input_fields/__tests__/search_field.test.tsx b/src/components/input_fields/__tests__/search_field.test.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2018 Ultimaker B.V.
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import {mount, shallow} from 'enzyme'
 
 // component
 import SearchField, {SearchFieldProps} from '../search_field';
@@ -17,12 +17,12 @@ describe('The search field component', () => {
     beforeEach(() => {
         props = {
             id: 'testInputField',
-            value: "2018",
+            value: '2018',
             onChangeHandler: jest.fn().mockImplementation((id, value) => props.id === id && wrapper.setProps({value})),
             labelLayoutWidth: '1/1',
             labelWidthBreakpoint: 'sm',
             staticField: false,
-            placeholder: "placeholder text",
+            placeholder: 'placeholder text',
         };
         inputRef = {focus: jest.fn()}
 
@@ -39,7 +39,7 @@ describe('The search field component', () => {
 
     it('should render a null', () => {
         wrapper.setProps({value: null});
-        expect(wrapper.find(DefaultInputField).prop("value")).toBeNull();
+        expect(wrapper.find(DefaultInputField).prop('value')).toBeNull();
         expect(wrapper.find(PendingIcon)).toHaveLength(1);
         wrapper.find(Button).prop('onClickHandler')();
         expect(inputRef.focus).toHaveBeenCalled();
@@ -66,21 +66,27 @@ describe('The search field component', () => {
     })
 
     it('should render a static text', () => {
-        wrapper.setProps({staticField: true, children: "a child"})
-        expect(wrapper.find(DefaultInputField).prop("children")).toEqual(props.value);
-        expect(wrapper.find(DefaultInputField).prop("inputChildren")).toEqual("a child");
+        wrapper.setProps({staticField: true, children: 'a child'})
+        expect(wrapper.find(DefaultInputField).prop('children')).toEqual(props.value);
+        expect(wrapper.find(DefaultInputField).prop('inputChildren')).toEqual('a child');
     })
 
     it('should set the field maximum length', () => {
         wrapper.setProps({maxLength: 100});
-        expect(wrapper.find(DefaultInputField).prop("maxLength")).toEqual(100);
+        expect(wrapper.find(DefaultInputField).prop('maxLength')).toEqual(100);
+    })
+
+    it('should focus on mount', () => {
+        props.focusOnLoad = true;
+        wrapper = mount(<SearchField {...props} />);
+        expect(document.activeElement.id).toEqual(props.id);
     })
 
     it('should call the callback', () => {
         expect(props.onChangeHandler).not.toHaveBeenCalled();
-        wrapper.find(DefaultInputField).prop("onChangeHandler")(props.id, "2016");
-        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, "2016");
-        wrapper.find(DefaultInputField).prop("onChangeHandler")(props.id, "");
-        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, "");
+        wrapper.find(DefaultInputField).prop('onChangeHandler')(props.id, '2016');
+        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '2016');
+        wrapper.find(DefaultInputField).prop('onChangeHandler')(props.id, '');
+        expect(props.onChangeHandler).toHaveBeenLastCalledWith(props.id, '');
     });
 });
diff --git a/src/components/input_fields/code_field.tsx b/src/components/input_fields/code_field.tsx
@@ -202,9 +202,9 @@ export default class CodeField extends React.Component<CodeFieldProps, CodeField
             ArrowRight: () => this._focusOnPromptInput(index + 1),
             // arrow up / down let you increase / decrease numbers
             ArrowUp: () => type == 'number' &&
-                this._changeValue(index, values[index] && String.fromCharCode(values[index].charCodeAt(0) + 1), -1),
+                this._changeValue(index, values[index] && ((parseInt(values[index]) + 1) % 10).toString(), -1),
             ArrowDown: () => type == 'number' &&
-                this._changeValue(index, values[index] && String.fromCharCode(values[index].charCodeAt(0) - 1), -1),
+                this._changeValue(index, values[index] && ((parseInt(values[index]) + 9) % 10).toString(), -1),
             // home/end let you go to the beginning and end of the code.
             Home: () => this._focusOnPromptInput(0),
             End: () => this._focusOnPromptInput(maxLength - 1),

diff --git a/src/components/input_fields/search_field.tsx b/src/components/input_fields/search_field.tsx
@@ -42,6 +42,15 @@ export default class SearchField extends React.Component<SearchFieldProps, {}> {
         this._focus = this._focus.bind(this);
     }
 
+    /**
+     * Focuses on this field during mount if required.
+     */
+    componentDidMount(): void {
+        if (this.props.focusOnLoad) {
+            this._focus();
+        }
+    }
+
     /**
      * Focuses on this field.
      * @private

diff --git a/src/stories/form.stories.tsx b/src/stories/form.stories.tsx
@@ -23,7 +23,6 @@ import CodeField from '../components/input_fields/code_field';
 import RangeSlider from '../components/range_slider';
 import ProfileIcon from '../components/icons/profile_icon';
 import Image from '../components/image';
-import enumerate = Reflect.enumerate
 
 const stories = storiesOf('Forms', module);
 
@@ -356,8 +355,6 @@ stories.add('Search field', withState({ value: null })
                         placeholder={text('Placeholder', 'Search')}
                         validationError={text('Validation error message', '')}
                         focusOnLoad={boolean('Focus on load', true)}
-                        staticField={boolean('Static field', false)}
-                        required={boolean('Required', false)}
                         infoLinkURL={text('Info link URL', '')}
                         infoText={text('Info text', '')}
                         preLabelElement={text('Pre label element', '')}