Merge pull request #182 from ing-bank/chore/updateTestingConfigs

Update testing configs for better DX

.circleci/config.yml

@@ -7,7 +7,7 @@ version: 2
 defaults: &defaults
   working_directory: ~/repo
   docker:
-    - image: circleci/node:10.12.0-browsers
+    - image: circleci/node:10.16.0-browsers
 
 jobs:
   test:
@@ -29,8 +29,12 @@ jobs:
       # run lint
       - run: npm run lint
 
-      # run tests
+      # run test locally first
-      - run: npm run test:bs
+      - run: npm run test
+
+      # run compatibility tests for multiple browser via browserstack
+      # disabled until we can safely test multiple browsers
+      # - run: npm run test:bs
 
       - persist_to_workspace:
           root: ~/repo
@@ -44,7 +48,7 @@ jobs:
           at: ~/repo
       - add_ssh_keys:
           fingerprints:
-            - "df:41:a0:89:d0:a1:30:7d:08:38:d6:65:73:61:a4:ec"
+            - 'df:41:a0:89:d0:a1:30:7d:08:38:d6:65:73:61:a4:ec'
       - run:
           name: Authenticate with registry
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
         'no-console': 'off',
         'no-unused-expressions': 'off',
         'class-methods-use-this': 'off',
+        'max-classes-per-file': 'off',
       },
     },
   ],

karma.conf.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const createDefaultConfig = require('@open-wc/testing-karma/default-config');
+const { createDefaultConfig } = require('@open-wc/testing-karma');
 const merge = require('webpack-merge');
 
 module.exports = config => {
@@ -17,6 +17,10 @@ module.exports = config => {
         },
       ],
 
