adding test cases for Registry/UtilComponents

Author: prakhyatox

src/components/Registry/UtilComponents/AutoCompleteComponent.vue

@@ -40,6 +40,7 @@
       clearable
       closable-chips
       color="primary"
+      data-testid="autocompleteComponent"
       density="compact"
       flat
       hide-details="auto"

src/components/Registry/UtilComponents/SelectComponent.vue

@@ -38,6 +38,7 @@
       clearable
       closable-chips
       color="primary"
+      data-testid="comboboxComponent"
       density="compact"
       flat
       hide-details="auto"

src/components/Registry/UtilComponents/__tests__/AutoCompleteComponent.spec.js

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { createVuetify } from "vuetify";
+
+import { mount } from "@vue/test-utils";
+import AutoCompleteComponent from "../AutoCompleteComponent.vue";
+import { createPinia, setActivePinia } from "pinia";
+
+const vuetify = createVuetify();
+
+describe("AutoCompleteComponent.vue", function () {
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    wrapper = mount(AutoCompleteComponent, {
+      global: {
+        plugins: [vuetify],
+        data: () => {
+          return {
+            search: null,
+            model: ["foo"],
+          };
+        },
+        props: {
+          itemList: ["foo"],
+          itemValue: ["foo"],
+          loading: false,
+          toolTipText: "dummy",
+          label: "label",
+          disabled: false,
+        },
+        stubs: { vAutocomplete: true },
+      },
+    });
+  });
+
+  it("can be instantiated", () => {
+    //When search text is more than 3 words
+    wrapper.vm.$options.watch.search.call(wrapper.vm, "test");
+    //When search text is less than 3 words
+    wrapper.vm.$options.watch.search.call(wrapper.vm, "te");
+    wrapper.vm.$options.watch.model.call(wrapper.vm, ["xyz"]);
+    expect(wrapper.vm.$options.name).toMatch("AutoCompleteComponent");
+  });
+  it("can check v-model", async () => {
+    let itemListArr = ["foo"];
+    const component = wrapper.findComponent(
+      "[data-testid='autocompleteComponent']",
+    );
+    component.componentVM.search = "abc";
+    await component.setValue(itemListArr);
+    expect(wrapper.vm.model).toStrictEqual(itemListArr);
+  });
+});

src/components/Registry/UtilComponents/__tests__/SelectComponent.spec.js

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { createVuetify } from "vuetify";
+
+import { mount } from "@vue/test-utils";
+import SelectComponent from "../SelectComponent.vue";
+import { createPinia, setActivePinia } from "pinia";
+
+const vuetify = createVuetify();
+
+describe("SelectComponent.vue", function () {
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    wrapper = mount(SelectComponent, {
+      global: {
+        plugins: [vuetify],
+        data: () => {
+          return {
+            model: ["foo"],
+          };
+        },
+        props: {
+          itemList: ["foo"],
+          itemValue: ["foo"],
+          loading: false,
+          toolTipText: "dummy",
+          label: "label",
+          disabled: false,
+        },
+        stubs: { vCombobox: true },
+      },
+    });
+  });
+
+  it("can be instantiated", () => {
+    wrapper.vm.$options.watch.disabled.call(wrapper.vm, true);
+    wrapper.vm.$options.watch.model.call(wrapper.vm, ["xyz"]);
+    expect(wrapper.vm.$options.name).toMatch("SelectComponent");
+  });
+  it("can check v-model", async () => {
+    let itemListArr = ["foo"];
+    const component = wrapper.findComponent(
+      "[data-testid='comboboxComponent']",
+    );
+    component.componentVM.search = "abc";
+    await component.setValue(itemListArr);
+    expect(wrapper.vm.model).toStrictEqual(itemListArr);
+  });
+});

src/components/Registry/UtilComponents/__tests__/TableComponent.spec.js

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { createVuetify } from "vuetify";
+
+import { mount } from "@vue/test-utils";
+import TableComponent from "../TableComponent.vue";
+import { createPinia, setActivePinia } from "pinia";
+
+const vuetify = createVuetify();
+
+describe("TableComponent.vue", function () {
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    wrapper = mount(TableComponent, {
+      global: {
+        plugins: [vuetify],
+        data() {
+          return {
+            fairsharingURL: import.meta.env.VITE_FAIRSHARING_URL,
+            headers: [
+              {
+                title: "Name",
+                value: "name",
+                align: "center",
+                key: "name",
+                sortable: false,
+              },
+              {
+                title: "Type",
+                value: "type",
+                align: "center",
+                key: "type",
+                sortable: false,
+              },
+              {
+                title: "Status",
+                value: "status",
+                align: "center",
+                key: "status",
+                sortable: false,
+              },
+            ],
+            loading: false,
+          };
+        },
+        props: {
+          itemList: ["foo"],
+          hideType: false,
+        },
+        stubs: { vDataTable: true },
+      },
+    });
+  });
+
+  it("can be instantiated", () => {
+    expect(wrapper.vm.$options.name).toMatch("TableComponent");
+  });
+
+  it("can check headersList computed property", async () => {
+    wrapper.setProps({ hideType: true });
+    expect(wrapper.vm.headersList).toStrictEqual(wrapper.vm.headers);
+  });
+});

src/components/Registry/__tests__/CollapseTreeGraph.spec.js

@@ -29,7 +29,7 @@ describe("CollapseTreeGraph.vue", function () {
     expect(wrapper.vm.$options.name).toMatch("CollapseTreeGraph");
   });
 
-  it("getGraphData method is called on v-select", async () => {
+  it("getGraphData method is called on v-select when mounted", async () => {
     let itemList = [
       {
         id: 1,

src/lib/GraphClient/GraphClient.js

@@ -77,7 +77,7 @@ class GraphQLClient {
           const regExp = /\(|\)|\{|\}/g;
 
           const hasBrackets = regExp.test(query.queryParam[key]);
-
+          /* v8 ignore next */
           if (hasBrackets) queryString += `${key}:${query.queryParam[key]}`;
           else queryString += `${key}:"${query.queryParam[key]}" `;
           // queryString += `${key}:"${query.queryParam[key]}" `;

src/views/Registry/__tests__/ResultTableView.spec.js

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { createVuetify } from "vuetify";
+
+import { shallowMount } from "@vue/test-utils";
+import ResultTableView from "../ResultTableView.vue";
+import { createPinia, setActivePinia } from "pinia";
+import { useAdvancedSearchStore } from "@/stores/advancedSearch.js";
+
+const vuetify = createVuetify();
+
+describe("RegistryView.vue", function () {
+  let wrapper;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    wrapper = shallowMount(ResultTableView, {
+      global: {
+        plugins: [vuetify],
+      },
+    });
+  });
+
+  it("can be instantiated", () => {
+    expect(wrapper.vm.$options.name).toMatch("ResultTableView");
+  });
+
+  it("can check noData computed property", () => {
+    let store = useAdvancedSearchStore();
+    store.noData = true;
+    expect(wrapper.vm.noData).toBe("No data available");
+  });
+});