[Test] : e2e tests using cypress (#999)

* chore: added cypresss * chore: added sidebar tests * chore: script update * chore: removed cypress examples * chore: added lib to eslintignore * chore: script fixes * chore: updated the snapshot
2026-08-08 21:08:18 +10:00 · 2020-01-30 17:44:13 +05:30
parent a213f98cb0
commit 0e54ea1177
110 changed files with 1921 additions and 6 deletions
@@ -3,3 +3,5 @@ packages/docsify-server-renderer/build.js
 node_modules
 build
 server.js
+cypress
+lib
@@ -4,6 +4,8 @@
 node_modules
 themes/
 lib/
+cypress/integration/examples
+cypress/fixtures/docs

 # exceptions
 !.gitkeep
@@ -1,6 +1,23 @@
 sudo: false
 language: node_js
 node_js: stable
-
+node_js:
+  - '10'
+  - '8'
+  - '12'
+branches:
+  only:
+    - master
+    - develop
+cache:
+  directories:
+    - node_modules
+before_install:
+  - npm update
+install:
+  - npm install
+script:
+  - npm run build
+  - npm run test:e2e
 script:
  - npm run lint
@@ -0,0 +1,3 @@
+{
+  "video": false
+}
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>docsify-e2e-tests</title>
+    <link rel="icon" href="_media/favicon.ico" />
+    <meta
+      name="google-site-verification"
+      content="6t0LoIeFksrjF4c9sqUEsVXiQNxLp2hgoqo0KryT-sE"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta
+      name="keywords"
+      content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages"
+    />
+    <meta name="description" content="A magical documentation generator." />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <link rel="stylesheet" href="lib/themes/vue.css" title="vue" />
+    <link rel="stylesheet" href="lib/themes/dark.css" title="dark" disabled />
+    <link rel="stylesheet" href="lib/themes/buble.css" title="buble" disabled />
+    <link rel="stylesheet" href="lib/themes/pure.css" title="pure" disabled />
+    <script src="//unpkg.com/docsify-plugin-codefund/index.js"></script>
+    <style>
+      nav.app-nav li ul {
+        min-width: 100px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app">Loading Docsify e2e tests suite...</div>
+    <script>
+      window.$docsify = {
+        alias: {
+          '.*?/awesome':
+            'https://raw.githubusercontent.com/docsifyjs/awesome-docsify/master/README.md',
+          '.*?/changelog':
+            'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG.md',
+          '/.*/_navbar.md': '/_navbar.md',
+          '/zh-cn/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-zh/master/$1',
+          '/de-de/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-de/master/$1',
+          '/ru/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-ru/master/$1',
+          '/es/(.*)':
+            'https://raw.githubusercontent.com/docsifyjs/docs-es/master/$1'
+        },
+        auto2top: true,
+        coverpage: true,
+        executeScript: true,
+        loadSidebar: true,
+        loadNavbar: true,
+        mergeNavbar: true,
+        maxLevel: 4,
+        subMaxLevel: 2,
+        ga: 'UA-106147152-1',
+        matomo: {
+          host: '//matomo.thunderwave.de',
+          id: 6
+        },
+        name: 'docsify',
+        search: {
+          noData: {
+            '/de-de/': 'Keine Ergebnisse!',
+            '/zh-cn/': '没有结果!',
+            '/': 'No results!'
+          },
+          paths: 'auto',
+          placeholder: {
+            '/de-de/': 'Suche',
+            '/zh-cn/': '搜索',
+            '/': 'Search'
+          }
+        },
+        formatUpdated: '{MM}/{DD} {HH}:{mm}',
+        plugins: [
+          function(hook, vm) {
+            hook.beforeEach(function(html) {
+              if (/githubusercontent\.com/.test(vm.route.file)) {
+                url = vm.route.file
+                  .replace('raw.githubusercontent.com', 'github.com')
+                  .replace(/\/master/, '/blob/master')
+              } else {
+                url =
+                  'https://github.com/docsifyjs/docsify/blob/master/docs/' +
+                  vm.route.file
+              }
+              var editHtml = '[:memo: Edit Document](' + url + ')\n'
+              return (
+                editHtml +
+                html +
+                '\n\n----\n\n' +
+                '<a href="https://docsify.js.org" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by docsify</a>'
+              )
+            })
+          }
+        ]
+      }
+    </script>
+    <script src="lib/docsify.min.js"></script>
+    <script src="lib/plugins/search.min.js"></script>
+    <script src="lib/plugins/ga.min.js"></script>
+    <script src="lib/plugins/matomo.min.js"></script>
+    <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
+    <script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
+    <script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
+
+    <script>
+      ;((window.gitter = {}).chat = {}).options = {
+        room: 'docsifyjs/Lobby'
+      }
+    </script>
+    <script
+      src="https://sidecar.gitter.im/dist/sidecar.v1.js"
+      async
+      defer
+    ></script>
+  </body>
+</html>
@@ -0,0 +1,344 @@
+context('sidebar.configurations', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000')
+  })
+
+  const quickStartIds = [
+    'initialize',
+    'writing-content',
+    'preview-your-site',
+    'manual-initialization',
+    'loading-dialog'
+  ]
+  quickStartIds.forEach(id => {
+    it('go to #quickstart?id=' + id, () => {
+      cy.get(
+        '.sidebar-nav > :nth-child(1) > :nth-child(1) > ul > :nth-child(1) > a'
+      ).click()
+
+      cy.get(`a.section-link[href='#/quickstart?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const configurationIds = [
+    'el',
+    'repo',
+    'maxlevel',
+    'loadnavbar',
+    'loadsidebar',
+    'submaxlevel',
+    'auto2top',
+    'homepage',
+    'basepath',
+    'relativepath',
+    'coverpage',
+    'logo',
+    'name',
+    'namelink',
+    'markdown',
+    'themecolor',
+    'alias',
+    'autoheader',
+    'executescript',
+    'noemoji',
+    'mergenavbar',
+    'formatupdated',
+    'externallinktarget',
+    'cornerexternallinktarget',
+    'externallinkrel',
+    'routermode',
+    'nocompilelinks',
+    'onlycover',
+    'requestheaders',
+    'ext',
+    'fallbacklanguages',
+    'notfoundpage'
+  ]
+  configurationIds.forEach(id => {
+    it('go to #configuration?id=' + id, () => {
+      cy.get('[href="#/configuration"]').click()
+
+      cy.get(`a.section-link[href='#/configuration?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500) // its more far from the cover
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const morePagesIds = [
+    'sidebar',
+    'nested-sidebars',
+    'set-page-titles-from-sidebar-selection',
+    'table-of-contents',
+    'ignoring-subheaders'
+  ]
+  morePagesIds.forEach(id => {
+    it('go to #more-pages?id=' + id, () => {
+      cy.get('[href="#/more-pages"]').click()
+
+      cy.get(`a.section-link[href='#/more-pages?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const customNavbarIds = [
+    'html',
+    'markdown',
+    'nesting',
+    'combining-custom-navbars-with-the-emoji-plugin'
+  ]
+  customNavbarIds.forEach(id => {
+    it('go to #custom-navbar?id=' + id, () => {
+      cy.get('[href="#/custom-navbar"]').click()
+
+      cy.get(`a.section-link[href='#/custom-navbar?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const coverIds = [
+    'basic-usage',
+    'custom-background',
+    'coverpage-as-homepage',
+    'multiple-covers'
+  ]
+  coverIds.forEach(id => {
+    it('go to #cover?id=' + id, () => {
+      cy.get('[href="#/cover"]').click()
+
+      cy.get(`a.section-link[href='#/cover?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const themesIds = ['other-themes']
+  themesIds.forEach(id => {
+    it('go to #themes?id=' + id, () => {
+      cy.get('[href="#/themes"]').click()
+
+      cy.get(`a.section-link[href='#/themes?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const pluginsIds = [
+    'full-text-search',
+    'google-analytics',
+    'emoji',
+    'external-script',
+    'zoom-image',
+    'edit-on-github',
+    'demo-code-with-instant-preview-and-jsfiddle-integration',
+    'copy-to-clipboard',
+    'disqus',
+    'gitalk',
+    'pagination',
+    'codefund',
+    'tabs',
+    'more-plugins'
+  ]
+  pluginsIds.forEach(id => {
+    it('go to #plugins?id=' + id, () => {
+      cy.get('[href="#/plugins"]').click()
+
+      cy.get(`a.section-link[href='#/plugins?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const writeAPluginIds = ['full-configuration', 'example', 'tips']
+  writeAPluginIds.forEach(id => {
+    it('go to #write-a-plugin?id=' + id, () => {
+      cy.get('[href="#/write-a-plugin"]').click()
+
+      cy.get(`a.section-link[href='#/write-a-plugin?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const markdownIds = ['supports-mermaid']
+  markdownIds.forEach(id => {
+    it('go to #markdown?id=' + id, () => {
+      cy.get('[href="#/markdown"]').click()
+
+      cy.get(`a.section-link[href='#/markdown?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  it('go to #Language-highlight', () => {
+    cy.get('a[href="#/language-highlight"]')
+      .click()
+      .then(() => {
+        cy.wait(500)
+        cy.matchImageSnapshot()
+      })
+  })
+
+  // const deployIds = [
+  //   'github-pages',
+  //   'gitlab-pages',
+  //   'firebase-hosting',
+  //   'vps',
+  //   'netlify',
+  //   'zeit-now',
+  //   'aws-amplify'
+  // ]
+  // deployIds.forEach(id => {
+  //   it('go to #deploy?id=' + id, () => {
+  //     cy.get('[href="#/deploy"]').click()
+
+  //     cy.get(`a.section-link[href='#/deploy?id=${id}']`)
+  //       .click()
+  //       .then(() => {
+  //         cy.wait(500)
+  //         cy.matchImageSnapshot()
+  //       })
+  //   })
+  // })
+
+  const helpersIds = [
+    'important-content',
+    'general-tips',
+    'ignore-to-compile-link',
+    'set-target-attribute-for-link',
+    'disable-link',
+    'github-task-lists',
+    'image-resizing',
+    'customise-id-for-headings',
+    'markdown-in-html-tag'
+  ]
+  helpersIds.forEach(id => {
+    it('go to #helpers?id=' + id, () => {
+      cy.get('[href="#/helpers"]').click()
+
+      cy.get(`a.section-link[href='#/helpers?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const vueIds = ['basic-usage', 'combine-vuep-to-write-playground']
+  vueIds.forEach(id => {
+    it('go to #vue?id=' + id, () => {
+      cy.get('[href="#/vue"]').click()
+
+      cy.get(`a.section-link[href='#/vue?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const cdnIds = [
+    'latest-version',
+    'specific-version',
+    'compressed-file',
+    'other-cdn'
+  ]
+  cdnIds.forEach(id => {
+    it('go to #cdn?id=' + id, () => {
+      cy.get('[href="#/cdn"]').click()
+
+      cy.get(`a.section-link[href='#/cdn?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const pwaIds = ['create-serviceworker', 'register', 'enjoy-it']
+  pwaIds.forEach(id => {
+    it('go to #pwa?id=' + id, () => {
+      cy.get('[href="#/pwa"]').click()
+
+      cy.get(`a.section-link[href='#/pwa?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+
+  const ssrIds = [
+    'why-ssr',
+    'quick-start',
+    'custom-template',
+    'configuration',
+    'deploy-for-your-vps'
+  ]
+
+  ssrIds.forEach(id => {
+    it('go to #ssr?id=' + id, () => {
+      cy.get('[href="#/ssr"]').click()
+
+      cy.get(`a.section-link[href='#/ssr?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+  const embedFilesIds = [
+    'embedded-file-type',
+    'embedded-code-fragments',
+    'tag-attribute',
+    'the-code-block-highlight'
+  ]
+  embedFilesIds.forEach(id => {
+    it('go to #embed-files?id=' + id, () => {
+      cy.get('[href="#/embed-files"]').click()
+
+      cy.get(`a.section-link[href='#/embed-files?id=${id}']`)
+        .click()
+        .then(() => {
+          cy.wait(500)
+          cy.matchImageSnapshot()
+        })
+    })
+  })
+})
@@ -0,0 +1,13 @@
+const path = require('path')
+const LiveServer = require('live-server')
+
+const fixturePath = path.join(__dirname, './fixtures/docs')
+const args = process.argv.slice(2)
+console.log('[e2e tests] : args passed to live server', args)
+const params = {
+  port: args[0] || 3000,
+  root: args[1] || fixturePath,
+  open: false
+  // NoBrowser: true
+}
+LiveServer.start(params)
@@ -0,0 +1,18 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  addMatchImageSnapshotPlugin(on, config)
+}
@@ -0,0 +1,75 @@
+const copyDir = require('copy-dir')
+const path = require('path')
+const fs = require('fs')
+const { spawn } = require('child_process')
+
+const setup = async () => {
+  const PORT = process.env.PORT || 3000
+  global.__LIVESERVER__ = null
+  global.PORT = PORT
+
+  /**
+   * IN this test suite, we are going to test our docs site with all the css,js linked to our local build packages
+   *
+   *  1.1 Copy ../docs --> ./fixtures/docs
+   *  1.2 copy lib,themes --> ./fixtures/
+   *  2. change the content of fixtures/docs/index.html to use all the links from our local build
+   *  3. now jest runner will run to test all the *.spec.js files
+   *
+   */
+
+  const shippedDirs = ['lib', 'themes']
+
+  // 1
+  const docsPath = path.join(process.cwd(), './docs')
+  const fixtureDocsPath = path.join(__dirname, './fixtures/docs')
+
+  // 1.1
+  console.log('[cypress test docs] Copying the docs --> cypress/fixtures/docs')
+  copyDir.sync(docsPath, fixtureDocsPath)
+
+  // 1.2
+  shippedDirs.forEach(dir => {
+    const fromPath = path.join(process.cwd(), dir)
+    const toPath = path.join(__dirname, `./fixtures/docs/${dir}`)
+    console.log(
+      `[cypress test docs] Copying  ${dir} --> cypress/fixtures/docs/${dir}`
+    )
+    copyDir.sync(fromPath, toPath)
+  })
+
+  // 2
+  console.log(
+    '[cypress test docs] Replacing content the tpl/index.html --> cypress/fixtures/docs/index.html'
+  )
+  const indexHTMLtplPath = path.join(
+    __dirname,
+    './fixtures/tpl/docs.index.html'
+  )
+  const fixtureIndexPath = path.join(__dirname, './fixtures/docs/index.html')
+  const data = fs.readFileSync(indexHTMLtplPath, 'utf8')
+
+  // 3
+  const fixturePath = path.join(__dirname, './fixtures/docs')
+
+  fs.writeFileSync(fixtureIndexPath, data, 'utf8')
+  const child = spawn('node', [
+    path.join(__dirname, './live.server.js'),
+    PORT,
+    fixturePath
+  ])
+  child.on('exit', code => {
+    console.log(`Child process exited with code ${code}`)
+  })
+  child.stdout.on('data', data => {
+    console.log(`stdout: ${data}`)
+  })
+  child.stderr.on('data', data => {
+    console.log(`stderr: ${data}`)
+  })
+
+  // LiveServer.start(params)
+  global.__LIVESERVER__ = child
+}
+
+setup()
--- a/Show More
+++ b/Show More