jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-762 tests

Browse source
This commit is contained in:
Katie 2022-10-21 08:04:42 -04:00
parent ad7785e15f
commit 06fe2f15be
4 changed files with 96 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/mixins/input-button-wrapper-mixin.js
View file

@ -10,6 +10,7 @@ export default {
buttonLabel: [Number, String],
buttonLabelSubCopy: String,
buttonImage: String,
buttonImageId: String,
altText: {
type: String,
default: "",

107
src/mixins/input-button-wrapper-mixin.spec.js
View file

@ -1,6 +1,10 @@
import { mount } from "@vue/test-utils";
import baseInputButton from "@/common-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import listButton from "@/ux-components/list-button/list-button";
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";
describe("input-button-wrapper-mixin", () => {
describe("mouse clicks", () => {
@ -184,21 +188,100 @@ describe("input-button-wrapper-mixin", () => {
);
});
});
// shared checks between components that use input-button-wrapper-mixin
describe("shared checks", () => {
const inputButtonComponents = [listButtonHorizontal, listButton, listCard, radio];
test.each(inputButtonComponents.map((x) => [x.name, x]))(
"%s - should return input type checkbox if isMultiSelect is true",
async (name, inputButtonComponent) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
mockData: {
propsData: {
isMultiSelect: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
}
);
test.each(inputButtonComponents.map((x) => [x.name, x]))(
"%s - return input type radio if isMultiSelect is false or not specified",
async (name, inputButtonComponent) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
}
);
const selectedValues = ["something", ["test"]];
inputButtonComponents.forEach((inputButtonComponent) => {
test.each(selectedValues)(
`${inputButtonComponent.name} with selectedValue %s - should emit button value on click`,
async (selectedValue) => {
// Act
const { wrapper } = setupMocksForComponentsUsingInputButtonWrapperMixin({
component: inputButtonComponent,
mockData: {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
buttonID: "list-card-id",
},
},
});
// Act
wrapper.vm.selectedValue = selectedValue;
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
}
);
});
});
});
function setupBaseInputButtonWrapper({ mockData = {} }) {
const originalData = baseInputButton.data();
baseInputButton.data = () => {
return {
...originalData,
// $route: {
// query: {
// fmgPage: "myPage",
// },
// },
};
};
function setupMocksForComponentsUsingInputButtonWrapperMixin({ mockData, component }) {
const wrapper = mount(component, {
...mockData,
propsData: {
...mockData.propsData,
groupName: "my-group",
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
value: "4",
},
mixins: [inputButtonWrapperMixin],
});
return { wrapper };
}
function setupBaseInputButtonWrapper({ mockData = {} }) {
baseInputButton.methods.pushClickEventToGA = jest.fn();
const baseInputButtonWrapper = {

61
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -3,67 +3,6 @@ import listButtonHorizontal from "./list-button-horizontal";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
describe("list-button-horizontal.vue", () => {
// TODO KO Have this moved out to somewhere shared
describe("Shared baseInputButton checks", () => {
it("Should return input type checkbox if isMultiSelect is true", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: true,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("checkbox");
});
it("Should return input type radio if isMultiSelect is false or not specified", async () => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isMultiSelect: false,
},
},
});
// Assert
const input = wrapper.find("input");
expect(input.attributes().type).toEqual("radio");
});
const selectedValues = ["something", ["test"]]
it.each(selectedValues)("Should emit button value on click", async (selectedValue) => {
// Act
const { wrapper } = setupMocks({
mockData: {
propsData: {
isRadioHorizontal: true,
buttonLabel: "Windshield",
value: "List Card Checkbox",
groupID: "radio-demo-1",
groupName: "radio 1",
buttonImage: "windshield-damage.svg",
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
buttonID: "list-card-id",
},
},
});
// Act
wrapper.vm.selectedValue = selectedValue;
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["update:modelValue"][0][0]).toEqual(selectedValue);
});
});
describe("styling/UI", () => {
it("Should return screen reader text", async () => {
// Act

1
src/ux-components/list-button/list-button.spec.js
View file

@ -27,7 +27,6 @@ describe("list-button.vue", () => {
await wrapper.vm.$nextTick();
// Assert
console.log(wrapper.html())
const loader = wrapper.findComponent({ name: "loader" });
expect(loader.exists()).toBe(true);
});