refactor: lint

components/history/__tests__/GraphqlCard.spec.js

@@ -1,5 +1,5 @@
-import GraphqlCard from "../graphql/Card"
 import { mount } from "@vue/test-utils"
+import GraphqlCard from "../graphql/Card"
 
 const factory = (props) => {
   return mount(GraphqlCard, {
@@ -35,20 +35,20 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
-        query: query,
+        url,
+        query,
         star: false,
       },
     })
     expect(wrapper).toBeTruthy()
   })
 
-  test("toggle-star emitted on clicking on star button", async () => {
+  test("toggle-star emitted on clicking on star button", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
-        query: query,
+        url,
+        query,
         star: true,
       },
     })
@@ -61,8 +61,8 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
-        query: query,
+        url,
+        query,
         star: true,
       },
     })
@@ -85,12 +85,14 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
-        query: query,
+        url,
+        query,
         star: true,
       },
     })
-    await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
+    await wrapper
+      .find("button[data-testid='restore_history_entry']")
+      .trigger("click")
     expect(wrapper.emitted("use-entry")).toBeTruthy()
   })
 
@@ -98,12 +100,14 @@ describe("GraphqlCard", () => {
     const wrapper = factory({
       entry: {
         type: "graphql",
-        url: url,
-        query: query,
+        url,
+        query,
         star: true,
       },
     })
-    await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
+    await wrapper
+      .find("button[data-testid=delete_history_entry]")
+      .trigger("click")
     expect(wrapper.emitted("delete-entry")).toBeTruthy()
   })
 })

components/history/__tests__/History.spec.js

@@ -1,44 +1,44 @@
+import { shallowMount } from "@vue/test-utils"
 import History from "../"
 import { fb } from "~/helpers/fb"
-import { shallowMount } from "@vue/test-utils"
 
 const restHistory = [
   {
-    id: "0",
+    id: 0,
     type: "rest",
   },
   {
-    id: "1",
+    id: 1,
     type: "rest",
   },
   {
-    id: "2",
+    id: 2,
     type: "rest",
   },
 ]
 
 const graphqlHistory = [
   {
-    id: "0",
+    id: 0,
     type: "graphql",
   },
   {
-    id: "1",
+    id: 1,
     type: "graphql",
   },
   {
-    id: "2",
+    id: 2,
     type: "graphql",
   },
 ]
 
