test: ssr

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

@@ -0,0 +1,73 @@
+name: E2E composable + SSR
+
+on:
+  push:
+    branches:
+      - main
+      - v4
+      - feat/*
+      - fix/*
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    name: Build and test
+
+    env:
+      dir: ./packages/test-e2e-ssr
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8.6.2
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: |
+            ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+            ~/.cache/Cypress
+          key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-v1-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: E2E tests
+        working-directory: ${{env.dir}}
+        run: pnpm run test:e2e
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ${{env.dir}}/tests/e2e/screenshots
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: cypress-videos
+          path: ${{env.dir}}/tests/e2e/videos

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

@@ -22,19 +22,19 @@
     "graphql-tag": "^2.12.6",
     "test-server": "workspace:*",
     "vue": "^3.3.4",
-    "@vitejs/plugin-vue": "^4.2.3",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "vite": "^4.4.2",
-    "vue-tsc": "^1.8.3",
-    "typescript": "^5.0.2",
-    "cypress-vite": "^1.4.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "cypress": "^12.17.0",
+    "cypress-vite": "^1.4.1",
+    "postcss": "^8.4.25",
     "start-server-and-test": "^2.0.0",
     "tailwindcss": "^3.3.2",
-    "postcss": "^8.4.25",
-    "autoprefixer": "^10.4.14"
+    "typescript": "^5.0.2",
+    "vite": "^4.4.2",
+    "vue-tsc": "^1.8.3"
   }
 }

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

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

packages/test-e2e-ssr/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

packages/test-e2e-ssr/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

packages/test-e2e-ssr/.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+/tests/e2e/downloads/
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/test-e2e-ssr/README.md

@@ -0,0 +1,24 @@
+# test-e2e-global-composable-vue3
+
+## Project setup
+```
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+```
+pnpm run serve
+```
+
+### Compiles and minifies for production
+```
+pnpm run build
+```
+
+### Run your end-to-end tests
+```
+pnpm run test:e2e
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

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

@@ -0,0 +1,31 @@
+import { defineConfig } from 'cypress'
+import vitePreprocessor from 'cypress-vite'
+import axios from 'axios'
+
+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) {
+      on('task', {
+        async 'db:reset' () {
+          await axios.get('http://localhost:4042/_reset')
+          return true
+        },
+
+        async 'db:seed' () {
+          await axios.get('http://localhost:4042/_seed')
+          return true
+        },
+      })
+      on('file:preprocessor', vitePreprocessor())
+    },
+    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.ts',
+  },
+})

packages/test-e2e-ssr/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>My app</title>
+    <script>window._INITIAL_STATE_ = <!--state--></script>
+  </head>
+  <body>
+    <div id="app"><!--app-render--></div>
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>

packages/test-e2e-ssr/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "test-e2e-ssr",
+  "version": "4.0.0-alpha.16",
+  "private": true,
+  "scripts": {
+    "dev": "node ./server.mjs",
+    "test": "pnpm run test:e2e",
+    "test:e2e": "start-server-and-test api 'http-get://localhost:4042/graphql?query=%7B__typename%7D' test:e2e:run",
+    "test:e2e:run": "start-server-and-test dev http://localhost:8080 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"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.16",
+    "@vue/apollo-composable": "workspace:*",
+    "@vue/apollo-util": "workspace:*",
+    "devalue": "^4.3.2",
+    "express": "^4.18.2",
+    "graphql": "^16.7.1",
+    "graphql-tag": "^2.12.6",
+    "isomorphic-fetch": "^3.0.0",
+    "test-server": "workspace:*",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.6.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
+    "cypress": "^12.17.0",
+    "cypress-vite": "^1.4.1",
+    "postcss": "^8.4.25",
+    "start-server-and-test": "^2.0.0",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.2",
+    "vue-tsc": "^1.8.3"
+  }
+}

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

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/test-e2e-ssr/server.mjs

@@ -0,0 +1,43 @@
+import express from 'express'
+import fs from 'node:fs'
+import { createServer } from 'vite'
+import { uneval } from 'devalue'
+
+const server = express()
+
+const viteServer = await createServer({
+  server: {
+    middlewareMode: true,
+  },
+  appType: 'custom',
+})
+server.use(viteServer.middlewares)
+
+server.get('*', async (req, res) => {
+  try {
+    const url = req.originalUrl
+    console.log(url)
+
+    let template = fs.readFileSync('./index.html', 'utf8')
+
+    const { render } = await viteServer.ssrLoadModule('/src/entry-server.ts')
+    const { html, context } = await render(url)
+
+    console.log(context)
+
+    template = template
+      .replace('<!--state-->', uneval(context.state))
+      .replace('<!--app-render-->', html)
+
+    res.send(template)
+  } catch (e) {
+    console.error(e)
+    res.send(e.stack)
+  }
+})
+
+server.use(express.static('.'))
+
+server.listen(8080, () => {
+  console.log('Server is running on http://localhost:8080')
+})

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

@@ -0,0 +1,35 @@
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
+import { onError } from '@apollo/client/link/error'
+import { logErrorMessages } from '@vue/apollo-util'
+import { isServer } from './env.js'
+
+export function createApollo () {
+  const cache = new InMemoryCache()
+
+  const restoreCache = !isServer && !!window._INITIAL_STATE_?.apollo
+  if (restoreCache) {
+    cache.restore(window._INITIAL_STATE_.apollo)
+  }
+
+  // HTTP connection to the API
+  const httpLink = createHttpLink({
+    // You should use an absolute URL here
+    uri: 'http://localhost:4042/graphql',
+  })
+
+  // Handle errors
+  const errorLink = onError(error => {
+    logErrorMessages(error)
+  })
+
+  const apolloClient = new ApolloClient({
+    cache,
+    link: errorLink.concat(httpLink),
+    ssrForceFetchDelay: restoreCache ? 100 : undefined,
+    ssrMode: isServer,
+  })
+
+  return {
+    apolloClient,
+  }
+}

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

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { createApollo } from './apollo'
+import App from './components/App.vue'
+import { createMyRouter } from './router'
+import '@/assets/styles/tailwind.css'
+
+export function createMyApp () {
+  const app = createApp(App)
+
+  const { apolloClient } = createApollo()
+  app.provide(DefaultApolloClient, apolloClient)
+
+  const { router } = createMyRouter()
+  app.use(router)
+
+  return {
+    app,
+    router,
+    apolloClient,
+  }
+}

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

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;