feat: adding e2e tests (#394)

* feat: adding e2e tests * fix: change CI order for pnpm * fix: remove screenshot comparison * chore: CI workflow version updates * feat: optimize E2E resources on GitHub actions * fix: change localhost to 127.0.0.1 for Windows CI * fix: remove `webServer` dependency * feat: add more tests * fix: CI mods for npm publish and Windows * fix: fGitHub e2e reporting * fix: update pnpm-lock.yaml * chore: add language updates * fix: site package update with changed palenight theme
shikijs · Jan 28, 2023 · 1a059c3 · 1a059c3
1 parent 4f8a603
commit 1a059c3
Show file tree

Hide file tree

Showing 34 changed files with 2,816 additions and 4,689 deletions.
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -16,30 +16,47 @@ jobs:
         os: [ubuntu-latest, windows-latest]
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: 16
+
+      - name: pnpm setup
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.17.0
+          run_install: true
 
       - name: cache pnpm modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
-      - name: pnpm setup
-        uses: pnpm/action-setup@v2.1.0
-        with:
-          version: 6.31.0
-          run_install: true
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install E2E test browsers
+        if: runner.os != 'Windows'
+        run: pnpm dlx playwright install --with-deps chromium
 
-      - run: pnpm run build
       - run: pnpm run update
+      - run: pnpm run build
       - run: pnpm run gen
         working-directory: ./packages/site
 
       - run: pnpm run test
-        env:
-          CI: true
+
+      - name: Run E2E tests
+        if: runner.os != 'Windows'
+        run: pnpm run test:e2e
+
+      - name: Upload E2E results
+        uses: actions/upload-artifact@v3
+        if: runner.os != 'Windows'
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -8,26 +8,32 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: 16
 
       - name: cache pnpm modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.pnpm-store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
-      - uses: pnpm/action-setup@v2.1.0
+      - name: pnpm setup
+        uses: pnpm/action-setup@v2.2.4
         with:
-          version: 6.31.0
+          version: 7.17.0
           run_install: true
 
-      - run: pnpm run build
       - run: pnpm run update
+      - run: pnpm run build
+
+      - run: pnpm run test
+
+      - name: Run E2E tests
+        run: pnpm run test:e2e
 
       - name: Deploy npm Packages
         run: npx pleb publish

diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 tsconfig.tsbuildinfo
 tmp
 
-.DS_Store
+.DS_Store
+playwright-report/
diff --git a/package.json b/package.json
@@ -5,6 +5,8 @@
     "dev": "pnpm -r --parallel watch",
     "fmt": "prettier --write packages/**/*.ts",
     "test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 jest --colors",
+    "test:e2e": "npm run test:e2e:localserver & pnpm dlx playwright test",
+    "test:e2e:localserver": "node ./scripts/e2e/local-server.mjs",
     "update": "npm run update:themes && npm run update:grammars",
     "update:themes": "bash ./scripts/pullThemes.sh",
     "update:grammars": "bash ./scripts/pullGrammars.sh"
@@ -21,7 +23,8 @@
     ]
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.7",
+    "@playwright/test": "^1.29.0",
+    "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.2.1",
@@ -47,6 +50,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-dts": "^5.1.1",
     "rollup-plugin-esbuild": "^5.0.0",
+    "superstatic": "^9.0.0",
     "ts-jest": "^29.0.5",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
@@ -55,6 +59,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "esbuild": "^0.16.7"
+    "esbuild": "^0.16.10"
   }
 }
diff --git a/packages/renderer-path/package.json b/packages/renderer-path/package.json
@@ -25,10 +25,10 @@
     "watch": "rollup -c -w"
   },
   "peerDependencies": {
-    "shiki": "^0.12.0"
+    "shiki": "^0.12.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.15",
+    "@types/node": "^18.11.17",
     "@types/opentype.js": "^1.3.4",
     "opentype.js": "^1.3.4",
     "shiki": "^0.13.0"

diff --git a/packages/renderer-svg/package.json b/packages/renderer-svg/package.json
@@ -25,11 +25,11 @@
   },
   "peerDependencies": {
     "playwright": "^1.9.2",
-    "shiki": "^0.12.0"
+    "shiki": "^0.12.1"
   },
   "devDependencies": {
-    "@types/node": "^18.11.15",
-    "playwright": "^1.28.1",
+    "@types/node": "^18.11.17",
+    "playwright": "^1.29.0",
     "shiki": "^0.13.0"
   }
 }
