build: setup e2e tests

.eslintrc.cjs

@@ -14,6 +14,10 @@ module.exports = {
         'vue/multi-word-component-names': 'off',
       },
     },
+    {
+      files: ['**/e2e/**/*.cy.ts'],
+      extends: 'plugin:cypress/recommended',
+    },
     {
       files: ['**/tests/**/*.ts', 'tsup.config.ts'],
       rules: {

.github/workflows/check.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-    paths-ignore:
-      - '**.md'
   pull_request:
     branches:
       - main
@@ -42,7 +40,7 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Test
+      - name: Unit test
         run: pnpm test
 
   check-result:

.github/workflows/coverage.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
     paths-ignore:
+      - e2e/**
       - '**.md'
   pull_request:
     branches:
@@ -36,7 +37,7 @@ jobs:
       - name: Build source code
         run: pnpm build
 
-      - name: Test coverage
+      - name: Unit test coverage
         run: pnpm test:cov
 
       - name: Coveralls

.github/workflows/e2e.yml

@@ -0,0 +1,60 @@
+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']
+        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: Build source files
+        run: pnpm build
+
+      - name: E2E dev
+        working-directory: ./e2e
+        run: pnpm e2e:ci-dev
+        env:
+          E2E_BUNDLER: ${{ matrix.bundler }}
+
+      - name: E2E build
+        working-directory: ./e2e
+        run: pnpm e2e:ci-build
+        env:
+          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

@@ -1,3 +1,8 @@
+# VuePress files
+**/.vuepress/.cache/
+**/.vuepress/.temp/
+**/.vuepress/dist/
+
 # Dist files
 dist/
 

.prettierignore

@@ -1,3 +1,3 @@
+CHANGELOG.md
 pnpm-lock.yaml
 *.html
-*.md

e2e/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'tests/**/*.cy.ts',
+    supportFile: false,
+  },
+})

e2e/docs/.vuepress/config.ts

@@ -0,0 +1,31 @@
+import process from 'node:process'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
+import { defineUserConfig } from '@vuepress/cli'
+import { e2eTheme } from './theme/node/e2eTheme.js'
+
+export default defineUserConfig({
+  base: '/',
+
+  head: [],
+
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E Test Site',
+      head: [],
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'VuePress E2E',
+      description: 'VuePress E2E 测试站点',
+      head: [],
+    },
+  },
+
+  bundler:
+    process.env.E2E_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),
+
+  theme: e2eTheme(),
+})

e2e/docs/.vuepress/theme/client/config.ts

@@ -0,0 +1,22 @@
+import { defineClientConfig } from '@vuepress/client'
+import CustomLayout from './layouts/CustomLayout.vue'
+import Layout from './layouts/Layout.vue'
+import NotFound from './layouts/NotFound.vue'
+
+import './styles/index.scss'
+
+export default defineClientConfig({
+  enhance({ app, router }) {
+    // ...
+  },
+
+  setup() {
+    // ...
+  },
+
+  layouts: {
+    CustomLayout,
+    Layout,
+    NotFound,
+  },
+})

e2e/docs/.vuepress/theme/client/layouts/CustomLayout.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="e2e-theme-custom-layout">
+    <main class="e2e-theme-custom-layout-content">
+      <Content />
+    </main>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/layouts/Layout.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Content, useSiteData } from '@vuepress/client'
+
+const siteData = useSiteData()
+</script>
+
+<template>
+  <div class="e2e-theme">
+    <nav class="e2e-theme-nav">
+      <div>Languages</div>
+      <ul>
+        <li v-for="[key, value] in Object.entries(siteData.locales)" :key="key">
+          <RouterLink :to="key">{{ value.lang }}</RouterLink>
+        </li>
+      </ul>
+    </nav>
+
+    <main class="e2e-theme-content">
+      <Content />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

e2e/docs/.vuepress/theme/client/layouts/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="e2e-theme-not-found">404 Not Found</div>
+</template>

e2e/docs/.vuepress/theme/node/e2eTheme.ts

@@ -0,0 +1,26 @@
+import type { Page, Theme } from '@vuepress/core'
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export const e2eTheme = (): Theme => {
+  return {
+    name: '@vuepress/theme-e2e',
+
+    alias: {
+      // ...
+    },
+
+    define: {
+      // ...
+    },
+
+    clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
+
+    extendsPage: (page: Page) => {
+      // ...
+    },
+
+    plugins: [],
+  }
+}

e2e/docs/README.md

@@ -0,0 +1 @@
+foo

e2e/docs/layouts/custom-layout.md

@@ -0,0 +1,5 @@
+---
+layout: CustomLayout
+---
+
+Should use CustomLayout

e2e/docs/layouts/layout.md

@@ -0,0 +1 @@
+Should use Layout

e2e/docs/markdown/links/bar.md

@@ -0,0 +1,2 @@
+- [foo](./foo.md)
+- [baz](./baz.md)

