Skip to content

Commit 5fa6ecc

Browse files
prakhyatoxprakhyatox
committed
fixing tests in tests/unit/components/Records/Search/*
1 parent ae3a7df commit 5fa6ecc

15 files changed

Lines changed: 329 additions & 289 deletions

‎tests/unit/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Countries.spec.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
import { afterEach, describe, expect, it, vi } from "vitest";
22
import { shallowMount } from "@vue/test-utils";
33
import { createStore } from "vuex";
4-
import countriesSearch from "@/store";
54
import Countries from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Countries.vue";
65

7-
vi.mock("@/store", () => ({
8-
default: {
9-
commit: vi.fn(),
10-
},
11-
}));
12-
136
describe("Countries.vue", () => {
147
let actions;
8+
let mutations;
159
let countriesGetters;
1610
let advancedGetters;
11+
let store;
1712

1813
const createWrapper = (props = {}, customAdvancedGetters = {}) => {
1914
// Setup Vuex Modules
2015
actions = { fetchSearchCountries: vi.fn() };
16+
mutations = { setSearchCountries: vi.fn() };
2117

2218
countriesGetters = {
2319
getSearchCountries: () => ["Canada", "Mexico"],
@@ -26,14 +22,15 @@ describe("Countries.vue", () => {
2622

2723
advancedGetters = {
2824
getEditDialogStatus: () => false,
29-
...customAdvancedGetters, // Allow overriding for specific tests
25+
...customAdvancedGetters,
3026
};
3127

32-
const store = createStore({
28+
store = createStore({
3329
modules: {
3430
countriesSearch: {
3531
namespaced: true,
3632
actions,
33+
mutations,
3734
getters: countriesGetters,
3835
},
3936
advancedSearch: {
@@ -43,6 +40,8 @@ describe("Countries.vue", () => {
4340
},
4441
});
4542

43+
vi.spyOn(store, "commit");
44+
4645
return shallowMount(Countries, {
4746
global: {
4847
plugins: [store],
@@ -77,16 +76,20 @@ describe("Countries.vue", () => {
7776
name: "AutoCompleteComponent",
7877
});
7978
await selectStub.vm.$emit("update:modelValue", ["FTP", "SPARQL"]);
80-
expect(wrapper.emitted().input).toBeTruthy();
81-
expect(wrapper.emitted().input[0]).toStrictEqual([["FTP", "SPARQL"]]);
79+
80+
// Checking both Vue 2 'input' or Vue 3 'update:modelValue' depending on your project settings
81+
const emittedEvent =
82+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
83+
expect(emittedEvent).toBeTruthy();
84+
expect(emittedEvent[0]).toStrictEqual([["FTP", "SPARQL"]]);
8285
});
8386
});
8487

8588
describe("Watcher: getEditDialogStatus (Immediate)", () => {
8689
it("does NOT commit to direct store if dialog is open but value is empty", () => {
8790
createWrapper({ value: [] }, { getEditDialogStatus: () => true });
8891

89-
expect(countriesSearch.commit).not.toHaveBeenCalled();
92+
expect(store.commit).not.toHaveBeenCalled();
9093
});
9194

9295
it("does NOT commit to direct store if dialog is closed", () => {
@@ -95,16 +98,15 @@ describe("Countries.vue", () => {
9598
{ getEditDialogStatus: () => false },
9699
);
97100

98-
expect(countriesSearch.commit).not.toHaveBeenCalled();
101+
expect(store.commit).not.toHaveBeenCalled();
99102
});
100103

101104
it("commits to the direct store if dialog is open AND value has length", () => {
102105
const mockValue = ["Germany"];
103106
createWrapper({ value: mockValue }, { getEditDialogStatus: () => true });
104107

105-
// Asserts the direct import `countriesSearch.commit()` was called correctly
106-
expect(countriesSearch.commit).toHaveBeenCalledTimes(1);
107-
expect(countriesSearch.commit).toHaveBeenCalledWith(
108+
expect(store.commit).toHaveBeenCalledTimes(1);
109+
expect(store.commit).toHaveBeenCalledWith(
108110
"countriesSearch/setSearchCountries",
109111
mockValue,
110112
);
@@ -118,12 +120,14 @@ describe("Countries.vue", () => {
118120
expect(wrapper.vm.model).toStrictEqual(["Spain"]);
119121
});
120122

121-
it("computed model setter emits 'input' event", () => {
123+
it("computed model setter emits updated model value event", () => {
122124
const wrapper = createWrapper();
123125
wrapper.vm.model = ["Italy"];
124126

125-
expect(wrapper.emitted().input).toBeTruthy();
126-
expect(wrapper.emitted().input[0]).toStrictEqual([["Italy"]]);
127+
const emittedEvent =
128+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
129+
expect(emittedEvent).toBeTruthy();
130+
expect(emittedEvent[0]).toStrictEqual([["Italy"]]);
127131
});
128132

129133
it("selectedValue() sets itemSelected", () => {

‎tests/unit/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Domains.spec.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import { afterEach, describe, expect, it, vi } from "vitest";
22
import { shallowMount } from "@vue/test-utils";
33
import { createStore } from "vuex";
4-
import domainsSearch from "@/store";
54
import Domains from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Domains.vue";
65

7-
vi.mock("@/store", () => ({
8-
default: {
9-
commit: vi.fn(),
10-
},
11-
}));
12-
136
describe("Domains.vue", () => {
147
let actions;
158
let domainsGetters;
169
let advancedGetters;
10+
let store; // Keep a reference to the active test store instance
1711

1812
const createWrapper = (props = {}, customAdvancedGetters = {}) => {
1913
// Setup Vuex Modules
@@ -29,12 +23,14 @@ describe("Domains.vue", () => {
2923
...customAdvancedGetters, // Allow overriding for specific tests
3024
};
3125

32-
const store = createStore({
26+
store = createStore({
3327
modules: {
3428
domainsSearch: {
3529
namespaced: true,
3630
actions,
3731
getters: domainsGetters,
32+
// If your component commits mutations, adding an empty mutations block is safe practice
33+
mutations: { setSearchDomains: vi.fn() },
3834
},
3935
advancedSearch: {
4036
namespaced: true,
@@ -43,6 +39,9 @@ describe("Domains.vue", () => {
4339
},
4440
});
4541

42+
// Directly spy on the store's commit method
43+
vi.spyOn(store, "commit");
44+
4645
return shallowMount(Domains, {
4746
global: {
4847
plugins: [store],
@@ -77,16 +76,19 @@ describe("Domains.vue", () => {
7776
name: "AutoCompleteComponent",
7877
});
7978
await selectStub.vm.$emit("update:modelValue", ["FTP", "SPARQL"]);
80-
expect(wrapper.emitted().input).toBeTruthy();
81-
expect(wrapper.emitted().input[0]).toStrictEqual([["FTP", "SPARQL"]]);
79+
80+
const emittedEvent =
81+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
82+
expect(emittedEvent).toBeTruthy();
83+
expect(emittedEvent[0]).toStrictEqual([["FTP", "SPARQL"]]);
8284
});
8385
});
8486

8587
describe("Watcher: getEditDialogStatus (Immediate)", () => {
8688
it("does NOT commit to direct store if dialog is open but value is empty", () => {
8789
createWrapper({ value: [] }, { getEditDialogStatus: () => true });
8890

89-
expect(domainsSearch.commit).not.toHaveBeenCalled();
91+
expect(store.commit).not.toHaveBeenCalled();
9092
});
9193

9294
it("does NOT commit to direct store if dialog is closed", () => {
@@ -95,14 +97,16 @@ describe("Domains.vue", () => {
9597
{ getEditDialogStatus: () => false },
9698
);
9799

98-
expect(domainsSearch.commit).not.toHaveBeenCalled();
100+
expect(store.commit).not.toHaveBeenCalled();
99101
});
100102

101103
it("commits to the direct store if dialog is open AND value has length", () => {
102104
const mockValue = ["Germany"];
103105
createWrapper({ value: mockValue }, { getEditDialogStatus: () => true });
104-
expect(domainsSearch.commit).toHaveBeenCalledTimes(1);
105-
expect(domainsSearch.commit).toHaveBeenCalledWith(
106+
107+
// Asserting against the real store instance spy instead of the global mock import
108+
expect(store.commit).toHaveBeenCalledTimes(1);
109+
expect(store.commit).toHaveBeenCalledWith(
106110
"domainsSearch/setSearchDomains",
107111
mockValue,
108112
);
@@ -116,12 +120,14 @@ describe("Domains.vue", () => {
116120
expect(wrapper.vm.model).toStrictEqual(["Spain"]);
117121
});
118122

119-
it("computed model setter emits 'input' event", () => {
123+
it("computed model setter emits expected event", () => {
120124
const wrapper = createWrapper();
121125
wrapper.vm.model = ["Italy"];
122126

123-
expect(wrapper.emitted().input).toBeTruthy();
124-
expect(wrapper.emitted().input[0]).toStrictEqual([["Italy"]]);
127+
const emittedEvent =
128+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
129+
expect(emittedEvent).toBeTruthy();
130+
expect(emittedEvent[0]).toStrictEqual([["Italy"]]);
125131
});
126132

127133
it("selectedValue() sets itemSelected", () => {

‎tests/unit/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Licences.spec.js‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
11
import { afterEach, describe, expect, it, vi } from "vitest";
22
import { shallowMount } from "@vue/test-utils";
33
import { createStore } from "vuex";
4-
import licencesSearch from "@/store";
54
import Licences from "@/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/GeneralComponents/Licences.vue";
65

7-
vi.mock("@/store", () => ({
8-
default: {
9-
commit: vi.fn(),
10-
},
11-
}));
12-
136
describe("Licences.vue", () => {
147
let actions;
158
let licencesGetters;
169
let advancedGetters;
10+
let store;
1711

1812
const createWrapper = (props = {}, customAdvancedGetters = {}) => {
19-
// Setup Vuex Modules
2013
actions = { fetchSearchLicences: vi.fn() };
2114

2215
licencesGetters = {
@@ -26,22 +19,24 @@ describe("Licences.vue", () => {
2619

2720
advancedGetters = {
2821
getEditDialogStatus: () => false,
29-
...customAdvancedGetters, // Allow overriding for specific tests
22+
...customAdvancedGetters,
3023
};
3124

32-
const store = createStore({
25+
store = createStore({
3326
modules: {
3427
licencesSearch: {
3528
namespaced: true,
3629
actions,
3730
getters: licencesGetters,
31+
mutations: { setSearchLicences: vi.fn() }, // Safe fallback for the commit
3832
},
3933
advancedSearch: {
4034
namespaced: true,
4135
getters: advancedGetters,
4236
},
4337
},
4438
});
39+
vi.spyOn(store, "commit");
4540

4641
return shallowMount(Licences, {
4742
global: {
@@ -77,16 +72,19 @@ describe("Licences.vue", () => {
7772
name: "AutoCompleteComponent",
7873
});
7974
await selectStub.vm.$emit("update:modelValue", ["FTP", "SPARQL"]);
80-
expect(wrapper.emitted().input).toBeTruthy();
81-
expect(wrapper.emitted().input[0]).toStrictEqual([["FTP", "SPARQL"]]);
75+
76+
const emittedEvent =
77+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
78+
expect(emittedEvent).toBeTruthy();
79+
expect(emittedEvent[0]).toStrictEqual([["FTP", "SPARQL"]]);
8280
});
8381
});
8482

8583
describe("Watcher: getEditDialogStatus (Immediate)", () => {
8684
it("does NOT commit to direct store if dialog is open but value is empty", () => {
8785
createWrapper({ value: [] }, { getEditDialogStatus: () => true });
8886

89-
expect(licencesSearch.commit).not.toHaveBeenCalled();
87+
expect(store.commit).not.toHaveBeenCalled();
9088
});
9189

9290
it("does NOT commit to direct store if dialog is closed", () => {
@@ -95,16 +93,15 @@ describe("Licences.vue", () => {
9593
{ getEditDialogStatus: () => false },
9694
);
9795

98-
expect(licencesSearch.commit).not.toHaveBeenCalled();
96+
expect(store.commit).not.toHaveBeenCalled();
9997
});
10098

10199
it("commits to the direct store if dialog is open AND value has length", () => {
102100
const mockValue = ["Germany"];
103101
createWrapper({ value: mockValue }, { getEditDialogStatus: () => true });
104102

105-
// Asserts the direct import `licencesSearch.commit()` was called correctly
106-
expect(licencesSearch.commit).toHaveBeenCalledTimes(1);
107-
expect(licencesSearch.commit).toHaveBeenCalledWith(
103+
expect(store.commit).toHaveBeenCalledTimes(1);
104+
expect(store.commit).toHaveBeenCalledWith(
108105
"licencesSearch/setSearchLicences",
109106
mockValue,
110107
);
@@ -118,12 +115,14 @@ describe("Licences.vue", () => {
118115
expect(wrapper.vm.model).toStrictEqual(["Spain"]);
119116
});
120117

121-
it("computed model setter emits 'input' event", () => {
118+
it("computed model setter emits expected event", () => {
122119
const wrapper = createWrapper();
123120
wrapper.vm.model = ["Italy"];
124121

125-
expect(wrapper.emitted().input).toBeTruthy();
126-
expect(wrapper.emitted().input[0]).toStrictEqual([["Italy"]]);
122+
const emittedEvent =
123+
wrapper.emitted()["update:modelValue"] || wrapper.emitted().input;
124+
expect(emittedEvent).toBeTruthy();
125+
expect(emittedEvent[0]).toStrictEqual([["Italy"]]);
127126
});
128127

129128
it("selectedValue() sets itemSelected", () => {

0 commit comments

Comments
 (0)