Add istanbul & codacy reporting

- Downgrade WCT
- Add istanbul
- Add codacy & reporting task
- Exclude coverage folder from appropriate checks

.gitignore

@@ -4,3 +4,4 @@ node_modules
 build
 lib
 /bower_components
+/coverage

bower.json

@@ -6,7 +6,7 @@
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
   "devDependencies": {
-    "web-component-tester": "^5.0.0",
+    "web-component-tester": "4.2.2",
     "webcomponentsjs": "^0.7.23"
   }
 }

package.json

@@ -5,8 +5,8 @@
   "description": "the autodesk ui library",
   "main": "index.js",
   "scripts": {
-    "test": "npm run compile && lerna run lint && npm run specs && npm run test-components && npm run ensure-copyright",
-    "test-ci": "npm run compile && lerna run lint && npm run specs && npm run test-components-sauce && npm run ensure-copyright",
+    "test": "npm run compile && lerna run lint && npm run specs && npm run browserify && wct && npm run ensure-copyright",
+    "test-ci": "npm run compile && lerna run lint && npm run specs && npm run browserify && wct --plugin sauce --skip-plugin local && npm run ensure-copyright && npm run report-coverage",
     "build": "lerna run build",
     "clean": "node ./packages/scripts/orion.js clean",
     "compile": "node ./packages/scripts/orion.js compile",
@@ -16,8 +16,9 @@
     "ensure-copyright": "node ./packages/scripts/orion.js ensure-copyright --dir ./",
     "specs": "NODE_ENV=test mocha --compilers js:babel-core/register './packages/!(react-playground)/{,!(node_modules|lib|build)/**/}*.test.js'",
     "browserify": "mkdir -p build && browserify packages/components/lib/index.js -o build/bundle.js",
-    "test-components": "npm run browserify && wct",
-    "test-components-sauce": "npm run browserify && wct --plugin sauce --skip-plugin local"
+    "test-components": "npm run compile && npm run browserify && wct",
+    "test-components-sauce": "npm run compile && npm run browserify && wct --plugin sauce --skip-plugin local",
+    "report-coverage": "cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage"
   },
   "repository": {
     "type": "git",
@@ -36,17 +37,18 @@
     "browserify": "^13.3.0",
     "chai": "^3.5.0",
     "chai-enzyme": "^0.6.1",
+    "codacy-coverage": "^2.0.0",
     "enzyme": "^2.6.0",
     "es6-promise": "^4.0.5",
     "eslint": "^3.11.1",
     "jsdom": "9.8.3",
     "jsdom-global": "2.1.0",
     "lerna": "2.0.0-beta.31",
-    "mocha": "^3.2.0",
     "nock": "^9.0.2",
     "react": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.4.1",
-    "web-component-tester": "^5.0.0"
+    "web-component-tester": "4.2.2",
+    "web-component-tester-istanbul": "^0.10.0"
   }
 }

packages/components/src/2016-12-01/button.js

