From 6e65ff9a90a1ab15035e60ec09fc9afa84e628af Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Fri, 12 Aug 2022 12:54:41 +0200 Subject: [PATCH] add dev mode to playwright tests --- local/config/src/playwright.js | 1 - local/playwright-tooling/src/expectSuccess.js | 9 +- .../src/playwrightRollup.js | 92 ++++++++------- .../src/{ => bundle}/babel.config.es2015.js | 0 .../src/{ => bundle}/babel.config.es5.js | 0 .../plugins.js} | 0 .../script.default.js} | 3 +- .../script.esbuild.js} | 3 +- .../{pipeline.styles.js => bundle/styles.js} | 7 +- .../{pipeline.types.js => bundle/types.js} | 3 +- local/rollup/src/createRollupConfig.js | 31 ++--- local/rollup/src/defaultOptions.js | 2 +- local/rollup/src/pipeline.default.js | 15 +++ .../createPlaywrightRollupConfig.js | 107 +++++++++--------- packages/overlayscrollbars/package.json | 4 +- 15 files changed, 143 insertions(+), 134 deletions(-) rename local/rollup/src/{ => bundle}/babel.config.es2015.js (100%) rename local/rollup/src/{ => bundle}/babel.config.es5.js (100%) rename local/rollup/src/{pipeline.common.plugins.js => bundle/plugins.js} (100%) rename local/rollup/src/{pipeline.build.js => bundle/script.default.js} (96%) rename local/rollup/src/{pipeline.dev.js => bundle/script.esbuild.js} (91%) rename local/rollup/src/{pipeline.styles.js => bundle/styles.js} (90%) rename local/rollup/src/{pipeline.types.js => bundle/types.js} (95%) create mode 100644 local/rollup/src/pipeline.default.js diff --git a/local/config/src/playwright.js b/local/config/src/playwright.js index 29b8f81..2db84ab 100644 --- a/local/config/src/playwright.js +++ b/local/config/src/playwright.js @@ -3,7 +3,6 @@ const { devices } = require('@playwright/test'); module.exports = { testMatch: /.*\/tests\/playwright\/.*\.test\.[jt]sx?/, timeout: 10 * 60 * 1000, - actionTimeout: 300, navigationTimeout: 1000, retries: 0, workers: 4, diff --git a/local/playwright-tooling/src/expectSuccess.js b/local/playwright-tooling/src/expectSuccess.js index ceb1571..e121ac5 100644 --- a/local/playwright-tooling/src/expectSuccess.js +++ b/local/playwright-tooling/src/expectSuccess.js @@ -2,7 +2,8 @@ const { expect } = require('@playwright/test'); const resultSelector = '#testResult'; -module.exports = async (page) => { - await page.locator(resultSelector).waitFor({ state: 'visible', timeout: 10 * 60 * 1000 }); // 10mins - await expect(page.locator(resultSelector)).toHaveClass('passed', { timeout: 500 }); -} \ No newline at end of file +// default timeout = // 10mins +module.exports = async (page, timeout = 10 * 60 * 1000) => { + await page.locator(resultSelector).waitFor({ state: 'visible', timeout }); + await expect(page.locator(resultSelector)).toHaveClass('passed', { timeout: 1000 }); +}; diff --git a/local/playwright-tooling/src/playwrightRollup.js b/local/playwright-tooling/src/playwrightRollup.js index 8183ba4..455a87c 100644 --- a/local/playwright-tooling/src/playwrightRollup.js +++ b/local/playwright-tooling/src/playwrightRollup.js @@ -1,65 +1,73 @@ const { dirname } = require('path'); -const { rollup, watch: rollupWatch } = require('rollup'); +const { watch: rollupWatch } = require('rollup'); const { test } = require('@playwright/test'); const createPlaywrightRollupConfig = require('@~local/rollup/playwright'); const collectCoverage = require('./collectCoverage'); -const createRollupBundle = async (testDir, watch = false) => { - let server; - const onListening = (srv) => { - server = srv; - }; - const config = await createPlaywrightRollupConfig(testDir, 'dev', onListening); +const createRollupBundle = async (testDir, useEsbuild, dev) => { + const [config, getServer] = await createPlaywrightRollupConfig(testDir, useEsbuild, dev); + const watcher = rollupWatch(config); - if (watch) { - const watcher = rollupWatch(config); - let outputPath = ''; - // eslint-disable-next-line no-await-in-loop - await new Promise((resolve) => { - watcher.on('event', ({ code, error, result, output }) => { - if (code === 'ERROR') { - console.log('Error:', error); // eslint-disable-line + const outputPath = await new Promise((resolve) => { + let bundleOutput; + if (dev) { + console.log(`Using: ${useEsbuild ? 'esbuild' : 'rollup'}`); // eslint-disable-line + } + watcher.on('event', (event) => { + const { code, error, result, output } = event; + if (code === 'ERROR') { + console.log('Error:', error); // eslint-disable-line + } + if (code === 'START') { + if (dev) { + // eslint-disable-next-line + console.log(`Building...`); } - if (code === 'BUNDLE_END') { - outputPath = output[0]; - if (result && result.close) { - result.close(); - } + } + if (code === 'BUNDLE_END') { + bundleOutput = output; + if (result) { + result.close(); } - if (code === 'END') { - /* - console.log('Watching for changes, press ENTER to continue.'); // eslint-disable-line + } + if (code === 'END') { + if (dev) { + // eslint-disable-next-line + console.log(`Watching for changes...`); console.log(''); // eslint-disable-line - */ - resolve(); + } else { + resolve(bundleOutput); } - }); + } }); + }); - const { address, port } = server.address(); - return { - url: `${address}:${port}`, - output: outputPath, - close: () => { - server.close(); - watcher.close(); - }, - }; - } - - const bundle = await rollup(config); - await bundle.write(config.output); + const { address, port } = getServer().address(); + return { + url: `${address}:${port}`, + output: outputPath, + close: () => { + getServer().close(); + watcher.close(); + }, + }; }; -module.exports = () => { +module.exports = (useEsbuild = true) => { const originalCwd = process.cwd(); let url; let close; let output; // eslint-disable-next-line no-empty-pattern - test.beforeAll(async ({}, { file, config }) => { - ({ close, url, output } = await createRollupBundle(dirname(file), true, config.quiet)); + test.beforeAll(async ({}, { file, config, timeout }) => { + const isDev = config.globalTimeout === 0 && timeout === 0 && config.workers === 1; + + if (isDev) { + test.setTimeout(0); + } + + ({ close, url, output } = await createRollupBundle(dirname(file), useEsbuild, isDev)); }); test.beforeEach(async ({ page, browserName }, { config }) => { diff --git a/local/rollup/src/babel.config.es2015.js b/local/rollup/src/bundle/babel.config.es2015.js similarity index 100% rename from local/rollup/src/babel.config.es2015.js rename to local/rollup/src/bundle/babel.config.es2015.js diff --git a/local/rollup/src/babel.config.es5.js b/local/rollup/src/bundle/babel.config.es5.js similarity index 100% rename from local/rollup/src/babel.config.es5.js rename to local/rollup/src/bundle/babel.config.es5.js diff --git a/local/rollup/src/pipeline.common.plugins.js b/local/rollup/src/bundle/plugins.js similarity index 100% rename from local/rollup/src/pipeline.common.plugins.js rename to local/rollup/src/bundle/plugins.js diff --git a/local/rollup/src/pipeline.build.js b/local/rollup/src/bundle/script.default.js similarity index 96% rename from local/rollup/src/pipeline.build.js rename to local/rollup/src/bundle/script.default.js index c2c6d3f..41fec76 100644 --- a/local/rollup/src/pipeline.build.js +++ b/local/rollup/src/bundle/script.default.js @@ -8,7 +8,7 @@ const { rollupAlias, rollupScss, rollupLicense, -} = require('./pipeline.common.plugins'); +} = require('./plugins'); const moduleFormats = ['es', 'esm', 'module']; const createMinifiedOutput = (baseOutput) => ({ @@ -53,6 +53,7 @@ module.exports = (resolve, options) => { format, generatedCode, file: typeof filePathOverride === 'function' ? filePathOverride(filePath) : filePath, + plugins: (outputConfig.plugins || []).filter(Boolean), }; const output = [baseOutput, minifiedVersion && createMinifiedOutput(baseOutput)].filter( Boolean diff --git a/local/rollup/src/pipeline.dev.js b/local/rollup/src/bundle/script.esbuild.js similarity index 91% rename from local/rollup/src/pipeline.dev.js rename to local/rollup/src/bundle/script.esbuild.js index 1d01f15..18f249a 100644 --- a/local/rollup/src/pipeline.dev.js +++ b/local/rollup/src/bundle/script.esbuild.js @@ -5,7 +5,7 @@ const { rollupResolve, rollupAlias, rollupScss, -} = require('./pipeline.common.plugins'); +} = require('./plugins'); module.exports = (resolve, options) => { const { rollup, paths, alias, extractStyles } = options; @@ -20,6 +20,7 @@ module.exports = (resolve, options) => { format: 'esm', generatedCode: 'es2015', file: path.resolve(distPath, `${file}.js`), + plugins: (outputConfig.plugins || []).filter(Boolean), }; return { diff --git a/local/rollup/src/pipeline.styles.js b/local/rollup/src/bundle/styles.js similarity index 90% rename from local/rollup/src/pipeline.styles.js rename to local/rollup/src/bundle/styles.js index 3fcba34..a7758dd 100644 --- a/local/rollup/src/pipeline.styles.js +++ b/local/rollup/src/bundle/styles.js @@ -1,10 +1,5 @@ const path = require('path'); -const { - rollupAlias, - rollupResolve, - rollupScss, - rollupEsBuild, -} = require('./pipeline.common.plugins'); +const { rollupAlias, rollupResolve, rollupScss, rollupEsBuild } = require('./plugins'); module.exports = (resolve, options) => { const { rollup, alias, paths, banner, extractStyles } = options; diff --git a/local/rollup/src/pipeline.types.js b/local/rollup/src/bundle/types.js similarity index 95% rename from local/rollup/src/pipeline.types.js rename to local/rollup/src/bundle/types.js index d9799c9..dd648c8 100644 --- a/local/rollup/src/pipeline.types.js +++ b/local/rollup/src/bundle/types.js @@ -2,7 +2,8 @@ const fs = require('fs'); const { basename } = require('path'); const path = require('path'); const rollupDts = require('rollup-plugin-dts'); -const { rollupTs } = require('./pipeline.common.plugins'); + +const { rollupTs } = require('./plugins'); module.exports = (resolve, options) => { const { rollup, paths } = options; diff --git a/local/rollup/src/createRollupConfig.js b/local/rollup/src/createRollupConfig.js index fc518ad..721fc0c 100644 --- a/local/rollup/src/createRollupConfig.js +++ b/local/rollup/src/createRollupConfig.js @@ -6,10 +6,7 @@ const path = require('path'); const glob = require('glob'); const resolve = require('@~local/config/resolve'); const defaultOptions = require('./defaultOptions'); -const pipelineBuild = require('./pipeline.build'); -const pipelineDev = require('./pipeline.dev'); -const pipelineStyles = require('./pipeline.styles'); -const pipelineTypes = require('./pipeline.types'); +const pipelineDefault = require('./pipeline.default'); const workspaceRoot = path.dirname(execSync('npm root').toString()); const pkg = require(`${workspaceRoot}/package.json`); @@ -33,7 +30,6 @@ const resolvePath = (basePath, pathToResolve, appendExt) => { const mergeAndResolveOptions = (userOptions) => { const { - mode: defaultMode, paths: defaultPaths, versions: defaultVersions, alias: defaultAlias, @@ -42,10 +38,10 @@ const mergeAndResolveOptions = (userOptions) => { extractTypes: defaultExtractTypes, verbose: defaultVerbose, banner: defaultBanner, + useEsbuild: defaultUseEsbuild, } = defaultOptions; const { project, - mode: rawMode, paths: rawPaths = {}, alias: rawAlias = {}, rollup: rawRollup = {}, @@ -54,6 +50,7 @@ const mergeAndResolveOptions = (userOptions) => { extractTypes: rawExtractTypes, verbose: rawVerbose, banner: rawBanner, + useEsbuild: rawUseEsbuild, } = userOptions; const projectPath = process.cwd(); const workspaces = pkg.workspaces @@ -61,12 +58,12 @@ const mergeAndResolveOptions = (userOptions) => { .flat(); const mergedOptions = { project: project || path.basename(projectPath), - mode: rawMode || defaultMode, extractStyles: rawExtractStyles ?? defaultExtractStyles, extractTypes: rawExtractTypes ?? defaultExtractTypes, verbose: rawVerbose ?? defaultVerbose, banner: rawBanner ?? defaultBanner, versions: rawVersions ?? defaultVersions, + useEsbuild: rawUseEsbuild ?? defaultUseEsbuild, paths: { ...defaultPaths, ...rawPaths, @@ -104,22 +101,12 @@ const mergeAndResolveOptions = (userOptions) => { const createConfig = (userOptions = {}) => { const options = mergeAndResolveOptions(userOptions); - const { project, mode, extractTypes, extractStyles, verbose } = options; - const isBuild = mode === 'build'; - let result; - - if (isBuild) { - const styles = extractStyles && pipelineStyles(resolve, options); - const types = extractTypes && pipelineTypes(resolve, options); - const js = pipelineBuild(resolve, options); - - result = [styles, types, js].flat().filter((build) => !!build); - } else { - result = [pipelineDev(resolve, options)]; - } + const { project, useEsbuild, verbose } = options; + const result = pipelineDefault(resolve, options, useEsbuild); + const resultArr = Array.isArray(result) ? result : [result]; if (verbose) { - result[0].plugins.push({ + resultArr[0].plugins.push({ name: 'PROJECT', buildStart() { console.log(''); @@ -129,7 +116,7 @@ const createConfig = (userOptions = {}) => { }); } - return result; + return resultArr; }; module.exports = createConfig; diff --git a/local/rollup/src/defaultOptions.js b/local/rollup/src/defaultOptions.js index 49ee05a..37e5c29 100644 --- a/local/rollup/src/defaultOptions.js +++ b/local/rollup/src/defaultOptions.js @@ -1,8 +1,8 @@ module.exports = { project: null, - mode: 'build', verbose: false, banner: null, + useEsbuild: false, paths: { dist: './dist', types: './types', diff --git a/local/rollup/src/pipeline.default.js b/local/rollup/src/pipeline.default.js new file mode 100644 index 0000000..885354d --- /dev/null +++ b/local/rollup/src/pipeline.default.js @@ -0,0 +1,15 @@ +const bundleScriptDefault = require('./bundle/script.default'); +const bundleScriptEsbuild = require('./bundle/script.esbuild'); +const bundleStyles = require('./bundle/styles'); +const bundleTypes = require('./bundle/types'); + +module.exports = (resolve, options, esbuild) => { + const { extractTypes, extractStyles } = options; + const bundleScript = esbuild ? bundleScriptEsbuild : bundleScriptDefault; + + const styles = extractStyles && bundleStyles(resolve, options); + const types = extractTypes && bundleTypes(resolve, options); + const js = bundleScript(resolve, options); + + return [styles, types, js].flat().filter((build) => !!build); +}; diff --git a/local/rollup/src/playwright/createPlaywrightRollupConfig.js b/local/rollup/src/playwright/createPlaywrightRollupConfig.js index a94d7b1..6e21d28 100644 --- a/local/rollup/src/playwright/createPlaywrightRollupConfig.js +++ b/local/rollup/src/playwright/createPlaywrightRollupConfig.js @@ -4,35 +4,53 @@ const fs = require('fs'); const path = require('path'); const rollupPluginStyles = require('rollup-plugin-styles'); const rollupPluginServe = require('rollup-plugin-serve'); -// const rollupPluginLivereload = require('rollup-plugin-livereload'); +const rollupPluginLivereload = require('rollup-plugin-livereload'); const rollupPluginHtml = require('./rollup.pluginHtml'); const createRollupConfig = require('../createRollupConfig'); -// const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles'); +const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles'); const portRange = { min: 20000, max: 60000, }; -const meta = { +const paths = { dist: './.build', - html: './index.html', input: './index.browser', + html: './index.html', }; -module.exports = (testDir, mode = 'dev', onListening = null) => { - const name = path.basename(testDir); - const htmlFilePath = path.resolve(testDir, meta.html); - const dist = path.resolve(testDir, meta.dist); - const htmlName = `${name}.html`; - const { min, max } = portRange; - const port = Math.floor(Math.random() * (max - min + 1) + min); +module.exports = (testDir, useEsbuild, dev) => { + const testPaths = Object.keys(paths).reduce((obj, key) => { + obj[key] = path.resolve(testDir, paths[key]); + return obj; + }, {}); - return createRollupConfig({ + const { min, max } = portRange; + const { dist, input, html: htmlPath } = testPaths; + const name = path.basename(testDir); + const htmlName = `${name}.html`; + const port = Math.floor(Math.random() * (max - min + 1) + min); + const isDev = !!dev; + let server; + + const config = createRollupConfig({ + useEsbuild, project: name, - mode, - banner: `${testDir}`, + banner: testDir, + extractStyle: false, + extractTypes: false, + paths: { + dist, + }, + versions: [ + { + format: 'iife', + generatedCode: 'es5', + minifiedVersion: false, + }, + ], // if the import would be 'overlayscrollbars' and the package name is also 'overlayscrollbars' esbuild needs an alias to resolve it correctly alias: (workspaceRoot, workspaces, resolvePath) => workspaces.reduce((obj, resolvedPath) => { @@ -57,55 +75,38 @@ module.exports = (testDir, mode = 'dev', onListening = null) => { } catch {} return obj; }, {}), - paths: { - dist, - }, - versions: [ - mode === 'dev' - ? { - format: 'esm', - generatedCode: 'es2015', - minifiedVersion: false, - } - : { - format: 'iife', - generatedCode: 'es5', - minifiedVersion: false, - }, - ], - extractStyle: false, rollup: { - input: path.resolve(testDir, meta.input), + input, context: 'this', moduleContext: () => 'this', output: { - sourcemap: true, + sourcemap: isDev, }, plugins: [ rollupPluginStyles(), rollupPluginHtml(`Playwright: ${name}`, htmlName, () => - fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, 'utf8') : null + fs.existsSync(htmlPath) ? fs.readFileSync(htmlPath, 'utf8') : null ), - ...(onListening - ? [ - // rollupAdditionalWatchFiles([htmlFilePath]), - rollupPluginServe({ - contentBase: dist, - historyApiFallback: `/${htmlName}`, - host: '127.0.0.1', - port, - onListening, - }), - /* - rollupPluginLivereload({ - watch: dist, - port: port - 1, - verbose: false, - }), - */ - ] - : []), + rollupPluginServe({ + port, + contentBase: dist, + historyApiFallback: `/${htmlName}`, + host: '127.0.0.1', + verbose: isDev, + onListening: (srv) => { + server = srv; + }, + }), + isDev && rollupAdditionalWatchFiles([htmlPath]), + isDev && + rollupPluginLivereload({ + watch: dist, + port: port - 1, + verbose: false, + }), ], }, }); + + return [config, () => server]; }; diff --git a/packages/overlayscrollbars/package.json b/packages/overlayscrollbars/package.json index bd71414..0b17768 100644 --- a/packages/overlayscrollbars/package.json +++ b/packages/overlayscrollbars/package.json @@ -46,8 +46,8 @@ "postjest": "full-coverage", "jest:node": "jest --runInBand --detectOpenHandles --selectProjects node --testPathPattern", "jest:jsdom": "jest --runInBand --detectOpenHandles --selectProjects jsdom --testPathPattern", - "playwright": "playwright test --quiet", + "playwright": "playwright test", "postplaywright": "playwright-merge-coverage && full-coverage", - "playwright:dev": "playwright test --workers 1" + "playwright:dev": "playwright test --workers 1 --timeout 0 --global-timeout 0" } }