-var localStorageMock = (function () {
-  var store = {
+const localStorageMock = (function () {
+  const store = {
     history: JSON.stringify(restHistory),
     graphqlHistory: JSON.stringify(graphqlHistory),
   }
   return {
-    getItem: function (key) {
+    getItem(key) {
       return store[key]
     },
     setItem: jest.fn(),
@@ -105,13 +105,13 @@ beforeEach(() => {
 })
 
 describe("Mount History", () => {
-  test("Mounts rest history without login", async () => {
+  test("Mounts rest history without login", () => {
     const wrapper = factory({
       page: "rest",
     })
     expect(wrapper).toBeTruthy()
   })
-  test("Mounts rest history with login", async () => {
+  test("Mounts rest history with login", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
@@ -119,13 +119,13 @@ describe("Mount History", () => {
     expect(wrapper).toBeTruthy()
   })
 
-  test("Mounts graphql history without login", async () => {
+  test("Mounts graphql history without login", () => {
     const wrapper = factory({
       page: "rest",
     })
     expect(wrapper).toBeTruthy()
   })
-  test("Mounts graphql history with login", async () => {
+  test("Mounts graphql history with login", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
@@ -142,9 +142,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
   test("Clear rest history with login", async () => {
     fb.currentUser = "user"
@@ -153,9 +158,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).toHaveBeenCalledTimes(1)
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
   test("Dont confirm Clear rest history", async () => {
     fb.currentUser = "user"
@@ -164,9 +174,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(restHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='reject_clear_history']")
+      .trigger("click")
     expect(fb.clearHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).not.toHaveBeenCalledWith("history", JSON.stringify([]))
+    expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
+      "history",
+      JSON.stringify([])
+    )
   })
 
   test("Clear graphql history without login", async () => {
@@ -176,9 +191,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearGraphqlHistory).not.toHaveBeenCalled()
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "graphqlHistory",
+      JSON.stringify([])
+    )
   })
   test("Clear graphql history with login", async () => {
     fb.currentUser = "user"
@@ -187,9 +207,14 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='confirm_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='confirm_clear_history']")
+      .trigger("click")
     expect(fb.clearGraphqlHistory).toHaveBeenCalledTimes(1)
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "graphqlHistory",
+      JSON.stringify([])
+    )
   })
   test("Dont confirm Clear graphql history", async () => {
     fb.currentUser = "user"
@@ -198,7 +223,9 @@ describe("Clear History", () => {
     })
     expect(wrapper.vm.filteredHistory).toStrictEqual(graphqlHistory)
     await wrapper.find("button[data-testid='clear_history']").trigger("click")
-    await wrapper.find("button[data-testid='reject_clear_history']").trigger("click")
+    await wrapper
+      .find("button[data-testid='reject_clear_history']")
+      .trigger("click")
     expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
       "graphqlHistory",
       JSON.stringify([])
@@ -207,78 +234,39 @@ describe("Clear History", () => {
 })
 
 describe("Use History", () => {
-  test("use rest history", async () => {
+  test("use rest history", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "rest",
     })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
-    var index = restHistory.length - 1
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("use-entry")
+    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(
+      restHistory.length
+    )
+    const index = restHistory.length - 1
+    wrapper
+      .findAll("div[data-testid='rest_card']")
+      .at(index)
+      .vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
     expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory[index]])
   })
 
-  test("use graphql history", async () => {
+  test("use graphql history", () => {
     fb.currentUser = "user"
     const wrapper = factory({
       page: "graphql",
     })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
-    var index = restHistory.length - 1
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("use-entry")
+    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(
+      graphqlHistory.length
+    )
+    const index = restHistory.length - 1
+    wrapper
+      .findAll("div[data-testid='graphql_card']")
+      .at(index)
+      .vm.$emit("use-entry")
     expect(wrapper.emitted("useHistory")).toBeTruthy()
-    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([graphqlHistory[index]])
-  })
-})
-
-describe("Delete History", () => {
-  test("delete rest history with login", async () => {
-    fb.currentUser = "user"
-    const wrapper = factory({
-      page: "rest",
-    })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
-    expect(fb.deleteHistory).toBeCalledWith(restHistory[index])
-  })
-
-  test("delete rest history without login", async () => {
-    fb.currentUser = null
-    const wrapper = factory({
-      page: "rest",
-    })
-    expect(wrapper.findAll("div[data-testid='rest_card']").length).toEqual(restHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='rest_card']").at(index).vm.$emit("delete-entry")
-    expect(window.localStorage.setItem).toBeCalledWith(
-      "history",
-      JSON.stringify(restHistory.filter((entry) => entry.id != index))
-    )
-  })
-  test("delete graphql history with login", async () => {
-    fb.currentUser = "user"
-    const wrapper = factory({
-      page: "graphql",
-    })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
-    expect(fb.deleteGraphqlHistory).toBeCalledWith(graphqlHistory[index])
-  })
-
-  test("delete graphql history without login", async () => {
-    fb.currentUser = null
-    const wrapper = factory({
-      page: "graphql",
-    })
-    expect(wrapper.findAll("div[data-testid='graphql_card']").length).toEqual(graphqlHistory.length)
-    var index = 1
-    wrapper.findAll("div[data-testid='graphql_card']").at(index).vm.$emit("delete-entry")
-    expect(window.localStorage.setItem).toBeCalledWith(
-      "graphqlHistory",
-      JSON.stringify(graphqlHistory.filter((entry) => entry.id != index))
-    )
+    expect(wrapper.emitted("useHistory")[0]).toStrictEqual([
+      graphqlHistory[index],
+    ])
   })
 })

components/history/__tests__/RestCard.spec.js

@@ -1,5 +1,5 @@
-import RestCard from "../rest/Card"
 import { mount } from "@vue/test-utils"
+import RestCard from "../rest/Card"
 
 const factory = (props) => {
   return mount(RestCard, {
@@ -26,7 +26,7 @@ const factory = (props) => {
 const url = "https://dummydata.com/get"
 const entry = {
   type: "rest",
-  url: url,
+  url,
   method: "GET",
   status: 200,
   star: false,
@@ -37,7 +37,7 @@ describe("RestCard", () => {
     expect(wrapper).toBeTruthy()
   })
 
-  test("toggle-star emitted on clicking on star button", async () => {
+  test("toggle-star emitted on clicking on star button", () => {
     const wrapper = factory({ entry })
 
     wrapper.find("button[data-testid='star_button']").trigger("click")
@@ -46,13 +46,17 @@ describe("RestCard", () => {
 
   test("use-entry emit on clicking the restore button", async () => {
     const wrapper = factory({ entry })
-    await wrapper.find("button[data-testid='restore_history_entry']").trigger("click")
+    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 })
-    await wrapper.find("button[data-testid=delete_history_entry]").trigger("click")
+    await wrapper
+      .find("button[data-testid=delete_history_entry]")
+      .trigger("click")
     expect(wrapper.emitted("delete-entry")).toBeTruthy()
   })
 })

components/history/graphql/Card.vue

@@ -13,42 +13,46 @@
         />
       </li>
       <button
+        v-tooltip="{
+          content: !entry.star ? $t('add_star') : $t('remove_star'),
+        }"
         data-testid="star_button"
         class="icon"
         :class="{ stared: entry.star }"
         @click="$emit('toggle-star')"
-        v-tooltip="{
-          content: !entry.star ? $t('add_star') : $t('remove_star'),
-        }"
       >
         <i class="material-icons">
           {{ entry.star ? "star" : "star_border" }}
         </i>
       </button>
       <button
-        data-testid="query_expand"
-        class="icon"
-        @click="expand = !expand"
         v-tooltip="{
           content: expand ? $t('hide_more') : $t('show_more'),
         }"
+        data-testid="query_expand"
+        class="icon"
+        @click="expand = !expand"
       >
         <i class="material-icons">
           {{ expand ? "unfold_less" : "unfold_more" }}
         </i>
       </button>
       <v-popover>
-        <button data-testid="options" class="tooltip-target icon" v-tooltip="$t('options')">
+        <button
+          v-tooltip="$t('options')"
+          data-testid="options"
+          class="tooltip-target icon"
+        >
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               data-testid="restore_history_entry"
               class="icon"
-              @click="$emit('use-entry')"
               :aria-label="$t('restore')"
-              v-close-popover
+              @click="$emit('use-entry')"
             >
               <i class="material-icons">restore</i>
               <span>{{ $t("restore") }}</span>
@@ -56,11 +60,11 @@
           </div>
           <div>
             <button
+              v-close-popover
               data-testid="delete_history_entry"
               class="icon"
-              @click="$emit('delete-entry')"
               :aria-label="$t('delete')"
-              v-close-popover
+              @click="$emit('delete-entry')"
             >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
@@ -86,11 +90,11 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
+            v-tooltip="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
             :value="entry.time"
-            v-tooltip="entry.date"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
@@ -119,24 +123,10 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.stared {
-  color: #f8e81c !important;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
-
 <script>
 export default {
   props: {
-    entry: Object,
+    entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
   data() {
@@ -153,3 +143,17 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.stared {
+  color: #f8e81c !important;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

components/history/rest/Card.vue

@@ -20,13 +20,13 @@
       </li>
       <span>
         <button
+          v-tooltip="{
+            content: !entry.star ? $t('add_star') : $t('remove_star'),
+          }"
           data-testid="star_button"
           class="icon"
           :class="{ stared: entry.star }"
           @click="$emit('toggle-star')"
-          v-tooltip="{
-            content: !entry.star ? $t('add_star') : $t('remove_star'),
-          }"
         >
           <i class="material-icons">
             {{ entry.star ? "star" : "star_border" }}
@@ -48,17 +48,17 @@
             </button>
           </li> -->
       <v-popover>
-        <button class="tooltip-target icon" v-tooltip="$t('options')">
+        <button v-tooltip="$t('options')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               data-testid="restore_history_entry"
               class="icon"
-              @click="$emit('use-entry')"
               :aria-label="$t('edit')"
-              v-close-popover
+              @click="$emit('use-entry')"
             >
               <i class="material-icons">restore</i>
               <span>{{ $t("restore") }}</span>
@@ -66,11 +66,11 @@
           </div>
           <div>
             <button
+              v-close-popover
               data-testid="delete_history_entry"
               class="icon"
-              @click="$emit('delete-entry')"
               :aria-label="$t('delete')"
-              v-close-popover
+              @click="$emit('delete-entry')"
             >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
@@ -95,11 +95,11 @@
       <div v-if="showMore" class="show-on-large-screen">
         <li>
           <input
+            v-tooltip="entry.date"
             :aria-label="$t('time')"
             type="text"
             readonly
             :value="entry.time"
-            v-tooltip="entry.date"
             class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
           />
         </li>
@@ -128,26 +128,12 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.stared {
-  color: #f8e81c !important;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.2s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
-
 <script>
 import findStatusGroup from "~/helpers/findStatusGroup"
 
 export default {
   props: {
-    entry: Object,
+    entry: { type: Object, default: () => {} },
     showMore: Boolean,
   },
   data() {
@@ -167,3 +153,17 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.stared {
+  color: #f8e81c !important;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>