From e69de26fade24f4ca0101c28edf616ee5fd85971 Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Thu, 23 Nov 2023 15:55:03 +0100 Subject: [PATCH 1/2] 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. --- pnpm-lock.yaml | 9 ++++---- scripts/test.mjs | 23 +++++++++++++++---- template/base/package.json | 2 +- template/config/nightwatch-ct/package.json | 5 +++- template/config/nightwatch/nightwatch.conf.js | 5 ++-- .../config/nightwatch/nightwatch/globals.js | 23 ------------------- template/config/nightwatch/package.json | 5 ++-- .../config/nightwatch/tests/e2e/example.js | 5 +--- .../nightwatch/nightwatch/tsconfig.json | 5 ++-- 9 files changed, 37 insertions(+), 45 deletions(-) delete mode 100644 template/config/nightwatch/nightwatch/globals.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a9d6d972..5266a3194 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,7 +70,7 @@ importers: specifier: ^4.5.0 version: 4.5.0(vite@5.0.2)(vue@3.3.8) vite: - specifier: ^5.0.1 + specifier: ^5.0.2 version: 5.0.2(@types/node@18.18.10) template/config/cypress: @@ -128,15 +128,16 @@ importers: ts-node: specifier: ^10.9.1 version: 10.9.1(@types/node@18.18.10)(typescript@5.2.2) - wait-on: - specifier: ^7.2.0 - version: 7.2.0(debug@4.3.4) template/config/nightwatch-ct: dependencies: vue: specifier: ^3.3.8 version: 3.3.8(typescript@5.2.2) + devDependencies: + '@vue/test-utils': + specifier: ^2.4.2 + version: 2.4.2(vue@3.3.8) template/config/pinia: dependencies: diff --git a/scripts/test.mjs b/scripts/test.mjs index cab7b948d..fa1a43dcf 100644 --- a/scripts/test.mjs +++ b/scripts/test.mjs @@ -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` } } diff --git a/template/base/package.json b/template/base/package.json index 5798b2de0..fa842a775 100644 --- a/template/base/package.json +++ b/template/base/package.json @@ -10,6 +10,6 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^4.5.0", - "vite": "^5.0.1" + "vite": "^5.0.2" } } diff --git a/template/config/nightwatch-ct/package.json b/template/config/nightwatch-ct/package.json index 9299618bf..8982106f5 100644 --- a/template/config/nightwatch-ct/package.json +++ b/template/config/nightwatch-ct/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" } } diff --git a/template/config/nightwatch/nightwatch.conf.js b/template/config/nightwatch/nightwatch.conf.js index 8ff170000..05889c61f 100644 --- a/template/config/nightwatch/nightwatch.conf.js +++ b/template/config/nightwatch/nightwatch.conf.js @@ -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: {}, diff --git a/template/config/nightwatch/nightwatch/globals.js b/template/config/nightwatch/nightwatch/globals.js deleted file mode 100644 index 9387d355c..000000000 --- a/template/config/nightwatch/nightwatch/globals.js +++ /dev/null @@ -1,23 +0,0 @@ -const waitOn = require('wait-on') -const { setup, teardown } = require('@nightwatch/vue') - -const serverPort = process.env.CI ? '4173' : '5173' - -module.exports = { - before(done) { - setup() - waitOn({ - resources: [`http-get://localhost:${serverPort}`], - verbose: true, - headers: { - accept: 'text/html' - } - }).then(() => { - done() - }) - }, - - after() { - teardown() - } -} diff --git a/template/config/nightwatch/package.json b/template/config/nightwatch/package.json index a77d512d8..4f281a775 100644 --- a/template/config/nightwatch/package.json +++ b/template/config/nightwatch/package.json @@ -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" } } diff --git a/template/config/nightwatch/tests/e2e/example.js b/template/config/nightwatch/tests/e2e/example.js index cf2e3c862..43be3fce1 100644 --- a/template/config/nightwatch/tests/e2e/example.js +++ b/template/config/nightwatch/tests/e2e/example.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()) diff --git a/template/tsconfig/nightwatch/nightwatch/tsconfig.json b/template/tsconfig/nightwatch/nightwatch/tsconfig.json index 652d9bd6a..f4c07b500 100644 --- a/template/tsconfig/nightwatch/nightwatch/tsconfig.json +++ b/template/tsconfig/nightwatch/nightwatch/tsconfig.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/**/*"], + "include": ["../src/components/**/*", "../tests/e2e/**/*"], "ts-node": { - "files": true + "transpileOnly": true }, "files": ["nightwatch.d.ts"] } From 2aeb94194c467e472ea139c88c2097503321cbeb Mon Sep 17 00:00:00 2001 From: cexbrayat Date: Thu, 23 Nov 2023 10:18:44 +0100 Subject: [PATCH 2/2] feat: use type=module in generated projects For Cypress with Typescript, we needed to add a `module` option to the root tsconfig (see https://github.com/cypress-io/cypress/issues/24111). --- index.ts | 13 +++--- pnpm-lock.yaml | 44 +++---------------- template/base/package.json | 1 + .../{cypress.config.js => cypress.config.cjs} | 0 .../{cypress.config.js => cypress.config.cjs} | 0 ...nightwatch.conf.js => nightwatch.conf.cjs} | 0 ...elementHasCount.js => elementHasCount.cjs} | 0 .../{strictClick.js => strictClick.cjs} | 0 template/config/nightwatch/package.json | 5 ++- template/config/playwright/e2e/vue.spec.js | 2 +- ...wright.config.js => playwright.config.cjs} | 0 template/tsconfig/cypress-ct/tsconfig.json | 3 ++ template/tsconfig/vitest/tsconfig.json | 3 ++ utils/filterList.ts | 6 +-- 14 files changed, 25 insertions(+), 52 deletions(-) rename template/config/cypress-ct/{cypress.config.js => cypress.config.cjs} (100%) rename template/config/cypress/{cypress.config.js => cypress.config.cjs} (100%) rename template/config/nightwatch/{nightwatch.conf.js => nightwatch.conf.cjs} (100%) rename template/config/nightwatch/nightwatch/custom-assertions/{elementHasCount.js => elementHasCount.cjs} (100%) rename template/config/nightwatch/nightwatch/custom-commands/{strictClick.js => strictClick.cjs} (100%) rename template/config/playwright/{playwright.config.js => playwright.config.cjs} (100%) diff --git a/index.ts b/index.ts index 38b9598f2..a242aabab 100755 --- a/index.ts +++ b/index.ts @@ -447,17 +447,20 @@ async function init() { if (needsTypeScript) { // Convert the JavaScript template to the TypeScript - // Check all the remaining `.js` files: - // - If the corresponding TypeScript version already exists, remove the `.js` version. - // - Otherwise, rename the `.js` file to `.ts` + // Check all the remaining `.js`/`.cjs` files: + // - If the corresponding TypeScript version already exists, remove the `.js`/`.cjs` version. + // - Otherwise, rename the `.js`/`.cjs` file to `.ts` // Remove `jsconfig.json`, because we already have tsconfig.json // `jsconfig.json` is not reused, because we use solution-style `tsconfig`s, which are much more complicated. preOrderDirectoryTraverse( root, () => {}, (filepath) => { - if (filepath.endsWith('.js') && !FILES_TO_FILTER.includes(path.basename(filepath))) { - const tsFilePath = filepath.replace(/\.js$/, '.ts') + if ( + (filepath.endsWith('.js') || filepath.endsWith('.cjs')) && + !FILES_TO_FILTER.includes(path.basename(filepath)) + ) { + const tsFilePath = filepath.replace(/\.c?js$/, '.ts') if (fs.existsSync(tsFilePath)) { fs.unlinkSync(filepath) } else { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5266a3194..2ad2a44b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,7 +108,7 @@ importers: template/config/nightwatch: devDependencies: '@nightwatch/vue': - specifier: 0.4.5 + specifier: ^0.4.5 version: 0.4.5(@types/node@18.18.10)(vue@3.3.8) '@types/nightwatch': specifier: ^2.3.28 @@ -128,6 +128,9 @@ importers: ts-node: specifier: ^10.9.1 version: 10.9.1(@types/node@18.18.10)(typescript@5.2.2) + vite-plugin-nightwatch: + specifier: ^0.4.5 + version: 0.4.5(vue@3.3.8) template/config/nightwatch-ct: dependencies: @@ -238,29 +241,6 @@ packages: engines: {node: '>=6.9.0'} dev: true - /@babel/core@7.23.2: - resolution: {integrity: sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==} - engines: {node: '>=6.9.0'} - dependencies: - '@ampproject/remapping': 2.2.1 - '@babel/code-frame': 7.22.13 - '@babel/generator': 7.23.0 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-module-transforms': 7.23.0(@babel/core@7.23.2) - '@babel/helpers': 7.23.2 - '@babel/parser': 7.23.0 - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.2 - '@babel/types': 7.23.0 - convert-source-map: 2.0.0 - debug: 4.3.4(supports-color@8.1.1) - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - dev: true - /@babel/core@7.23.3: resolution: {integrity: sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==} engines: {node: '>=6.9.0'} @@ -374,20 +354,6 @@ packages: '@babel/types': 7.23.0 dev: true - /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.2): - resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.23.2 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.20 - dev: true - /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} engines: {node: '>=6.9.0'} @@ -1119,7 +1085,7 @@ packages: /@nightwatch/esbuild-utils@0.2.1: resolution: {integrity: sha512-OLvkmfYs0DxT3o0BKWi1dq+GTXAs6x0t2O6N5WaCab5d5mXb/Nc/zTXswZLpjXjn3kMjR1rZrIZ+xENWhhFlfQ==} dependencies: - '@babel/core': 7.23.2 + '@babel/core': 7.23.3 esbuild: 0.15.18 lodash.merge: 4.6.2 lodash.mergewith: 4.6.2 diff --git a/template/base/package.json b/template/base/package.json index fa842a775..b4f2277cf 100644 --- a/template/base/package.json +++ b/template/base/package.json @@ -1,5 +1,6 @@ { "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/template/config/cypress-ct/cypress.config.js b/template/config/cypress-ct/cypress.config.cjs similarity index 100% rename from template/config/cypress-ct/cypress.config.js rename to template/config/cypress-ct/cypress.config.cjs diff --git a/template/config/cypress/cypress.config.js b/template/config/cypress/cypress.config.cjs similarity index 100% rename from template/config/cypress/cypress.config.js rename to template/config/cypress/cypress.config.cjs diff --git a/template/config/nightwatch/nightwatch.conf.js b/template/config/nightwatch/nightwatch.conf.cjs similarity index 100% rename from template/config/nightwatch/nightwatch.conf.js rename to template/config/nightwatch/nightwatch.conf.cjs diff --git a/template/config/nightwatch/nightwatch/custom-assertions/elementHasCount.js b/template/config/nightwatch/nightwatch/custom-assertions/elementHasCount.cjs similarity index 100% rename from template/config/nightwatch/nightwatch/custom-assertions/elementHasCount.js rename to template/config/nightwatch/nightwatch/custom-assertions/elementHasCount.cjs diff --git a/template/config/nightwatch/nightwatch/custom-commands/strictClick.js b/template/config/nightwatch/nightwatch/custom-commands/strictClick.cjs similarity index 100% rename from template/config/nightwatch/nightwatch/custom-commands/strictClick.js rename to template/config/nightwatch/nightwatch/custom-commands/strictClick.cjs diff --git a/template/config/nightwatch/package.json b/template/config/nightwatch/package.json index 4f281a775..47ee4ae55 100644 --- a/template/config/nightwatch/package.json +++ b/template/config/nightwatch/package.json @@ -4,11 +4,12 @@ }, "devDependencies": { "nightwatch": "^3.3.2", - "@nightwatch/vue": "0.4.5", + "@nightwatch/vue": "^0.4.5", "@vitejs/plugin-vue": "^4.5.0", "@types/nightwatch": "^2.3.28", "geckodriver": "^4.2.1", "chromedriver": "^119.0.0", - "ts-node": "^10.9.1" + "ts-node": "^10.9.1", + "vite-plugin-nightwatch": "^0.4.5" } } diff --git a/template/config/playwright/e2e/vue.spec.js b/template/config/playwright/e2e/vue.spec.js index 3d62e3e51..3e5a3d02d 100644 --- a/template/config/playwright/e2e/vue.spec.js +++ b/template/config/playwright/e2e/vue.spec.js @@ -1,4 +1,4 @@ -const { test, expect } = require('@playwright/test'); +import { test, expect } from '@playwright/test'; // See here how to get started: // https://playwright.dev/docs/intro diff --git a/template/config/playwright/playwright.config.js b/template/config/playwright/playwright.config.cjs similarity index 100% rename from template/config/playwright/playwright.config.js rename to template/config/playwright/playwright.config.cjs diff --git a/template/tsconfig/cypress-ct/tsconfig.json b/template/tsconfig/cypress-ct/tsconfig.json index 27e23a607..f94125c91 100644 --- a/template/tsconfig/cypress-ct/tsconfig.json +++ b/template/tsconfig/cypress-ct/tsconfig.json @@ -1,5 +1,8 @@ { "files": [], + "compilerOptions": { + "module": "es2015" + }, "references": [ { "path": "./tsconfig.node.json" diff --git a/template/tsconfig/vitest/tsconfig.json b/template/tsconfig/vitest/tsconfig.json index 100cf6a8f..93f924f66 100644 --- a/template/tsconfig/vitest/tsconfig.json +++ b/template/tsconfig/vitest/tsconfig.json @@ -1,5 +1,8 @@ { "files": [], + "compilerOptions": { + "module": "es2015" + }, "references": [ { "path": "./tsconfig.node.json" diff --git a/utils/filterList.ts b/utils/filterList.ts index dd9f9c463..ef0e091a1 100644 --- a/utils/filterList.ts +++ b/utils/filterList.ts @@ -1,5 +1 @@ -export const FILES_TO_FILTER = [ - 'nightwatch.e2e.conf.js', - 'nightwatch.component.conf.js', - 'globals.js' -] +export const FILES_TO_FILTER = [] pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy