chore: package test-e2e-composable-vue3, update deps, migrate to vite (#1488)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>
This commit is contained in:
Viktor 2023-09-12 01:04:56 -07:00 committed by GitHub
parent b0844aca91
commit 7ed4884c76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 2655 additions and 644 deletions

View File

@ -56,6 +56,10 @@ jobs:
- name: Build - name: Build
run: pnpm run build run: pnpm run build
- name: Build app
working-directory: ${{env.dir}}
run: pnpm run build
- name: E2E tests - name: E2E tests
working-directory: ${{env.dir}} working-directory: ${{env.dir}}
run: pnpm run test:e2e run: pnpm run test:e2e

View File

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

View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
}

View File

@ -1,23 +1,26 @@
import { defineConfig } from 'cypress' import { defineConfig } from 'cypress'
import vitePreprocessor from 'cypress-vite'
import axios from 'axios' import axios from 'axios'
module.exports = defineConfig({ export default defineConfig({
fixturesFolder: 'tests/e2e/fixtures', fixturesFolder: 'tests/e2e/fixtures',
screenshotsFolder: 'tests/e2e/screenshots', screenshotsFolder: 'tests/e2e/screenshots',
videosFolder: 'tests/e2e/videos', videosFolder: 'tests/e2e/videos',
downloadsFolder: 'tests/e2e/downloads', downloadsFolder: 'tests/e2e/downloads',
e2e: { e2e: {
baseUrl: 'http://localhost:8080',
// We've imported your old cypress plugins here. // We've imported your old cypress plugins here.
// You may want to clean this up later by importing these. // You may want to clean this up later by importing these.
setupNodeEvents (on, config) { setupNodeEvents (on) {
on('task', { on('task', {
async 'db:reset' () { async 'db:reset' () {
await axios.get('http://localhost:4042/_reset') await axios.get('http://localhost:4042/_reset')
return true return true
}, },
}) })
on('file:preprocessor', vitePreprocessor())
}, },
specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}', specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
supportFile: 'tests/e2e/support/index.js', supportFile: 'tests/e2e/support/index.ts',
}, },
}) })

View File

@ -4,14 +4,13 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> </head>
<body> <body>
<noscript> <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> </noscript>
<div id="app"></div> <div id="app"></div>
<script type="module" src="./src/main.ts"></script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

View File

@ -3,40 +3,38 @@
"version": "4.0.0-alpha.16", "version": "4.0.0-alpha.16",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite --port 8080",
"build": "vue-cli-service build", "build": "vite build",
"test": "pnpm run test:e2e && kill-port 4042", "preview": "vite preview --port 8080",
"test:e2e": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:client", "test": "pnpm run test:e2e",
"test:e2e:client": "vue-cli-service test:e2e --mode production --headless", "test:e2e": "start-server-and-test preview http://localhost:8080 test:e2e:run",
"test:e2e:dev": "start-server-and-test api:dev 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:dev:client", "test:e2e:run": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:cy",
"test:e2e:dev:client": "vue-cli-service test:e2e --mode development", "test:e2e:cy": "cypress run --headless",
"test:e2e:dev": "cypress open",
"api": "test-server --simulate-latency 50", "api": "test-server --simulate-latency 50",
"api:dev": "test-server --simulate-latency 500" "api:dev": "test-server --simulate-latency 500"
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.7.7", "@apollo/client": "^3.7.16",
"@vue/apollo-composable": "workspace:*", "@vue/apollo-composable": "workspace:*",
"@vue/apollo-util": "workspace:*", "@vue/apollo-util": "workspace:*",
"core-js": "^3.23.2", "graphql": "^16.7.1",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6", "graphql-tag": "^2.12.6",
"graphql-ws": "^5.13.1",
"regenerator-runtime": "^0.13.9",
"test-server": "workspace:*", "test-server": "workspace:*",
"vue": "^3.2.37", "vue": "^3.3.4",
"vue-demi": "^0.13.1", "@vitejs/plugin-vue": "^4.2.3",
"vue-router": "^4.0.16" "vue-router": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.5", "vite": "^4.4.2",
"@vue/cli-plugin-babel": "^5.0.6", "vue-tsc": "^1.8.3",
"@vue/cli-plugin-e2e-cypress": "^5.0.6", "typescript": "^5.0.2",
"@vue/cli-plugin-typescript": "^5.0.6", "cypress-vite": "^1.4.1",
"@vue/cli-service": "^5.0.6", "axios": "^1.4.0",
"axios": "^0.24.0", "cypress": "^12.17.0",
"cypress": "^12.14.0", "start-server-and-test": "^2.0.0",
"kill-port": "^1.6.1", "tailwindcss": "^3.3.2",
"start-server-and-test": "^1.14.0", "postcss": "^8.4.25",
"tailwindcss": "^1.9.6" "autoprefixer": "^10.4.14"
} }
} }

View File

@ -1,8 +1,6 @@
/* eslint-disable */
module.exports = { module.exports = {
plugins: [ plugins: {
require('tailwindcss')(), tailwindcss: {},
require('autoprefixer')(), autoprefixer: {},
], },
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -2,4 +2,4 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

View File

@ -3,7 +3,7 @@ import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from './apollo' import { apolloClient } from './apollo'
import App from './components/App.vue' import App from './components/App.vue'
import { router } from './router' import { router } from './router'
import '@/assets/styles/tailwind.postcss' import '@/assets/styles/tailwind.css'
const app = createApp({ const app = createApp({
setup () { setup () {

View File

@ -1,2 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
} }

View File

@ -1,5 +1,3 @@
/// <reference types="Cypress" />
describe('keepPreviousResult', () => { describe('keepPreviousResult', () => {
beforeEach(() => { beforeEach(() => {
cy.task('db:reset') cy.task('db:reset')

View File

@ -1,5 +1,3 @@
/// <reference types="Cypress" />
describe('nullableQuery', () => { describe('nullableQuery', () => {
beforeEach(() => { beforeEach(() => {
cy.task('db:reset') cy.task('db:reset')

View File

@ -1,5 +1,3 @@
/// <reference types="Cypress" />
describe('Vue 3 + Apollo Composable', () => { describe('Vue 3 + Apollo Composable', () => {
beforeEach(() => { beforeEach(() => {
cy.task('db:reset') cy.task('db:reset')

View File

@ -12,7 +12,8 @@
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": [
"webpack-env" "webpack-env",
"cypress"
], ],
"paths": { "paths": {
"@/*": [ "@/*": [

View File

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

View File

@ -1,4 +0,0 @@
/** @type {import('@vue/cli-service').ProjectOptions} */
module.exports = {
lintOnSave: false,
}

View File

@ -13,7 +13,7 @@
"api": "node server.js" "api": "node server.js"
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.7.7", "@apollo/client": "^3.7.16",
"@vue/apollo-components": "workspace:*", "@vue/apollo-components": "workspace:*",
"@vue/apollo-option": "workspace:*", "@vue/apollo-option": "workspace:*",
"apollo-server-express": "^2.25.4", "apollo-server-express": "^2.25.4",

View File

@ -47,7 +47,7 @@
"vue": "^3.1.0" "vue": "^3.1.0"
}, },
"devDependencies": { "devDependencies": {
"@apollo/client": "^3.7.7", "@apollo/client": "^3.7.16",
"@babel/core": "^7.18.5", "@babel/core": "^7.18.5",
"@babel/plugin-proposal-class-properties": "^7.17.12", "@babel/plugin-proposal-class-properties": "^7.17.12",
"@babel/plugin-transform-for-of": "^7.18.1", "@babel/plugin-transform-for-of": "^7.18.1",

View File

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

3162
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff