fix: nightwatch integration

The generated applications were failing out of the box, and went unnoticed as nightwatch is not built on CI.

I took inspiration from https://github.com/nightwatchjs/nightwatch-plugin-vue and https://github.com/nightwatchjs/create-nightwatch to make the setup a bit lighter and functional (we now let nightwatch start vite directly).

The pnpm test script should now work for every combination generated.

Author: cexbrayat

pnpm-lock.yaml

@@ -1,9 +1,6 @@
 #!/usr/bin/env zx
 import 'zx/globals'
 
-// Vitest would otherwise enable watch mode by default.
-process.env.CI = '1'
-
 const playgroundDir = path.resolve(__dirname, '../playground/')
 let projects = fs
   .readdirSync(playgroundDir, { withFileTypes: true })
@@ -21,7 +18,13 @@ for (const projectName of projects) {
   cd(path.resolve(playgroundDir, projectName))
   const packageJSON = require(path.resolve(playgroundDir, projectName, 'package.json'))
 
-  console.log(`Building ${projectName}`)
+  console.log(`
+  
+#####
+Building ${projectName}
+#####
+  
+  `)
   await $`pnpm build`
 
   if ('@playwright/test' in packageJSON.devDependencies) {
@@ -35,6 +38,16 @@ for (const projectName of projects) {
 
   if ('test:unit' in packageJSON.scripts) {
     console.log(`Running unit tests in ${projectName}`)
-    await $`pnpm test:unit`
+    if (projectName.includes('vitest') || projectName.includes('with-tests')) {
+      // Vitest would otherwise enable watch mode by default.
+      await $`CI=1 pnpm test:unit`
+    } else {
+      await $`pnpm test:unit`
+    }
+  }
+
+  if ('type-check' in packageJSON.scripts) {
+    console.log(`Running type-check in ${projectName}`)
+    await $`pnpm type-check`
   }
 }

scripts/test.mjs

@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
-    "vite": "^5.0.1"
+    "vite": "^5.0.2"
   }
 }

template/base/package.json

@@ -1,8 +1,11 @@
 {
   "scripts": {
-    "test:unit": "nightwatch src/components/**/__tests__/*"
+    "test:unit": "nightwatch src/**/__tests__/*"
   },
   "dependencies": {
     "vue": "^3.3.8"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.2"
   }
 }

template/config/nightwatch-ct/package.json

@@ -30,10 +30,11 @@ module.exports = {
   plugins: ['@nightwatch/vue'],
 
   // See https://nightwatchjs.org/guide/concepts/test-globals.html#external-test-globals
-  globals_path: 'nightwatch/globals.js',
+  globals_path: '',
 
   vite_dev_server: {
-    start_vite: false
+    start_vite: true,
+    port: process.env.CI ? 4173 : 5173
   },
 
   webdriver: {},

template/config/nightwatch/nightwatch.conf.js

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "test:e2e": "nightwatch tests/e2e"
+    "test:e2e": "nightwatch tests/e2e/*"
   },
   "devDependencies": {
     "nightwatch": "^3.3.2",
@@ -9,7 +9,6 @@
     "@types/nightwatch": "^2.3.28",
     "geckodriver": "^4.2.1",
     "chromedriver": "^119.0.0",
-    "ts-node": "^10.9.1",
-    "wait-on": "^7.2.0"
+    "ts-node": "^10.9.1"
   }
 }

template/config/nightwatch/nightwatch/globals.js

@@ -4,10 +4,7 @@ describe('My First Test', function () {
   })
 
   it('visits the app root url', function () {
-    browser.assert
-      .textContains('.green', 'You did it!')
-      .assert.elementHasCount('.wrapper nav a', 2)
-      .strictClick('.wrapper nav a:last-child')
+    browser.assert.textContains('.green', 'You did it!')
   })
 
   after((browser) => browser.end())

template/config/nightwatch/package.json

@@ -3,14 +3,15 @@
   "compilerOptions": {
     "target": "ESNext",
     "module": "commonjs",
+    "moduleResolution": "node",
     "composite": true,
     "rootDir": "../",
     "lib": ["ESNext", "dom"],
     "types": ["nightwatch"]
   },
   "include": ["../node_modules/@nightwatch/**/*", "../src/components/**/*", "../tests/e2e/**/*"],
   "ts-node": {
-    "files": true
+    "transpileOnly": true
   },
   "files": ["nightwatch.d.ts"]
 }

template/config/nightwatch/tests/e2e/example.js

@@ -1,5 +1 @@
-export const FILES_TO_FILTER = [
-  'nightwatch.e2e.conf.js',
-  'nightwatch.component.conf.js',
-  'globals.js'
-]
+export const FILES_TO_FILTER = ['nightwatch.e2e.conf.js', 'nightwatch.component.conf.js']