corrected typo for gql component test spec folder name

components/graphql/__tests__/field.spec.js

@@ -0,0 +1,169 @@
+import field from "../field"
+import { shallowMount } from "@vue/test-utils"
+
+const gqlField = {
+  name: "testField",
+  args: [
+    {
+      name: "arg1",
+      type: "Arg1Type",
+    },
+    {
+      name: "arg2",
+      type: "Arg2type",
+    },
+  ],
+  type: "FieldType",
+  description: "TestDescription",
+}
+
+const factory = (props) =>
+  shallowMount(field, {
+    propsData: props,
+    stubs: {
+      typelink: {
+        template: "<span>Typelink</span>",
+      },
+    },
+    mocks: {
+      $t: (text) => text,
+    },
+  })
+
+describe("field", () => {
+  test("mounts properly if props are given", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("field title is set correctly for fields with no args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: undefined,
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField : Typelink")
+  })
+
+  test("field title is correctly given for fields with single arg", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("field title is correctly given for fields with multiple args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("all typelinks are passed the jump callback", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+          {
+            name: "arg2",
+            type: "Arg2Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink , arg2: Typelink ) : Typelink")
+  })
+
+  test("description is rendered when it is present", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper.find(".field-desc").text()).toEqual("TestDescription")
+  })
+
+  test("description not rendered when it is not present", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        description: undefined,
+      },
+    })
+
+    expect(wrapper.find(".field-desc").exists()).toEqual(false)
+  })
+
+  test("deprecation warning is displayed when field is deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: true,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(true)
+  })
+
+  test("deprecation warning is not displayed wwhen field is not deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: false,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(false)
+  })
+})

components/graphql/__tests__/type.spec.js

@@ -0,0 +1,75 @@
+import type from "../type"
+
+import { shallowMount } from "@vue/test-utils"
+
+const gqlType = {
+  name: "TestType",
+  description: "TestDescription",
+  getFields: () => [{ name: "field1" }, { name: "field2" }],
+}
+
+const factory = (props) =>
+  shallowMount(type, {
+    mocks: {
+      $t: (text) => text,
+    },
+    propsData: props,
+    stubs: ["field"],
+  })
+
+describe("type", () => {
+  test("mounts properly when props are passed", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("title of the type is rendered properly", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper.find(".type-title").text()).toEqual("TestType")
+  })
+
+  test("description of the type is rendered properly if present", () => {
+    const wrapper = factory({
+      gqlType,
+    })
+
+    expect(wrapper.find(".type-desc").text()).toEqual("TestDescription")
+  })
+
+  test("description of the type is not rendered if not present", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+        description: undefined,
+      },
+    })
+
+    expect(wrapper.find(".type-desc").exists()).toEqual(false)
+  })
+
+  test("fields are not rendered if not present", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+        getFields: undefined,
+      },
+    })
+    expect(wrapper.find("field-stub").exists()).toEqual(false)
+  })
+
+  test("all fields are rendered if present with props passed properly", () => {
+    const wrapper = factory({
+      gqlType: {
+        ...gqlType,
+      },
+    })
+
+    expect(wrapper.findAll("field-stub").length).toEqual(2)
+  })
+})

components/graphql/__tests__/typelink.spec.js

@@ -0,0 +1,44 @@
+import typelink from "../typelink"
+import { shallowMount } from "@vue/test-utils"
+
+const factory = (props) =>
+  shallowMount(typelink, {
+    propsData: props,
+  })
+
+const gqlType = {
+  toString: () => "TestType",
+}
+
+describe("typelink", () => {
+  test("mounts properly when valid props are given", () => {
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: jest.fn(),
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("jumpToTypeCallback is called when the link is clicked", async () => {
+    const callback = jest.fn()
+
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: callback,
+    })
+
+    await wrapper.trigger("click")
+
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  test("link text is the type string", () => {
+    const wrapper = factory({
+      gqlType,
+      jumpTypeCallback: jest.fn(),
+    })
+
+    expect(wrapper.text()).toBe("TestType")
+  })
+})