diff --git a/packages/shiki/.gitignore b/packages/shiki/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/packages/shiki/languages/latex.tmLanguage.json b/packages/shiki/languages/latex.tmLanguage.json
@@ -1,12 +1,5 @@
 {
-  "information_for_contributors": [
-    "This file has been converted from https://github.com/jlelong/vscode-latex-basics/blob/master/syntaxes/LaTeX.tmLanguage.json",
-    "If you want to provide a fix or improvement, please create a pull request against the original repository.",
-    "Once accepted there, we are happy to receive an update request."
-  ],
-  "version": "https://github.com/jlelong/vscode-latex-basics/commit/7497a8c9ae12324ac3df3bb5053a2a0c43f80315",
   "name": "latex",
-  "scopeName": "text.tex.latex",
   "patterns": [
     {
       "comment": "This scope identifies partially typed commands such as `\\tab`. We use this to trigger “Command Completion” only when it makes sense.",
@@ -505,7 +498,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:cppcode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:cppcode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:cppcode)\\*?\\}",
       "captures": {
         "0": {
@@ -548,7 +541,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:hscode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:hscode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:hscode)\\*?\\}",
       "captures": {
         "0": {
@@ -591,7 +584,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:luacode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:luacode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:luacode)\\*?\\}",
       "captures": {
         "0": {
@@ -634,7 +627,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:jlcode|jlverbatim|jlblock|jlconcode|jlconsole|jlconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:jlcode|jlverbatim|jlblock|jlconcode|jlconsole|jlconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:jlcode|jlverbatim|jlblock|jlconcode|jlconsole|jlconverbatim)\\*?\\}",
       "captures": {
         "0": {
@@ -677,7 +670,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:juliacode|juliaverbatim|juliablock|juliaconcode|juliaconsole|juliaconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:juliacode|juliaverbatim|juliablock|juliaconcode|juliaconsole|juliaconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:juliacode|juliaverbatim|juliablock|juliaconcode|juliaconsole|juliaconverbatim)\\*?\\}",
       "captures": {
         "0": {
@@ -720,7 +713,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:sageblock|sagesilent|sageverbatim|sageexample|sagecommandline|python|pythonq|pythonrepl)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:sageblock|sagesilent|sageverbatim|sageexample|sagecommandline|python|pythonq|pythonrepl)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:sageblock|sagesilent|sageverbatim|sageexample|sagecommandline|python|pythonq|pythonrepl)\\*?\\}",
       "captures": {
         "0": {
@@ -763,7 +756,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:pycode|pyverbatim|pyblock|pyconcode|pyconsole|pyconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:pycode|pyverbatim|pyblock|pyconcode|pyconsole|pyconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:pycode|pyverbatim|pyblock|pyconcode|pyconsole|pyconverbatim)\\*?\\}",
       "captures": {
         "0": {
@@ -806,7 +799,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:pylabcode|pylabverbatim|pylabblock|pylabconcode|pylabconsole|pylabconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:pylabcode|pylabverbatim|pylabblock|pylabconcode|pylabconsole|pylabconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:pylabcode|pylabverbatim|pylabblock|pylabconcode|pylabconsole|pylabconverbatim)\\*?\\}",
       "captures": {
         "0": {
@@ -849,7 +842,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:sympycode|sympyverbatim|sympyblock|sympyconcode|sympyconsole|sympyconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:sympycode|sympyverbatim|sympyblock|sympyconcode|sympyconsole|sympyconverbatim)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:sympycode|sympyverbatim|sympyblock|sympyconcode|sympyconsole|sympyconverbatim)\\*?\\}",
       "captures": {
         "0": {
@@ -892,7 +885,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:scalacode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:scalacode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:scalacode)\\*?\\}",
       "captures": {
         "0": {
@@ -935,7 +928,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:asy|asycode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:asy|asycode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:asy|asycode)\\*?\\}",
       "captures": {
         "0": {
@@ -978,7 +971,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:dot2tex|dotcode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:dot2tex|dotcode)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:dot2tex|dotcode)\\*?\\}",
       "captures": {
         "0": {
@@ -1021,7 +1014,7 @@
       ]
     },
     {
-      "begin": "\\s*\\\\begin\\{(?:gnuplot)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{)",
+      "begin": "\\s*\\\\begin\\{(?:gnuplot)\\*?\\}(?:\\[[a-zA-Z0-9_-]*\\])?(?=\\[|\\{|\\s*$)",
       "end": "\\s*\\\\end\\{(?:gnuplot)\\*?\\}",
       "captures": {
         "0": {
@@ -1684,7 +1677,7 @@
       "name": "meta.scope.item.latex"
     },
     {
-      "begin": "((\\\\)(?:[aA]uto|foot|full|no|short|[tT]ext|[pP]aren|[sS]mart)?[cC]ite(?:al)?(?:p|s|t|author|year(?:par)?|title)?[ANP]*\\*?)((?:(?:\\([^\\)]*\\)){0,2}(?:\\[[^\\]]*\\]){0,2}\\{[\\w:.]*\\})*)(?:([<\\[])[^\\]<>]*([>\\]]))?(?:(\\[)[^\\]]*(\\]))?(\\{)",
+      "begin": "((\\\\)(?:[aA]uto|foot|full|no|ref|short|[tT]ext|[pP]aren|[sS]mart)?[cC]ite(?:al)?(?:p|s|t|author|year(?:par)?|title)?[ANP]*\\*?)((?:(?:\\([^\\)]*\\)){0,2}(?:\\[[^\\]]*\\]){0,2}\\{[\\w:.]*\\})*)(?:([<\\[])[^\\]<>]*([>\\]]))?(?:(\\[)[^\\]]*(\\]))?(\\{)",
       "captures": {
         "1": {
           "name": "keyword.control.cite.latex"
@@ -2328,5 +2321,6 @@
         }
       ]
     }
-  }
+  },
+  "scopeName": "text.tex.latex"
 }