@@ -53,6 +53,7 @@ class Button extends HTMLElement {
     });
 
     this.addEventListener('mouseleave', () => {
+      if (this.state.disabled) { return; }
       const nextState = ButtonState.leaveHover(this.state);
       this.dispatchEvent(new CustomEvent('change', {
         detail: {

packages/react/src/2016-12-01/button.test.js

@@ -20,7 +20,6 @@ require('jsdom-global/register');
 const React = require('react');
 const { mount } = require('enzyme');
 const chai = require('chai');
-const sinon = require('sinon');
 const chaiEnzyme = require('chai-enzyme');
 
 const expect = chai.expect;
@@ -42,21 +41,4 @@ describe('<OrionButton />', () => {
     expect(element.background).to.equal(props.background);
     expect(element.color).to.equal(props.color);
   });
-
-  it('simulates click events', () => {
-    const onClick = sinon.spy();
-    const wrapper = mount(<OrionButton onClick={onClick} />);
-    wrapper.find('orion-button').get(0).dispatchEvent(new Event('click'));
-    expect(onClick).to.have.property('callCount', 1);
-  });
-
-  context('when disabled', () => {
-    it('does not simulate click events', () => {
-      const onClick = sinon.spy();
-      const wrapper = mount(<OrionButton onClick={onClick} disabled />);
-      wrapper.find('orion-button').simulate('click');
-
-      expect(onClick).to.have.property('callCount', 0);
-    });
-  });
 });

packages/scripts/orion-ensure-copyright.js

@@ -54,7 +54,7 @@ function hasCopyrightNotice(file) {
 }
 
 function ensureCopyright(dir) {
-  const files = glob.sync(path.join(dir, '**/*.js'), { ignore: ['**/node_modules/**', '**/bower_components/**', '**/vendor/**'] });
+  const files = glob.sync(path.join(dir, '**/*.js'), { ignore: ['**/node_modules/**', '**/bower_components/**', '**/coverage/**', '**/vendor/**'] });
   const result = files.reduce((memo, file) => {
     if (hasCopyrightNotice(file)) {
       memo.pass.push(file);

test/button.test.html

@@ -1,3 +1,5 @@
+<!doctype html>
+
 <!--
 
 Copyright 2016 Autodesk,Inc.
@@ -12,7 +14,7 @@
 limitations under the License.
 
 -->
-<!doctype html>
+
 <html>
 <head>
   <meta charset="utf-8">
@@ -24,36 +26,84 @@
 <body>
   <test-fixture id="Button">
     <template>
-      <orion-button background="black">I'm a button</orion-button>
+      <orion-button>I'm a button</orion-button>
     </template>
   </test-fixture>
 
   <script>
-    describe('<orion-button>', function() {
+    describe('<orion-button>', () => {
       var button, inline;
 
-      beforeEach(function() {
+      beforeEach(() => {
         button = fixture('Button');
         inline = button.shadowEl.shadowRoot;
+        button._render();
       });
 
-      it('have the passed background color', function() {
-        expect(inline.querySelector('.bg-white')).to.be.null;
-
-        button.setAttribute('background', 'white');
-        expect(inline.querySelector('.bg-white')).not.to.be.null;
-      });
-
-      it('calls the click handler', function() {
-        clickHandler = sinon.spy();
+      it('calls the click handler', () => {
+        const clickHandler = sinon.spy();
         button.addEventListener('click', clickHandler);
 
         button.dispatchEvent(new Event('click'));
         expect(clickHandler.called).to.be.true;
       });
 
-      it('dims on hover', function() {
-        expect(inline.querySelector('.dim')).not.to.be.null;
+      it('updates state when background is set', () => {
+        expect(button.state.background).to.be.undefined;
+        button.background = 'black';
+        expect(button.state.background).to.eq('black');
+      });
+
+      it('updates state when color is set', () => {
+        expect(button.state.color).to.be.undefined;
+        button.color = 'black';
+        expect(button.state.color).to.eq('black');
+      });
+
+      it('updates state when hover is set', () => {
+        expect(button.state.hover).to.be.false;
+        button.hover = true;
+        expect(button.state.hover).to.be.true;
+        button.hover = false;
+        expect(button.state.hover).to.be.false;
+      });
+
+      it('updates state when disabled is set', () => {
+        expect(button.state.disabled).to.be.false;
+        button.disabled = true;
+        expect(button.state.disabled).to.be.true;
+        button.disabled = false;
+        expect(button.state.disabled).to.be.false;
+      });
+
+      context('when disabled', () => {
+        beforeEach(() => {
+          button.disabled = true
+        });
+
+        it('does not call the click handler', () => {
+          const clickHandler = sinon.spy();
+          button.addEventListener('click', clickHandler);
+
+          button.dispatchEvent(new Event('click'));
+          expect(clickHandler.called).to.be.false;
+        });
+
+        it('does not trigger a `change` event on mouseenter', () => {
+          const changeListener = sinon.spy();
+          button.addEventListener('change', changeListener);
+
+          button.dispatchEvent(new MouseEvent('mouseenter'));
+          expect(changeListener.called).to.be.false;
+        });
+
+        it('does not trigger a `change` event on mouseleave', () => {
+          const changeListener = sinon.spy();
+          button.addEventListener('change', changeListener);
+
+          button.dispatchEvent(new MouseEvent('mouseleave'));
+          expect(changeListener.called).to.be.false;
+        });
       });
     });
 

test/runner.html

@@ -0,0 +1,34 @@
+<!doctype html>
+
+<!--
+
+Copyright 2016 Autodesk,Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+<html>
+<head>
+  <title>Orion UI Web Components Tests</title>
+  <meta charset="utf-8">
+  <script src="../bower_components/web-component-tester/browser.js"></script>
+</head>
+
+<body>
+  <script>
+    var suites = [
+      'button.test.html'
+    ];
+
+    WCT.loadSuites(suites);
+  </script>
+</body>
+</html>

wct.conf.json

@@ -1,5 +1,6 @@
 {
   "verbose": false,
+  "suites": ["test/runner.html"],
   "plugins": {
     "local": {
       "browsers": ["chrome"]
@@ -13,6 +14,20 @@
           "version": "54.0"
         }
       ]
+    },
+    "istanbul": {
+      "dir": "./coverage",
+      "reporters": ["text-summary", "lcov"],
+      "include": [
+        "**/*.js",
+        "**/*.html"
+      ],
+      "exclude": [
+        "/bower_components/**/*.js",
+        "/bower_components/**/*.html",
+        "/test/**/*.js",
+        "/test/**/*.html"
+      ]
     }
   }
 }