Cherry picking refactored fb.js from hoppscotch#879 by @AndrewBastin (h…

…oppscotch#1286)

* Cherry picking refactored fb.js from hoppscotch#879 by @AndrewBastin

* Fixed a minor UI glitch in History section

* Removed logout success toast testcase

Co-authored-by: Andrew Bastin <[email protected]>

__mocks__/svgMock.js

@@ -0,0 +1 @@
+export default {}

assets/scss/styles.scss

@@ -293,6 +293,7 @@ hr {
 
       button {
         @apply justify-start;
+        @apply text-left;
       }
     }
 

components/firebase/__tests__/feeds.spec.js

@@ -0,0 +1,133 @@
+import feeds from "../feeds"
+import { shallowMount } from "@vue/test-utils"
+
+jest.mock("~/helpers/fb", () => {
+  return {
+    __esModule: true,
+    fb: {
+      currentFeeds: [
+        {
+          id: "test1",
+          label: "First",
+          message: "First Message",
+        },
+        {
+          id: "test2",
+          label: "Second",
+        },
+        {
+          id: "test3",
+          message: "Third Message",
+        },
+        {
+          id: "test4",
+        },
+      ],
+      deleteFeed: jest.fn(() => Promise.resolve()),
+    },
+  }
+})
+
+const { fb } = require("~/helpers/fb")
+
+const factory = () =>
+  shallowMount(feeds, {
+    mocks: {
+      $t: (text) => text,
+      $toast: {
+        error: jest.fn(),
+      },
+    },
+  })
+
+beforeEach(() => {
+  fb.deleteFeed.mockClear()
+})
+
+describe("feeds", () => {
+  test("mounts properly when proper components are given", () => {
+    const wrapper = factory()
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("renders all the current feeds", () => {
+    const wrapper = factory()
+
+    expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(4)
+  })
+
+  test("feeds with no label displays the 'no_label' message", () => {
+    const wrapper = factory()
+
+    expect(
+      wrapper
+        .findAll("label[data-test='list-label']")
+        .wrappers.map((e) => e.text())
+        .filter((text) => text == "no_label")
+    ).toHaveLength(2)
+  })
+
+  test("feeds with no message displays the 'empty' message", () => {
+    const wrapper = factory()
+
+    expect(
+      wrapper
+        .findAll("li[data-test='list-message']")
+        .wrappers.map((e) => e.text())
+        .filter((text) => text == "empty")
+    ).toHaveLength(2)
+  })
+
+  test("labels in the list are proper", () => {
+    const wrapper = factory()
+
+    expect(wrapper.findAll("label[data-test='list-label']").wrappers.map((e) => e.text())).toEqual([
+      "First",
+      "Second",
+      "no_label",
+      "no_label",
+    ])
+  })
+
+  test("messages in the list are proper", () => {
+    const wrapper = factory()
+
+    expect(wrapper.findAll("li[data-test='list-message']").wrappers.map((e) => e.text())).toEqual([
+      "First Message",
+      "empty",
+      "Third Message",
+      "empty",
+    ])
+  })
+
+  test("clicking on the delete button deletes the feed", async () => {
+    const wrapper = factory()
+
+    const deleteButton = wrapper.find("button")
+
+    await deleteButton.trigger("click")
+
+    expect(fb.deleteFeed).toHaveBeenCalledTimes(1)
+  })
+
+  test("correct feed is passed to from the list for deletion", async () => {
+    const wrapper = factory()
+
+    const deleteButton = wrapper.find("button")
+
+    await deleteButton.trigger("click")
+
+    expect(fb.deleteFeed).toHaveBeenCalledWith("test1")
+  })
+
+  test("renders the 'empty' label if no elements in the current feeds", () => {
+    jest.spyOn(fb, "currentFeeds", "get").mockReturnValueOnce([])
+
+    const wrapper = factory()
+
+    expect(wrapper.findAll("li").wrappers).toHaveLength(1)
+
+    expect(wrapper.find("li").text()).toEqual("empty")
+  })
+})

components/firebase/__tests__/inputform.spec.js

@@ -0,0 +1,93 @@
+import inputform from "../inputform"
+import { shallowMount } from "@vue/test-utils"
+
+jest.mock("~/helpers/fb", () => {
+  return {
+    __esModule: true,
+    fb: {
+      writeFeeds: jest.fn(() => Promise.resolve()),
+    },
+  }
+})
+
+const { fb } = require("~/helpers/fb")
+
+const factory = () =>
+  shallowMount(inputform, {
+    mocks: {
+      $t: (text) => text,
+    },
+  })
+
+beforeEach(() => {
+  fb.writeFeeds.mockClear()
+})
+
+describe("inputform", () => {
+  test("mounts properly", () => {
+    const wrapper = factory()
+
+    expect(wrapper).toBeTruthy()
+  })
+  test("calls writeFeeds when submitted properly", async () => {
+    const wrapper = factory()
+
+    const addButton = wrapper.find("button")
+    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
+
+    await messageInput.setValue("test message")
+    await labelInput.setValue("test label")
+
+    await addButton.trigger("click")
+
+    expect(fb.writeFeeds).toHaveBeenCalledTimes(1)
+  })
+  test("doesn't call writeFeeds when submitted without a data", async () => {
+    const wrapper = factory()
+
+    const addButton = wrapper.find("button")
+
+    await addButton.trigger("click")
+
+    expect(fb.writeFeeds).not.toHaveBeenCalled()
+  })
+  test("doesn't call writeFeeds when message or label is null", async () => {
+    const wrapper = factory()
+
+    const addButton = wrapper.find("button")
+    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
+
+    await messageInput.setValue(null)
+    await labelInput.setValue(null)
+
+    await addButton.trigger("click")
+
+    expect(fb.writeFeeds).not.toHaveBeenCalled()
+  })
+  test("doesn't call writeFeeds when message or label is empty", async () => {
+    const wrapper = factory()
+
+    const addButton = wrapper.find("button")
+    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
+
+    await messageInput.setValue("")
+    await labelInput.setValue("")
+
+    await addButton.trigger("click")
+
+    expect(fb.writeFeeds).not.toHaveBeenCalled()
+  })
+  test("calls writeFeeds with correct values", async () => {
+    const wrapper = factory()
+
+    const addButton = wrapper.find("button")
+    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
+
+    await messageInput.setValue("test message")
+    await labelInput.setValue("test label")
+
+    await addButton.trigger("click")
+
+    expect(fb.writeFeeds).toHaveBeenCalledWith("test message", "test label")
+  })
+})

components/firebase/__tests__/logout.spec.js

@@ -0,0 +1,66 @@
+import logout from "../logout"
+import { shallowMount, createLocalVue } from "@vue/test-utils"
+
+jest.mock("~/helpers/fb", () => {
+  return {
+    __esModule: true,
+    fb: {
+      signOutUser: jest.fn(() => Promise.resolve()),
+    },
+  }
+})
+
+const { fb } = require("~/helpers/fb")
+
+const $toast = {
+  info: jest.fn(),
+  show: jest.fn(),
+}
+
+const localVue = createLocalVue()
+
+localVue.directive("close-popover", {})
+
+const factory = () =>
+  shallowMount(logout, {
+    mocks: {
+      $t: (text) => text,
+      $toast,
+    },
+    localVue,
+  })
+
+beforeEach(() => {
+  fb.signOutUser.mockClear()
+  $toast.info.mockClear()
+  $toast.show.mockClear()
+})
+
+describe("logout", () => {
+  test("mounts properly", () => {
+    const wrapper = factory()
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("clicking the logout button fires the logout firebase function", async () => {
+    const wrapper = factory()
+
+    const button = wrapper.find("button")
+
+    await button.trigger("click")
+
+    expect(fb.signOutUser).toHaveBeenCalledTimes(1)
+  })
+
+  test("failed signout request fires a error toast", async () => {
+    fb.signOutUser.mockImplementationOnce(() => Promise.reject("test reject"))
+
+    const wrapper = factory()
+    const button = wrapper.find("button")
+    await button.trigger("click")
+
+    expect($toast.show).toHaveBeenCalledTimes(1)
+    expect($toast.show).toHaveBeenCalledWith("test reject", expect.anything())
+  })
+})

components/firebase/feeds.vue

@@ -5,9 +5,9 @@
       :key="feed.id"
       class="flex-col py-2 border-b border-dashed border-brdColor"
     >
-      <div class="show-on-large-screen">
+      <div data-test="list-item" class="show-on-large-screen">
         <li class="info">
-          <label>
+          <label data-test="list-label">
             {{ feed.label || $t("no_label") }}
           </label>
         </li>
@@ -16,7 +16,7 @@
         </button>
       </div>
       <div class="show-on-large-screen">
-        <li class="info clamb-3">
+        <li data-test="list-message" class="info clamb-3">
           <label>{{ feed.message || $t("empty") }}</label>
         </li>
       </div>
@@ -54,8 +54,8 @@ export default {
     }
   },
   methods: {
-    deleteFeed(feed) {
-      fb.deleteFeed(feed.id)
+    async deleteFeed(feed) {
+      await fb.deleteFeed(feed.id)
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })