Merge branch 'autofocus_student_matching' into 'master'

Autofocus student matching

See merge request zesje/zesje!114

.gitlab-ci.yml

@@ -27,10 +27,10 @@ build:
       - zesje/static
     expire_in: 1 week
 
-# test_js:
-#   <<: *node_modules
-#   stage: test
-#   script: yarn test:js
+test_js:
+  <<: *node_modules
+  stage: test
+  script: yarn test:js
 
 test_py:
   stage: test

client/views/students/SearchPanel.jsx

 import React from 'react'
+import ReactDOM from 'react-dom'
 
 import Notification from 'react-bulma-notification'
 import Fuse from 'fuse.js'
@@ -36,6 +37,10 @@ class SearchPanel extends React.Component {
       })
   }
 
+  componentDidUpdate (prevProps, prevState) {
+    ReactDOM.findDOMNode(this).getElementById('panel-input').focus()
+  }
+
   search = (event) => {
     const options = {
       shouldSort: true,
@@ -113,7 +118,7 @@ class SearchPanel extends React.Component {
         </p>
         <div className='panel-block'>
           <p className='control has-icons-left'>
-            <input className='input' type='text'
+            <input id='panel-input' className='input' type='text' autoFocus
               value={this.state.input} onChange={this.search} onKeyDown={this.specialKey} />
 
             <span className='icon is-left'>

client/views/students/__tests__/SearchPanel-test.jsx

+/* eslint-env jest */
+import React from 'react'
+import {mount} from 'enzyme'
+import SearchPanel from '../SearchPanel'
+
+test('Student id searchfield has focus on loading component', () => {
+  mount(<SearchPanel />)
+  const focusedElem = document.activeElement
+
+  expect(focusedElem.id).toEqual('panel-input')
+})

jest.config.js

 module.exports = {
   'moduleNameMapper': {
     '\\.(css|md)$': 'identity-obj-proxy'
-  }
+  },
+  'testPathIgnorePatterns': ['/node_modules/', '/.yarn-cache/'],
+  'modulePathIgnorePatterns': ['.yarn-cache'],
+  'setupTestFrameworkScriptFile': '<rootDir>testSetup.js'
 }

package.json

@@ -70,6 +70,8 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.3.0",
     "react-test-renderer": "^16.3.2",

testSetup.js

+// setup file
+var enzyme = require('enzyme')
+var Adapter = require('enzyme-adapter-react-16')
+
+enzyme.configure({ adapter: new Adapter() })