[Feat: GraphQL sidebar] GraphQL History (#1528)

* Create REQUIREMENTS.md * graphql history UI * rest history emit * removed requirements file * add, delete, clear, star history and sync with firstore * use history * empty schema * remove other tabs * computed query, setting headers * binding props Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> * remove print Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> * remove dummy data Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> * add docs tab * date, time attribute --> updatedOn * Removed margin from sidebar Tab * removed v-bind Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> * use shortcut for v-bind * use shortcut for v-bind * use unfold icons * use template literals in :key * history clear bug * delete history bug * minor translation * remove console logs * remove unused css * add stared style * remove absolute styles * tests for graphql card * tests for rest card * tests for clear history added * mount, clear, use, delete history tests added * Rename card.vue to Card.vue * Rename card.vue to Card.vue * use computed Co-authored-by: Isha Gupta <40794215+IshaGupta18@users.noreply.github.com> Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
2021-03-11 08:42:09 +05:30
parent 51bd3455cc
commit 0b00842c50
10 changed files with 1019 additions and 229 deletions
--- a/components/history/tests/GraphqlCard.spec.js
+++ b/components/history/tests/GraphqlCard.spec.js
@@ -0,0 +1,109 @@
+import GraphqlCard from "../graphql/Card"
+import { mount } from "@vue/test-utils"
+
+const factory = (props) => {
+  return mount(GraphqlCard, {
+    propsData: props,
+    stubs: {
+      "v-popover": {
+        template: "<div><slot /><slot name='popover' :is-open=true /></div>",
+      },
+    },
+    mocks: {
+      $t: (text) => text,
+    },
+    directives: {
+      tooltip() {
+        /* stub */
+      },
+      closePopover() {
+        /* stub */
+      },
+    },
+  })
+}
+
+const url = "https://dummydata.com"
+const query = `query getUser($uid: String!) {
+  user(uid: $uid) {
+    name
+  }
+}`
+
+describe("GraphqlCard", () => {
+  test("Mounts properly if props are given", () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url: url,
+        query: query,
+        star: false,
+      },
+    })
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("toggle-star emitted on clicking on star button", async () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url: url,
+        query: query,
+        star: true,
+      },
+    })
+
+    wrapper.find("button[data-testid='star_button']").trigger("click")
+    expect(wrapper.emitted("toggle-star")).toBeTruthy()
+  })
+
+  test("query expands on clicking the show more button", async () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url: url,
+        query: query,
+        star: true,
+      },
+    })
+    expect(wrapper.vm.query).toStrictEqual([
+      `query getUser($uid: String!) {`,
+      `  user(uid: $uid) {`,
+      `...`,
+    ])
+    await wrapper.find("button[data-testid='query_expand']").trigger("click")
+    expect(wrapper.vm.query).toStrictEqual([
+      `query getUser($uid: String!) {`,
+      `  user(uid: $uid) {`,
+      `    name`,
+      `  }`,
+      `}`,
+    ])
+  })
+
+  test("use-entry emit on clicking the restore button", async () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url: url,
+        query: query,
+        star: true,
+      },
+    })
+    await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
+    expect(wrapper.emitted("use-entry")).toBeTruthy()
+  })
+
+  test("delete-entry emit on clicking the delete button", async () => {
+    const wrapper = factory({
+      entry: {
+        type: "graphql",
+        url: url,
+        query: query,
+        star: true,
+      },
+    })
+    await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
+    expect(wrapper.emitted("delete-entry")).toBeTruthy()
+  })
+})