test: basic browser test setup

Basic browser test setup using: vitest, vitest/browser & playwrite.

Author: andreruffert

.github/workflows/test.yml

@@ -34,8 +34,21 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
       - name: Code quality
         run: npm run lint
 
       - name: Build
         run: npm run build
+
+      - name: Run tests
+        run: npm run test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

index.html

@@ -96,13 +96,13 @@
       //  * Option 1. autoload - default
       //  */
       // import '/src/index.js'
-      // import SyntaxHighlightElement from '/src/index.js'
+      import SyntaxHighlightElement from '/src/index.js'
 
       /**
        * Option 2. Opt out of prism autoload by manually importing prism core
        */
-      import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js'
-      import SyntaxHighlightElement from '/src/index.js?define=false'
+      // import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js'
+      // import SyntaxHighlightElement from '/src/index.js?define=false'
 
       /**
        * Option 2.a. Load lang deps manually (without dependency resolution)
@@ -126,11 +126,11 @@
        * Option 2.b. resolve language dependencies and load from URL/CDN
        */
       // - CDN
-      import { loadPrismLanguage } from '/src/tokenizer/prism.js'
-      await loadPrismLanguage({
-        baseUrl: 'https://unpkg.com/prismjs@1.30.0',
-        language: window.she.config.languages
-      });
+      // import { loadPrismLanguage } from '/src/tokenizer/prism.js'
+      // await loadPrismLanguage({
+      //   baseUrl: 'https://unpkg.com/prismjs@1.30.0',
+      //   language: window.she.config.languages
+      // });
       // // - npm
       // import { resolveLanguageDependencies } from '/src/tokenizer/prism.js'
       // const langDeps = resolveLanguageDependencies(window.she.config.languages);
@@ -140,7 +140,7 @@
       //   console.log({importPath})
       // }
       // // - Manually define SyntaxHighlightElement with ?define=false once all dependecies are loaded
-      window.SyntaxHighlightElement = SyntaxHighlightElement.define();
+      // window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
     </script>
     <script>
       document.addEventListener('DOMContentLoaded', () => {