feat: add browsers option to test command (#27)

* feat: add browsers option to test command

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 -- <options>
+```
+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 -- <options>
+#or
+npm run lint demo-block -- <options>
 ```
 
-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` <br>You can check the list of available browsers by add option `--help`.  <br>Usage: `npm run test button -- --browsers chrome firefox` |
+| `--watch` or `-w` | Run test and watch file change. <br>Usage: `npm run test button -- --watch` |
+| `--snapshots` or `-s` | Update and prune snapshots (`--browsers` must be chrome). <br>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. <br>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.

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
+};

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(' '));

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']
     }

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",

packages/elements/browserList.js

@@ -0,0 +1,3 @@
+const { defaultBrowsers, availableBrowsers } = require('../../browserList');
+
+module.exports = { defaultBrowsers, availableBrowsers };

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,20 +23,28 @@ exports.builder = yargs => {
       alias: 'w',
       type: 'boolean',
       default: false,
-      description: 'Watch file change'
+      description: 'Run test and watch file change'
     })
     .option('snapshots', {
       alias: 's',
       type: 'boolean',
       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',

packages/elements/src/button/index.ts

@@ -1,7 +1,5 @@
 import {
   ControlElement,
-  css,
-  CSSResult,
   customElement,
   html,
   property,