fix(event): fix CustomEvent polyfill

Fixes #1173

Author: adamdbradley

src/renderer/dom-api.ts

@@ -19,6 +19,7 @@ export function createDomApi(App: AppGlobal, win: any, doc: Document): DomApi {
       // CustomEvent polyfill
       win.CustomEvent = (event: any, data: EventEmitterData, evt?: any) => {
         evt = doc.createEvent('CustomEvent');
+        data = data || {};
         evt.initCustomEvent(event, data.bubbles, data.cancelable, data.detail);
         return evt;
       };

test/karma/test-app/components.d.ts

@@ -91,6 +91,9 @@ export namespace Components {
   interface CssVariables {}
   interface CssVariablesAttributes extends StencilHTMLAttributes {}
 
+  interface CustomEvent {}
+  interface CustomEventAttributes extends StencilHTMLAttributes {}
+
   interface DynamicCssVariable {}
   interface DynamicCssVariableAttributes extends StencilHTMLAttributes {}
 
@@ -367,6 +370,7 @@ declare global {
     'ConditionalRerender': Components.ConditionalRerender;
     'CssVariablesRoot': Components.CssVariablesRoot;
     'CssVariables': Components.CssVariables;
+    'CustomEvent': Components.CustomEvent;
     'DynamicCssVariable': Components.DynamicCssVariable;
     'DynamicImport': Components.DynamicImport;
     'Es5AddclassSvg': Components.Es5AddclassSvg;
@@ -439,6 +443,7 @@ declare global {
     'conditional-rerender': Components.ConditionalRerenderAttributes;
     'css-variables-root': Components.CssVariablesRootAttributes;
     'css-variables': Components.CssVariablesAttributes;
+    'custom-event': Components.CustomEventAttributes;
     'dynamic-css-variable': Components.DynamicCssVariableAttributes;
     'dynamic-import': Components.DynamicImportAttributes;
     'es5-addclass-svg': Components.Es5AddclassSvgAttributes;
@@ -571,6 +576,12 @@ declare global {
     new (): HTMLCssVariablesElement;
   };
 
+  interface HTMLCustomEventElement extends Components.CustomEvent, HTMLStencilElement {}
+  var HTMLCustomEventElement: {
+    prototype: HTMLCustomEventElement;
+    new (): HTMLCustomEventElement;
+  };
+
   interface HTMLDynamicCssVariableElement extends Components.DynamicCssVariable, HTMLStencilElement {}
   var HTMLDynamicCssVariableElement: {
     prototype: HTMLDynamicCssVariableElement;
@@ -926,6 +937,7 @@ declare global {
     'conditional-rerender': HTMLConditionalRerenderElement
     'css-variables-root': HTMLCssVariablesRootElement
     'css-variables': HTMLCssVariablesElement
+    'custom-event': HTMLCustomEventElement
     'dynamic-css-variable': HTMLDynamicCssVariableElement
     'dynamic-import': HTMLDynamicImportElement
     'es5-addclass-svg': HTMLEs5AddclassSvgElement
@@ -998,6 +1010,7 @@ declare global {
     'conditional-rerender': HTMLConditionalRerenderElement;
     'css-variables-root': HTMLCssVariablesRootElement;
     'css-variables': HTMLCssVariablesElement;
+    'custom-event': HTMLCustomEventElement;
     'dynamic-css-variable': HTMLDynamicCssVariableElement;
     'dynamic-import': HTMLDynamicImportElement;
     'es5-addclass-svg': HTMLEs5AddclassSvgElement;

test/karma/test-app/custom-event/cmp.tsx

@@ -0,0 +1,47 @@
+import { Component, Element, State } from '../../../../dist';
+
+@Component({
+  tag: 'custom-event'
+})
+export class CustomEventCmp {
+
+  @Element() elm: HTMLElement;
+
+  @State() output = '';
+
+  componentDidLoad() {
+    this.elm.addEventListener('eventNoDetail', this.receiveEvent.bind(this));
+    this.elm.addEventListener('eventWithDetail', this.receiveEvent.bind(this));
+  }
+
+  receiveEvent(ev: CustomEvent) {
+    this.output = `${ev.type} ${ev.detail || ''}`.trim();
+  }
+
+  fireCustomEventNoDetail() {
+    const ev = new CustomEvent('eventNoDetail');
+    this.elm.dispatchEvent(ev);
+  }
+
+  fireCustomEventWithDetail() {
+    const ev = new CustomEvent('eventWithDetail', { detail: 88 });
+    this.elm.dispatchEvent(ev);
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <button id="btnNoDetail" onClick={this.fireCustomEventNoDetail.bind(this)}>Fire Custom Event, no detail</button>
+        </div>
+        <div>
+          <button id="btnWithDetail" onClick={this.fireCustomEventWithDetail.bind(this)}>Fire Custom Event, with detail</button>
+        </div>
+        <pre id="output">
+          {this.output}
+        </pre>
+      </div>
+    );
+  }
+
+}

test/karma/test-app/custom-event/index.html

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="/build/testapp.js"></script>
+
+<custom-event></custom-event>

test/karma/test-app/custom-event/karma.spec.ts

@@ -0,0 +1,28 @@
+import { setupDomTests, waitForChanges } from '../util';
+
+describe('custom event', () => {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+
+  beforeEach(async () => {
+    app = await setupDom('/custom-event/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('should fire raw custom event', async () => {
+    const btnNoDetail = app.querySelector('#btnNoDetail') as HTMLButtonElement;
+    const btnWithDetail = app.querySelector('#btnWithDetail') as HTMLButtonElement;
+    const output = app.querySelector('#output') as HTMLDivElement;
+
+    btnNoDetail.click();
+    await waitForChanges();
+
+    expect(output.textContent.trim()).toBe('eventNoDetail');
+
+    btnWithDetail.click();
+    await waitForChanges();
+
+    expect(output.textContent.trim()).toBe('eventWithDetail 88');
+  });
+
+});