docsifyjs · anikethsaha · Dec 23, 2019 · Dec 23, 2019 · Dec 30, 2019 · Dec 30, 2019
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,6 @@
 packages/docsify-server-renderer/build.js
 node_modules
 build
-server.js
+test
+server.js
+e2e/**/*.(test|spec).(js|ts)
diff --git a/.eslintrc b/.eslintrc
@@ -10,11 +10,21 @@
     "max-params": "off",
     "no-script-url": "off",
     "camelcase": "off",
-    "no-warning-comments": "off"
+    "object-curly-spacing": "off",
+    "no-warning-comments": "off",
+    "no-negated-condition": "off",
+    "eqeqeq": "warn",
+    "no-eq-null": "warn",
+    "max-statements-per-line":"warn"
   },
   "globals": {
     "Docsify": true,
     "$docsify": true,
     "process": true
+  },
+  "env": {
+    "browser": true,
+    "amd": true,
+    "node": true
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 node_modules
 themes/
 lib/
-
+e2e/fixtures/docs
+e2e/__tests__/__image_snapshots__/__diff_output__
 # exceptions
-!.gitkeep
+!.gitkeep
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+}
diff --git a/...e_snapshots__/index-spec-js-should-take-snapshots-of-home-page-cover-1-snap.png b/...e_snapshots__/index-spec-js-should-take-snapshots-of-home-page-cover-1-snap.png
diff --git a/e2e/__tests__/index.spec.js b/e2e/__tests__/index.spec.js
@@ -0,0 +1,30 @@
+import puppeteer from 'puppeteer'
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
+var browser
+var page
+
+jest.setTimeout(30000)
+expect.extend({ toMatchImageSnapshot })
+beforeAll(async () => {
+  browser = await puppeteer.launch()
+  page = await browser.newPage()
+  await page.goto('https://www.google.com')
+})
+
+afterAll(async () => {
+  await browser.close()
+  // SetTimeout(() => process.exit(0), 5000)
+})
+
+test('should take snapshots of home page (cover) ', async done => {
+  expect(Object.keys(page).length).toBeGreaterThan(0)
+
+  await page.goto('http://127.0.0.1:3000')
+  const ss = await page.screenshot()
+
+  expect(ss).toMatchImageSnapshot({
+    failureThreshold: 10,
+    failureThresholdType: 'percent'
+  })
+  done()
+})
diff --git a/e2e/babel_testEnvironment.js b/e2e/babel_testEnvironment.js
@@ -0,0 +1,4 @@
+require('@babel/register')({
+  extensions: ['.ts', '.js']
+})
+module.exports = require('./testEnvironment.js')
diff --git a/e2e/fixtures/tpl/index.html b/e2e/fixtures/tpl/index.html
@@ -0,0 +1,125 @@
+<!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>'
+              )
+            })
+          },
+          DocsifyCodefund.create('fae1f9a4-870c-4c25-b8e0-c80464f7a95c')
+        ]
+      }
+    </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>
diff --git a/e2e/testEnvironment.js b/e2e/testEnvironment.js
@@ -0,0 +1,86 @@
+import NodeEnvironment from 'jest-environment-node'
+import copyDir from 'copy-dir'
+import path from 'path'
+import fs from 'fs'
+import liveServer from 'live-server'
+
+export default class CustomEnvironment extends NodeEnvironment {
+  constructor(config, context) {
+    super(config, context)
+    this.PORT = this.global.PORT || 3000
+    global.__LIVESERVER__ = null
+  }
+
+  async setup() {
+    /**
+     * 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. run the local-server (localhost:3000)
+     *  4. now jest runner will run to test all the *.spec.js files
+     *
+     *  Scripts
+     *  pretest:e2e : babel-node e2e/setup
+     *  test:e2e : jest e2e
+     *  posttest:e2e : del-cli e2e/fixtures/docs #removing the docs from the fixture in order to always test with latest docs to match with the PR
+     *
+     */
+
+    const shippedDirs = ['lib', 'themes']
+
+    // 1
+    const docsPath = path.join(process.cwd(), './docs')
+    const fixtureDocsPath = path.join(__dirname, './fixtures/docs')
+
+    // 1.1
+    console.log('[e2e test docs] Copying the docs --> e2e/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(
+        `[e2e test docs] Copying  ${dir} --> e2e/fixtures/docs/${dir}`
+      )
+      copyDir.sync(fromPath, toPath)
+    })
+
+    // 2
+    console.log(
+      '[e2e test docs] Replacing content the tpl/index.html --> e2e/fixtures/docs/index.html'
+    )
+    const indexHTMLtplPath = path.join(__dirname, './fixtures/tpl/index.html')
+    const fixtureIndexPath = path.join(__dirname, './fixtures/docs/index.html')
+    const data = fs.readFileSync(indexHTMLtplPath, 'utf8')
+    fs.writeFileSync(fixtureIndexPath, data, 'utf8')
+
+    // 3
+    const fixturePath = path.join(__dirname, './fixtures/docs')
+
+    const params = {
+      port: this.PORT,
+      root: fixturePath,
+      open: false
+      // NoBrowser: true
+    }
+    console.log(params)
+    liveServer.start(params)
+    global.__LIVESERVER__ = liveServer
+  }
+
+  async teardown() {
+    console.log(
+      '[e2e test docs] Shutting down the server',
+      this.global.__LIVESERVER__
+    )
+    global.__LIVESERVER__.shutdown()
+    await super.teardown()
+  }
+
+  runScript(script) {
+    return super.runScript(script)
+  }
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  //   GlobalSetup: '<rootDir>/e2e/setup.js',
+  //   globalTeardown: '<rootDir>/e2e/teardown.js'
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest'
+  },
+  testEnvironment: '<rootDir>/e2e/babel_testEnvironment.js'
+}