From 1acdbadcc65171c6149185d3dfd3b34f9b062ae8 Mon Sep 17 00:00:00 2001
From: pikax <carlos@hypermob.co.uk>
Date: Sun, 29 Mar 2020 20:15:56 +0100
Subject: [PATCH] chore(event): improve event coverage and fix typings

---
 CHANGELOG.md                               |  6 ++--
 packages/web/__tests__/event/event.spec.ts | 36 +++++++++++++++++++++-
 packages/web/src/event/event.ts            |  8 ++---
 packages/web/src/event/onResize.ts         |  2 +-
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2395e55e..2272d3c09 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,11 +3,13 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!--
 ## [Unreleased]
 
 ---
- -->
+
+## Changed
+
+- [event][https://pikax.me/vue-composable/composable/event/event.html] - improve typing
 
 ## 1.0.0-dev.16
 
diff --git a/packages/web/__tests__/event/event.spec.ts b/packages/web/__tests__/event/event.spec.ts
index fdb8f113d..3693c5859 100644
--- a/packages/web/__tests__/event/event.spec.ts
+++ b/packages/web/__tests__/event/event.spec.ts
@@ -1,5 +1,5 @@
 import { Ref, ref } from "@vue/composition-api";
-import { Vue } from "../utils";
+import { Vue, nextTick } from "../utils";
 import { useEvent } from "../../src";
 import { NO_OP } from "@vue-composable/core";
 
@@ -140,4 +140,38 @@ describe("event", () => {
   it("should not throw if undefined passed", () => {
     expect(useEvent(undefined as any, "load", NO_OP)).toBe(NO_OP);
   });
+
+  it("should remove event listener if ref changes", async () => {
+    const element: Element = {
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    } as any;
+    const mockHandler = jest.fn();
+    const options = {};
+
+    const el = ref(element);
+
+    new Vue({
+      template: "<div></div>",
+      setup() {
+        useEvent(el, "load", mockHandler, options);
+      }
+    }).$mount();
+    expect(element.removeEventListener).not.toHaveBeenCalled();
+    expect(element.addEventListener).toHaveBeenCalled();
+
+    el.value = {
+      ...element
+    };
+
+    await nextTick();
+
+    expect(element.removeEventListener).toHaveBeenCalled();
+    expect(element.addEventListener).toHaveBeenCalledTimes(2);
+
+    el.value = null as any;
+
+    await nextTick();
+    expect(element.removeEventListener).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/packages/web/src/event/event.ts b/packages/web/src/event/event.ts
index 1dc493cd2..4dac88876 100644
--- a/packages/web/src/event/event.ts
+++ b/packages/web/src/event/event.ts
@@ -14,7 +14,7 @@ export function useEvent<
   M,
   K extends keyof M
 >(
-  el: RefTyped<T>,
+  el: T | Ref<T | undefined>,
   name: K,
   listener: (this: T, ev: M[K]) => any
 ): RemoveEventFunction;
@@ -30,7 +30,7 @@ export function useEvent<
   M,
   K extends keyof M
 >(
-  el: RefTyped<T>,
+  el: T | Ref<T | undefined>,
   name: K,
   listener: (this: T, ev: M[K]) => any,
   options?: boolean | AddEventListenerOptions
@@ -42,13 +42,13 @@ export function useEvent<K extends keyof WindowEventMap>(
   options?: boolean | AddEventListenerOptions
 ): RemoveEventFunction;
 export function useEvent<K extends keyof DocumentEventMap>(
-  el: RefTyped<Element>,
+  el: Element | Ref<Element | undefined>,
   name: K,
   listener: (this: Document, ev: DocumentEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ): RemoveEventFunction;
 export function useEvent(
-  el: RefTyped<Element> | RefTyped<Window> | RefTyped<any>,
+  el: Element | Ref<Element | undefined> | RefTyped<Window> | RefTyped<any>,
   name: string,
   listener: EventListenerOrEventListenerObject,
   options?: boolean | AddEventListenerOptions
diff --git a/packages/web/src/event/onResize.ts b/packages/web/src/event/onResize.ts
index dc257d221..e7352713a 100644
--- a/packages/web/src/event/onResize.ts
+++ b/packages/web/src/event/onResize.ts
@@ -55,7 +55,7 @@ export function useOnResize(
   // resize seems only to be fired against the window
   const remove = isClient
     ? useEvent(window, "resize", handler, eventOptions || PASSIVE_EV)
-    : NO_OP;
+    : /* istanbul ignore next */ NO_OP;
 
   return {
     height,