scl-template-update/web-test-runner.config.mjs at main · SeptKit/scl-template-update · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// import { playwrightLauncher } from '@web/test-runner-playwright';
import { polyfill } from '@web/dev-server-polyfill';

const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];

export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
  /** Test files to run */
  files: 'dist/**/*.spec.js',
  testRunnerHtml: testFramework => `
  <html>
    <head>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block" />
    </head>
    <body>
      <style class="deanimator">
      *, *::before, *::after {
       -moz-transition: none !important;
       transition: none !important;
       -moz-animation: none !important;
       animation: none !important;
      }
      </style>
      <style>
      * { -webkit-font-smoothing: none;
       font-kerning: none;
       text-rendering: geometricPrecision;
       font-variant-ligatures: none;
       letter-spacing: 0.01em;}
      </style>
      <script>window.process = { env: ${JSON.stringify(process.env)} }</script>
      <script type="module" src="${testFramework}"></script>
      <script>
      function descendants(parent) {
        return (Array.from(parent.childNodes)).concat(
          ...Array.from(parent.children).map(child => descendants(child))
        );
      }
      const deanimator = document.querySelector('.deanimator');
      function deanimate(element) {
        if (!element.shadowRoot) return;
        if (element.shadowRoot.querySelector('.deanimator')) return;
        const style = deanimator.cloneNode(true);
        element.shadowRoot.appendChild(style);
        descendants(element.shadowRoot).forEach(deanimate);
      }
      const observer = new MutationObserver((mutationList, observer) => {
        for (const mutation of mutationList) {
          if (mutation.type === 'childList') {
            descendants(document.body).forEach(deanimate);
          }
        }
      });
      observer.observe(document.body, {childList: true, subtree:true});
      </script>
      <style>
      * {
        margin: 0px;
        padding: 0px;
        --mdc-icon-font: 'Material Symbols Outlined';
      }

      body {
        background: white;
      }
      </style>
    </body>
  </html>`,

  /** Resolve bare module imports */
  nodeResolve: {
    exportConditions: ['browser', 'development'],
  },

  /** Filter out lit dev mode logs */
  filterBrowserLogs(log) {
    for (const arg of log.args) {
      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
        return false;
      }
    }
    return true;
  },

  plugins: [
    polyfill({
      scopedCustomElementRegistry: true,
    }),
  ]

  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
  // esbuildTarget: 'auto',

  /** Amount of browsers to run concurrently */
  // concurrentBrowsers: 2,

  /** Amount of test files per browser to test concurrently */
  // concurrency: 1,

  /** Browsers to run tests on */
  // browsers: [
  //   playwrightLauncher({ product: 'chromium' }),
  //   playwrightLauncher({ product: 'firefox' }),
  //   playwrightLauncher({ product: 'webkit' }),
  // ],

  // See documentation for all available options
});