Create toHaveEmittedOnRoot

Author: hmsk

src/index.ts

@@ -5,6 +5,7 @@ import toShow from "./matchers/toShow";
 import toHide from "./matchers/toHide";
 import toEmit from "./matchers/toEmit";
 import toHaveEmitted from "./matchers/toHaveEmitted";
+import toHaveEmittedOnRoot from "./matchers/toHaveEmittedOnRoot";
 import toDispatch from "./matchers/toDispatch";
 import toHaveDispatched from "./matchers/toHaveDispatched";
 import toRequireProp from "./matchers/toRequireProp";
@@ -19,6 +20,7 @@ const matchers = {
   toHide,
   toEmit,
   toHaveEmitted,
+  toHaveEmittedOnRoot,
   toDispatch,
   toHaveDispatched,
   toBeValidProp,
@@ -34,6 +36,7 @@ export {
   toHide,
   toEmit,
   toHaveEmitted,
+  toHaveEmittedOnRoot,
   toDispatch,
   toHaveDispatched,
   toBeValidProp,

src/matchers/toHaveEmittedOnRoot.ts

@@ -0,0 +1,63 @@
+import Vue from "vue";
+import { Wrapper, createWrapper } from "@vue/test-utils";
+import diff from "jest-diff";
+import { equals } from "expect/build/jasmineUtils";
+
+import { MatcherResult } from "../utils";
+
+declare global {
+  namespace jest {
+    interface Matchers<R, T> {
+      /**
+       * Asserts that the emitted event on $root with payload
+       * @param {string} eventName - The event's name
+       * @param payload - The payload of the event (optional)
+       * @example
+       * expect(wrapper).toHaveEmittedOnRoot("input")
+       * expect(wrapper).toHaveEmittedOnRoot("input", "value")
+       * expect(wrapper).toHaveEmittedOnRoot("input", "value", ["more"], "arguments")
+       */
+      toHaveEmittedOnRoot (eventName: string, ...payloads: any[]): R;
+    }
+  }
+}
+
+export default function<V extends Vue> (
+  wrapper: Wrapper<V>,
+  eventName: string,
+  ...payloads: any[]
+): MatcherResult {
+  const emittedOnRoot = createWrapper(wrapper.vm.$root).emitted()[eventName] || [];
+
+  let pass: boolean;
+  let message: () => string;
+
+  if (arguments.length >= 3) {
+    pass = emittedOnRoot.some((event) => {
+      return payloads.length === event.length &&
+        payloads.every((payload, index) => {
+          return equals(event[index], payload);
+        });
+    });
+    message = pass ?
+      () => `The "${eventName}" event was emitted on $root with the expected payload` :
+        emittedOnRoot.length > 0 ?
+          () => {
+            const diffs = emittedOnRoot.map((event, i): string | null => {
+              return `'${eventName}' event #${i} payloads:\n\n${diff(payloads, event, { bAnnotation: "Emitted" })}`;
+            }).join("\n\n");
+            return `The "${eventName}" event was emitted on $root but the payload is not matched\n\n${diffs}`
+          } :
+          () => `The "${eventName}" event was never emitted on $root`;
+  } else {
+    pass = emittedOnRoot.length > 0;
+    message = pass ?
+      () => `The "${eventName}" event was emitted on $root` :
+      () => `The "${eventName}" event was never emitted on $root`;
+  }
+
+  return {
+    message,
+    pass
+  }
+}

test/emit.test.ts

@@ -1,7 +1,8 @@
 import {
   config,
   toEmit,
-  toHaveEmitted
+  toHaveEmitted,
+  toHaveEmittedOnRoot
 } from "@/index";
 
 import Component from "./fixtures/event.vue";
@@ -10,7 +11,8 @@ import { MatcherResult } from '@/utils';
 
 expect.extend({
   toEmit,
-  toHaveEmitted
+  toHaveEmitted,
+  toHaveEmittedOnRoot
 });
 
 config({
@@ -21,6 +23,10 @@ const emitEvent = (wrapper, eventName, payload) => {
   (wrapper.vm as any).emitEventWithPayload(eventName, payload);
 };
 
+const emitEventOnRoot = (wrapper, eventName, payload) => {
+  (wrapper.vm as any).emitEventOnRootWithPayload(eventName, payload);
+};
+
 const doAsyncronously = (callback: Function): Promise<any> => {
   return new Promise((resolve) => {
     callback();
@@ -178,6 +184,156 @@ describe("toHaveEmitted with payload", () => {
   });
 });
 
+describe("toHaveEmittedOnRoot", () => {
+  describe("as a function which is registered to jest", () => {
+    it("returns true if the event is emitted on $root", () => {
+      const wrapper = shallowMount(Component);
+      wrapper.trigger("blur");
+      const result = toHaveEmittedOnRoot(wrapper, "blured");
+      expect(result.pass).toBe(true);
+      expect(result.message()).toBe('The "blured" event was emitted on $root');
+    });
+
+    it("returns false if the event is not emitted on $root", () => {
+      const wrapper = shallowMount(Component);
+      const result = toHaveEmittedOnRoot(wrapper, "blured");
+      expect(result.pass).toBe(false);
+      expect(result.message()).toBe('The "blured" event was never emitted on $root');
+    });
+
+    it("returns false if the another event is emitted on $root", () => {
+      const wrapper = shallowMount(Component);
+      wrapper.vm.$root.$emit("another");
+      const result = toHaveEmittedOnRoot(wrapper, "blured");
+      expect(result.pass).toBe(false);
+      expect(result.message()).toBe('The "blured" event was never emitted on $root');
+    });
+  });
+
+  describe("actual use", () => {
+    it("doesn't claim for positive expectation when expected event happens", () => {
+      const wrapper = shallowMount(Component);
+      wrapper.trigger("blur");
+      expect(wrapper).toHaveEmittedOnRoot("blured");
+    });
+
+    it("doesn't claim for negative expectation when expected event doesn't happen", () => {
+      const wrapper = shallowMount(Component);
+      expect(wrapper).not.toHaveEmittedOnRoot("blured");
+    });
+
+    it("doesn't claim for negative expectation when unintentional event happens", () => {
+      const wrapper = shallowMount(Component);
+      wrapper.vm.$root.$emit("another");
+      expect(wrapper).not.toHaveEmittedOnRoot("blured");
+    });
+  });
+});
+
+describe("toHaveEmittedOnRoot with payload", () => {
+  describe("as a function which is registered to jest", () => {
+    it("returns true if the event is emitted with the expected payload", () => {
+      const wrapper = shallowMount(Component);
+      emitEventOnRoot(wrapper, "rooty", { value: "something" });
+      const result = toHaveEmittedOnRoot(wrapper, "rooty", { value: "something" });
+      expect(result.pass).toBe(true);
+      expect(result.message()).toBe('The "rooty" event was emitted on $root with the expected payload');
+    });
+
+    it("returns false if the event is not emitted", () => {
+      const wrapper = shallowMount(Component);
+      const result = toHaveEmittedOnRoot(wrapper, "rooty", "something");
+      expect(result.pass).toBe(false);
+      expect(result.message()).toBe('The "rooty" event was never emitted on $root');
+    });
+
+    it("returns false if the another event is emitted", () => {
+      const wrapper = shallowMount(Component);
+      emitEventOnRoot(wrapper, "another", { value: "something" });
+      const result = toHaveEmittedOnRoot(wrapper, "rooty", { value: "something" });
+      expect(result.pass).toBe(false);
+      expect(result.message()).toBe('The "rooty" event was never emitted on $root');
+    });
+
+    describe("when the event is emitted but the payload is not matched", () => {
+      const subject = () => {
+        const wrapper = shallowMount(Component);
+        emitEventOnRoot(wrapper, "rooty", { value: "anything" });
+        return toHaveEmittedOnRoot(wrapper, "rooty", "some text", { value: "something" });
+      };
+
+      it("returns false", () => {
+        expect(subject().pass).toBe(false);
+      });
+
+      it("tells the reason", () => {
+        expect(subject().message()).toContain('The "rooty" event was emitted on $root but the payload is not matched');
+      });
+
+      it("shows the diff of payloads", () => {
+        const message = subject().message();
+        expect(message).toContain("'rooty' event #0 payloads:");
+        expect(message).toContain("- Expected");
+        expect(message).toContain("+ Emitted");
+        expect(message).toContain('-   "some text"');
+        expect(message).toContain('-     "value": "something"');
+        expect(message).toContain('+     "value": "anything"');
+      });
+    });
+  });
+
+  describe("actual use", () => {
+    it("passes for expected case positively", () => {
+      const wrapper = shallowMount(Component);
+      emitEventOnRoot(wrapper, "rooty", { value: "actual life" });
+      expect(wrapper).toHaveEmittedOnRoot("rooty", { value: "actual life" });
+    });
+
+    it("passes negatively when any event was not emitted", () => {
+      const wrapper = shallowMount(Component);
+      expect(wrapper).not.toHaveEmittedOnRoot("rooty", { value: "unusual life" });
+    });
+
+    it("passes negatively when unintentional event was emitted", () => {
+      const wrapper = shallowMount(Component);
+      emitEventOnRoot(wrapper, "another", { value: "actual life" });
+      expect(wrapper).not.toHaveEmittedOnRoot("rooty", { value: "unusual life" });
+    });
+
+    it("passes negatively when the expected event is emitted but the payload is not matched", () => {
+      const wrapper = shallowMount(Component);
+      emitEventOnRoot(wrapper, "rooty", { value: "actual life" });
+      expect(wrapper).not.toHaveEmitted("rooty", { value: "exciting life" });
+    });
+
+    describe("multiple payloads", () => {
+      it("passes positively when the expected event is emitted with the multiple payloads by the function", () => {
+        const wrapper = shallowMount(Component);
+        (wrapper.vm as any).emitEventOnRootWithMultiplePayload("multiOnRoot!");
+        expect(wrapper).toHaveEmittedOnRoot("multiOnRoot!", ["D"], 3, "e");
+      });
+
+      it("passes positively for expect helper to assert with 'anything'", () => {
+        const wrapper = shallowMount(Component);
+        (wrapper.vm as any).emitEventOnRootWithMultiplePayload("multiOnRoot!!");
+        expect(wrapper).toHaveEmittedOnRoot("multiOnRoot!!", expect.arrayContaining(["D"]), expect.anything(), "e");
+      });
+
+      it("passes negatively when the number of paylod is shorter than actual (even they are matching)", () => {
+        const wrapper = shallowMount(Component);
+        (wrapper.vm as any).emitEventOnRootWithMultiplePayload("multiOnRoot!");
+        expect(wrapper).not.toHaveEmittedOnRoot("multiOnRoot!", ["D"], 3);
+      });
+
+      it("passes negatively when the number of paylod is longer", () => {
+        const wrapper = shallowMount(Component);
+        (wrapper.vm as any).emitEventOnRootWithMultiplePayload("multiOnRoot!");
+        expect(wrapper).not.toHaveEmittedOnRoot("multiOnRoot!", ["D"], 3, "e", "additional");
+      });
+    });
+  });
+});
+
 describe("toEmit", () => {
   describe("as a function which is registered to jest", () => {
     describe("returns true if the event is emitted", () => {

test/fixtures/event.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    @click="emitEvent">
+    @click="emitEvent"
+    @blur="emitRootEvent">
     Click Me
   </div>
 </template>
@@ -11,11 +12,20 @@ module.exports = {
     emitEvent (e) {
       this.$emit("special", e);
     },
+    emitRootEvent (e) {
+      this.$root.$emit("blured", e);
+    },
     emitEventWithPayload (eventName, payload) {
       this.$emit(eventName, payload);
     },
+    emitEventOnRootWithPayload (eventName, payload) {
+      this.$root.$emit(eventName, payload);
+    },
     emitEventWithMultiplePayload (eventName) {
       this.$emit(eventName, "a", 5, ["C"]);
+    },
+    emitEventOnRootWithMultiplePayload (eventName) {
+      this.$root.$emit(eventName, ["D"], 3, "e");
     }
   }
 }