Replace jsonapi-mock with fake-json-api-server.

Author: mrichar1

examples/fake-json-api-server.js

@@ -0,0 +1,9 @@
+// server.js
+var FakeServer = require('fake-json-api-server/src/nodeServer');
+
+var resources = require('./testapp.json')
+
+new FakeServer({
+    port: 3000,
+    resources: resources
+});

examples/testapp/testapp.json examples/testapp.jsonexamples/testapp/testapp.json renamed to examples/testapp.json

@@ -27,7 +27,7 @@
         <input :id='"input_" + name' v-model="widget[name]"/>
       </div>
       <div>
-        <button @click="patchRecord(widget)">Submit</button>
+        <button name="patch_button" @click="patchRecord(widget)">Patch</button>
       </div>
     </div>
   </div>

examples/testapp/src/components/JsonapiVuex.vue

@@ -8,7 +8,7 @@ Vue.use(Vuex)
 
 const api = axios.create({
   // connect to local jsonapi-mock server
-  baseURL: 'http://localhost:3004',
+  baseURL: 'http://localhost:3000',
   headers: {
     'Content-Type': 'application/vnd.api+json',
     'Accept': 'application/vnd.api+json'

examples/testapp/src/store.js

@@ -6,6 +6,12 @@ module.exports = {
     }
   },
   "test_settings": {
+    "Firefox": {
+      "desiredCapabilities": {
+        "browserName": "firefox",
+        "acceptInsecureCerts": true,
+      }
+    },
     "FirefoxHeadless": {
       "desiredCapabilities": {
         "browserName": "firefox",

nightwatch.config.js

@@ -18,8 +18,8 @@
     "eslint": "^5.6.1",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-vue": "^4.7.1",
+    "fake-json-api-server": "^1.6.0",
     "geckodriver": "^1.14.1",
-    "jsonapi-mock": "^1.4.41",
     "karma": "^3.0.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.2",
@@ -62,11 +62,11 @@
     "url": "https://github.com/mrichar1/jsonapi-vuex/issues"
   },
   "scripts": {
-    "test": "npm run unit -- --single-run",
+    "test": "npm run unit -- --single-run && npm run e2e",
     "unit": "karma start",
-    "e2e": "concurrently --success first --kill-others \"npm:jsonapimock\" \"vue-cli-service test:e2e --env FirefoxHeadless\"",
-    "testapp": "concurrently --kill-others \"npm:jsonapimock\" \"vue-cli-service serve\"",
-    "jsonapimock": "cp examples/testapp/testapp.json examples/testapp/tmp.json && jsonapi-mock"
+    "e2e": "concurrently --success first --kill-others \"npm:fakeapiserver\" \"vue-cli-service test:e2e --env FirefoxHeadless\"",
+    "testapp": "concurrently --kill-others \"npm:fakeapiserver\" \"vue-cli-service serve\"",
+    "fakeapiserver": "node examples/fake-json-api-server.js"
   },
   "dependencies": {
     "jsonpath": "^1.0.0",

package.json

@@ -39,6 +39,12 @@ module.exports = {
     browser.clearValue('#input_color')
     browser.setValue('#input_color', 'red')
 
+    // Move so that element is in view (Firefox doesn't render items off-screen)
+    browser.getLocationInView('button[name=patch_button]')
+    browser.click('button[name=patch_button]')
+    // Pause for API response
+    browser.pause(1000)
+
     // Check changes propagate
     be.element('#span_name').text.to.equal('cog')
     be.element('#span_color').text.to.equal('red')