ui_migration feature(vitest) Split allComponents.spec.js for readability using now overrides.js for prop,mock component injection
This commit is contained in:
Antonio Anaya
Antonio Anaya
parent
7e8f0b3957
commit
ffcc7f936b
2 changed files with 191 additions and 198 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import { describe, it, expect, beforeEach, afterEach, afterAll, vi } from "vitest";
|
import { describe, it, expect, beforeEach, afterEach, afterAll, vi } from "vitest";
|
||||||
import { shallowMount, flushPromises } from "@vue/test-utils";
|
import { shallowMount, flushPromises } from "@vue/test-utils";
|
||||||
import { createTestingPinia } from "@pinia/testing";
|
import { createTestingPinia } from "@pinia/testing";
|
||||||
import { markRaw } from "vue";
|
import { componentOverrides } from "./overrides";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file Automated component smoke testing suite.
|
* @file Automated component smoke testing suite.
|
||||||
|
|
@ -9,6 +9,7 @@ import { markRaw } from "vue";
|
||||||
* shallow mount on each. This acts as a first line of defense to catch
|
* shallow mount on each. This acts as a first line of defense to catch
|
||||||
* fatal DOM runtime errors, missing dependencies, or script crashes
|
* fatal DOM runtime errors, missing dependencies, or script crashes
|
||||||
* before they reach production.
|
* before they reach production.
|
||||||
|
* @requires overrides.js for component-specific prop and mock configurations.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** * Vite eagerly grabs all .vue components, explicitly excluding the experimental folder.
|
/** * Vite eagerly grabs all .vue components, explicitly excluding the experimental folder.
|
||||||
|
|
@ -20,211 +21,15 @@ const componentModules = import.meta.glob(
|
||||||
);
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* IMPORTANT
|
* @note IMPORTANT: Skip list, add here components that have their own test .spec.js file
|
||||||
* Skip list, add here components that have their own test .spec.js file
|
|
||||||
* */
|
* */
|
||||||
const skipList = ["loggingContent.vue"];
|
const skipList = ["loggingContent.vue"];
|
||||||
|
|
||||||
/**
|
|
||||||
* Map filenames to the specific props or mocks required
|
|
||||||
* Not all components ask for props
|
|
||||||
* If a component has unmet props or global mocks setup.js is set to fail the test
|
|
||||||
**/
|
|
||||||
const componentOverrides = {
|
|
||||||
"serverSpecifiedPropertyControl.vue": {
|
|
||||||
props: {
|
|
||||||
propertyData: {},
|
|
||||||
propertyName: "",
|
|
||||||
thingName: "",
|
|
||||||
},
|
|
||||||
global: {
|
|
||||||
mocks: {
|
|
||||||
wotStore: {
|
|
||||||
thingDescriptions: {
|
|
||||||
test_thing: {
|
|
||||||
properties: {
|
|
||||||
test_property_1: {},
|
|
||||||
test_property_2: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"slideScanContent.vue": {
|
|
||||||
global: {
|
|
||||||
mocks: {
|
|
||||||
wotStore: {
|
|
||||||
thingDescriptions: {
|
|
||||||
test_thing: {
|
|
||||||
properties: {
|
|
||||||
test_property_1: {},
|
|
||||||
test_property_2: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"slideScanControls.vue": {
|
|
||||||
global: {
|
|
||||||
mocks: {
|
|
||||||
wotStore: {
|
|
||||||
thingDescriptions: {
|
|
||||||
test_thing: {
|
|
||||||
properties: {
|
|
||||||
test_property_1: {},
|
|
||||||
test_property_2: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"miniStreamDisplay.vue": {
|
|
||||||
props: { streamId: "testProp" },
|
|
||||||
},
|
|
||||||
"streamContent.vue": {
|
|
||||||
props: { streamId: "testProp" },
|
|
||||||
},
|
|
||||||
"paginateLinks.vue": {
|
|
||||||
props: { totalPages: 5, currentPage: 1 },
|
|
||||||
},
|
|
||||||
"simpleAccordion.vue": {
|
|
||||||
props: { title: "Test Accordion Title" },
|
|
||||||
},
|
|
||||||
"tabContent.vue": {
|
|
||||||
props: { tabID: "tab-1", currentTab: "tab-1" },
|
|
||||||
},
|
|
||||||
"tabIcon.vue": {
|
|
||||||
props: { tabID: "tab-1", currentTab: "tab-1" },
|
|
||||||
},
|
|
||||||
"actionButton.vue": {
|
|
||||||
props: { action: "test-action", thing: "test-thing" },
|
|
||||||
},
|
|
||||||
"actionLogDisplay.vue": {
|
|
||||||
props: { taskStatus: "", log: [] },
|
|
||||||
},
|
|
||||||
"endActionButton.vue": {
|
|
||||||
props: { url: "http://microscope.local/api/v3" },
|
|
||||||
},
|
|
||||||
"endpointButton.vue": {
|
|
||||||
props: { url: "http://microscope.local/api/v3" },
|
|
||||||
},
|
|
||||||
"matrixDisplay.vue": {
|
|
||||||
props: { matrix: [] },
|
|
||||||
},
|
|
||||||
"actionProgressBar.vue": {
|
|
||||||
props: { taskStatus: "" },
|
|
||||||
},
|
|
||||||
"actionStatusModal.vue": {
|
|
||||||
props: {
|
|
||||||
title: "",
|
|
||||||
log: [],
|
|
||||||
canTerminate: true,
|
|
||||||
taskRunning: true,
|
|
||||||
taskStarted: true,
|
|
||||||
taskStatus: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"inputFromSchema.vue": {
|
|
||||||
props: { dataSchema: {} },
|
|
||||||
},
|
|
||||||
|
|
||||||
"propertyControl.vue": {
|
|
||||||
props: {
|
|
||||||
propertyName: "",
|
|
||||||
thingName: "test_thing",
|
|
||||||
dataSchema: {},
|
|
||||||
},
|
|
||||||
|
|
||||||
mocks: {
|
|
||||||
wotStore: {
|
|
||||||
thingDescriptions: {
|
|
||||||
test_thing: {
|
|
||||||
actions: {},
|
|
||||||
properties: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"serverSpecifiedActionButton.vue": {
|
|
||||||
props: {
|
|
||||||
actionData: {},
|
|
||||||
elements: {},
|
|
||||||
propertyData: {},
|
|
||||||
action: "test-action",
|
|
||||||
thing: "test-thing",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"serverSpecifiedInterface.vue": {
|
|
||||||
props: { elements: [] },
|
|
||||||
},
|
|
||||||
"calibrationWizardTask.vue": {
|
|
||||||
props: { steps: [] },
|
|
||||||
},
|
|
||||||
"singleStepTask.vue": {
|
|
||||||
props: {
|
|
||||||
stepComponent: markRaw({ template: '<div class="dummy"></div>' }),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"actionTab.vue": {
|
|
||||||
props: {
|
|
||||||
action: "test-action",
|
|
||||||
thing: "test-thing",
|
|
||||||
taskId: "",
|
|
||||||
taskUrl: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"galleryCard.vue": {
|
|
||||||
props: { itemData: {} },
|
|
||||||
},
|
|
||||||
"openSeadragonViewer.vue": {
|
|
||||||
props: {
|
|
||||||
src: "",
|
|
||||||
brightness: 0,
|
|
||||||
contrast: 0,
|
|
||||||
saturation: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"cameraCalibrationSettings.vue": {
|
|
||||||
props: { cameraUri: "" },
|
|
||||||
},
|
|
||||||
|
|
||||||
"galleryContent.vue": {
|
|
||||||
global: {
|
|
||||||
mocks: {
|
|
||||||
readThingProperty: vi.fn(() => []),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"CSMCalibrationSettings.vue": {
|
|
||||||
global: {
|
|
||||||
mocks: {
|
|
||||||
thingDescriptions: {
|
|
||||||
csm: {
|
|
||||||
actions: {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Test description this is a fast unit test
|
* Test description this is a fast unit test
|
||||||
* The objective of this testing is find early
|
* The objective of this testing is find early
|
||||||
* component loading issues like bad component setups
|
* component loading issues like bad component setups
|
||||||
*/
|
*/
|
||||||
|
|
||||||
describe("Unit Test", () => {
|
describe("Unit Test", () => {
|
||||||
let wrapper;
|
let wrapper;
|
||||||
|
|
||||||
|
|
|
||||||
188
webapp/src/tests/unit/overrides.js
Normal file
188
webapp/src/tests/unit/overrides.js
Normal file
|
|
@ -0,0 +1,188 @@
|
||||||
|
import { markRaw } from "vue";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @file Component-specific overrides for unit testing.
|
||||||
|
* @description Map filenames to the specific props or mocks required
|
||||||
|
* Not all components ask for props
|
||||||
|
* If a component has unmet props or global mocks setup.js is set to fail the test
|
||||||
|
**/
|
||||||
|
export const componentOverrides = {
|
||||||
|
"serverSpecifiedPropertyControl.vue": {
|
||||||
|
props: {
|
||||||
|
propertyData: {},
|
||||||
|
propertyName: "",
|
||||||
|
thingName: "",
|
||||||
|
},
|
||||||
|
global: {
|
||||||
|
mocks: {
|
||||||
|
wotStore: {
|
||||||
|
thingDescriptions: {
|
||||||
|
test_thing: {
|
||||||
|
properties: {
|
||||||
|
test_property_1: {},
|
||||||
|
test_property_2: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"slideScanContent.vue": {
|
||||||
|
global: {
|
||||||
|
mocks: {
|
||||||
|
wotStore: {
|
||||||
|
thingDescriptions: {
|
||||||
|
test_thing: {
|
||||||
|
properties: {
|
||||||
|
test_property_1: {},
|
||||||
|
test_property_2: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"slideScanControls.vue": {
|
||||||
|
global: {
|
||||||
|
mocks: {
|
||||||
|
wotStore: {
|
||||||
|
thingDescriptions: {
|
||||||
|
test_thing: {
|
||||||
|
properties: {
|
||||||
|
test_property_1: {},
|
||||||
|
test_property_2: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"miniStreamDisplay.vue": {
|
||||||
|
props: { streamId: "testProp" },
|
||||||
|
},
|
||||||
|
"streamContent.vue": {
|
||||||
|
props: { streamId: "testProp" },
|
||||||
|
},
|
||||||
|
"paginateLinks.vue": {
|
||||||
|
props: { totalPages: 5, currentPage: 1 },
|
||||||
|
},
|
||||||
|
"simpleAccordion.vue": {
|
||||||
|
props: { title: "Test Accordion Title" },
|
||||||
|
},
|
||||||
|
"tabContent.vue": {
|
||||||
|
props: { tabID: "tab-1", currentTab: "tab-1" },
|
||||||
|
},
|
||||||
|
"tabIcon.vue": {
|
||||||
|
props: { tabID: "tab-1", currentTab: "tab-1" },
|
||||||
|
},
|
||||||
|
"actionButton.vue": {
|
||||||
|
props: { action: "test-action", thing: "test-thing" },
|
||||||
|
},
|
||||||
|
"actionLogDisplay.vue": {
|
||||||
|
props: { taskStatus: "", log: [] },
|
||||||
|
},
|
||||||
|
"endActionButton.vue": {
|
||||||
|
props: { url: "http://microscope.local/api/v3" },
|
||||||
|
},
|
||||||
|
"endpointButton.vue": {
|
||||||
|
props: { url: "http://microscope.local/api/v3" },
|
||||||
|
},
|
||||||
|
"matrixDisplay.vue": {
|
||||||
|
props: { matrix: [] },
|
||||||
|
},
|
||||||
|
"actionProgressBar.vue": {
|
||||||
|
props: { taskStatus: "" },
|
||||||
|
},
|
||||||
|
"actionStatusModal.vue": {
|
||||||
|
props: {
|
||||||
|
title: "",
|
||||||
|
log: [],
|
||||||
|
canTerminate: true,
|
||||||
|
taskRunning: true,
|
||||||
|
taskStarted: true,
|
||||||
|
taskStatus: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"inputFromSchema.vue": {
|
||||||
|
props: { dataSchema: {} },
|
||||||
|
},
|
||||||
|
|
||||||
|
"propertyControl.vue": {
|
||||||
|
props: {
|
||||||
|
propertyName: "",
|
||||||
|
thingName: "test_thing",
|
||||||
|
dataSchema: {},
|
||||||
|
},
|
||||||
|
|
||||||
|
mocks: {
|
||||||
|
wotStore: {
|
||||||
|
thingDescriptions: {
|
||||||
|
test_thing: {
|
||||||
|
actions: {},
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"serverSpecifiedActionButton.vue": {
|
||||||
|
props: {
|
||||||
|
actionData: {},
|
||||||
|
elements: {},
|
||||||
|
propertyData: {},
|
||||||
|
action: "test-action",
|
||||||
|
thing: "test-thing",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"serverSpecifiedInterface.vue": {
|
||||||
|
props: { elements: [] },
|
||||||
|
},
|
||||||
|
"calibrationWizardTask.vue": {
|
||||||
|
props: { steps: [] },
|
||||||
|
},
|
||||||
|
"singleStepTask.vue": {
|
||||||
|
props: {
|
||||||
|
stepComponent: markRaw({ template: '<div class="dummy"></div>' }),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"actionTab.vue": {
|
||||||
|
props: {
|
||||||
|
action: "test-action",
|
||||||
|
thing: "test-thing",
|
||||||
|
taskId: "",
|
||||||
|
taskUrl: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"galleryCard.vue": {
|
||||||
|
props: { itemData: {} },
|
||||||
|
},
|
||||||
|
"openSeadragonViewer.vue": {
|
||||||
|
props: {
|
||||||
|
src: "",
|
||||||
|
brightness: 0,
|
||||||
|
contrast: 0,
|
||||||
|
saturation: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"cameraCalibrationSettings.vue": {
|
||||||
|
props: { cameraUri: "" },
|
||||||
|
},
|
||||||
|
|
||||||
|
"CSMCalibrationSettings.vue": {
|
||||||
|
global: {
|
||||||
|
mocks: {
|
||||||
|
thingDescriptions: {
|
||||||
|
csm: {
|
||||||
|
actions: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue