test: add hmr e2e tests

e2e/cypress.config.ts

@@ -1,9 +1,64 @@
 import { defineConfig } from 'cypress'
+import { fs, getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+const resolveSourceMarkdownPath = (...args: string[]): string =>
+  path.resolve(__dirname, 'docs', ...args)
 
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:9080',
     specPattern: 'tests/**/*.cy.ts',
+    setupNodeEvents(on) {
+      on('task', {
+        'hmr:title': async () => {
+          const hmrTitleSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/title.md')
+          const content = await fs.readFile(hmrTitleSourceMarkdownPath, 'utf-8')
+          await fs.writeFile(
+            hmrTitleSourceMarkdownPath,
+            content.replace('# HMR Title', '# Updated Title'),
+          )
+          return true
+        },
+        'hmr:title:restore': async () => {
+          const hmrTitleSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/title.md')
+          const content = await fs.readFile(hmrTitleSourceMarkdownPath, 'utf-8')
+          await fs.writeFile(
+            hmrTitleSourceMarkdownPath,
+            content.replace('# Updated Title', '# HMR Title'),
+          )
+          return true
+        },
+        'hmr:frontmatter': async () => {
+          const hmrFrontmatterSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/frontmatter.md')
+          const content = await fs.readFile(
+            hmrFrontmatterSourceMarkdownPath,
+            'utf-8',
+          )
+          await fs.writeFile(
+            hmrFrontmatterSourceMarkdownPath,
+            content.replace('foo: HMR foo', 'foo: Updated foo'),
+          )
+          return true
+        },
+        'hmr:frontmatter:restore': async () => {
+          const hmrFrontmatterSourceMarkdownPath =
+            resolveSourceMarkdownPath('hmr/frontmatter.md')
+          const content = await fs.readFile(
+            hmrFrontmatterSourceMarkdownPath,
+            'utf-8',
+          )
+          await fs.writeFile(
+            hmrFrontmatterSourceMarkdownPath,
+            content.replace('foo: Updated foo', 'foo: HMR foo'),
+          )
+          return true
+        },
+      })
+    },
   },
   env: {
     E2E_BASE: process.env.E2E_BASE ?? '/',

e2e/docs/hmr/frontmatter.md

@@ -0,0 +1,11 @@
+---
+foo: HMR foo
+---
+
+## link to title
+
+[title](./title.md)
+
+## rendered foo
+
+{{ $frontmatter.foo }}

e2e/docs/hmr/title.md

@@ -0,0 +1,9 @@
+# HMR Title
+
+## link to frontmatter
+
+[frontmatter](./frontmatter.md)
+
+## rendered title
+
+{{ $page.title }}

e2e/tests/hmr/frontmatter.cy.ts

@@ -0,0 +1,24 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update frontmatter correctly', () => {
+    cy.visit('/hmr/frontmatter.html')
+    cy.get('.e2e-theme-content #rendered-foo + p').should(
+      'have.text',
+      'HMR foo',
+    )
+
+    cy.task('hmr:frontmatter')
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      .then(() => cy.task('hmr:frontmatter:restore'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+  })
+}

e2e/tests/hmr/navigation.cy.ts

@@ -0,0 +1,85 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update title and frontmatter correctly after navigation', () => {
+    cy.visit('/hmr/title.html')
+    cy.title().should('include', 'HMR Title')
+    cy.get('.e2e-theme-content #rendered-title + p').should(
+      'have.text',
+      'HMR Title',
+    )
+
+    // update title page
+    cy.task('hmr:title')
+      .then(() => {
+        cy.title().should('include', 'Updated Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+      // update frontmatter page
+      .then(() => cy.task('hmr:frontmatter'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      // navigate to title page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-title + p > a').click()
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      // restore title page
+      .then(() => cy.task('hmr:title:restore'))
+      .then(() => {
+        cy.title().should('include', 'HMR Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'Updated foo',
+        )
+      })
+      // restore frontmatter page
+      .then(() => cy.task('hmr:frontmatter:restore'))
+      .then(() => {
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+      // navigate to title page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-title + p > a').click()
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+      // navigate to frontmatter page
+      .then(() => {
+        cy.get('.e2e-theme-content #link-to-frontmatter + p > a').click()
+        cy.get('.e2e-theme-content #rendered-foo + p').should(
+          'have.text',
+          'HMR foo',
+        )
+      })
+  })
+}

e2e/tests/hmr/title.cy.ts

@@ -0,0 +1,27 @@
+if (Cypress.env('E2E_COMMAND') === 'dev') {
+  it('should update title correctly', () => {
+    cy.visit('/hmr/title.html')
+    cy.title().should('include', 'HMR Title')
+    cy.get('.e2e-theme-content #rendered-title + p').should(
+      'have.text',
+      'HMR Title',
+    )
+
+    cy.task('hmr:title')
+      .then(() => {
+        cy.title().should('include', 'Updated Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'Updated Title',
+        )
+      })
+      .then(() => cy.task('hmr:title:restore'))
+      .then(() => {
+        cy.title().should('include', 'HMR Title')
+        cy.get('.e2e-theme-content #rendered-title + p').should(
+          'have.text',
+          'HMR Title',
+        )
+      })
+  })
+}