Skip to content

Commit 574bd8f

Browse files
AkryumAkryum
committed
test: ssr
1 parent 1ac1372 commit 574bd8f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1202
-47
lines changed

‎.github/workflows/test-e2e-ssr.yml

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
name: E2E composable + SSR
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
- v4
8+
- feat/*
9+
- fix/*
10+
pull_request:
11+
workflow_dispatch:
12+
13+
concurrency:
14+
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build-and-test:
19+
runs-on: ubuntu-latest
20+
name: Build and test
21+
22+
env:
23+
dir: ./packages/test-e2e-ssr
24+
25+
steps:
26+
- uses: actions/checkout@v2
27+
28+
- name: Install node
29+
uses: actions/setup-node@v2
30+
with:
31+
node-version: 18
32+
33+
- name: Install pnpm
34+
uses: pnpm/[email protected]
35+
with:
36+
version: 8.6.2
37+
38+
- name: Get pnpm store directory
39+
id: pnpm-cache
40+
run: |
41+
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
42+
43+
- name: Cache pnpm modules
44+
uses: actions/cache@v2
45+
with:
46+
path: |
47+
${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
48+
~/.cache/Cypress
49+
key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
50+
restore-keys: |
51+
pnpm-v1-${{ runner.os }}-
52+
53+
- name: Install dependencies
54+
run: pnpm install
55+
56+
- name: Build
57+
run: pnpm run build
58+
59+
- name: E2E tests
60+
working-directory: ${{env.dir}}
61+
run: pnpm run test:e2e
62+
63+
- uses: actions/upload-artifact@v2
64+
if: failure()
65+
with:
66+
name: cypress-screenshots
67+
path: ${{env.dir}}/tests/e2e/screenshots
68+
69+
- uses: actions/upload-artifact@v2
70+
if: always()
71+
with:
72+
name: cypress-videos
73+
path: ${{env.dir}}/tests/e2e/videos

‎packages/test-e2e-composable-vue3/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@
2222
"graphql-tag": "^2.12.6",
2323
"test-server": "workspace:*",
2424
"vue": "^3.3.4",
25-
"@vitejs/plugin-vue": "^4.2.3",
2625
"vue-router": "^4.2.4"
2726
},
2827
"devDependencies": {
29-
"vite": "^4.4.2",
30-
"vue-tsc": "^1.8.3",
31-
"typescript": "^5.0.2",
32-
"cypress-vite": "^1.4.1",
28+
"@vitejs/plugin-vue": "^4.2.3",
29+
"autoprefixer": "^10.4.14",
3330
"axios": "^1.4.0",
3431
"cypress": "^12.17.0",
32+
"cypress-vite": "^1.4.1",
33+
"postcss": "^8.4.25",
3534
"start-server-and-test": "^2.0.0",
3635
"tailwindcss": "^3.3.2",
37-
"postcss": "^8.4.25",
38-
"autoprefixer": "^10.4.14"
36+
"typescript": "^5.0.2",
37+
"vite": "^4.4.2",
38+
"vue-tsc": "^1.8.3"
3939
}
4040
}

‎packages/test-e2e-composable-vue3/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"sourceMap": true,
1313
"baseUrl": ".",
1414
"types": [
15-
"webpack-env",
15+
"vite/client",
1616
"cypress"
1717
],
1818
"paths": {

‎packages/test-e2e-ssr/.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎packages/test-e2e-ssr/.editorconfig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎packages/test-e2e-ssr/.gitignore

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
/tests/e2e/videos/
6+
/tests/e2e/screenshots/
7+
/tests/e2e/downloads/
8+
9+
10+
# local env files
11+
.env.local
12+
.env.*.local
13+
14+
# Log files
15+
npm-debug.log*
16+
yarn-debug.log*
17+
yarn-error.log*
18+
pnpm-debug.log*
19+
20+
# Editor directories and files
21+
.idea
22+
.vscode
23+
*.suo
24+
*.ntvs*
25+
*.njsproj
26+
*.sln
27+
*.sw?

‎packages/test-e2e-ssr/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# test-e2e-global-composable-vue3
2+
3+
## Project setup
4+
```
5+
pnpm install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
pnpm run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
pnpm run build
16+
```
17+
18+
### Run your end-to-end tests
19+
```
20+
pnpm run test:e2e
21+
```
22+
23+
### Customize configuration
24+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎packages/test-e2e-ssr/cypress.config.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { defineConfig } from 'cypress'
2+
import vitePreprocessor from 'cypress-vite'
3+
import axios from 'axios'
4+
5+
export default defineConfig({
6+
fixturesFolder: 'tests/e2e/fixtures',
7+
screenshotsFolder: 'tests/e2e/screenshots',
8+
videosFolder: 'tests/e2e/videos',
9+
downloadsFolder: 'tests/e2e/downloads',
10+
e2e: {
11+
baseUrl: 'http://localhost:8080',
12+
// We've imported your old cypress plugins here.
13+
// You may want to clean this up later by importing these.
14+
setupNodeEvents (on) {
15+
on('task', {
16+
async 'db:reset' () {
17+
await axios.get('http://localhost:4042/_reset')
18+
return true
19+
},
20+
21+
async 'db:seed' () {
22+
await axios.get('http://localhost:4042/_seed')
23+
return true
24+
},
25+
})
26+
on('file:preprocessor', vitePreprocessor())
27+
},
28+
specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
29+
supportFile: 'tests/e2e/support/index.ts',
30+
},
31+
})

‎packages/test-e2e-ssr/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>My app</title>
8+
<script>window._INITIAL_STATE_ = <!--state--></script>
9+
</head>
10+
<body>
11+
<div id="app"><!--app-render--></div>
12+
<script type="module" src="/src/entry-client.ts"></script>
13+
</body>
14+
</html>

‎packages/test-e2e-ssr/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "test-e2e-ssr",
3+
"version": "4.0.0-alpha.16",
4+
"private": true,
5+
"scripts": {
6+
"dev": "node ./server.mjs",
7+
"test": "pnpm run test:e2e",
8+
"test:e2e": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:run",
9+
"test:e2e:run": "start-server-and-test dev http://localhost:8080 test:e2e:cy",
10+
"test:e2e:cy": "cypress run --headless",
11+
"test:e2e:dev": "cypress open",
12+
"api": "test-server --simulate-latency 50",
13+
"api:dev": "test-server --simulate-latency 500"
14+
},
15+
"dependencies": {
16+
"@apollo/client": "^3.7.16",
17+
"@vue/apollo-composable": "workspace:*",
18+
"@vue/apollo-util": "workspace:*",
19+
"devalue": "^4.3.2",
20+
"express": "^4.18.2",
21+
"graphql": "^16.7.1",
22+
"graphql-tag": "^2.12.6",
23+
"isomorphic-fetch": "^3.0.0",
24+
"test-server": "workspace:*",
25+
"vue": "^3.3.4",
26+
"vue-router": "^4.2.4"
27+
},
28+
"devDependencies": {
29+
"@types/node": "^20.6.0",
30+
"@vitejs/plugin-vue": "^4.2.3",
31+
"autoprefixer": "^10.4.14",
32+
"axios": "^1.4.0",
33+
"cypress": "^12.17.0",
34+
"cypress-vite": "^1.4.1",
35+
"postcss": "^8.4.25",
36+
"start-server-and-test": "^2.0.0",
37+
"tailwindcss": "^3.3.2",
38+
"typescript": "^5.0.2",
39+
"vite": "^4.4.2",
40+
"vue-tsc": "^1.8.3"
41+
}
42+
}

‎packages/test-e2e-ssr/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎packages/test-e2e-ssr/server.mjs

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import express from 'express'
2+
import fs from 'node:fs'
3+
import { createServer } from 'vite'
4+
import { uneval } from 'devalue'
5+
6+
const server = express()
7+
8+
const viteServer = await createServer({
9+
server: {
10+
middlewareMode: true,
11+
},
12+
appType: 'custom',
13+
})
14+
server.use(viteServer.middlewares)
15+
16+
server.get('*', async (req, res) => {
17+
try {
18+
const url = req.originalUrl
19+
console.log(url)
20+
21+
let template = fs.readFileSync('./index.html', 'utf8')
22+
23+
const { render } = await viteServer.ssrLoadModule('/src/entry-server.ts')
24+
const { html, context } = await render(url)
25+
26+
console.log(context)
27+
28+
template = template
29+
.replace('<!--state-->', uneval(context.state))
30+
.replace('<!--app-render-->', html)
31+
32+
res.send(template)
33+
} catch (e) {
34+
console.error(e)
35+
res.send(e.stack)
36+
}
37+
})
38+
39+
server.use(express.static('.'))
40+
41+
server.listen(8080, () => {
42+
console.log('Server is running on http://localhost:8080')
43+
})

‎packages/test-e2e-ssr/src/apollo.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
2+
import { onError } from '@apollo/client/link/error'
3+
import { logErrorMessages } from '@vue/apollo-util'
4+
import { isServer } from './env.js'
5+
6+
export function createApollo () {
7+
const cache = new InMemoryCache()
8+
9+
const restoreCache = !isServer && !!window._INITIAL_STATE_?.apollo
10+
if (restoreCache) {
11+
cache.restore(window._INITIAL_STATE_.apollo)
12+
}
13+
14+
// HTTP connection to the API
15+
const httpLink = createHttpLink({
16+
// You should use an absolute URL here
17+
uri: 'http://localhost:4042/graphql',
18+
})
19+
20+
// Handle errors
21+
const errorLink = onError(error => {
22+
logErrorMessages(error)
23+
})
24+
25+
const apolloClient = new ApolloClient({
26+
cache,
27+
link: errorLink.concat(httpLink),
28+
ssrForceFetchDelay: restoreCache ? 100 : undefined,
29+
ssrMode: isServer,
30+
})
31+
32+
return {
33+
apolloClient,
34+
}
35+
}

‎packages/test-e2e-ssr/src/app.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { createApp } from 'vue'
2+
import { DefaultApolloClient } from '@vue/apollo-composable'
3+
import { createApollo } from './apollo'
4+
import App from './components/App.vue'
5+
import { createMyRouter } from './router'
6+
import '@/assets/styles/tailwind.css'
7+
8+
export function createMyApp () {
9+
const app = createApp(App)
10+
11+
const { apolloClient } = createApollo()
12+
app.provide(DefaultApolloClient, apolloClient)
13+
14+
const { router } = createMyRouter()
15+
app.use(router)
16+
17+
return {
18+
app,
19+
router,
20+
apolloClient,
21+
}
22+
}

‎packages/test-e2e-ssr/src/assets/styles/tailwind.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@tailwind base;
2+
3+
@tailwind components;
4+
5+
@tailwind utilities;

0 commit comments

Comments
 (0)