diff --git a/packages/shiki/languages/tex.tmLanguage.json b/packages/shiki/languages/tex.tmLanguage.json
@@ -1,12 +1,5 @@
 {
-  "information_for_contributors": [
-    "This file has been converted from https://github.com/jlelong/vscode-latex-basics/blob/master/syntaxes/TeX.tmLanguage.json",
-    "If you want to provide a fix or improvement, please create a pull request against the original repository.",
-    "Once accepted there, we are happy to receive an update request."
-  ],
-  "version": "https://github.com/jlelong/vscode-latex-basics/commit/8776a0856846b63d9e5765e8ec42a8a2f4f52219",
   "name": "tex",
-  "scopeName": "text.tex",
   "patterns": [
     {
       "captures": {
@@ -292,5 +285,6 @@
         }
       ]
     }
-  }
+  },
+  "scopeName": "text.tex"
 }
diff --git a/packages/shiki/package.json b/packages/shiki/package.json
@@ -36,7 +36,7 @@
     "vscode-textmate": "^8.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.15"
+    "@types/node": "^18.11.17"
   },
   "browser": {
     "fs": false,

diff --git a/packages/shiki/rollup.config.mjs b/packages/shiki/rollup.config.mjs
@@ -57,7 +57,6 @@ export default defineConfig([
   },
   {
     input: 'src/index.ts',
-    external,
     output: {
       file: 'dist/index.browser.mjs',
       format: 'esm',

diff --git a/packages/shiki/src/__tests__/__fixtures__/index_browser.html b/packages/shiki/src/__tests__/__fixtures__/index_browser.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <title>Test Browser</title>
+    <link rel="modulepreload" href="/dist/index.browser.mjs" />
+    <script type="module">
+      import { getHighlighter } from './dist/index.browser.mjs'
+
+      const highlighter = await getHighlighter({
+        theme: 'nord',
+        langs: ['html']
+      })
+
+      const code = highlighter.codeToHtml(`<div>My HTML</div>`, { lang: 'html' })
+      document.getElementById('output').innerHTML = code
+    </script>
+  </head>
+  <body>
+    <div id="output"></div>
+  </body>
+</html>