Adding image snapshots for graphs

babel.config.js

@@ -1,5 +1,12 @@
 module.exports = {
-  'presets': [
-    '@babel/preset-env'
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
   ]
 }

e2e/helpers/util.js

@@ -0,0 +1,13 @@
+import { Base64 } from 'js-base64'
+
+const mermaidUrl = (graphStr, options) => {
+  const obj = {
+    code: graphStr,
+    mermaid: options
+  }
+  const objStr = JSON.stringify(obj)
+  // console.log(Base64)
+  return 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr)
+}
+
+export default mermaidUrl

e2e/jest.con

@@ -1,5 +0,0 @@
-// jest.config.js
-module.exports = {
-  verbose: true,
-  preset: 'jest-puppeteer'
-}

e2e/jest.config.js

@@ -0,0 +1,11 @@
+// jest.config.js
+module.exports = {
+  // verbose: true,
+  transform: {
+    '^.+\\.jsx?$': '../transformer.js'
+  },
+  preset: 'jest-puppeteer',
+  'globalSetup': 'jest-environment-puppeteer/setup',
+  'globalTeardown': 'jest-environment-puppeteer/teardown',
+  'testEnvironment': 'jest-environment-puppeteer'
+}

e2e/platform/viewer.js

@@ -12,23 +12,13 @@ const contentLoaded = function () {
     const graphBase64 = document.location.href.substr(pos)
     const graphObj = JSON.parse(Base64.decode(graphBase64))
     // const graph = 'hello'
-    console.log(graphObj.code)
+    console.log(graphObj)
     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.initialize(graphObj.mermaid)
     global.mermaid.init()
   }
 }

e2e/spec/flowchart.spec.js

@@ -1,10 +1,23 @@
 /* eslint-env jest */
-describe('Google', () => {
-  beforeAll(async () => {
-    await page.goto('https://google.com')
-  })
+import mermaidUrl from '../helpers/util.js'
+const { toMatchImageSnapshot } = require('jest-image-snapshot')
 
-  it('should be titled "Google"', async () => {
-    await expect(page.title()).resolves.toMatch('Google')
+expect.extend({ toMatchImageSnapshot })
+
+describe('Google', () => {
+  it('should apa', async () => {
+    const url = mermaidUrl(`graph TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+    `, {})
+
+    await page.goto(url)
+
+    const image = await page.screenshot()
+
+    expect(image).toMatchImageSnapshot()
   })
 })

package.json

@@ -17,7 +17,7 @@
     "build:watch": "yarn build --watch",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
     "lint": "standard",
-    "e2e": "yarn lint && jest e2e",
+    "e2e": "yarn lint && jest e2e --config e2e/jest.config.js",
     "test": "yarn lint && jest src",
     "test:watch": "jest --watch src",
     "jison": "node -r @babel/register node_modules/.bin/gulp jison",
@@ -65,14 +65,17 @@
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
+    "jest-environment-puppeteer": "^4.2.0",
     "jest-image-snapshot": "^2.8.2",
     "jest-puppeteer": "^4.2.0",
     "jison": "^0.4.18",
     "node-sass": "^4.11.0",
+    "puppeteer": "^1.17.0",
     "sass-loader": "^7.1.0",
     "standard": "^12.0.1",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.4.1",
     "webpack-node-externals": "^1.7.2",
     "yarn-upgrade-all": "^0.5.0"
   },