test: add e2e test

.eslintrc.cjs

@@ -20,6 +20,10 @@ module.exports = {
         'vue/match-component-file-name': 'off',
       },
     },
+    {
+      files: ['**/e2e/**/*.cy.ts', '**/e2e/cypress/**/*.ts'],
+      extends: 'plugin:cypress/recommended',
+    },
     {
       files: ['**/tests/**/*.ts'],
       rules: {

.github/workflows/e2e.yml

@@ -0,0 +1,82 @@
+name: e2e
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node: ['18', '20']
+        base: ['/', '/e2e/']
+        bundler: ['vite', 'webpack']
+
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Get cypress cache path
+        working-directory: ./e2e
+        shell: bash
+        run: |
+          echo "CYPRESS_CACHE_PATH=$(pnpm cypress cache path)" >> $GITHUB_ENV
+
+      - name: Setup cypress cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.CYPRESS_CACHE_PATH }}
+          key: cypress-${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            cypress-${{ runner.os }}-node-${{ matrix.node }}-
+            cypress-${{ runner.os }}-
+
+      - name: Install cypress binary
+        working-directory: ./e2e
+        run: pnpm cypress install
+
+      - name: Build source files
+        run: pnpm build
+
+      - name: E2E dev
+        working-directory: ./e2e
+        run: pnpm e2e:ci:dev
+        env:
+          E2E_BASE: ${{ matrix.base }}
+          E2E_BUNDLER: ${{ matrix.bundler }}
+
+      - name: E2E build
+        working-directory: ./e2e
+        run: pnpm e2e:ci:build
+        env:
+          E2E_BASE: ${{ matrix.base }}
+          E2E_BUNDLER: ${{ matrix.bundler }}
+
+  e2e-result:
+    if: ${{ always() }}
+    name: e2e result
+    runs-on: ubuntu-latest
+    needs: [e2e]
+    steps:
+      - if: ${{ contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled') }}
+        run: exit 1

.gitignore

@@ -9,6 +9,9 @@ lib/
 # Test coverage files
 coverage/
 
+# E2E temp files
+e2e/cypress/screenshots/
+
 # Node modules
 node_modules/
 

e2e/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:9080',
+    specPattern: 'tests/**/*.cy.ts',
+  },
+  env: {
+    E2E_BASE: process.env.E2E_BASE ?? '/',
+  },
+})

e2e/cypress/support/commands.ts

@@ -0,0 +1,8 @@
+const URL_PREFIX = Cypress.env('E2E_BASE').replace(/\/$/, '')
+
+// override the default cy.visit command to prepend base
+// @ts-expect-error: could not type this method correctly
+Cypress.Commands.overwrite('visit', (originalFn, url, options) =>
+  // @ts-expect-error: could not type this method correctly
+  originalFn(`${URL_PREFIX}${url}`, options),
+)

e2e/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands'

e2e/docs/.vuepress/config.ts

@@ -0,0 +1,87 @@
+import process from 'node:process'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig  } from 'vuepress/cli'
+import type {UserConfig} from 'vuepress/cli';
+import { path } from 'vuepress/utils'
+
+const E2E_BASE = (process.env.E2E_BASE ?? '/') as '/' | `/${string}/`
+const E2E_BUNDLER = process.env.E2E_BUNDLER ?? 'vite'
+
+export default defineUserConfig({
+  base: E2E_BASE,
+
+  dest: path.join(__dirname, 'dist', E2E_BASE),
+
+  port: 9080,
+
+  head: [
+    ['meta', { name: 'foo', content: 'foo' }],
+    ['meta', { name: 'bar', content: 'bar' }],
+    ['meta', { name: 'baz', content: 'baz' }],
+  ],
+
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'VuePress Ecosystem E2E',
+      description: 'VuePress Ecosystem E2E Test Site',
+    },
+  },
+
+  markdown: {
+    assets: {
+      // FIXME
+      absolutePathPrependBase: E2E_BUNDLER === 'webpack',
+    },
+  },
+
+  bundler:
+    E2E_BUNDLER === 'webpack'
+      ? webpackBundler()
+      : viteBundler({
+          // TODO: Remove once upstream has a fix
+          viteOptions: {
+            optimizeDeps: {
+              exclude: ['vuepress/client', 'vuepress/shared'],
+            },
+            ssr: {
+              noExternal: ['vuepress'],
+            },
+          },
+        }),
+
+  theme: defaultTheme({
+    logo: '/logo.png',
+    navbar: [
+      {
+        text: 'Home',
+        link: '/',
+      },
+      {
+        text: 'Dropdown',
+        children: [
+          {
+            text: 'sidebar',
+            link: '/sidebar/',
+          },
+        ],
+      },
+    ],
+
+    sidebar: {
+      '/': ['/sidebar/'],
+      '/sidebar/': [
+        {
+          text: 'Sidebar',
+          link: '/sidebar/',
+          children: [
+            { text: 'sidebar 1', link: '/sidebar/1.html' },
+            { text: 'sidebar 2', link: '/sidebar/2.html' },
+          ],
+        },
+      ],
+    },
+  }),
+}) as UserConfig

