upgrade to latest packages

.eslintrc.js

@@ -8,11 +8,12 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
   },
   overrides: [
     {

.gitignore

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

README.md

@@ -20,6 +20,11 @@ yarn build
 yarn test:unit
 ```
 
+### Run your ui-clicking nightwatch.js tests
+```
+yarn test:e2e
+```
+
 ### Lints and fixes files
 ```
 yarn lint

jest.config.js

@@ -1,6 +1,12 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
+  moduleFileExtensions: ['vue', 'js', 'json', 'jsx'],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  testMatch: ["<rootDir>/tests/unit/*.spec.js"],
+  testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.vue$': 'vue-jest'
-  }
+    '^.+\\.vue$': 'vue3-jest',
+    '^.+\\js$': 'babel-jest',
+  },
 }

package.json

@@ -6,27 +6,33 @@
     "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": {
+    "@vue/vue3-jest": "^29.2.3",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@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": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "typescript": "~3.9.3",
-    "vue-jest": "^5.0.0-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>

src/router/index.js

@@ -5,7 +5,12 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    children: [{
+      path: ":postId",
+      name: "post",
+      component: Home
+    }]
   },
   {
     path: '/about',

src/store/index.js

@@ -2,8 +2,12 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
+    count:0
   },
   mutations: {
+    increment() {
+      this.state.count++;
+    }
   },
   actions: {
   },

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')
+  },
+}