[update] github native mermaid download test

zephyraft · Feb 16, 2022 · 2145ef0 · 2145ef0
1 parent e6854f3
commit 2145ef0
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 57 deletions.
diff --git a/README.CN.md b/README.CN.md
@@ -16,17 +16,14 @@ A --> B
 ## 支持列表
 
 - [x] GitHub
-  - [x] readme
-  - [x] markdown preview
-  - [x] edit preview
   - [x] gist(需要名称匹配*.md)
-  - [x] comment
-  - [x] issue
+  - [x] gist评论
+  - [x] 原生mermaid下载
   - [x] ...
 - [x] Bitbucket
   - [x] readme
-  - [x] markdown preview
-  - [x] edit preview
+  - [x] markdown预览
+  - [x] 编辑预览
   - [x] ...
 - [x] mermaid图片导出.
 - [x] 提供自定义排除列表和规则列表配置能力.
@@ -67,6 +64,7 @@ div.codehilite > pre
 ```
 
 ## 改动日志
+- [1.2.7]  更新mermaid版本到8.14.0, 支持GitHub原生mermaid下载.
 - [1.2.6]  更新mermaid版本到8.13.8, 优化配置页交互与样式.
 - [1.2.5]  更新mermaid版本到8.13.5. 修复bitbucket预览问题.
 - [1.2.4]  新增popup配置页, 提供域名排除列表以及dom selector配置.
@@ -81,7 +79,7 @@ div.codehilite > pre
 ## TODO
 
 - [x] 自动化测试套件
-- [ ] 下载github原生mermaid
+- [x] 下载github原生mermaid
 - [ ] 改进toast样式
 - [ ] 增加hover菜单，用于下载/复制code
 - [ ] ...

diff --git a/README.md b/README.md
@@ -15,12 +15,9 @@ Right-click on the rendered mermaid image and select "Export png" to export the
 ## Support list
 
 - [x] GitHub
-  - [x] readme
-  - [x] markdown preview
-  - [x] edit preview
   - [x] gist(need to match *.md)
-  - [x] comment
-  - [x] issue
+  - [x] gist comment
+  - [x] native mermaid download
   - [x] ...
 - [x] Bitbucket
   - [x] readme
@@ -67,6 +64,7 @@ div.codehilite > pre
 ```
 
 ## Changelog
+- [1.2.7]  Update mermaid version to 8.14.0, support GitHub native mermaid download
 - [1.2.6]  Update mermaid version to 8.13.8, optimize configuration page interaction and style.
 - [1.2.5]  Update mermaid version to 8.13.5, fix preview issue of Bitbucket.
 - [1.2.4]  Added popup options page, providing domain exclusion and dom selector configuration.
@@ -81,7 +79,7 @@ div.codehilite > pre
 ## TODO
 
 - [x] autotest suit.
