139 lines
4.5 KiB
JavaScript
139 lines
4.5 KiB
JavaScript
import { mount } from "@vue/test-utils";
|
|
import listButtonHorizontal from "./list-button-horizontal";
|
|
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
|
|
|
describe("list-button-horizontal.vue", () => {
|
|
describe("styling/UI", () => {
|
|
it("Should return screen reader text", async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
screenReaderOnlyText: "Screen Reader Only Text",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const paragraph = wrapper.find("span.sr-only");
|
|
|
|
expect(paragraph.text()).toEqual("Screen Reader Only Text");
|
|
});
|
|
|
|
it("Should return text alignment class", async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
textPosition: "text-center",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const paragraph = wrapper.find("span.m-0");
|
|
|
|
expect(paragraph.attributes("class")).toContain("text-center");
|
|
});
|
|
|
|
it("Should return aria-required state", async () => {
|
|
// Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
isRequired: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const input = wrapper.find("input");
|
|
|
|
expect(input.attributes()["aria-required"]).toEqual("true");
|
|
});
|
|
|
|
it("is cash or insurance button => has 'strong' class", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
additionalButtonStyling: "listButtonHorizontalStrong",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const label = wrapper.find("label");
|
|
|
|
expect(label.classes()).toContain("strong");
|
|
});
|
|
|
|
test("has buttonLabel => displays buttonLabel", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: "Surprise!",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find(".list-button-horizontal-content");
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(content.text()).toContain("Surprise!");
|
|
});
|
|
|
|
test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: "Surprise!",
|
|
buttonLabelSubCopy: "Super duper surprise :)",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find(".list-button-horizontal-content");
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(content.text()).toContain("Super duper surprise :)");
|
|
});
|
|
|
|
test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
|
|
// Arrange/Act
|
|
const { wrapper } = setupMocks({
|
|
mockData: {
|
|
propsData: {
|
|
buttonLabel: "Surprise!",
|
|
buttonLabelSubCopy: "Super duper surprise :)",
|
|
screenReaderOnlyText: "Tests are fun!",
|
|
},
|
|
},
|
|
});
|
|
|
|
// Assert
|
|
const content = wrapper.find(".list-button-horizontal-content");
|
|
const screenReaderOnlyText = wrapper.find(".sr-only");
|
|
expect(content.isVisible()).toBe(true);
|
|
expect(screenReaderOnlyText.exists()).toBe(true);
|
|
expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
|
|
});
|
|
});
|
|
});
|
|
|
|
function setupMocks({ mockData }) {
|
|
const wrapper = mount(listButtonHorizontal, {
|
|
...mockData,
|
|
propsData: {
|
|
...mockData.propsData,
|
|
groupName: "my-group",
|
|
modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
|
|
value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
|
|
},
|
|
mixins: [inputButtonWrapperMixin],
|
|
});
|
|
|
|
return { wrapper };
|
|
}
|