refactor: monorepo+pnpm (removed husky)

packages/hoppscotch-app/components/smart/__tests__/AutoComplete.spec.js

@@ -0,0 +1,317 @@
+import { mount } from "@vue/test-utils"
+import autocomplete from "../AutoComplete"
+
+const props = {
+  placeholder: "",
+  value: "",
+  spellcheck: false,
+  source: ["app", "apple", "appliance", "brian", "bob", "alice"],
+}
+
+// ["pp", "pple", "ppliance", "lice"]
+const suggestionStr = props.source
+  .filter((str) => str.startsWith("a"))
+  .map((str) => str.slice(1))
+
+const factory = (props) =>
+  mount(autocomplete, {
+    propsData: props,
+  })
+
+describe("autocomplete", () => {
+  test("mounts properly", () => {
+    const wrapper = factory(props)
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("emits input event on text update [v-model compat]", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("testval")
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted("input")).toBeTruthy()
+    expect(wrapper.emitted("input").length).toEqual(1)
+  })
+
+  test("shows matching suggestions", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
+
+    suggestionStr.forEach((str) => expect(suggestions).toContain(str))
+  })
+
+  test("doesnt show non-matching suggestions", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
+
+    suggestionStr.forEach((str) => expect(suggestions).not.toContain(str))
+  })
+
+  test("updates suggestions on input", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    const suggestions = wrapper.findAll("li").wrappers.map((el) => el.text())
+
+    suggestionStr.forEach((str) => expect(suggestions).not.toContain(str))
+  })
+
+  test("applies suggestion on clicking", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    const selectedSuggestion = wrapper.findAll("li").at(0)
+    const selectedText = selectedSuggestion.text()
+
+    await selectedSuggestion.trigger("click")
+    await wrapper.vm.$nextTick()
+
+    expect(input.element.value).toEqual(`b${selectedText}`)
+  })
+
+  test("hide selection on pressing ESC", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keyup", { code: "Escape" })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find("ul").exists()).toEqual(false)
+  })
+
+  test("pressing up when nothing is selected selects the first in the list", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowUp",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing down arrow when nothing is selected selects the first in the list", async () => {
+    const wrapper = factory(props)
+
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing down arrow moves down the selection list", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing up arrow moves up the selection list", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowUp",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing down arrow at the end of the list doesn't update the selection", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(1).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing up arrow at the top of the list doesn't update the selection", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("b")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowUp",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
+
+    await input.trigger("keydown", {
+      code: "ArrowUp",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(
+      wrapper.findAll("li").at(0).element.classList.contains("active")
+    ).toEqual(true)
+  })
+
+  test("pressing tab performs the current completion", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    const selectedSuggestion = wrapper.find("li.active").text()
+
+    await input.trigger("keydown", {
+      code: "Tab",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(input.element.value).toEqual(`a${selectedSuggestion}`)
+  })
+
+  test("pressing tab when nothing is selected selects the first suggestion", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    const firstSuggestionText = wrapper.findAll("li").at(0).text()
+
+    await input.trigger("keydown", {
+      code: "Tab",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(input.element.value).toEqual(`a${firstSuggestionText}`)
+  })
+
+  test("pressing any non-special key doesn't do anything", async () => {
+    const wrapper = factory(props)
+    const input = wrapper.find("input")
+
+    await input.setValue("a")
+    await wrapper.vm.$nextTick()
+
+    await input.trigger("keydown", {
+      code: "ArrowDown",
+    })
+    await wrapper.vm.$nextTick()
+
+    const selectedSuggestion = wrapper.find("li.active").text()
+
+    await input.trigger("keydown", {
+      code: "Tab",
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(input.element.value).toEqual(`a${selectedSuggestion}`)
+  })
+})

packages/hoppscotch-app/components/smart/__tests__/Tab.spec.js

@@ -0,0 +1,85 @@
+import { mount } from "@vue/test-utils"
+import tab from "../Tab"
+
+const factory = (props, data) => {
+  if (data) {
+    return mount(tab, {
+      propsData: props,
+      data: () => data,
+      slots: {
+        default: '<div id="testdiv"></div>',
+      },
+    })
+  } else {
+    return mount(tab, {
+      propsData: props,
+      slots: {
+        default: '<div id="testdiv"></div>',
+      },
+    })
+  }
+}
+
+describe("tab", () => {
+  test("mounts properly when needed props are passed in", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+      selected: true,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("mounts properly when selected prop is not passed", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("if 'selected' prop is not passed, it is set to false by default", () => {
+    const wrapper = factory({
+      label: "TestLabel",
+      icon: "TestIcon",
+      id: "testid",
+    })
+
+    expect(wrapper.props("selected")).toEqual(false)
+  })
+
+  test("if set active, the slot is shown", () => {
+    const wrapper = factory(
+      {
+        label: "TestLabel",
+        icon: "TestIcon",
+        id: "testid",
+        selected: true,
+      },
+      {
+        active: true,
+      }
+    )
+
+    expect(wrapper.find("#testdiv").isVisible()).toEqual(true)
+  })
+
+  test("if not set active, the slot is not rendered", () => {
+    const wrapper = factory(
+      {
+        label: "TestLabel",
+        icon: "TestIcon",
+        id: "testid",
+      },
+      {
+        active: false,
+      }
+    )
+
+    expect(wrapper.find("#testdiv").isVisible()).toEqual(false)
+  })
+})

packages/hoppscotch-app/components/smart/__tests__/Tabs.sample

@@ -0,0 +1,67 @@
+import { mount } from "@vue/test-utils"
+import tabs from "../Tabs"
+import tab from "../Tab"
+
+const factory = () =>
+  mount(tabs, {
+    slots: {
+      default: [
+        `<Tab id="tab1" href="#" :label="'tab 1'" :icon="'testicon1'" :selected=true><div id="tab1render">tab1</div></Tab>`,
+        `<Tab id="tab2" href="#" :label="'tab 2'" :icon="'testicon2'"><div id="tab2render">tab1</div></Tab>`,
+        `<Tab id="tab3" href="#" :label="'tab 3'" :icon="'testicon3'"><div id="tab3render">tab1</div></Tab>`,
+      ],
+    },
+    stubs: {
+      Tab: tab,
+    },
+  })
+
+describe("tabs", () => {
+  test("mounts properly", async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("tab labels shown", async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    const labels = wrapper.findAll("button span").wrappers.map((w) => w.text())
+    expect(labels).toEqual(["tab 1", "tab 2", "tab 3"])
+  })
+
+  test("tab icons are shown", async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+
+    const labels = wrapper.findAll("li a i").wrappers.map((w) => w.text())
+    expect(labels).toEqual(["testicon1", "testicon2", "testicon3"])
+  })
+
+  test("clicking on tab labels switches the selected page", async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectTab({ id: "tab2" })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.$data.tabs[1].$data.active).toEqual(true)
+  })
+
+  test("switched tab page is rendered and the other page is not rendered", async () => {
+    const wrapper = factory()
+
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectTab({ id: "tab2" })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.$data.tabs[0].$data.active).toEqual(false)
+    expect(wrapper.vm.$data.tabs[1].$data.active).toEqual(true)
+    expect(wrapper.vm.$data.tabs[2].$data.active).toEqual(false)
+  })
+})

packages/hoppscotch-app/components/smart/__tests__/Toggle.spec.js

@@ -0,0 +1,52 @@
+import { mount } from "@vue/test-utils"
+import pwToggle from "../Toggle"
+
+const factory = (props, slot) =>
+  mount(pwToggle, {
+    propsData: props,
+    slots: {
+      default: slot,
+    },
+  })
+
+describe("pwToggle", () => {
+  test("mounts properly", () => {
+    const wrapper = factory({ on: true }, "test")
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("mounts even without the on prop", () => {
+    const wrapper = factory({}, "test")
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("state is set correctly through the prop", () => {
+    const wrapper1 = factory({ on: true }, "test")
+    expect(wrapper1.vm.$refs.toggle.classList.contains("on")).toEqual(true)
+
+    const wrapper2 = factory({ on: false }, "test")
+    expect(wrapper2.vm.$refs.toggle.classList.contains("on")).toEqual(false)
+  })
+
+  test("caption label is rendered", () => {
+    const wrapper = factory({ on: true }, "<span id='testcaption'></span>")
+
+    expect(wrapper.find("#testcaption").exists()).toEqual(true)
+  })
+
+  // test("clicking the button toggles the state", async () => {
+  //   const wrapper = factory({ on: true }, "test")
+
+  //   wrapper.vm.toggle()
+  //   await wrapper.vm.$nextTick()
+
+  //   expect(wrapper.vm.$refs.toggle.classList.contains("on")).toEqual(false)
+
+  //   wrapper.vm.toggle()
+  //   await wrapper.vm.$nextTick()
+
+  //   expect(wrapper.vm.$refs.toggle.classList.contains("on")).toEqual(true)
+  // })
+})