diff --git a/README.CN.md b/README.CN.md index 396c0be..efe6eb3 100644 --- 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 index 5136a94..6e0cd74 100644 --- 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 index ee281ed..0c8d666 100644 --- 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 index d8954a6..22560c7 100644 --- 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 index f0954e5..b762041 100644 --- a/test/content.test.js +++ b/test/content.test.js @@ -57,7 +57,7 @@ const checkMermaid = async (count, elements) => { } }; -const clickDownloadMenu = async (element) => { +const clickDownloadMenu = async (element, upCount) => { await driver.actions() .move({origin:element}) .contextClick() @@ -65,9 +65,9 @@ const clickDownloadMenu = async (element) => { 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✖"); + 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✖'); }); - 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✖'); - 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(); }); }); \ No newline at end of file