e2e/docs/markdown/links/baz.md

@@ -0,0 +1,2 @@
+- [foo](./foo.md)
+- [bar](./bar.md)

e2e/docs/markdown/links/foo.md

@@ -0,0 +1,2 @@
+- [bar](./bar.md)
+- [baz](./baz.md)

e2e/docs/page-data/frontmatter.md

@@ -0,0 +1,14 @@
+---
+str: str
+num: 1
+bool: true
+arr:
+  - 1
+  - 2
+  - 3
+obj:
+  foo: bar
+  baz: qux
+---
+
+{{ JSON.stringify($frontmatter) }}

e2e/docs/page-data/headers.md

@@ -0,0 +1 @@
+TODO

e2e/docs/page-data/lang.md

@@ -0,0 +1 @@
+TODO

e2e/docs/page-data/permalink.md

@@ -0,0 +1 @@
+TODO

e2e/docs/page-data/title-from-frontmatter.md

@@ -0,0 +1,5 @@
+---
+title: title from frontmatter
+---
+
+# title from h1

e2e/docs/page-data/title-from-h1.md

@@ -0,0 +1 @@
+# title from h1

e2e/docs/zh/README.md

@@ -0,0 +1 @@
+foo

e2e/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vuepress/e2e",
+  "version": "2.0.0-rc.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "e2e:build": "vuepress-cli build docs --clean-cache --clean-temp",
+    "e2e:build-webpack": "E2E_BUNDLER=webpack pnpm e2e:build",
+    "e2e:ci:build": "pnpm e2e:build && pnpm e2e:serve & wait-on http-get://localhost:8088 && pnpm e2e:run --config baseUrl=http://localhost:8088",
+    "e2e:ci:dev": "pnpm e2e:dev & wait-on http-get://127.0.0.1:8080 && pnpm e2e:run --config baseUrl=http://localhost:8080",
+    "e2e:clean": "rimraf .vuepress/.temp .vuepress/.cache .vuepress/dist",
+    "e2e:dev": "vuepress-cli dev docs --clean-cache --clean-temp",
+    "e2e:dev-webpack": "E2E_BUNDLER=webpack pnpm e2e:dev",
+    "e2e:run": "cypress run",
+    "e2e:serve": "anywhere -s -h localhost -p 8088 -d docs/.vuepress/dist"
+  },
+  "dependencies": {
+    "@vuepress/bundler-vite": "workspace:*",
+    "@vuepress/bundler-webpack": "workspace:*",
+    "@vuepress/cli": "workspace:*",
+    "@vuepress/client": "workspace:*",
+    "@vuepress/core": "workspace:*",
+    "@vuepress/markdown": "workspace:*",
+    "@vuepress/shared": "workspace:*",
+    "@vuepress/utils": "workspace:*",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "vue": "^3.3.11"
+  },
+  "devDependencies": {
+    "anywhere": "^1.6.0",
+    "cypress": "^13.6.1",
+    "wait-on": "^7.2.0"
+  }
+}

e2e/tests/layouts.cy.ts

@@ -0,0 +1,20 @@
+context('layouts', () => {
+  it('CustomLayout', () => {
+    cy.visit('/layouts/custom-layout.html')
+    cy.get('.e2e-theme-custom-layout').should('exist')
+    cy.get('.e2e-theme-custom-layout-content')
+      .contains('Should use CustomLayout')
+      .should('exist')
+  })
+
+  it('Layout', () => {
+    cy.visit('/layouts/layout.html')
+    cy.get('.e2e-theme').should('exist')
+    cy.get('.e2e-theme-content').contains('Should use Layout').should('exist')
+  })
+
+  it('NotFound', () => {
+    cy.visit('/404.html')
+    cy.get('.e2e-theme-not-found').should('have.text', '404 Not Found')
+  })
+})

e2e/tests/markdown/links.cy.ts

@@ -0,0 +1,35 @@
+describe('markdown > links', () => {
+  it('should render links and navigate between pages correctly', () => {
+    cy.visit('/markdown/links/foo.html')
+
+    cy.get('.e2e-theme-content ul li a')
+      .should('have.length', 2)
+      .first()
+      .should('have.text', 'bar')
+      .click()
+
+    cy.location().should((location) => {
+      expect(location.pathname).to.eq('/markdown/links/bar.html')
+    })
+
+    cy.get('.e2e-theme-content ul li a')
+      .should('have.length', 2)
+      .last()
+      .should('have.text', 'baz')
+      .click()
+
+    cy.location().should((location) => {
+      expect(location.pathname).to.eq('/markdown/links/baz.html')
+    })
+
+    cy.get('.e2e-theme-content ul li a')
+      .should('have.length', 2)
+      .first()
+      .should('have.text', 'foo')
+      .click()
+
+    cy.location().should((location) => {
+      expect(location.pathname).to.eq('/markdown/links/foo.html')
+    })
+  })
+})