+      esm: {
+        nodeResolve: true,
+      },
+
       // TODO: improve coverage
       coverageIstanbulReporter: {
         thresholds: {

package.json

@@ -11,18 +11,15 @@
     "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/eslint-config": "^1.0.0",
     "@open-wc/prettier-config": "^0.1.0",
-    "@open-wc/testing": "^2.0.6",
+    "@open-wc/testing": "^2.3.2",
-    "@open-wc/testing-karma": "^2.0.3",
+    "@open-wc/testing-karma": "^3.1.22",
-    "@open-wc/testing-karma-bs": "^1.1.3",
+    "@open-wc/testing-karma-bs": "^1.1.47",
     "@open-wc/testing-wallaby": "^0.1.12",
     "@webcomponents/webcomponentsjs": "^2.2.5",
     "babel-eslint": "^8.2.6",
     "babel-polyfill": "^6.26.0",
     "eclint": "^2.8.1",
-    "eslint": "^5.14.1",
+    "eslint": "^6.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-html": "^5.0.3",
-    "eslint-plugin-import": "^2.16.0",
     "husky": "^1.0.0",
     "lerna": "3.4.3",
     "lint-staged": "^8.0.0",
@@ -38,12 +35,12 @@
     "storybook:build": "build-storybook -s ./assets",
     "test": "karma start --coverage",
     "test:watch": "karma start --auto-watch=true --single-run=false",
-    "test:legacy": "karma start --legacy --coverage",
+    "test:compatibility": "karma start --compatibility all --coverage",
-    "test:legacy:watch": "karma start --legacy --auto-watch=true --single-run=false",
+    "test:compatibility:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start --update-snapshots",
     "test:prune-snapshots": "karma start --prune-snapshots",
-    "test:bs": "karma start karma.bs.config.js --coverage",
+    "test:bs": "karma start karma.bs.config.js --coverage --compatibility all",
-    "test:bs:legacy": "karma start --legacy karma.bs.config.js --coverage",
+    "test:bs:compatibility": "karma start karma.bs.config.js --coverage --compatibility all",
     "lint": "run-p lint:*",
     "lint:eclint": "git ls-files | xargs eclint check",
     "lint:eslint": "eslint --ext .js,.html .",

packages/fieldset/test/lion-fieldset.test.js

@@ -650,11 +650,9 @@ describe('<lion-fieldset>', () => {
 
     it('has correct validation afterwards', async () => {
       const isCat = modelValue => ({ isCat: modelValue === 'cat' });
-      const containsA = modelValues => {
+      const containsA = modelValues => ({
-        return {
+        containsA: modelValues.color ? modelValues.color.indexOf('a') > -1 : false,
-          containsA: modelValues.color ? modelValues.color.indexOf('a') > -1 : false,
+      });
-        };
-      };
 
       const el = await fixture(html`
         <${tag} .errorValidators=${[[containsA]]}>

packages/form-system/index.js

@@ -0,0 +1 @@
+// empty file

packages/form-system/stories/index.stories.js

@@ -14,8 +14,9 @@ import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
 import '@lion/input-email/lion-input-email.js';
 
-storiesOf('Forms|Form', module).add('Umbrella form', () => {
+storiesOf('Forms|Form', module).add(
-  return html`
+  'Umbrella form',
+  () => html`
     <lion-form
       ><form>
         <lion-input
@@ -103,5 +104,5 @@ storiesOf('Forms|Form', module).add('Umbrella form', () => {
         </div>
       </form></lion-form
     >
-  `;
+  `,
-});
+);

packages/input-date/src/LionInputDate.js

@@ -19,9 +19,7 @@ export class LionInputDate extends FieldCustomMixin(LocalizeMixin(LionInput)) {
 
   constructor() {
     super();
-    this.parser = (value, options) => {
+    this.parser = (value, options) => (value === '' ? undefined : parseDate(value, options));
-      return value === '' ? undefined : parseDate(value, options);
-    };
     this.formatter = formatDate;
   }
 

packages/input-iban/src/validators.js

@@ -1,8 +1,6 @@
 import { isValidIBAN } from '@bundled-es-modules/ibantools/ibantools.js';
 
-export const isIBAN = value => {
+export const isIBAN = value => isValidIBAN(value);
-  return isValidIBAN(value);
-};
 
 export const isIBANValidator = () => [(...params) => ({ isIBAN: isIBAN(...params) })];
 

packages/select-rich/src/LionSelectRich.js

@@ -89,9 +89,7 @@ export class LionSelectRich extends FormRegistrarMixin(
   get slots() {
     return {
       ...super.slots,
-      invoker: () => {
+      invoker: () => document.createElement('lion-select-invoker'),
-        return document.createElement('lion-select-invoker');
-      },
     };
   }
 

scripts/rewrite-links.js

@@ -74,9 +74,7 @@ function rewriteLinksInMdContent(mdContent, filePath, cfg = rewriteLinksConfig)
     return newHref;
   };
 
-  const mdLink = (href, title, text) => {
+  const mdLink = (href, title, text) => `[${text}](${rewrite(href)}${title ? ` ${title}` : ''})`;
-    return `[${text}](${rewrite(href)}${title ? ` ${title}` : ''})`;
-  };
 
   const resultLinks = [];
   // /^!?\[(label)\]\(href(?:\s+(title))?\s*\)/

wallaby.js

@@ -3,13 +3,9 @@ const wallabyWebpack = require('wallaby-webpack'); // eslint-disable-line import
 // filter packages, e.g. 'core' / '{radio,radio-button}' / '{form,input*}'
 const packagePattern = '*';
 
-const replaceAll = (str, oldValue, newValue) => {
+const replaceAll = (str, oldValue, newValue) => str.split(oldValue).join(newValue);
-  return str.split(oldValue).join(newValue);
-};
 
-const countOccurences = (str, subbstr) => {
+const countOccurences = (str, subbstr) => str.split(subbstr).length - 1;
-  return str.split(subbstr).length - 1;
-};
 
 const makeLionImportsRelative = file => {
   // example: