Merge pull request #451 from dod-ccpo/jester

Run JS tests with Jest + vue-test-utils

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

README.md

@@ -154,18 +154,30 @@ Tests require a test database:
 createdb atat_test
 ```
 
-To run lint, static analysis, and unit tests:
+To run lint, static analysis, and Python unit tests:
 
     script/test
 
-To run only the unit tests:
+To run only the Python unit tests:
 
     pipenv run python -m pytest
 
-To re-run tests each time a file is changed:
+To re-run Python tests each time a file is changed:
 
     pipenv run ptw
 
+This project also runs Javascript tests using jest. To run the Javascript tests:
+
+    yarn test
+
+To re-run the Javascript tests each time a file is changed:
+
+    yarn test:watch
+
+To generate coverage reports for the Javascript tests:
+
+    yarn test:coverage
+
 ### Selenium Tests
 
 Selenium tests rely on BrowserStack. In order to run the Selenium tests

js/components/__tests__/__snapshots__/local_datetime.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocalDatetime allows specifying a custom format 1`] = `<time datetime="1977-05-25 00:00:00">May 25th 77</time>`;
+
+exports[`LocalDatetime matches snapshot 1`] = `<time datetime="1977-05-25 00:00:00">May 25 1977 0:00</time>`;

js/components/__tests__/local_datetime.test.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils'
+
+import LocalDatetime from '../local_datetime'
+
+
+describe('LocalDatetime', () => {
+  const wrapper = shallowMount(LocalDatetime, { propsData: { timestamp: '1977-05-25 00:00:00' } })
+
+  it('renders a time element', () => {
+    expect(wrapper.html()).toContain('<time')
+    expect(wrapper.html()).toContain('May 25 1977')
+  })
+
+  it('matches snapshot', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('allows specifying a custom format', () => {
+    const wrapperWithCustomFormat = shallowMount(
+      LocalDatetime, {
+        propsData: {
+          timestamp: '1977-05-25 00:00:00',
+          format: 'MMM Do YY'
+        }
+      }
+    )
+    expect(wrapperWithCustomFormat).toMatchSnapshot()
+  })
+})

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "watch": "parcel watch js/index.js -d static/assets --public-url /static/assets -o index.js --no-autoinstall",
     "build": "parcel build js/index.js -d static/assets --public-url /static/assets -o index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch"
   },
   "author": "",
   "license": "MIT",
@@ -25,12 +27,27 @@
     "vue-text-mask": "^6.1.2"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.25",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^23.6.0",
+    "babel-preset-env": "^1.7.0",
+    "jest": "^23.6.0",
+    "jest-serializer-vue": "^2.0.2",
     "node-sass": "^4.9.2",
-    "parcel-bundler": "^1.10.3"
+    "parcel-bundler": "^1.10.3",
+    "vue-template-compiler": "2.5.15"
   },
   "browserslist": [
     "last 3 version",
     "> 5%",
     "IE 10"
+  ],
+  "jest": {
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
     ]
+  }
 }

script/cibuild

@@ -13,6 +13,9 @@ PYTHON_FILES="./app.py ./atst/** ./config"
 # Enable Python testing
 RUN_PYTHON_TESTS="true"
 
+# Enable Javascript testing
+RUN_JS_TESTS="true"
+
 # Reset the DB, since the one script/setup created might not be persisted
 RESET_DB="true"
 

script/include

@@ -1 +1 @@
-Subproject commit 0a8165c27591cac67959b1f6aff8799af8933e98
+Subproject commit 78c51d8dd29b47fd42570896daaded5e2181e923