e2e/docs/README.md

@@ -0,0 +1,6 @@
+---
+title: Home
+home: true
+---
+
+HomePage Content

e2e/docs/markdown.md

@@ -0,0 +1,65 @@
+# Markdown
+
+## Heading Test
+
+### Heading 3 Test
+
+#### Heading 4 Test
+
+##### Heading 5 Test
+
+###### Heading 6 Test
+
+## Links
+
+- [Home](./README.md)
+
+## Emoji :tada:
+
+## Table of Contents
+
+[[toc]]
+
+## Code Block
+
+Title:
+
+```ts title=".vuepress/config.ts"
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  title: 'Hello, VuePress',
+
+  theme: defaultTheme({
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+})
+```
+
+Line highlighting:
+
+```ts{1,7-9}
+import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  title: 'Hello, VuePress',
+
+  theme: defaultTheme({
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+})
+```
+
+Line numbers:
+
+```ts:no-line-numbers
+// line-numbers is disabled
+const line2 = 'This is line 2'
+const line3 = 'This is line 3'
+```
+
+Code import:
+
+@[code{24-30}](./.vuepress/config.ts)

e2e/docs/sidebar/1.md

@@ -0,0 +1,5 @@
+# Sidebar 1
+
+## Sidebar 1 Heading 1
+
+## Sidebar 1 Heading 2

e2e/docs/sidebar/2.md

@@ -0,0 +1,5 @@
+# Sidebar 2
+
+## Sidebar 2 Heading 1
+
+## Sidebar 2 Heading 2

e2e/docs/sidebar/README.md

@@ -0,0 +1,9 @@
+---
+sidebar: auto
+---
+
+# Sidebar
+
+## Sidebar Heading 1
+
+## Sidebar Heading 2

e2e/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vuepress/ecosystem-e2e",
+  "version": "2.0.0-rc.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "e2e:build": "vuepress build docs --clean-cache --clean-temp",
+    "e2e:build-webpack": "E2E_BUNDLER=webpack pnpm e2e:build",
+    "e2e:ci:build": "pnpm e2e:build && start-server-and-test e2e:serve http-get://localhost:9080 e2e:run",
+    "e2e:ci:dev": "start-server-and-test e2e:dev http-get://127.0.0.1:9080 e2e:run",
+    "e2e:clean": "rimraf docs/.vuepress/.temp docs/.vuepress/.cache docs/.vuepress/dist",
+    "e2e:dev": "vuepress dev docs --clean-cache --clean-temp",
+    "e2e:dev-webpack": "E2E_BUNDLER=webpack pnpm e2e:dev",
+    "e2e:open": "cypress open",
+    "e2e:run": "cypress run",
+    "e2e:serve": "anywhere -s -h localhost -p 9080 -d docs/.vuepress/dist"
+  },
+  "dependencies": {
+    "@vuepress/bundler-vite": "2.0.0-rc.1",
+    "@vuepress/bundler-webpack": "2.0.0-rc.1",
+    "@vuepress/cli": "2.0.0-rc.1",
+    "@vuepress/client": "2.0.0-rc.1",
+    "@vuepress/theme-default": "workspace:*",
+    "@vuepress/utils": "2.0.0-rc.1",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "vue": "^3.4.15",
+    "vuepress": "2.0.0-rc.1"
+  },
+  "devDependencies": {
+    "anywhere": "^1.6.0",
+    "cypress": "^13.6.3",
+    "start-server-and-test": "^2.0.3"
+  }
+}

e2e/tests/theme-default/navbar.cy.ts

@@ -0,0 +1,9 @@
+it('has navbar', () => {
+  cy.visit('/navbar/')
+  cy.get('.theme-default-content').then((el) => {
+    cy.wrap(el)
+      .get('.navbar .navbar-item')
+      .should('contain', 'Link')
+      .should('contain', 'Dropdown')
+  })
+})

e2e/tests/theme-default/sidebar.cy.ts

@@ -0,0 +1,9 @@
+it('has sidebar', () => {
+  cy.visit('/sidebar/')
+  cy.get('.theme-default-content').then((el) => {
+    cy.wrap(el)
+      .get('a.sidebar-item')
+      .should('contain', 'sidebar 1')
+      .should('contain', 'sidebar 2')
+  })
+})

package.json

@@ -37,6 +37,7 @@
     "eslint": "^8.56.0",
     "eslint-config-vuepress": "^4.10.0",
     "eslint-config-vuepress-typescript": "^4.10.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.4",