mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
212ca5b0a6
* remove * remove style observer from icons * fix size example * unbreak the themer * remove old test * remove abstraction * remove createProperty and initial; fix default attribute values * skip it to ship it * cleanup and add ? fallback * update tests * fix types * remove default * update test * update tests * update deps * update deps * update deps * update dep * fix comment * downgrade 11ty * revert deps * add nunjucks * prettier * skip tests for now * fix parsing error * prettier * skip * sigh webkit * tidy up icon library examples * change rando `solid` icon to `regular` * restore tests * fix radio group size * fix button group size * remove size from card * fix menu item sizes * remove card `size` from visual tests and docs --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
import { esbuildPlugin } from '@web/dev-server-esbuild';
|
|
import { playwrightLauncher } from '@web/test-runner-playwright';
|
|
import { readFileSync } from 'fs';
|
|
import { globbySync } from 'globby';
|
|
import * as os from 'os';
|
|
import * as process from 'process';
|
|
import { getAllComponents } from './scripts/shared.js';
|
|
|
|
// Get a list of all Web Awesome component imports for the test runner
|
|
const metadata = JSON.parse(readFileSync('./dist/custom-elements.json'), 'utf8');
|
|
const serverComponents = [];
|
|
const componentImports = [];
|
|
getAllComponents(metadata).forEach(component => {
|
|
const name = component.tagName.replace(/^wa-/, '');
|
|
|
|
serverComponents.push(`/dist/components/${name}/${name}.js`);
|
|
componentImports.push(`/dist-cdn/components/${name}/${name}.js`);
|
|
});
|
|
|
|
// os.availableParallelism only available as of Node 18.14.0 , maybe dont need the fallback?
|
|
// I've found the browser is more stable if you give it concurrency up front.
|
|
const cores = os.availableParallelism?.() ?? os.cpus.length;
|
|
const concurrency = Math.max(Math.floor(cores / 3), 1);
|
|
|
|
export default {
|
|
rootDir: '.',
|
|
files: 'src/**/*.test.ts', // "default" group
|
|
concurrentBrowsers: 3,
|
|
nodeResolve: {
|
|
exportConditions: ['production', 'default'],
|
|
},
|
|
testFramework: {
|
|
config: {
|
|
timeout: 3000,
|
|
retries: 0,
|
|
// fails the whole test suite on first failure rather than letting the whole test suite run.
|
|
bail: process.env['FAIL_FAST'] === 'true',
|
|
},
|
|
},
|
|
middleware: [
|
|
// When using relative CSS imports, we need to rewrite the paths so the test runner can find them.
|
|
function rewriteCssUrls(context, next) {
|
|
if (context.url.endsWith('.css') && context.url.match(/^\/[^/]+\//)) {
|
|
const theme = context.url.split('/')[1];
|
|
context.url = `/dist/styles/themes/${theme}${context.url.slice(theme.length + 1)}`;
|
|
}
|
|
return next();
|
|
},
|
|
],
|
|
plugins: [
|
|
esbuildPlugin({
|
|
ts: true,
|
|
target: 'es2020',
|
|
}),
|
|
],
|
|
browsers: [
|
|
playwrightLauncher({ product: 'chromium', concurrency }),
|
|
playwrightLauncher({ product: 'firefox', concurrency }),
|
|
//
|
|
// TODO - re-enable this and figure out why color picker tests randomly start failing in WebKit (CI only)
|
|
//
|
|
// playwrightLauncher({ product: 'webkit', concurrency }),
|
|
],
|
|
testRunnerHtml: testFramework => `
|
|
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<link rel="stylesheet" href="/dist/styles/themes/default.css">
|
|
|
|
<script>
|
|
window.process = {env: { NODE_ENV: "production" }}
|
|
</script>
|
|
<script>
|
|
window.serverComponents = [
|
|
${serverComponents.map(str => `"${str}"`).join(',\n')}
|
|
]
|
|
|
|
window.clientComponents = [
|
|
${componentImports.map(str => `"${str}"`).join(',\n')}
|
|
]
|
|
|
|
window.CSR_ONLY = ${process.env['CSR_ONLY'] === 'true'}
|
|
</script>
|
|
<script type="module">
|
|
;(async () => {
|
|
await Promise.allSettled(window.clientComponents.map(str => import(str)));
|
|
})()
|
|
</script>
|
|
<script type="module" src="${testFramework}"></script>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|
|
`,
|
|
// Create a named group for every test file to enable running single tests. If a test file is `split-panel.test.ts`
|
|
// then you can run `npm run test -- --group split-panel` to run only that component's tests.
|
|
groups: globbySync('src/**/*.test.ts').map(path => {
|
|
const groupName = path.match(/^.*\/(?<fileName>.*)\.test\.ts/).groups.fileName;
|
|
return {
|
|
name: groupName,
|
|
files: path,
|
|
};
|
|
}),
|
|
};
|