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

CSR-1088 Added unit tests for modal component

Browse source
This commit is contained in:
Leah Schumann 2023-02-22 09:20:58 -05:00
parent c533cc4357
commit 7af8d9d26e
2 changed files with 15 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,37 +1,28 @@
const veeValidate = require("vee-validate");
jest.mock("vee-validate", () => ({
useForm: jest.fn(),
useIsFormTouched: jest.fn(),
useIsFormDirty: jest.fn(),
useIsFormValid: jest.fn()
useIsFormValid: jest.fn(),
}));
const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
import { shallowMount } from "@vue/test-utils";
import { mount, shallowMount } from "@vue/test-utils";
import Modal from "./modal";
import crypto from "crypto";
import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"
import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate";
const modalId = "modal-one";
const footerButtonText = "Sample footer text here.";
const headerText = "Sample header text here.";
global.crypto = crypto;
describe("modal.vue", () => {
it("Should display modal header text when headerText is defined", async () => {
const wrapper = shallowMount(Modal, {
props: {
modalId: modalId,
footerButtonText: footerButtonText,
headerText: headerText,
footerButtonText: footerButtonText,
},
attachTo: document.body,
});
@ -41,7 +32,6 @@ describe("modal.vue", () => {
it("Should display footer button text when footerButtonText is defined", async () => {
const wrapper = shallowMount(Modal, {
props: {
modalId: modalId,
footerButtonText: footerButtonText,
},
attachTo: document.body,
@ -51,49 +41,43 @@ describe("modal.vue", () => {
it("Should emit 'footer-button-event' if the form is valid", async () => {
useForm.mockReturnValue({
validate: mockValidate(true)
})
validate: mockValidate(true),
});
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(Modal, {
props: {
modalId: modalId,
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
await buttonMain.trigger("click-event");
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 not valid", async () => {
useForm.mockReturnValue({
validate: mockValidate(false)
})
validate: mockValidate(false),
});
const resetButtonStyle = jest.fn();
const wrapper = shallowMount(Modal, {
props: {
modalId: modalId,
footerButtonText: footerButtonText,
headerText: headerText,
},
attachTo: document.body,
});
});
wrapper.vm.resetButtonStyle = resetButtonStyle;
const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
await buttonMain.trigger("click-event");
expect(wrapper.emitted("footer-button-event")).toBeFalsy();
});
});

4
src/digital-components/modal/modal.vue
View file

@ -74,8 +74,8 @@ export default {
};
},
methods: {
async validateAndEmit() {
const validationResult = await this.form.validate();
async validateAndEmit() {
const validationResult = await this.form.validate();
if (validationResult.valid) {
this.$emit("footer-button-event");
}