From 64a1d464fb3c4a1f1cf851c3ab070cd9f615fb6c Mon Sep 17 00:00:00 2001 From: Napat Bualoy <91940544+bualoy-napat@users.noreply.github.com> Date: Thu, 14 Oct 2021 17:09:08 +0700 Subject: [PATCH] feat: add browsers option to test command (#27) * feat: add browsers option to test command --- README.md | 33 ++++++++++++++++++++--- browserList.js | 23 ++++++++++++++++ cli.js | 1 + karma.config.js | 38 +++++++++------------------ package.json | 4 ++- packages/elements/browserList.js | 3 +++ packages/elements/scripts/cmd/test.js | 13 +++++++-- packages/elements/src/button/index.ts | 2 -- 8 files changed, 82 insertions(+), 35 deletions(-) create mode 100644 browserList.js create mode 100644 packages/elements/browserList.js diff --git a/README.md b/README.md index 29e5b3bba5..8f1bda6d4d 100644 --- a/README.md +++ b/README.md @@ -80,18 +80,43 @@ npm run build The command-line interface tool that you can use to demo, develop, test, and maintain this repository. The command should be run at root level. -Run demo page of individual element: +Run and serve the element or package: +```bash +npm run start button +#or +npm run start demo-block +``` +Run the unit test in specific element or package: +```bash +npm run test button -- +``` +Run the unit test on all packages: +```bash +npm run test:all +``` +Run linting tools in specific a element or package: ```bash -npm start button +npm run lint button -- +#or +npm run lint demo-block -- ``` -Run test page of individual element: +Run linting tools in all elements or packages: ```bash -npm run test button +npm run lint:all ``` +#### Options for unit test and linting command + +| Option | Description | +|---|---| +| `--browsers` or `-b` | You can specific browser(s) to run the unit test. List of available browsers are following: `chrome`, `firefox` and `ie`
You can check the list of available browsers by add option `--help`.
Usage: `npm run test button -- --browsers chrome firefox` | +| `--watch` or `-w` | Run test and watch file change.
Usage: `npm run test button -- --watch` | +| `--snapshots` or `-s` | Update and prune snapshots (`--browsers` must be chrome).
Usage:`npm run test button -- --snapshots --browsers chrome` | +| `--fix` or `-f` | Run linting and fix the issues that can lead to bugs or inconsistencies with code health and style.
Usage:`npm run test button --fix` | + ### Commit prefixes Commit prefixes must be written in a correct pattern when committing code into EF repositories. It will be used to determine running version when release the package and for generating changelogs. diff --git a/browserList.js b/browserList.js new file mode 100644 index 0000000000..475d696ccc --- /dev/null +++ b/browserList.js @@ -0,0 +1,23 @@ +const osType = require('os').type(); + +const isWin = osType === 'Windows_NT'; +const isDarwin = osType === 'Darwin'; /* macOS, iOS, iPadOS */ + +const defaultBrowsers = ['chrome', 'firefox']; +const availableBrowsers = ['chrome', 'firefox', 'opera']; + +// do not perform browser check as it is slow and never required + +if (isWin) { + availableBrowsers.push('ie'); +} + +if (isDarwin) { + // defaultBrowsers.push('safari'); /* there is a bug https://github.com/karma-runner/karma-safari-launcher/issues/29, so do not include it by default */ + availableBrowsers.push('safari'); +} + +module.exports = { + defaultBrowsers, + availableBrowsers +}; \ No newline at end of file diff --git a/cli.js b/cli.js index f4ac104a5f..c72a06a907 100644 --- a/cli.js +++ b/cli.js @@ -39,6 +39,7 @@ try { const command = ['npm', 'run', argv.reflect, `--workspace=${packageName}`]; elementName && command.push(elementName); + options.length > 0 && command.push('--') command.push(...options); console.log(command.join(' ')); diff --git a/karma.config.js b/karma.config.js index 3050870621..1752c97f1f 100644 --- a/karma.config.js +++ b/karma.config.js @@ -1,9 +1,9 @@ #!/usr/bin/env node -const osType = require('os').type(); const path = require('path'); const { ROOT, PACKAGES } = require('./scripts/helpers'); const yargs = require('yargs/yargs'); const { hideBin } = require('yargs/helpers'); +const browserList = require('./browserList'); const argv = yargs(hideBin(process.argv)) .option('include-snapshots', { @@ -29,31 +29,17 @@ const argv = yargs(hideBin(process.argv)) .option('watch', { type: 'boolean', default: false, - description: 'Enable watching files and executing the tests whenever one of these files changes' + description: 'Run test and watch file change' + }) + .option('browsers', { + type: 'array', + alias: 'b', + default: browserList.defaultBrowsers, + choices: browserList.availableBrowsers, + description: 'Specific browser(s) to run units test' }) .argv -/** - * Browsers - */ -const isWin = osType === 'Windows_NT'; -const isDarwin = osType === 'Darwin'; /* macOS, iOS, iPadOS */ - -const defaultBrowsers = ['chrome']; // TODO: add Firefox after fix unstable test case on Firefox -const availableBrowsers = ['chrome', 'firefox', 'opera']; - -// do not perform browser check as it is slow and never required - -if (isWin) { - // TODO: uncomment this line after all IE11 tests pass - // defaultBrowsers.push('IE_no_addons'); -} - -if (isDarwin) { - // defaultBrowsers.push('safari'); /* there is a bug https://github.com/karma-runner/karma-safari-launcher/issues/29, so do not include it by default */ - availableBrowsers.push('safari'); -} - const packageName = argv.package || path.basename(process.cwd()); // if no package provided, try to guess const packagePath = path.join(ROOT, PACKAGES, packageName); @@ -96,7 +82,7 @@ const baseConfig = { autoWatch: argv.watch, singleRun: !argv.watch, basePath: ROOT, // must be in the root in order for node_modules to be resolved correctly - concurrency: Infinity, // Set the value to `1`, When Karma has a problem to connect a test browser on Windows. + concurrency: 1, // Set the value to `1`, When Karma has a problem to connect a test browser on Windows. // IE 11 must add extra time to loading all scripts for testing concurrently. browserNoActivityTimeout: 60000 * 2, browserDisconnectTimeout: 60000 * 2, @@ -146,7 +132,7 @@ const baseConfig = { // Do not run headless browsers in watch mode, it significantly slow down debugging if (!argv.watch) { - baseConfig.browsers = defaultBrowsers; + baseConfig.browsers = argv.browsers; baseConfig.customLaunchers = { firefox: { base: 'Firefox', @@ -161,7 +147,7 @@ if (!argv.watch) { '--disable-extensions' ] }, - IE_no_addons: { + ie: { base: 'IE', flags: ['-extoff'] } diff --git a/package.json b/package.json index 34cb33cbed..7bb6c98e9c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "build:prod": "lerna run build:prod", "start": "node cli start", "test": "node cli test", - "lint": "node cli lint" + "test:all": "lerna run test", + "lint": "node cli lint", + "lint:all": "lerna run lint" }, "devDependencies": { "@commitlint/cli": "^11.0.0", diff --git a/packages/elements/browserList.js b/packages/elements/browserList.js new file mode 100644 index 0000000000..1edebd5197 --- /dev/null +++ b/packages/elements/browserList.js @@ -0,0 +1,3 @@ +const { defaultBrowsers, availableBrowsers } = require('../../browserList'); + +module.exports = { defaultBrowsers, availableBrowsers }; diff --git a/packages/elements/scripts/cmd/test.js b/packages/elements/scripts/cmd/test.js index 68372fffb4..57fd4faa7d 100644 --- a/packages/elements/scripts/cmd/test.js +++ b/packages/elements/scripts/cmd/test.js @@ -1,5 +1,6 @@ #!/usr/bin/env node const { execSync } = require('child_process'); +const browserList = require('../../browserList'); const { getElements, @@ -22,7 +23,7 @@ exports.builder = yargs => { alias: 'w', type: 'boolean', default: false, - description: 'Watch file change' + description: 'Run test and watch file change' }) .option('snapshots', { alias: 's', @@ -30,12 +31,20 @@ exports.builder = yargs => { default: false, description: 'Update and prune snapshots' }) + .option('browsers', { + alias: 'b', + type: 'array', + default: browserList.defaultBrowsers, + choices: browserList.availableBrowsers, + description: 'Specific browser(s) to run units test' + }) .completion('completion', () => elements); }; exports.handler = (argv) => { const element = argv.element || 'all'; const watch = !!argv.watch; const snapshots = !!argv.snapshots; + const browsers = argv.browsers.join(' '); info(watch ? `Start Karma Server: ${ element }` : `Test: ${ element }`); @@ -44,11 +53,11 @@ exports.handler = (argv) => { } try { - execSync('node cli build', { stdio: 'inherit' }); const command = ['karma', 'start', 'karma.config.js', `--package=${PACKAGE_NAME}`]; watch && command.push('--watch'); snapshots && command.push('--snapshots'); + browsers && command.push(`-b ${browsers}`); execSync(command.join(' '), { stdio: 'inherit', diff --git a/packages/elements/src/button/index.ts b/packages/elements/src/button/index.ts index 922e66b344..dc292908ab 100644 --- a/packages/elements/src/button/index.ts +++ b/packages/elements/src/button/index.ts @@ -1,7 +1,5 @@ import { ControlElement, - css, - CSSResult, customElement, html, property,