Added jest, jest-puppeteer and jest-image-snapshot for e2e tests

ezeed · May 30, 2019 · 6974892 · 6974892
1 parent ee0cb87
commit 6974892
Show file tree

Hide file tree

Showing 8 changed files with 529 additions and 28 deletions.
diff --git a/__mocks__/MERMAID.js b/__mocks__/MERMAID.js
@@ -0,0 +1,3 @@
+export const curveBasis = 'basis'
+export const curveLinear = 'linear'
+export const curveCardinal = 'cardinal'
diff --git a/e2e/jest.con b/e2e/jest.con
@@ -0,0 +1,5 @@
+// jest.config.js
+module.exports = {
+  verbose: true,
+  preset: 'jest-puppeteer'
+}
diff --git a/e2e/platform/e2e.html b/e2e/platform/e2e.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <script src="/e2e.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <style></style>
+  </head>
+  <body>
+    <script src="./mermaid.js"></script>
+    <script>
+      mermaid.initialize({
+        startOnLoad: false,
+        useMaxWidth: true,
+      });
+    </script>
+  </body>
+</html>
diff --git a/e2e/platform/viewer.js b/e2e/platform/viewer.js
@@ -0,0 +1,47 @@
+import { Base64 } from 'js-base64'
+
+/**
+ * ##contentLoaded
+ * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and
+ * calls init for rendering the mermaid diagrams on the page.
+ */
+const contentLoaded = function () {
+  let pos = document.location.href.indexOf('?graph=')
+  if (pos > 0) {
+    pos = pos + 7
+    const graphBase64 = document.location.href.substr(pos)
+    const graphObj = JSON.parse(Base64.decode(graphBase64))
+    // const graph = 'hello'
+    console.log(graphObj.code)
+    const div = document.createElement('div')
+    div.id = 'block'
+    div.className = 'mermaid'
+    div.innerHTML = graphObj.code
+    document.getElementsByTagName('body')[0].appendChild(div)
+    global.mermaid.initialize({
+      theme: 'neutral',
+      themeCSS: '.node rect { fill: red; }',
+      htmlLabels: false,
+      // logLevel: 3,
+      // flowchart: { curve: 'linear' },
+      // gantt: { axisFormat: '%m/%d/%Y' },
+      // sequence: { actorMargin: 50 },
+      // sequenceDiagram: { actorMargin: 300 } // deprecated
+      startOnLoad: false
+    })
+    global.mermaid.init()
+  }
+}
+
+if (typeof document !== 'undefined') {
+  /*!
+   * Wait for document loaded before starting the execution
+   */
+  window.addEventListener(
+    'load',
+    function () {
+      contentLoaded()
+    },
+    false
+  )
+}
diff --git a/e2e/spec/flowchart.spec.js b/e2e/spec/flowchart.spec.js
@@ -0,0 +1,10 @@
+/* eslint-env jest */
+describe('Google', () => {
+  beforeAll(async () => {
+    await page.goto('https://google.com')
+  })
+
+  it('should be titled "Google"', async () => {
+    await expect(page.title()).resolves.toMatch('Google')
+  })
+})
diff --git a/package.json b/package.json
@@ -17,8 +17,9 @@
     "build:watch": "yarn build --watch",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
     "lint": "standard",
-    "test": "yarn lint && jest",
-    "test:watch": "jest --watch",
+    "e2e": "yarn lint && jest e2e",
+    "test": "yarn lint && jest src",
+    "test:watch": "jest --watch src",
     "jison": "node -r @babel/register node_modules/.bin/gulp jison",
     "prepublishOnly": "yarn build && yarn release && yarn test",
     "prepush": "yarn test"
@@ -33,6 +34,9 @@
     "ignore": [
       "**/parser/*.js",
       "dist/**/*.js"
+    ],
+    "globals": [
+      "page"
     ]
   },
   "dependencies": {
@@ -61,6 +65,8 @@
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
+    "jest-image-snapshot": "^2.8.2",
+    "jest-puppeteer": "^4.2.0",
     "jison": "^0.4.18",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",

diff --git a/webpack.config.e2e.js b/webpack.config.e2e.js
@@ -0,0 +1,58 @@
+const path = require('path')
+
+const jsRule = {
+  test: /\.js$/,
+  exclude: /node_modules/,
+  use: {
+    loader: 'babel-loader'
+  }
+}
+
+const amdRule = {
+  parser: {
+    amd: false // https://github.com/lodash/lodash/issues/3052
+  }
+}
+const scssRule = {
+  // load scss to string
+  test: /\.scss$/,
+  use: [
+    { loader: 'css-to-string-loader' },
+    { loader: 'css-loader' },
+    { loader: 'sass-loader' }
+  ]
+}
+
+module.exports = {
+  mode: 'development',
+  target: 'web',
+  entry: {
+    mermaid: './src/mermaid.js',
+    e2e: './e2e/platform/viewer.js'
+  },
+  node: {
+    fs: 'empty' // jison generated code requires 'fs'
+  },
+  output: {
+    path: path.join(__dirname, './dist/'),
+    filename: '[name].js',
+    library: 'mermaid',
+    libraryTarget: 'umd',
+    libraryExport: 'default'
+  },
+  devServer: {
+    contentBase: [
+      path.join(__dirname, 'e2e', 'platform'),
+      path.join(__dirname, 'dist')
+    ],
+    compress: true,
+    port: 9000
+  },
+  module: {
+    rules: [amdRule, jsRule, scssRule]
+  },
+  externals: {
+    mermaid: 'mermaid'
+  },
+  devtool: 'source-map'
+}