chore: package test-e2e-composable-vue3, update deps, migrate to vite (…

…#1488) Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
vuejs · Sep 12, 2023 · 7ed4884 · 7ed4884
1 parent b0844ac
commit 7ed4884
Show file tree

Hide file tree

Showing 24 changed files with 2,890 additions and 879 deletions.
diff --git a/.github/workflows/test-e2e-composable.yml b/.github/workflows/test-e2e-composable.yml
@@ -56,6 +56,10 @@ jobs:
       - name: Build
         run: pnpm run build
 
+      - name: Build app
+        working-directory: ${{env.dir}}
+        run: pnpm run build
+
       - name: E2E tests
         working-directory: ${{env.dir}}
         run: pnpm run test:e2e

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,10 +10,10 @@ pnpm install
 
 Go to a package in `packages`.
 
-Build the library with watching:
+Build the library:
 
 ```
-pnpm run dev
+pnpm run build
 ```
 
 Run tests:

diff --git a/packages/test-e2e-composable-vue3/babel.config.js b/packages/test-e2e-composable-vue3/babel.config.js
diff --git a/packages/test-e2e-composable-vue3/cypress.config.ts b/packages/test-e2e-composable-vue3/cypress.config.ts
@@ -1,23 +1,26 @@
 import { defineConfig } from 'cypress'
+import vitePreprocessor from 'cypress-vite'
 import axios from 'axios'
 
-module.exports = defineConfig({
+export default defineConfig({
   fixturesFolder: 'tests/e2e/fixtures',
   screenshotsFolder: 'tests/e2e/screenshots',
   videosFolder: 'tests/e2e/videos',
   downloadsFolder: 'tests/e2e/downloads',
   e2e: {
+    baseUrl: 'http://localhost:8080',
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
-    setupNodeEvents (on, config) {
+    setupNodeEvents (on) {
       on('task', {
         async 'db:reset' () {
           await axios.get('http://localhost:4042/_reset')
           return true
         },
       })
+      on('file:preprocessor', vitePreprocessor())
     },
     specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
-    supportFile: 'tests/e2e/support/index.js',
+    supportFile: 'tests/e2e/support/index.ts',
   },
 })
diff --git a/...est-e2e-composable-vue3/public/index.html → packages/test-e2e-composable-vue3/index.html b/...est-e2e-composable-vue3/public/index.html → packages/test-e2e-composable-vue3/index.html
@@ -4,14 +4,13 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong> We're sorry but dashboard doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
     </noscript>
     <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/packages/test-e2e-composable-vue3/package.json b/packages/test-e2e-composable-vue3/package.json
@@ -3,40 +3,38 @@
   "version": "4.0.0-alpha.16",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test": "pnpm run test:e2e && kill-port 4042",
-    "test:e2e": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:client",
-    "test:e2e:client": "vue-cli-service test:e2e --mode production --headless",
-    "test:e2e:dev": "start-server-and-test api:dev 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:dev:client",
-    "test:e2e:dev:client": "vue-cli-service test:e2e --mode development",
+    "dev": "vite --port 8080",
+    "build": "vite build",
+    "preview": "vite preview --port 8080",
+    "test": "pnpm run test:e2e",
+    "test:e2e": "start-server-and-test preview http://localhost:8080 test:e2e:run",
+    "test:e2e:run": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:cy",
+    "test:e2e:cy": "cypress run --headless",
+    "test:e2e:dev": "cypress open",
     "api": "test-server --simulate-latency 50",
-    "api:dev": "test-server  --simulate-latency 500"
+    "api:dev": "test-server --simulate-latency 500"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.7",
+    "@apollo/client": "^3.7.16",
     "@vue/apollo-composable": "workspace:*",
     "@vue/apollo-util": "workspace:*",
-    "core-js": "^3.23.2",
-    "graphql": "^16.6.0",
+    "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.13.1",
-    "regenerator-runtime": "^0.13.9",
     "test-server": "workspace:*",
-    "vue": "^3.2.37",
-    "vue-demi": "^0.13.1",
-    "vue-router": "^4.0.16"
+    "vue": "^3.3.4",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@vue/cli-plugin-babel": "^5.0.6",
-    "@vue/cli-plugin-e2e-cypress": "^5.0.6",
-    "@vue/cli-plugin-typescript": "^5.0.6",
-    "@vue/cli-service": "^5.0.6",
-    "axios": "^0.24.0",
-    "cypress": "^12.14.0",
-    "kill-port": "^1.6.1",
-    "start-server-and-test": "^1.14.0",
-    "tailwindcss": "^1.9.6"
+    "vite": "^4.4.2",
+    "vue-tsc": "^1.8.3",
+    "typescript": "^5.0.2",
+    "cypress-vite": "^1.4.1",
+    "axios": "^1.4.0",
+    "cypress": "^12.17.0",
+    "start-server-and-test": "^2.0.0",
+    "tailwindcss": "^3.3.2",
+    "postcss": "^8.4.25",
+    "autoprefixer": "^10.4.14"
   }
 }
diff --git a/packages/test-e2e-composable-vue3/postcss.config.js b/packages/test-e2e-composable-vue3/postcss.config.js
@@ -1,8 +1,6 @@
-/* eslint-disable */
-
 module.exports = {
-  plugins: [
-    require('tailwindcss')(),
-    require('autoprefixer')(),
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }
diff --git a/packages/test-e2e-composable-vue3/public/favicon.ico b/packages/test-e2e-composable-vue3/public/favicon.ico
diff --git a/...e-vue3/src/assets/styles/tailwind.postcss → ...sable-vue3/src/assets/styles/tailwind.css b/...e-vue3/src/assets/styles/tailwind.postcss → ...sable-vue3/src/assets/styles/tailwind.css
@@ -2,4 +2,4 @@
 
 @tailwind components;
 
-@tailwind utilities;
+@tailwind utilities;
diff --git a/packages/test-e2e-composable-vue3/src/main.ts b/packages/test-e2e-composable-vue3/src/main.ts
@@ -3,7 +3,7 @@ import { DefaultApolloClient } from '@vue/apollo-composable'
 import { apolloClient } from './apollo'
 import App from './components/App.vue'
 import { router } from './router'
-import '@/assets/styles/tailwind.postcss'
+import '@/assets/styles/tailwind.css'
 
 const app = createApp({
   setup () {

diff --git a/packages/test-e2e-composable-vue3/tailwind.config.js b/packages/test-e2e-composable-vue3/tailwind.config.js
@@ -1,2 +1,8 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 }
diff --git a/...le-vue3/tests/e2e/specs/errorPolicy.cy.js → ...le-vue3/tests/e2e/specs/errorPolicy.cy.ts b/...le-vue3/tests/e2e/specs/errorPolicy.cy.js → ...le-vue3/tests/e2e/specs/errorPolicy.cy.ts
diff --git a/.../tests/e2e/specs/keepPreviousResult.cy.js → .../tests/e2e/specs/keepPreviousResult.cy.ts b/.../tests/e2e/specs/keepPreviousResult.cy.js → .../tests/e2e/specs/keepPreviousResult.cy.ts
@@ -1,5 +1,3 @@
-/// <reference types="Cypress" />
-
 describe('keepPreviousResult', () => {
   beforeEach(() => {
     cy.task('db:reset')

diff --git a/...-vue3/tests/e2e/specs/nullableQuery.cy.js → ...-vue3/tests/e2e/specs/nullableQuery.cy.ts b/...-vue3/tests/e2e/specs/nullableQuery.cy.js → ...-vue3/tests/e2e/specs/nullableQuery.cy.ts
@@ -1,5 +1,3 @@
-/// <reference types="Cypress" />
-
 describe('nullableQuery', () => {
   beforeEach(() => {
     cy.task('db:reset')

diff --git a/...omposable-vue3/tests/e2e/specs/test.cy.js → ...omposable-vue3/tests/e2e/specs/test.cy.ts b/...omposable-vue3/tests/e2e/specs/test.cy.js → ...omposable-vue3/tests/e2e/specs/test.cy.ts
@@ -1,5 +1,3 @@
-/// <reference types="Cypress" />
-
 describe('Vue 3 + Apollo Composable', () => {
   beforeEach(() => {
     cy.task('db:reset')

diff --git a/...osable-vue3/tests/e2e/support/commands.js → ...osable-vue3/tests/e2e/support/commands.ts b/...osable-vue3/tests/e2e/support/commands.js → ...osable-vue3/tests/e2e/support/commands.ts
diff --git a/...omposable-vue3/tests/e2e/support/index.js → ...omposable-vue3/tests/e2e/support/index.ts b/...omposable-vue3/tests/e2e/support/index.js → ...omposable-vue3/tests/e2e/support/index.ts
diff --git a/packages/test-e2e-composable-vue3/tsconfig.json b/packages/test-e2e-composable-vue3/tsconfig.json
@@ -12,7 +12,8 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "cypress"
     ],
     "paths": {
       "@/*": [

diff --git a/packages/test-e2e-composable-vue3/vite.config.ts b/packages/test-e2e-composable-vue3/vite.config.ts
@@ -0,0 +1,13 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})
diff --git a/packages/test-e2e-composable-vue3/vue.config.js b/packages/test-e2e-composable-vue3/vue.config.js
diff --git a/packages/test-e2e/package.json b/packages/test-e2e/package.json
@@ -13,7 +13,7 @@
     "api": "node server.js"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.7",
+    "@apollo/client": "^3.7.16",
     "@vue/apollo-components": "workspace:*",
     "@vue/apollo-option": "workspace:*",
     "apollo-server-express": "^2.25.4",

diff --git a/packages/vue-apollo-components/package.json b/packages/vue-apollo-components/package.json
@@ -47,7 +47,7 @@
     "vue": "^3.1.0"
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.7",
+    "@apollo/client": "^3.7.16",
     "@babel/core": "^7.18.5",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/plugin-transform-for-of": "^7.18.1",

diff --git a/packages/vue-apollo-composable/package.json b/packages/vue-apollo-composable/package.json
@@ -61,13 +61,13 @@
     }
   },
   "devDependencies": {
-    "@apollo/client": "^3.7.7",
+    "@apollo/client": "^3.7.16",
     "@types/throttle-debounce": "^5.0.0",
-    "graphql": "^16.6.0",
+    "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
     "nodemon": "^1.19.4",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.7.4",
-    "vue": "^3.2.37"
+    "rimraf": "^5.0.1",
+    "typescript": "^4.9.5",
+    "vue": "^3.3.4"
   }
 }