add mermaidjs to markdown notebook ui tests

jupyterlab · Mar 1, 2023 · 9f69978 · 9f69978
1 parent a30efbc
commit 9f69978
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 2 deletions.
diff --git a/galata/test/jupyterlab/notebook-markdown.test.ts b/galata/test/jupyterlab/notebook-markdown.test.ts
@@ -75,4 +75,18 @@ test.describe('Notebook Markdown', () => {
       imageName
     );
   });
+
+  test('Render a MermaidJS flowchart', async ({ page, tmpPath }) => {
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    const imageName = 'render-mermaid-flowchart.png';
+    const cell = await page.notebook.getCell(3);
+    expect(await cell.screenshot()).toMatchSnapshot(imageName);
+  });
+
+  test('Render a MermaidJS error', async ({ page, tmpPath }) => {
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    const imageName = 'render-mermaid-error.png';
+    const cell = await page.notebook.getCell(4);
+    expect(await cell.screenshot()).toMatchSnapshot(imageName);
+  });
 });
diff --git a/...b/notebook-markdown.test.ts-snapshots/render-mermaid-error-jupyterlab-linux.png b/...b/notebook-markdown.test.ts-snapshots/render-mermaid-error-jupyterlab-linux.png
diff --git a/...tebook-markdown.test.ts-snapshots/render-mermaid-flowchart-jupyterlab-linux.png b/...tebook-markdown.test.ts-snapshots/render-mermaid-flowchart-jupyterlab-linux.png
diff --git a/galata/test/jupyterlab/notebooks/markdown_notebook.ipynb b/galata/test/jupyterlab/notebooks/markdown_notebook.ipynb
@@ -77,6 +77,34 @@
     "$ ls\n",
     "```"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Demonstration of MermaidJS\n",
+    "\n",
+    "Below is a diagram of a chicken and an egg.\n",
+    "\n",
+    "```mermaid\n",
+    "flowchart LR\n",
+    "  chicken --> egg --> chicken\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "### Broken MermaidJS\n",
+    "\n",
+    "Below is a broken diagram.\n",
+    "\n",
+    "```mermaid\n",
+    "flowchart LR\n",
+    "  chicken --> egg --> \n",
+    "```"
+   ]
   }
  ],
  "metadata": {
@@ -95,7 +123,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.3"
+   "version": "3.11.0"
   }
  },
  "nbformat": 4,

diff --git a/packages/markedparser-extension/package.json b/packages/markedparser-extension/package.json
@@ -24,6 +24,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/base.css",
     "style/index.css",
     "style/index.js",
     "src/**/*.{ts,tsx}"

diff --git a/packages/markedparser-extension/src/index.ts b/packages/markedparser-extension/src/index.ts
@@ -204,7 +204,7 @@ namespace Private {
     document.body.appendChild(el);
 
     try {
-      const { svg } = await _mermaid.mermaidAPI.render(id, token.text, el);
+      const { svg } = await _mermaid.render(id, token.text, el);
       html = `<img src="data:image/svg+xml,${encodeURIComponent(svg)}" />`;
     } catch (err) {
       className = `${className} ${ERROR_CLASS}`;