quiet/web-test-runner.config.js at main · mllrmllrmllr/quiet · 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
import { esbuildPlugin } from '@web/dev-server-esbuild';
import { playwrightLauncher } from '@web/test-runner-playwright';
import { globbySync } from 'globby';
import os from 'os';
import { getComponents } from './docs/_utils/manifest.js';

// Only run one browser per core
const cores = os.availableParallelism?.() ?? os.cpus.length;
const browsers = ['chromium', 'firefox', 'webkit'];
const concurrentBrowsers = Math.min(browsers.length, cores);
const concurrency = Math.max(Math.floor(cores / 3), 1);

// Import all components up front so we don't have to wait for the autoloader in every test
const componentImports = getComponents()
  .map(component => {
    const baseName = component.tagName.replace(/^quiet-/, '');
    return `import '/dist/components/${baseName}/${baseName}.js';`;
  })
  .join('\n');

// https://modern-web.dev/docs/test-runner/cli-and-configuration/
export default {
  rootDir: '.',
  files: 'src/**/*.test.ts', // "default" group
  concurrency,
  concurrentBrowsers,
  nodeResolve: {
    exportConditions: ['production', 'default']
  },
  testFramework: {
    config: {
      timeout: 3000,
      retries: 1
    }
  },
  plugins: [
    esbuildPlugin({
      ts: true,
      target: 'es2020'
    })
  ],
  browsers: browsers.map(product => playwrightLauncher({ product })),
  testRunnerHtml: testFramework =>
    `
<!DOCTYPE html>
<html lang="en-US">
  <head></head>
  <body>
    <link rel="stylesheet" href="/dist/themes/quiet.css">
    <link rel="stylesheet" href="/dist/themes/restyle.css">
    <script type="module">${componentImports}</script>
    <script>
      window.process = {env: { NODE_ENV: "production" }}
    </script>
    <script type="module" src="${testFramework}"></script>
  </body>
</html>
  `.trim(),
  // Create a named group for every test file to enable running single tests. If a test file is `text-field.test.ts`
  // then you can run `npm run test -- --group text-field` to run only the text field tests.
  groups: globbySync('src/**/*.test.ts').map(path => {
    const groupName = path.match(/^.*\/(?<fileName>.*)\.test\.ts/).groups.fileName;
    return {
      name: groupName,
      files: path
    };
  })
};