-- [ ] download for GitHub native mermaid.
+- [x] download for GitHub native mermaid.
 - [ ] modify toast style.
 - [ ] added hover menu for downloading/copying code.
 - [ ] ...

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid-previewer",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Preview and export mermaid in github/bitbucket.",
   "directories": {
     "test": "test"

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Mermaid Previewer",
   "description": "Preview and export mermaid in github/bitbucket.",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "manifest_version": 3,
   "background": {
     "service_worker": "src/worker/background.js"

diff --git a/test/content.test.js b/test/content.test.js
@@ -57,17 +57,17 @@ const checkMermaid = async (count, elements) => {
   }
 };
 
-const clickDownloadMenu = async (element) => {
+const clickDownloadMenu = async (element, upCount) => {
   await driver.actions()
     .move({origin:element})
     .contextClick()
     .perform();
   await sleep(100);
 
   // robotjs库 模拟系统点击，此处不能使用selenium，因为webdriver无法sendKeys到native上下文菜单
-  robot.keyTap("up");
-  robot.keyTap("up");
-  robot.keyTap("up");
+  for (let i = 0; i < upCount; i++) {
+    robot.keyTap("up");
+  }
   robot.keyTap("enter");
 
   await sleep(100);
@@ -88,32 +88,32 @@ describe("mermaid-render", () => {
     await checkMermaid(1);
   });
 
-  test("github-render", async () => {
-    await driver.get("https://github.com/zephyraft/mermaid-previewer/blob/master/assets/example.md");
-    await waitMermaidRender();
-    await checkMermaid(14);
-  });
+  // test("github-render", async () => {
+  //   await driver.get("https://github.com/zephyraft/mermaid-previewer/blob/master/assets/example.md");
+  //   await waitMermaidRender();
+  //   await checkMermaid(14);
+  // });
 });
 
 describe("mermaid-edit-preview", () => {
-  test("github-edit-preview", async () => {
-    await driver.get("https://github.com/zephyraft/mermaid-previewer/blob/master/assets/example.md");
-    await addGithubCookie(driver);
-    await driver.navigate().refresh();
-    // 编辑
-    const editButton = await driver.waitElementLocated(By.css("form[action='/zephyraft/mermaid-previewer/edit/master/assets/example.md'] > button"));
-    // const form = await driver.findElement(By.css("form[action='/zephyraft/mermaid-previewer/edit/master/assets/example.md']"));
-    // console.log(await form.getAttribute("innerHTML"));
-    // 点击preview按钮
-    await editButton.click();
-    console.log("editButton Click");
-    // 等待edit加载完成
-    const previewButton = await driver.waitElementLocated(By.className("preview"));
-    await previewButton.click();
-    console.log("previewButton Click");
-    await waitMermaidRender();
-    await checkMermaid(14);
-  });
+  // test("github-edit-preview", async () => {
+  //   await driver.get("https://github.com/zephyraft/mermaid-previewer/blob/master/assets/example.md");
+  //   await addGithubCookie(driver);
+  //   await driver.navigate().refresh();
+  //   // 编辑
+  //   const editButton = await driver.waitElementLocated(By.css("form[action='/zephyraft/mermaid-previewer/edit/master/assets/example.md'] > button"));
+  //   // const form = await driver.findElement(By.css("form[action='/zephyraft/mermaid-previewer/edit/master/assets/example.md']"));
+  //   // console.log(await form.getAttribute("innerHTML"));
+  //   // 点击preview按钮
+  //   await editButton.click();
+  //   console.log("editButton Click");
+  //   // 等待edit加载完成
+  //   const previewButton = await driver.waitElementLocated(By.className("preview"));
+  //   await previewButton.click();
+  //   console.log("previewButton Click");
+  //   await waitMermaidRender();
+  //   await checkMermaid(14);
+  // });
   test("bitbucket-edit-preview", async () => {
     await driver.get("https://bitbucket.org/zephyraft/test/src/master/README.md");
     await addBitbucketCookie(driver);
@@ -148,35 +148,53 @@ describe("mermaid-edit-preview", () => {
 });
 
 describe("download", () => {
+  const upCount = 3;
+  const iframeUpCount = 5;
+
+  const base64 = "iVBORw0KGgoAAAANSUhEUgAAAH8AAAA6CAYAAACZKIbMAAAAAXNSR0IArs4c6QAABYdJREFUeF7tnH9MlHUcxz/PcQOidAjEmgn9Io0VW8ZkLZdjJMrgCsexHZPfP0/jx4UMotSlwzlgJHQiZmKAzhGGy8qs4bLxR5GIa6VzZWIwKJajWQhIwT1Pe5517ILjnuf5fp8995z3ub/Y7vu57+f7ej3v5/k+t4djAF9eS4Dx2pXjwgHle/FBgPJRvhcT8OKlY/JRvhcT8OKlu0z+wdd+fsudbFiWOW2xRlx1Zw+0c7ubYWnTk3uXWoOo/Gc2BO2hBUBS/8v3ExN3btvWe7r8I9WDw6tjAsNJGNDWXL/412/muscfppIftSGItg/Z9Z8cHLpn5L+UtSo8MNRXNgOagonxf+B8268onwYibS2ffJQvkyImXyawBcMx+XT8FKnG5BNgxOQTQHMoweTT8VOkGpNPgBGTTwANk08HTelqTD4BUUw+ATRMPh00pasx+QREMfkE0LSS/P3734De3vNgsbwJiYkpslfirfJTUmJhampynpefnz+EhIRCXFwCpKXlgV6vl8TSbbd6k5N3IC1tM4SFPQL+/vdBY+P7khp2HOTN8teujYHkZJOAY2bmLly58h10d58AgyEViourJLF0m/yzZ7uhvb0Fdu6sherqV6Gt7SNYuTJMUtP2Qd4sf9Oml2Hbtor/8aqpqYJr136Azs4vJHF0m/yysmyIiHgKSkurITv7FYiPN0BmpllS054gPyYm5jGWZSMHBgbOiS1K7oaPP+07k19Xtxtu3PgRjh79UGxK4X23yB8ZGYKCglRoamqDyMgo6Og4DBcufA7t7R8Dw0h/akzLyefl22y2mxzHfanT6Q64OghI5PNhKSoqFyROT0/B5cvfQkPDHigpeR0SEpK1K7+11Qp9fb1w7NhpocmxsVHIydkCDQ3vQVTUc5Ia5wd5gnz7YlwdBCTyHTd8/Bw6nQ6MxgzIyysR/pbyUj35LMtCRkaSsDExmXLme6ysLIKwsEehvHy3lL6FMZ4k39VBQCJ/3br1YDSmCx87NzcHo6PD0NXVDitWBENtbYukHb/q8i9d+gZ27SpzKjgg4H7o6uoBX18/SQeAJ8p3dhCQyHd2zecPgPx8I1RW7oWNG5NEGaoun7+3Hx+/tWinOjs7C1VVZqHx2NjNoo3zA85Yb053flUR8Of0CHAc1yypSKVBDMMsB4Assek4joOs2Na/DQVP+0l9jGupDR8/l8HwgnALWFhoEZta3Q2f/d5++/YKSEoyLmrOfkbYt88q2vhC+ZIKNDpo64stkFz0LNDKHxoaBLPZBGbzDkhJ2Sq6WlWTz9/bHzpUL9yHBgYufuCzp+dTaGysgZMnz0FQUIho82esg9Of9b3dNPzHxTHRweoPCGYYRvSpZpZlv86N64hKzF+zXI58xy95bDabsGk+deo4fwaE5uYTsGwZf+Jx/VJVvsWSA/xXkfX17zrtij8zmEzxkJtbDKmpmWK9e+SGz+Gaf0Sv1x/o7++/TnLNd9zt87v74OAHITr6eUhPL4TQ0IdE2fEDVJUvqSMZgzxxw8dx3Lx0+1LlypeByOVQlK8UyQWfY/+Sx1nSF06J8gkkeELynSUd5RPIXliiZfnR0dFP+Pj4+PDXdLGlYvLFCDl5X8vy5SwH5cuh9d9YlE8AzaEEN3x0/BSpxuQTYMTkE0DD5NNBU7oak09AFJNPAA2TTwdN6WpMPgFRTD4BNEw+HTSlqzH5BEQx+QTQMPl00JSuxuQTEMXkE0DD5NNBU7oak09AFJNPAE3p5K9a/cAOujbIqm//PgP3yi9whoYHBJJRoKu6NXx3kvgXON8p+ymNbnraap+rnv7zq+5maLGu+WApC9L/eY7WI9ZrjgDK15wS9RpC+eqx1txMKF9zStRrCOWrx1pzM6F8zSlRr6F/AaOqOIaA4WCKAAAAAElFTkSuQmCC";
+
+  const checkDownload = async () => {
+    const toast = await driver.waitElementLocated(By.className("toastify"));
+    expect(await toast.getInnerHTML()).toBe("Export Success<span class=\"toast-close\">✖</span>");
+    fs.readdirSync(`${os.homedir}/Downloads`).filter(filename => filename.startsWith("mermaid-") && filename.endsWith(".png")).forEach(filename => {
+      const file = `${os.homedir}/Downloads/${filename}`;
+      const image = fs.readFileSync(file, { encoding: "base64" });
+      console.log("data:image/png;base64," + image);
+      expect(image).toBe(base64);
+      console.log(`删除测试文件: ${file}`);
+      fs.unlinkSync(file);
+    });
+  };
+
   test("download-failed", async () => {
     await driver.get("https://bitbucket.org/zephyraft/test/src/master/");
     await waitMermaidRender();
     await checkMermaid(1);
     const textElement = await driver.findElement(By.id("markdown-header-readme"));
-    await clickDownloadMenu(textElement);
+    await clickDownloadMenu(textElement, upCount);
 
     const toast = await driver.waitElementLocated(By.className("toastify"));
     expect(await toast.getInnerHTML()).toBe('Please use it above the specific mermaid diagram<span class="toast-close">✖</span>');
   });
 
-  const base64 = "iVBORw0KGgoAAAANSUhEUgAAAH8AAAA6CAYAAACZKIbMAAAAAXNSR0IArs4c6QAABYdJREFUeF7tnH9MlHUcxz/PcQOidAjEmgn9Io0VW8ZkLZdjJMrgCsexHZPfP0/jx4UMotSlwzlgJHQiZmKAzhGGy8qs4bLxR5GIa6VzZWIwKJajWQhIwT1Pe5517ILjnuf5fp8995z3ub/Y7vu57+f7ej3v5/k+t4djAF9eS4Dx2pXjwgHle/FBgPJRvhcT8OKlY/JRvhcT8OKlu0z+wdd+fsudbFiWOW2xRlx1Zw+0c7ubYWnTk3uXWoOo/Gc2BO2hBUBS/8v3ExN3btvWe7r8I9WDw6tjAsNJGNDWXL/412/muscfppIftSGItg/Z9Z8cHLpn5L+UtSo8MNRXNgOagonxf+B8268onwYibS2ffJQvkyImXyawBcMx+XT8FKnG5BNgxOQTQHMoweTT8VOkGpNPgBGTTwANk08HTelqTD4BUUw+ATRMPh00pasx+QREMfkE0LSS/P3734De3vNgsbwJiYkpslfirfJTUmJhampynpefnz+EhIRCXFwCpKXlgV6vl8TSbbd6k5N3IC1tM4SFPQL+/vdBY+P7khp2HOTN8teujYHkZJOAY2bmLly58h10d58AgyEViourJLF0m/yzZ7uhvb0Fdu6sherqV6Gt7SNYuTJMUtP2Qd4sf9Oml2Hbtor/8aqpqYJr136Azs4vJHF0m/yysmyIiHgKSkurITv7FYiPN0BmpllS054gPyYm5jGWZSMHBgbOiS1K7oaPP+07k19Xtxtu3PgRjh79UGxK4X23yB8ZGYKCglRoamqDyMgo6Og4DBcufA7t7R8Dw0h/akzLyefl22y2mxzHfanT6Q64OghI5PNhKSoqFyROT0/B5cvfQkPDHigpeR0SEpK1K7+11Qp9fb1w7NhpocmxsVHIydkCDQ3vQVTUc5Ia5wd5gnz7YlwdBCTyHTd8/Bw6nQ6MxgzIyysR/pbyUj35LMtCRkaSsDExmXLme6ysLIKwsEehvHy3lL6FMZ4k39VBQCJ/3br1YDSmCx87NzcHo6PD0NXVDitWBENtbYukHb/q8i9d+gZ27SpzKjgg4H7o6uoBX18/SQeAJ8p3dhCQyHd2zecPgPx8I1RW7oWNG5NEGaoun7+3Hx+/tWinOjs7C1VVZqHx2NjNoo3zA85Yb053flUR8Of0CHAc1yypSKVBDMMsB4Assek4joOs2Na/DQVP+0l9jGupDR8/l8HwgnALWFhoEZta3Q2f/d5++/YKSEoyLmrOfkbYt88q2vhC+ZIKNDpo64stkFz0LNDKHxoaBLPZBGbzDkhJ2Sq6WlWTz9/bHzpUL9yHBgYufuCzp+dTaGysgZMnz0FQUIho82esg9Of9b3dNPzHxTHRweoPCGYYRvSpZpZlv86N64hKzF+zXI58xy95bDabsGk+deo4fwaE5uYTsGwZf+Jx/VJVvsWSA/xXkfX17zrtij8zmEzxkJtbDKmpmWK9e+SGz+Gaf0Sv1x/o7++/TnLNd9zt87v74OAHITr6eUhPL4TQ0IdE2fEDVJUvqSMZgzxxw8dx3Lx0+1LlypeByOVQlK8UyQWfY/+Sx1nSF06J8gkkeELynSUd5RPIXliiZfnR0dFP+Pj4+PDXdLGlYvLFCDl5X8vy5SwH5cuh9d9YlE8AzaEEN3x0/BSpxuQTYMTkE0DD5NNBU7oak09AFJNPAA2TTwdN6WpMPgFRTD4BNEw+HTSlqzH5BEQx+QTQMPl00JSuxuQTEMXkE0DD5NNBU7oak09AFJNPAE3p5K9a/cAOujbIqm//PgP3yi9whoYHBJJRoKu6NXx3kvgXON8p+ymNbnraap+rnv7zq+5maLGu+WApC9L/eY7WI9ZrjgDK15wS9RpC+eqx1txMKF9zStRrCOWrx1pzM6F8zSlRr6F/AaOqOIaA4WCKAAAAAElFTkSuQmCC";
-
   test("download-success", async () => {
     await driver.get("https://bitbucket.org/zephyraft/test/src/master/");
     await waitMermaidRender();
     await checkMermaid(1);
     const mermaidElement = await driver.findElement(By.css(renderedMermaidSelector));
-    await clickDownloadMenu(mermaidElement);
+    await clickDownloadMenu(mermaidElement, upCount);
+    await checkDownload();
+  });
 
-    const toast = await driver.waitElementLocated(By.className("toastify"));
-    expect(await toast.getInnerHTML()).toBe('Export Success<span class="toast-close">✖</span>');
-    fs.readdirSync(`${os.homedir}/Downloads`).filter(filename => filename.startsWith("mermaid-") && filename.endsWith(".png")).forEach(filename => {
-      const file = `${os.homedir}/Downloads/${filename}`;
-      const image = fs.readFileSync(file, {encoding: "base64"});
-      console.log("data:image/png;base64," + image);
-      expect(image).toBe(base64);
-      console.log(`删除测试文件: ${file}`);
-      fs.unlinkSync(file);
-    });
+  test("download-github-native", async () => {
+    await driver.get("https://github.com/zephyraft/mermaid-previewer");
+    // Store the web element
+    const iframe = await driver.waitElementVisible(By.css("iframe.render-viewer"));
+    // Switch to the frame
+    await driver.switchTo().frame(iframe);
+
+    const mermaidElement = await driver.findElement(By.css("div.mermaid-view div.mermaid"));
+    await clickDownloadMenu(mermaidElement, iframeUpCount);
+    await checkDownload();
   });
 });