feat(theme-default): auto sidebar per route and e2e test setup (close v…

…uepress#17, vuepress#19) (#1)

.eslintrc.cjs

@@ -28,5 +28,9 @@ module.exports = {
         'vue/one-component-per-file': 'off',
       },
     },
+    {
+      files: ['**/e2e/**/*.cy.ts', '**/e2e/cypress/**/*.ts'],
+      extends: 'plugin:cypress/recommended',
+    },
   ],
 }

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/client.ts

@@ -0,0 +1,5 @@
+import { defineClientConfig } from '@vuepress/client'
+
+export default defineClientConfig({
+  //
+})

e2e/docs/.vuepress/config.ts

@@ -0,0 +1,63 @@
+import process from 'node:process'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { defineUserConfig } from '@vuepress/cli'
+import { defaultTheme } from '@vuepress/theme-default'
+import { path } from '@vuepress/utils'
+
+const E2E_BASE = (process.env.E2E_BASE ?? '/') as '/' | `/${string}/`
+
+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',
+    },
+  },
+
+  bundler: viteBundler(),
+
+  theme: defaultTheme({
+    logo: '/logo.png',
+    navbar: [
+      {
+        text: 'Home',
+        link: '/',
+      },
+      {
+        text: 'Auto Sidebar',
+        link: '/auto-sidebar/',
+      },
+      {
+        text: 'Custom Sidebar',
+        link: '/custom-sidebar/',
+      },
+    ],
+    sidebar: {
+      '/': 'auto',
+      '/auto-sidebar/': 'auto',
+      '/custom-sidebar/': [
+        {
+          text: 'custom-sidebar',
+          link: '/custom-sidebar/',
+          children: [
+            { text: 'custom-child-1', link: '/custom-sidebar/custom-one' },
+            { text: 'custom-child-2', link: '/custom-sidebar/custom-two' },
+          ],
+        },
+      ],
+    },
+  }),
+})

e2e/docs/README.md

@@ -0,0 +1,5 @@
+# Home
+
+## header 1
+
+## header 2

e2e/docs/auto-sidebar/README.md

@@ -0,0 +1,7 @@
+# auto-sidebar
+
+## header 1
+
+## header 2
+
+## header 3

e2e/docs/custom-sidebar/README.md

@@ -0,0 +1,7 @@
+# custom-sidebar
+
+## header 1
+
+## header 2
+
+## header 3

e2e/docs/custom-sidebar/custom-one.md

@@ -0,0 +1 @@
+# custom-one

e2e/docs/custom-sidebar/custom-two.md

@@ -0,0 +1 @@
+# custom-two

e2e/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vuepress/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.0",
+    "@vuepress/cli": "2.0.0-rc.0",
+    "@vuepress/client": "2.0.0-rc.0",
+    "@vuepress/theme-default": "workspace:*",
+    "@vuepress/utils": "2.0.0-rc.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.3",
+    "vue": "^3.4.0",
+    "vuepress": "2.0.0-rc.0"
+  },
+  "devDependencies": {
+    "anywhere": "^1.6.0",
+    "cypress": "^13.6.2",
+    "process": "^0.11.10",
+    "start-server-and-test": "^2.0.3"
+  }
+}

e2e/tests/theme-default/composables/useSidebarItems.cy.ts

@@ -0,0 +1,37 @@
+it("route has 'auto' sidebar", () => {
+  cy.visit('/auto-sidebar/')
+  cy.get('.theme-default-content').then((el) => {
+    cy.wrap(el)
+      .get('h1')
+      .invoke('text')
+      .should('be.not.empty')
+      .then((text) => {
+        cy.get('.sidebar-heading')
+          .invoke('text')
+          .should('contain', text.replace('#', '').trim())
+      })
+    cy.wrap(el)
+      .get('h2')
+      .each((header) => {
+        cy.wrap(header)
+          .invoke('text')
+          .should('be.not.empty')
+          .then((headerText) => {
+            cy.get('a.sidebar-item').contains(
+              headerText.replace('#', '').trim(),
+            )
+          })
+      })
+  })
+})
+
+it('route has custom sidebar', () => {
+  cy.visit('/custom-sidebar/')
+  cy.get('.theme-default-content').then((el) => {
+    cy.wrap(el).get('.sidebar-heading').should('contain', 'custom-sidebar')
+    cy.wrap(el)
+      .get('a.sidebar-item')
+      .should('contain', 'custom-child-1')
+      .should('contain', 'custom-child-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.1.1",