Adding image snapshots for graphs

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()
   })
 })