add nightwatch tests

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /dist
+logs/
+tests/e2e/reports/
 
 
 # local env files

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -16,17 +17,20 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.21.0",
     "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-e2e-nightwatch": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-plugin-router": "~5.0.8",
     "@vue/cli-plugin-unit-jest": "~5.0.8",
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/test-utils": "^2.0.0-0",
-    "@babel/eslint-parser": "^7.21.0",
+    "chromedriver": "112",
     "eslint": "^8.38.0",
     "eslint-plugin-vue": "^9.11.0",
+    "geckodriver": "^3.0.1",
     "typescript": "~5.0.4",
     "vue-jest": "^5.0.0-0",
     "vue3-jest": "^27.0.0-alpha.1"

src/App.vue

@@ -2,8 +2,7 @@
   <button @click="increment">Click</button>
   <div v-if="count % 2 === 0">Count: {{ count }}. Count is even.</div>
   <div v-if="count % 2 !== 0">Count: {{ count }}. Count is odd.</div>
-
-  <div>PostID: {{ postId }}</div>
+  <div id="pid">PostID: {{ postId }}</div>
 </template>
 
 <script>

tests/e2e/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'no-unused-expressions': 'off'
+  }
+}

tests/e2e/custom-assertions/nop.js

@@ -0,0 +1 @@
+exports.assertion = {}

tests/e2e/globals.js

@@ -0,0 +1,104 @@
+///////////////////////////////////////////////////////////////////////////////////
+// Refer to the entire list of global config settings here:
+// https://github.com/nightwatchjs/nightwatch/blob/master/lib/settings/defaults.js#L16
+//
+// More info on test globals:
+//   https://nightwatchjs.org/gettingstarted/configuration/#test-globals
+//
+///////////////////////////////////////////////////////////////////////////////////
+
+module.exports = {
+  // this controls whether to abort the test execution when an assertion failed and skip the rest
+  // it's being used in waitFor commands and expect assertions
+  abortOnAssertionFailure: true,
+
+  // this will overwrite the default polling interval (currently 500ms) for waitFor commands
+  // and expect assertions that use retry
+  waitForConditionPollInterval: 500,
+
+  // default timeout value in milliseconds for waitFor commands and implicit waitFor value for
+  // expect assertions
+  waitForConditionTimeout: 5000,
+
+  'default': {
+    /*
+    The globals defined here are available everywhere in any test env
+    */
+
+    /*
+    myGlobal: function() {
+      return 'I\'m a method';
+    }
+    */
+  },
+
+  'firefox': {
+    /*
+    The globals defined here are available only when the chrome testing env is being used
+       i.e. when running with --env firefox
+    */
+    /*
+     * myGlobal: function() {
+     *   return 'Firefox specific global';
+     * }
+     */
+  },
+
+  /////////////////////////////////////////////////////////////////
+  // Global hooks
+  // - simple functions which are executed as part of the test run
+  // - take a callback argument which can be called when an async
+  //    async operation is finished
+  /////////////////////////////////////////////////////////////////
+  /**
+   * executed before the test run has started, so before a session is created
+   */
+  /*
+  before(cb) {
+    //console.log('global before')
+    cb();
+  },
+  */
+
+  /**
+   * executed before every test suite has started
+   */
+  /*
+  beforeEach(browser, cb) {
+    //console.log('global beforeEach')
+    cb();
+  },
+  */
+
+  /**
+   * executed after every test suite has ended
+   */
+  /*
+  afterEach(browser, cb) {
+    browser.perform(function() {
+      //console.log('global afterEach')
+      cb();
+    });
+  },
+  */
+
+  /**
+   * executed after the test run has finished
+   */
+  /*
+  after(cb) {
+    //console.log('global after')
+    cb();
+  },
+  */
+
+  /////////////////////////////////////////////////////////////////
+  // Global reporter
+  //  - define your own custom reporter
+  /////////////////////////////////////////////////////////////////
+  /*
+  reporter(results, cb) {
+    cb();
+  }
+   */
+}

tests/e2e/specs/test.js

@@ -0,0 +1,41 @@
+// For authoring Nightwatch tests, see
+// https://nightwatchjs.org/guide
+
+function testForm(browser) {
+  browser
+      .waitForElementVisible('#app')
+      .expect.element('#app > div').text.to.equal('Count: 0. Count is even.')
+
+  browser
+      .useXpath()
+      .click("//button[text()='Click']")
+      .useCss()
+      .expect.element('#app > div').text.to.equal('Count: 1. Count is odd.')
+
+  browser
+      .useXpath()
+      .click("//button[text()='Click']")
+      .useCss()
+      .expect.element('#app > div').text.to.equal('Count: 2. Count is even.')
+}
+
+module.exports = {
+  'default form interactivity': browser => {
+    browser.init()
+
+    testForm(browser);
+
+    browser.expect.element('#pid').text.to.equal('PostID:')
+
+  },
+
+  'post abc interactivity': browser => {
+    browser
+      .init()
+      .url("http://localhost:8080/abc")
+
+    testForm(browser);
+
+    browser.useCss().expect.element('#pid').text.to.equal('PostID: abc')
+  },
+}