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

Updated Textbox Question and Dropdown Question unit tests

Browse source
This commit is contained in:
Leah Schumann 2023-02-22 11:39:13 -05:00
parent 7af8d9d26e
commit 96fec12f94
3 changed files with 137 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/digital-components/dropdown-question/dropdown-question.spec.js
View file

@ -1,5 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
import crypto from "crypto";
// Mock CMS content
const questionText = "Question Text";
@ -11,6 +12,8 @@ const mockMixin = {
},
};
global.crypto = crypto;
// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
// It is not being used.
describe("dropdownQuestion.vue", () => {
@ -46,23 +49,6 @@ describe("dropdownQuestion.vue", () => {
expect(label.text()).toContain(questionText);
});
it("Should return input id as the id of the select field", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
inputId: "input ID",
options: {},
},
mixins: [mockMixin],
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
@ -118,7 +104,7 @@ describe("dropdownQuestion.vue", () => {
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
modelValue: 0,
modelValue: "0",
},
mixins: [mockMixin],
});

137
src/digital-components/modal/modal.spec.js
View file

@ -7,10 +7,11 @@ jest.mock("vee-validate", () => ({
const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
import { mount, shallowMount } from "@vue/test-utils";
import Modal from "./modal";
import { shallowMount } from "@vue/test-utils";
import modal from "./modal";
import crypto from "crypto";
import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate";
import { Modal } from "bootstrap";
const footerButtonText = "Sample footer text here.";
const headerText = "Sample header text here.";
@ -19,33 +20,40 @@ global.crypto = crypto;
describe("modal.vue", () => {
it("Should display modal header text when headerText is defined", async () => {
const wrapper = shallowMount(Modal, {
// Arrange / Act
const wrapper = shallowMount(modal, {
props: {
headerText: headerText,
footerButtonText: footerButtonText,
},
attachTo: document.body,
});
// Assert
expect(wrapper.html()).toEqual(expect.stringContaining(headerText));
});
it("Should display footer button text when footerButtonText is defined", async () => {
const wrapper = shallowMount(Modal, {
// Arrange / Act
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
},
attachTo: document.body,
});
// Assert
expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
});
it("Should emit 'footer-button-event' if the form is valid", async () => {
// Arrange
useForm.mockReturnValue({
validate: mockValidate(true),
});
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(Modal, {
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
@ -54,19 +62,22 @@ describe("modal.vue", () => {
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Act
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
await buttonMain.trigger("click-event");
// Assert
expect(wrapper.emitted("footer-button-event")).toBeTruthy();
});
it("Should not emit 'footer-button-event' if the form is not valid", async () => {
it("Should not emit 'footer-button-event' if the form is invalid", async () => {
// Arrange
useForm.mockReturnValue({
validate: mockValidate(false),
});
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(Modal, {
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
@ -75,9 +86,121 @@ describe("modal.vue", () => {
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Act
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
await buttonMain.trigger("click-event");
// Assert
expect(wrapper.emitted("footer-button-event")).toBeFalsy();
});
it("Should have a disabled footer button when the form has not been touched", async () => {
// Arrange / Act
useForm.mockReturnValue({
validate: mockValidate(false),
});
useIsFormTouched.mockReturnValue(false);
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Assert
expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
});
it("Should have a disabled footer button when the form is invalid", async () => {
// Arrange / Act
useForm.mockReturnValue({
validate: mockValidate(false),
});
useIsFormTouched.mockReturnValue(true);
useIsFormDirty.mockReturnValue(true);
useIsFormValid.mockReturnValue(false);
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Assert
expect(wrapper.vm.isFooterButtonDisabled).toBe(true);
});
it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => {
// Arrange
useForm.mockReturnValue({
validate: mockValidate(false),
});
useIsFormDirty.mockReturnValue(true);
useIsFormValid.mockReturnValue(true);
const showMock = jest
.spyOn(Modal.prototype, "show");
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Act
wrapper.vm.openModal();
// Assert
expect(showMock).toHaveBeenCalled();
});
it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => {
// Arrange
useForm.mockReturnValue({
validate: mockValidate(false),
});
useIsFormDirty.mockReturnValue(true);
useIsFormValid.mockReturnValue(true);
const hideMock = jest
.spyOn(Modal.prototype, "hide");
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(modal, {
props: {
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
// Act
wrapper.vm.openModal();
wrapper.vm.closeModal();
// Assert
expect(hideMock).toHaveBeenCalled();
});
});

24
src/digital-components/textbox-question/textbox-question.spec.js
View file

@ -1,5 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import textboxQuestion from "./textbox-question";
import crypto from "crypto";
// Mock CMS content
const questionText = "Question Text";
@ -12,6 +13,8 @@ const mockMixin = {
};
const maska = jest.fn();
global.crypto = crypto;
describe("textboxQuestion.vue", () => {
it("Should render a text input", async () => {
// Arrange
@ -73,27 +76,6 @@ describe("textboxQuestion.vue", () => {
expect(paragraph.attributes("class")).toContain("form-control");
});
it("Should return input id as the id of the input field", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
},
},
propsData: {
inputId: "input ID",
},
mixins: [mockMixin],
});
// Act
const input = wrapper.find("input");
// Assert
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {