feat: better error message when event listener is missing (#656)

* feat: better error message when event listener is missing
salesforce · Sep 24, 2018 · e77f7a7 · e77f7a7
1 parent 00529a9
commit e77f7a7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/packages/lwc-engine/src/framework/__tests__/events.spec.ts b/packages/lwc-engine/src/framework/__tests__/events.spec.ts
@@ -600,6 +600,40 @@ describe('Component events', () => {
         document.body.appendChild(elm);
         elm.click();
     });
+
+    it('should throw with a user friendly message when no event handler is found', () => {
+        expect.assertions(1);
+
+        class MyComponent extends LightningElement {
+            triggerFoo() {
+                const div = this.template.querySelector('div');
+                div.dispatchEvent(new CustomEvent('foo', { bubbles: true, composed: true }));
+            }
+
+            render() {
+                return function($api) {
+                    const listener = $api.b(undefined);
+                    const fn = event => {
+                        expect(() => {
+                            listener(event);
+                        }).toThrow("Assert Violation: Invalid event handler for event 'foo' on [object:vm MyComponent (26)].");
+                    };
+
+                    return [$api.h('div', {
+                        key: 0,
+                        on: {
+                            foo: fn
+                        }
+                    }, [])];
+                };
+            }
+        }
+        MyComponent.publicMethods = ['triggerFoo'];
+
+        const element = createElement('x-missing-event-listener', { is: MyComponent });
+        document.body.appendChild(element);
+        element.triggerFoo();
+    });
 });
 
 describe('Shadow Root events', () => {

diff --git a/packages/lwc-engine/src/framework/invoker.ts b/packages/lwc-engine/src/framework/invoker.ts
@@ -125,6 +125,9 @@ export function invokeEventListener(vm: VM, fn: EventListener, thisValue: undefi
     establishContext(context);
     let error;
     try {
+        if (process.env.NODE_ENV !== 'production') {
+            assert.isTrue(isFunction(fn), `Invalid event handler for event '${event.type}' on ${vm}.`);
+        }
         callHook(thisValue, fn, [event]);
     } catch (e) {
         error = Object(e);