chore(infrastructure): Set up testing

.eslintrc.yaml

@@ -3,6 +3,8 @@ globals:
   goog: false
 env:
   browser: true
+plugins:
+  - tape
 rules:
   max-len: [error, 120]
   no-new: warn
@@ -17,3 +19,26 @@ rules:
   require-jsdoc: off
   valid-jsdoc: off
   prefer-const: error
+
+  # tape rules
+  # see: https://github.com/atabel/eslint-plugin-tape/blob/master/index.js
+  tape/assertion-message:
+    - off
+    - always
+  tape/max-asserts:
+    - off
+    - 5
+  tape/no-identical-title: error
+  tape/no-ignored-test-files: error
+  tape/no-only-test: error
+  tape/no-skip-assert: error
+  tape/no-skip-test: error
+  tape/no-statement-after-end: error
+  tape/no-unknown-modifiers: error
+  tape/test-ended: error
+  tape/test-title:
+    - error
+    - if-multiple
+  tape/use-t-well: error
+  tape/use-t: error
+  tape/use-test: error

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
 /build
+/coverage
 packages/*/dist
 *.log

karma.conf.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const webpackConfig = require('./webpack.config')[0];
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['tap'],
+    files: [
+      'test/unit/index.js'
+    ],
+    preprocessors: {
+      'test/unit/index.js': ['webpack', 'sourcemap']
+    },
+    reporters: ['dots', 'coverage'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    browsers: ['Chrome'],
+    concurrency: Infinity,
+
+    coverageReporter: {
+      dir: 'coverage',
+      reporters: [
+        {type: 'json', subdir: '.', file: 'coverage.json'},
+        {type: 'html'}
+      ]
+    },
+
+    webpack: Object.assign({}, webpackConfig, {
+      devtool: 'inline-source-map',
+      node: {
+        fs: 'empty'
+      },
+      module: Object.assign({}, webpackConfig.module, {
+        // Cover source files when not debugging tests. Otherwise, omit coverage instrumenting to get
+        // uncluttered source maps.
+        loaders: webpackConfig.module.loaders.concat([config.singleRun ? {
+          test: /\.js$/,
+          include: path.resolve('./packages'),
+          loader: 'isparta'
+        } : undefined]).filter(Boolean)
+      })
+    }),
+
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
+};

package.json

@@ -9,21 +9,40 @@
     "build:min": "mkdir -p build && MDL_ENV=production webpack -p",
     "dist": "npm run clean && npm run build && npm run build:min",
     "dev": "npm run clean && MDL_ENV=development webpack-dev-server --content-base demos --inline --hot",
-    "lint:js": "eslint --fix packages webpack.config.js",
-    "lint:css": "stylefmt -R packages && stylelint packages/**/*.scss",
-    "postinstall": "lerna bootstrap"
+    "fix:js": "eslint --fix packages webpack.config.js karma.conf.js",
+    "fix:css": "stylefmt -R packages",
+    "fix": "npm-run-all --parallel fix:*",
+    "lint:js": "eslint packages webpack.config.js karma.conf.js",
+    "lint:css": "stylelint packages/**/*.scss",
+    "lint": "npm-run-all --parallel lint:*",
+    "postinstall": "lerna bootstrap",
+    "pretest": "npm run lint",
+    "test": "karma start --single-run",
+    "posttest": "istanbul report --root coverage text-summary && istanbul check-coverage --lines 85 --statements 85 --branches 85 --functions 85",
+    "test:watch": "karma start --auto-watch"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.6",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
+    "bel": "^4.4.3",
     "css-loader": "^0.23.1",
     "eslint": "^2.12.0",
     "eslint-config-google": "^0.5.0",
+    "eslint-plugin-tape": "^1.1.0",
     "extract-text-webpack-plugin": "^1.0.1",
+    "isparta-loader": "^2.0.0",
+    "istanbul": "^0.4.4",
+    "karma": "^1.1.1",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-coverage": "^1.1.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-tap": "^2.0.1",
+    "karma-webpack": "^1.7.0",
     "lerna": "2.0.0-beta.18",
     "node-sass": "^3.7.0",
+    "npm-run-all": "^2.3.0",
     "postcss-loader": "^0.9.1",
     "raw-loader": "^0.5.1",
     "sass-loader": "^3.2.0",
@@ -33,6 +52,8 @@
     "stylelint-config-standard": "^11.0.0",
     "stylelint-scss": "^1.2.1",
     "stylelint-selector-bem-pattern": "^1.0.0",
+    "tape": "^4.6.0",
+    "testdouble": "^1.6.0",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },

packages/mdl-auto-init/index.js

@@ -1,10 +1,12 @@
 const registry = Object.create(null);
 
+const CONSOLE_WARN = console.warn.bind(console);
+
 /**
  * Auto-initializes all mdl components on a page.
  */
