feat(auto-init): Fire event on mdcAutoInit complete (#1012)

Fix #954

packages/mdc-auto-init/README.md

@@ -160,3 +160,10 @@ warning, you could simply pass in a nop.
 ```
 
 This will suppress any warnings about already initialized elements.
+
+### Events
+
+#### MDCAutoInit:End
+Triggered when initialization of all components is complete.
+
+`document.addEventListener("MDCAutoInit:End", () => {...});`

packages/mdc-auto-init/index.js

@@ -18,6 +18,21 @@ const registry = Object.create(null);
 
 const CONSOLE_WARN = console.warn.bind(console);
 
+function _emit(evtType, evtData, shouldBubble = false) {
+  let evt;
+  if (typeof CustomEvent === 'function') {
+    evt = new CustomEvent(evtType, {
+      detail: evtData,
+      bubbles: shouldBubble,
+    });
+  } else {
+    evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(evtType, shouldBubble, false, evtData);
+  }
+
+  document.dispatchEvent(evt);
+}
+
 /**
  * Auto-initializes all mdc components on a page.
  */
@@ -49,6 +64,8 @@ export default function mdcAutoInit(root = document, warn = CONSOLE_WARN) {
       configurable: true,
     });
   }
+
+  _emit('MDCAutoInit:End', {});
 }
 
 mdcAutoInit.register = function(componentName, Ctor, warn = CONSOLE_WARN) {

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

@@ -95,3 +95,46 @@ test('#register warns when registered key is being overridden', () => {
 
   td.verify(warn(contains('(mdc-auto-init) Overriding registration')));
 });
+
+test('#dispatches a MDCAutoInit:End event when all components are initialized', () => {
+  const root = document.createElement('div');
+  const handler = td.func('eventHandler');
+  let evt = null;
+
+  td.when(handler(td.matchers.isA(Object))).thenDo((evt_) => {
+    evt = evt_;
+  });
+
+  const type = 'MDCAutoInit:End';
+
+  document.addEventListener(type, handler);
+  mdcAutoInit(root);
+
+  assert.isOk(evt !== null);
+  assert.equal(evt.type, type);
+});
+
+test('#dispatches a MDCAutoInit:End event when all components are initialized - custom events not supported', () => {
+  const root = document.createElement('div');
+  const handler = td.func('eventHandler');
+  let evt = null;
+
+  td.when(handler(td.matchers.isA(Object))).thenDo((evt_) => {
+    evt = evt_;
+  });
+
+  const type = 'MDCAutoInit:End';
+
+  document.addEventListener(type, handler);
+
+  const {CustomEvent} = window;
+  window.CustomEvent = undefined;
+  try {
+    mdcAutoInit(root);
+  } finally {
+    window.CustomEvent = CustomEvent;
+  }
+
+  assert.isOk(evt !== null);
+  assert.equal(evt.type, type);
+});