From 110fdd7ba06892ee3e4b47828eb728ce0d99a27c Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Thu, 25 Jan 2024 12:01:23 -0500 Subject: [PATCH] adding unit tests for contact-details-drawer --- .../contact-details-drawer.spec.js.snap | 25 ++++ .../contact-details-drawer.spec.js | 134 ++++++++++++++++++ .../contact-details-drawer.vue | 8 +- src/layouts/tpa-submit/tpa-submit.spec.js | 10 ++ 4 files changed, 174 insertions(+), 3 deletions(-) create mode 100644 src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap diff --git a/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap new file mode 100644 index 00000000..3b814991 --- /dev/null +++ b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`contact-details-drawer snapshot matches returns the initial data 1`] = ` +Object { + "emailAddress": "fred.tay@gmail.com", + "firstName": "Frederick", + "isModalOpened": false, + "lastName": "Taylor", + "phoneNumber": "606-009-2943", + "rules": Object { + "emailAddress": "email-required|email-address-format", + "firstName": "first-name-required", + "lastName": "last-name-required", + "phoneNumber": "phone-number-required|phone-number-format", + }, + "widget": Object { + "drawerFooter": "ContactDetailsDrawerFooterWidget", + "emailQuestion": "EmailQuestionWidget", + "firstNameQuestion": "FirstNameQuestionWidget", + "lastNameQuestion": "LastNameQuestionWidget", + "phoneNumberQuestion": "PhoneNumberQuestionWidget", + "title": "ContactDetailsDrawerHeaderWidget", + }, +} +`; diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js index e69de29b..e814af3d 100644 --- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js +++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js @@ -0,0 +1,134 @@ +// Components +import { shallowMount } from '@vue/test-utils'; +import { createTestingPinia } from '@pinia/testing'; +import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue'; + +// Supporting Files +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store'; + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + } + }); + + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + methodToRunAfterInitializingStore(); + + mountOptions.global.plugins = [testingPinia]; + mountOptions.data = () => (initialData); + + const wrapper = shallowMount(contactDetailsDrawer, mountOptions); + return { wrapper }; +} + +describe('contact-details-drawer', () => { + test('snapshot matches returns the initial data', () => { + // Arrange + const firstName = 'Frederick'; + const lastName = 'Taylor'; + const emailAddress = 'fred.tay@gmail.com'; + const phoneNumber = '606-009-2943'; + const mainInitialState = { + order: { + contactInfo: { + firstName, + lastName, + emailAddress, + phoneNumber + } + } + }; + const { wrapper } = getMountedComponent(mainInitialState); + + // Assert + expect(wrapper.vm.$data).toMatchSnapshot(); + }); + test('renders modal', () => { + // Arrange + const wrapper = shallowMount(contactDetailsDrawer, getMountOptions()); + + // Act + const modal = wrapper.findComponent({ ref: 'contact-details-modal' }); + + // Assert + expect(modal.exists()).toBeTruthy(); + expect(modal.classes()).toContain('contact-details-drawer'); + }); + describe('method', () => { + describe('saveContactDetails', () => { + test.each([ + ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'], + [null, 'Jones', 's.jones@gmail.com', '724-996-0909'], + ['Sarah', null, 's.jones@gmail.com', '724-996-0909'], + ['Sarah', 'Jones', null, '724-996-0909'], + ['Sarah', 'Jones', 's.jones@gmail.com', null] + + ])( + 'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected', + (firstName, lastName, emailAddress, phoneNumber) => { + // Arrange + const mainInitialState = { + order: { + contactInfo: { + firstName: 'Frederick', + lastName: 'Taylor', + emailAddress: 'fred.tay@gmail.com', + phoneNumber: '606-009-2943' + } + } + }; + const initialData = { + firstName, lastName, emailAddress, phoneNumber + }; + const { wrapper } = getMountedComponent(mainInitialState, initialData); + + // Act + wrapper.vm.saveContactDetails(); + + // Assert + expect(wrapper.emitted()['update-contact-details']).toBeTruthy(); + expect(useMainStore().updateContactInfo).toBeCalledTimes(1); + expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress, phoneNumber }); + } + ); + }); + test('resetFormValues sets data to expected values', () => { + // Arrange + const firstName = 'John'; + const lastName = 'Doe'; + const emailAddress = 'test@example.com'; + const phoneNumber = '123-456-1234'; + const mainInitialState = { + order: { + contactInfo: { + firstName, + lastName, + emailAddress, + phoneNumber + } + } + }; + const initialData = { + firstName: 'some name', + lastName: 'some end name', + emailAddress: 'email@what.com', + phoneNumber: '888' + }; + const { wrapper } = getMountedComponent(mainInitialState, initialData); + + // Act + wrapper.vm.resetFormValues(); + + // Assert + expect(wrapper.vm.firstName).toBe(firstName); + }); + }); +}); diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue index 69e4cb95..7fb5831e 100644 --- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue +++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue @@ -6,12 +6,11 @@ :onModalClosedCallback="resetFormValues" class="contact-details-drawer" @isModalOpened="setModalStatus" - @footerButtonEvent="saveContactDetails"> + @footerButtonEvent="clickFooterButtonEvent">