-export default function mdlAutoInit() {
-  const nodes = document.querySelectorAll('[data-mdl-auto-init]');
+export default function mdlAutoInit(root = document, warn = CONSOLE_WARN) {
+  const nodes = root.querySelectorAll('[data-mdl-auto-init]');
   for (let i = 0, node; (node = nodes[i]); i++) {
     const ctorName = node.dataset.mdlAutoInit;
     if (!ctorName) {
@@ -18,7 +20,7 @@ export default function mdlAutoInit() {
     }
 
     if (node[ctorName]) {
-      console.warn(`(mdl-auto-init) Component already initialized for ${node}. Skipping...`);
+      warn(`(mdl-auto-init) Component already initialized for ${node}. Skipping...`);
       continue;
     }
 
@@ -33,14 +35,22 @@ export default function mdlAutoInit() {
   }
 }
 
-mdlAutoInit.register = function(componentName, Ctor) {
+mdlAutoInit.register = function(componentName, Ctor, warn = CONSOLE_WARN) {
   if (typeof Ctor !== 'function') {
     throw new Error(`(mdl-auto-init) Invalid Ctor value ${Ctor}. Expected function`);
   }
   if (registry[componentName]) {
-    console.warn(
+    warn(
       `(mdl-auto-init) Overriding registration for ${componentName} with ${Ctor}. ` +
       `Was: ${registry[componentName]}`);
   }
   registry[componentName] = Ctor;
 };
+
+mdlAutoInit.deregister = function(componentName) {
+  delete registry[componentName];
+};
+
+mdlAutoInit.deregisterAll = function() {
+  Object.keys(registry).forEach(this.deregister, this);
+};

test/unit/index.js

@@ -0,0 +1,4 @@
+/** @fileoverview Bootstraps the test bundle for karma-webpack. */
+
+const testsContext = require.context('.', true, /\.test\.js$/);
+testsContext.keys().forEach(testsContext);

test/unit/mdl-auto-init/mdl-auto-init.test.js

@@ -0,0 +1,86 @@
+import bel from 'bel';
+import td from 'testdouble';
+import test from 'tape';
+import mdlAutoInit from '../../../packages/mdl-auto-init';
+
+class FakeComponent {
+  static attachTo(node) {
+    return new this(node);
+  }
+
+  constructor(node) {
+    this.node = node;
+  }
+}
+
+const createFixture = () => bel`
+  <div id="root">
+    <p data-mdl-auto-init="FakeComponent" class="mdl-fake">Fake Element</p>
+  </div>
+`;
+
+const setupTest = () => {
+  mdlAutoInit.deregisterAll();
+  mdlAutoInit.register(FakeComponent.name, FakeComponent);
+  return createFixture();
+};
+
+test('calls attachTo() on components registered for identifier on nodes w/ data-mdl-auto-init attr', t => {
+  const root = setupTest();
+  mdlAutoInit(root);
+
+  t.true(root.querySelector('.mdl-fake').FakeComponent instanceof FakeComponent);
+  t.end();
+});
+
+test('passes the node where "data-mdl-auto-init" was found to attachTo()', t => {
+  const root = setupTest();
+  mdlAutoInit(root);
+
+  const fake = root.querySelector('.mdl-fake');
+  t.equal(fake.FakeComponent.node, fake);
+  t.end();
+});
+
+test('throws when no constructor name is specified within "data-mdl-auto-init"', t => {
+  const root = setupTest();
+  root.querySelector('.mdl-fake').dataset.mdlAutoInit = '';
+
+  t.throws(() => mdlAutoInit(root));
+  t.end();
+});
+
+test('throws when constructor is not registered', t => {
+  const root = setupTest();
+  root.querySelector('.mdl-fake').dataset.mdlAutoInit = 'MDLUnregisteredComponent';
+
+  t.throws(() => mdlAutoInit(root));
+  t.end();
+});
+
+test('warns when autoInit called multiple times on a node', t => {
+  const root = setupTest();
+  const warn = td.func('warn');
+  const {contains} = td.matchers;
+
+  mdlAutoInit(root, warn);
+  mdlAutoInit(root, warn);
+
+  t.doesNotThrow(() => td.verify(warn(contains('(mdl-auto-init) Component already initialized'))));
+  t.end();
+});
+
+test('#register throws when Ctor is not a function', t => {
+  t.throws(() => mdlAutoInit.register('not-a-function', 'Not a function'));
+  t.end();
+});
+
+test('#register warns when registered key is being overridden', t => {
+  const warn = td.func('warn');
+  const {contains} = td.matchers;
+
+  mdlAutoInit.register(FakeComponent.name, () => ({overridden: true}), warn);
+
+  t.true(() => td.verify(warn(contains('(mdl-auto-init) Overriding registration'))));
+  t.end();
+});