axa-ch-webhub-cloud · MKaHead · Jan 15, 2019 · Jan 15, 2019 · Jan 15, 2019 · Jan 24, 2019
diff --git a/.babelrc b/.babelrc
@@ -1,111 +1,3 @@
 {
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["last 2 versions", "safari >= 8", "not ie <= 10"]
-      }
-    }]
-  ],
-  "plugins": [
-    ["nanohtml", {
-      "useImport": true
-    }],
-    "external-helpers",
-    "transform-class-properties",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread",
-    "babel-plugin-version-transform",
-    ["inline-replace-variables", {
-      "ENV": {
-        "type": "node",
-        "replacement": "process.env.NODE_ENV"
-      },
-      "DEV": "development",
-      "PROD": "production"
-    }],
-    ["transform-inline-environment-variables", {
-      "include": [
-        "NODE_ENV"
-      ]
-    }],
-    ["babel-plugin-transform-builtin-classes", {
-      "globals": [
-        "Array",
-        "Error",
-        "HTMLAnchorElement",
-        "HTMLAreaElement",
-        "HTMLAudioElement",
-        "HTMLBRElement",
-        "HTMLBaseElement",
-        "HTMLBodyElement",
-        "HTMLButtonElement",
-        "HTMLCanvasElement",
-        "HTMLContentElement",
-        "HTMLDListElement",
-        "HTMLDataListElement",
-        "HTMLDetailsElement",
-        "HTMLDialogElement",
-        "HTMLDirectoryElement",
-        "HTMLDivElement",
-        "HTMLDocument",
-        "HTMLElement",
-        "HTMLEmbedElement",
-        "HTMLFieldSetElement",
-        "HTMLFontElement",
-        "HTMLFormElement",
-        "HTMLFrameElement",
-        "HTMLFrameSetElement",
-        "HTMLHRElement",
-        "HTMLHeadElement",
-        "HTMLHeadingElement",
-        "HTMLHtmlElement",
-        "HTMLIFrameElement",
-        "HTMLImageElement",
-        "HTMLInputElement",
-        "HTMLLIElement",
-        "HTMLLabelElement",
-        "HTMLLegendElement",
-        "HTMLLinkElement",
-        "HTMLMapElement",
-        "HTMLMarqueeElement",
-        "HTMLMediaElement",
-        "HTMLMenuElement",
-        "HTMLMetaElement",
-        "HTMLMeterElement",
-        "HTMLModElement",
-        "HTMLOListElement",
-        "HTMLObjectElement",
-        "HTMLOptGroupElement",
-        "HTMLOptionElement",
-        "HTMLOutputElement",
-        "HTMLParagraphElement",
-        "HTMLParamElement",
-        "HTMLPictureElement",
-        "HTMLPreElement",
-        "HTMLProgressElement",
-        "HTMLQuoteElement",
-        "HTMLScriptElement",
-        "HTMLSelectElement",
-        "HTMLShadowElement",
-        "HTMLSlotElement",
-        "HTMLSourceElement",
-        "HTMLSpanElement",
-        "HTMLStyleElement",
-        "HTMLTableCaptionElement",
-        "HTMLTableCellElement",
-        "HTMLTableColElement",
-        "HTMLTableElement",
-        "HTMLTableRowElement",
-        "HTMLTableSectionElement",
-        "HTMLTemplateElement",
-        "HTMLTextAreaElement",
-        "HTMLTitleElement",
-        "HTMLTrackElement",
-        "HTMLUListElement",
-        "HTMLUnknownElement",
-        "HTMLVideoElement"
-      ]
-    }]
-  ]
+  "presets": ["./.babelrc.js"]
 }
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,113 @@
+const testPreset = [["env", {"modules": "commonjs"}], ["react"]];
+
+module.exports = {
+  presets:
+    process.env.NODE_ENV === "test"
+      ? testPreset
+      : [["env", {
+        "modules": false,
+        "targets": {
+          "browsers": ["last 2 versions", "safari >= 8", "not ie <= 10"]
+        }
+      }]],
+  plugins: [
+    ["nanohtml", {
+      "useImport": true
+    }],
+    "transform-class-properties",
+    "transform-es2015-destructuring",
+    "transform-object-rest-spread",
+    "babel-plugin-version-transform",
+    ["inline-replace-variables", {
+      ENV: {
+        type: "node",
+        replacement: "process.env.NODE_ENV"
+      },
+      DEV: "development",
+      PROD: "production"
+    }],
+    ["transform-inline-environment-variables", {
+      include: [
+        "NODE_ENV"
+      ]
+    }],
+    ["babel-plugin-transform-builtin-classes", {
+      globals: [
+        "Array",
+        "Error",
+        "HTMLAnchorElement",
+        "HTMLAreaElement",
+        "HTMLAudioElement",
+        "HTMLBRElement",
+        "HTMLBaseElement",
+        "HTMLBodyElement",
+        "HTMLButtonElement",
+        "HTMLCanvasElement",
+        "HTMLContentElement",
+        "HTMLDListElement",
+        "HTMLDataListElement",
+        "HTMLDetailsElement",
+        "HTMLDialogElement",
+        "HTMLDirectoryElement",
+        "HTMLDivElement",
+        "HTMLDocument",
+        "HTMLElement",
+        "HTMLEmbedElement",
+        "HTMLFieldSetElement",
+        "HTMLFontElement",
+        "HTMLFormElement",
+        "HTMLFrameElement",
+        "HTMLFrameSetElement",
+        "HTMLHRElement",
+        "HTMLHeadElement",
+        "HTMLHeadingElement",
+        "HTMLHtmlElement",
+        "HTMLIFrameElement",
+        "HTMLImageElement",
+        "HTMLInputElement",
+        "HTMLLIElement",
+        "HTMLLabelElement",
+        "HTMLLegendElement",
+        "HTMLLinkElement",
+        "HTMLMapElement",
+        "HTMLMarqueeElement",
+        "HTMLMediaElement",
+        "HTMLMenuElement",
+        "HTMLMetaElement",
+        "HTMLMeterElement",
+        "HTMLModElement",
+        "HTMLOListElement",
+        "HTMLObjectElement",
+        "HTMLOptGroupElement",
+        "HTMLOptionElement",
+        "HTMLOutputElement",
+        "HTMLParagraphElement",
+        "HTMLParamElement",
+        "HTMLPictureElement",
+        "HTMLPreElement",
+        "HTMLProgressElement",
+        "HTMLQuoteElement",
+        "HTMLScriptElement",
+        "HTMLSelectElement",
+        "HTMLShadowElement",
+        "HTMLSlotElement",
+        "HTMLSourceElement",
+        "HTMLSpanElement",
+        "HTMLStyleElement",
+        "HTMLTableCaptionElement",
+        "HTMLTableCellElement",
+        "HTMLTableColElement",
+        "HTMLTableElement",
+        "HTMLTableRowElement",
+        "HTMLTableSectionElement",
+        "HTMLTemplateElement",
+        "HTMLTextAreaElement",
+        "HTMLTitleElement",
+        "HTMLTrackElement",
+        "HTMLUListElement",
+        "HTMLUnknownElement",
+        "HTMLVideoElement"
+      ]
+    }]
+  ]
+};
diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": "airbnb",
+  "extends": ["airbnb", "plugin:jest/recommended"],
   "rules": {
     "max-len": ["error", {
       "code": 140,
@@ -25,7 +25,8 @@
     "no-underscore-dangle": "off",
     "no-use-before-define": ["error", { "functions": false, "classes": false }],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": ["./stack/**/*.js"]}],
-    "object-curly-newline": ["error", {"multiline": true, "consistent": true }]
+    "object-curly-newline": ["error", {"multiline": true, "consistent": true }],
+    "jest/no-jest-import": "off"
   },
   "globals": {
     "HTMLAnchorElement": true,
@@ -120,5 +121,6 @@
       "decorations": true,
       "jsx": true
     }
-  }
+  },
+  "plugins": ["jest"]
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -44,6 +44,11 @@
       - [`withVersion()`](#withversion)
   - [Integration](#integration)
     - [`withReact()`](#withreact)
+- [Testing](#testing)
+  - [Running Tests](#running-tests)
+  - [Writing Tests](#writing-tests)
+  - [Disabling jsdom](#disabling-jsdom)
+  - [Covergage Reporting](#covergage-reporting)
 - [How do we release a new version](#how-do-we-release-a-new-version)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -441,6 +446,31 @@ const MyApp = ({ color, onClick }) => (
   <AXAButtonReact color={color} onAxaClick={onClick}>Hello World</AXAButtonReact>
 );
 ```
+# Testing
+Library uses Jest as it's test runner
+
+## Running Tests
+When you run `npm test-jest`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests.
+
+## Writing Tests
+To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended.
+
+Jest provides a built-in expect() global function for making assertions. A basic test could look like this:
+
+```js
+import sum from './sum';
+
+it('sums numbers', () => {
+  expect(sum(1, 2)).toEqual(3);
+  expect(sum(2, 2)).toEqual(4);
+});
+```
+## Disabling jsdom
+If you know that none of your tests depend on jsdom, you can run `npm run test-jest --env=node`, and your tests will run faster.
+
+## Covergage Reporting
+Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.
+Run `npm test -- --coverage` (note extra -- in the middle)
 
 # How do we release a new version
 

diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  collectCoverageFrom: [
+    'src/**/*.js',
+  ],
+  setupTestFrameworkScriptFile: '<rootDir>/stack/jest/setupTests.js',
+  testMatch: [
+    '<rootDir>/src/**/?(*.)(test).{js,jsx,mjs}',
+  ],
+  transform: {
+    '^.+\\.css$': '<rootDir>/stack/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|mjs|css|json)$)': '<rootDir>/stack/jest/fileTransform.js',
+    '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$',
+  ],
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+  ],
+};
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "test-editorconfig": "editorconfig-checker src",
     "test-eslint": "eslint src/",
     "test-stylelint": "stylelint 'src/**/*.scss'",
+    "test-jest": "node stack/tasks/test.js --env=jsdom",
     "toc": "doctoc CONTRIBUTING.md --title '**Table of Contents**'",
     "start": "cross-env NODE_ENV=production npm run serve-build-prod",
     "new": "node stack/tasks/create-a-m-o.js",
@@ -96,6 +97,7 @@
     "autoprefixer": "^7.2.3",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^8.2.1",
+    "babel-jest": "^23.6.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-inline-replace-variables": "^1.3.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -115,14 +117,18 @@
     "del": "~3.0.0",
     "doctoc": "^1.3.1",
     "editorconfig-checker": "^1.1.5",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
     "eslint": "^4.10.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^22.1.3",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "execa": "^0.10.0",
     "express": "~4.16.2",
     "glob": "^7.1.2",
+    "jest": "^23.6.0",
     "mkdirp": "~0.5.1",
     "node-dir": "^0.1.17",
     "node-sass": "^4.5.3",

diff --git a/stack/jest/cssTransform.js b/stack/jest/cssTransform.js
@@ -0,0 +1,12 @@
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};
diff --git a/stack/jest/fileTransform.js b/stack/jest/fileTransform.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};
diff --git a/stack/jest/setupTests.js b/stack/jest/setupTests.js
@@ -0,0 +1,6 @@
+import 'document-register-element';
+import 'core-js/modules/_object-assign';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/stack/tasks/bundle-demos.js b/stack/tasks/bundle-demos.js
@@ -43,6 +43,7 @@ async function buildComponents() {
           .then(result => result.css),
       }),
       babel({
+        plugins: ['external-helpers'],
         runtimeHelpers: true,
         presets: ['react'],
       }),