[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>
This commit is contained in:
Osheen Sachdev
GitHub
109
components/history/__tests__/GraphqlCard.spec.js
Normal file
109
components/history/__tests__/GraphqlCard.spec.js
Normal file
@@ -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()
|
||||
})
|
||||
})
|
||||
285
components/history/__tests__/History.spec.js
Normal file
285
components/history/__tests__/History.spec.js
Normal file
@@ -0,0 +1,285 @@
|
||||
import History from "../"
|
||||
import { fb } from "~/helpers/fb"
|
||||
import { shallowMount } from "@vue/test-utils"
|
||||
import HistoryRestCard from "../rest/Card"
|
||||
|
||||
const restHistory = [
|
||||
{
|
||||
id: "0",
|
||||
type: "rest",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
type: "rest",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "rest",
|
||||
},
|
||||
]
|
||||
|
||||
const graphqlHistory = [
|
||||
{
|
||||
id: "0",
|
||||
type: "graphql",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
type: "graphql",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "graphql",
|
||||
},
|
||||
]
|
||||
|
||||
var localStorageMock = (function () {
|
||||
var store = {
|
||||
history: JSON.stringify(restHistory),
|
||||
graphqlHistory: JSON.stringify(graphqlHistory),
|
||||
}
|
||||
return {
|
||||
getItem: function (key) {
|
||||
return store[key]
|
||||
},
|
||||
setItem: jest.fn(),
|
||||
clear: jest.fn(),
|
||||
removeItem: jest.fn(),
|
||||
}
|
||||
})()
|
||||
Object.defineProperty(window, "localStorage", { value: localStorageMock })
|
||||
|
||||
jest.mock("~/helpers/fb", () => ({
|
||||
__esModule: true,
|
||||
|
||||
fb: {
|
||||
currentUser: null,
|
||||
currentHistory: restHistory,
|
||||
currentGraphqlHistory: graphqlHistory,
|
||||
clearHistory: jest.fn(),
|
||||
clearGraphqlHistory: jest.fn(),
|
||||
deleteHistory: jest.fn(),
|
||||
deleteGraphqlHistory: jest.fn(),
|
||||
},
|
||||
}))
|
||||
|
||||
const factory = (props) => {
|
||||
return shallowMount(History, {
|
||||
propsData: props,
|
||||
stubs: {
|
||||
"v-popover": {
|
||||
template: "<div><slot /><slot name='popover' :is-open=true /></div>",
|
||||
},
|
||||
HistoryRestCard: {
|
||||
template: "<div data-testid='rest_card' />",
|
||||
},
|
||||
HistoryGraphqlCard: {
|
||||
template: "<div data-testid='graphql_card' />",
|
||||
},
|
||||
AppSection: {
|
||||
template: "<div><slot /></div>",
|
||||
},
|
||||
},
|
||||
mocks: {
|
||||
$t: (text) => text,
|
||||
$toast: {
|
||||
error() {},
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
tooltip() {
|
||||
/* stub */
|
||||
},
|
||||
closePopover() {
|
||||
/* stub */
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
fb.clearHistory.mockClear()
|
||||
fb.clearGraphqlHistory.mockClear()
|
||||
fb.deleteHistory.mockClear()
|
||||
fb.deleteGraphqlHistory.mockClear()
|
||||
window.localStorage.setItem.mockClear()
|
||||
})
|
||||
|
||||
describe("Mount History", () => {
|
||||
test("Mounts rest history without login", async () => {
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
test("Mounts rest history with login", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("Mounts graphql history without login", async () => {
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
test("Mounts graphql history with login", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe("Clear History", () => {
|
||||
test("Clear rest history without login", async () => {
|
||||
fb.currentUser = null
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
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")
|
||||
expect(fb.clearHistory).not.toHaveBeenCalled()
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
|
||||
})
|
||||
test("Clear rest history with login", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
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")
|
||||
expect(fb.clearHistory).toHaveBeenCalledTimes(1)
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledWith("history", JSON.stringify([]))
|
||||
})
|
||||
test("Dont confirm Clear rest history", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "rest",
|
||||
})
|
||||
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")
|
||||
expect(fb.clearHistory).not.toHaveBeenCalled()
|
||||
expect(window.localStorage.setItem).not.toHaveBeenCalledWith("history", JSON.stringify([]))
|
||||
})
|
||||
|
||||
test("Clear graphql history without login", async () => {
|
||||
fb.currentUser = null
|
||||
const wrapper = factory({
|
||||
page: "graphql",
|
||||
})
|
||||
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")
|
||||
expect(fb.clearGraphqlHistory).not.toHaveBeenCalled()
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
|
||||
})
|
||||
test("Clear graphql history with login", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "graphql",
|
||||
})
|
||||
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")
|
||||
expect(fb.clearGraphqlHistory).toHaveBeenCalledTimes(1)
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledWith("graphqlHistory", JSON.stringify([]))
|
||||
})
|
||||
test("Dont confirm Clear graphql history", async () => {
|
||||
fb.currentUser = "user"
|
||||
const wrapper = factory({
|
||||
page: "graphql",
|
||||
})
|
||||
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")
|
||||
expect(window.localStorage.setItem).not.toHaveBeenCalledWith(
|
||||
"graphqlHistory",
|
||||
JSON.stringify([])
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe("Use History", () => {
|
||||
test("use rest history", async () => {
|
||||
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.emitted("useHistory")).toBeTruthy()
|
||||
expect(wrapper.emitted("useHistory")[0]).toStrictEqual([restHistory[index]])
|
||||
})
|
||||
|
||||
test("use graphql history", async () => {
|
||||
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.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))
|
||||
)
|
||||
})
|
||||
})
|
||||
58
components/history/__tests__/RestCard.spec.js
Normal file
58
components/history/__tests__/RestCard.spec.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import RestCard from "../rest/Card"
|
||||
import { mount } from "@vue/test-utils"
|
||||
|
||||
const factory = (props) => {
|
||||
return mount(RestCard, {
|
||||
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/get"
|
||||
const entry = {
|
||||
type: "rest",
|
||||
url: url,
|
||||
method: "GET",
|
||||
status: 200,
|
||||
star: false,
|
||||
}
|
||||
describe("RestCard", () => {
|
||||
test("Mounts properly if props are given", () => {
|
||||
const wrapper = factory({ entry })
|
||||
expect(wrapper).toBeTruthy()
|
||||
})
|
||||
|
||||
test("toggle-star emitted on clicking on star button", async () => {
|
||||
const wrapper = factory({ entry })
|
||||
|
||||
wrapper.find("button[data-testid='star_button']").trigger("click")
|
||||
expect(wrapper.emitted("toggle-star")).toBeTruthy()
|
||||
})
|
||||
|
||||
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")
|
||||
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")
|
||||
expect(wrapper.emitted("delete-entry")).toBeTruthy()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user