adding unit tests for contact-details-drawer
This commit is contained in:
Michaela Brydon
parent
53eab888d5
commit
110fdd7ba0
4 changed files with 174 additions and 3 deletions
|
|
@ -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",
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -6,12 +6,11 @@
|
|||
:onModalClosedCallback="resetFormValues"
|
||||
class="contact-details-drawer"
|
||||
@isModalOpened="setModalStatus"
|
||||
@footerButtonEvent="saveContactDetails">
|
||||
@footerButtonEvent="clickFooterButtonEvent">
|
||||
<template v-if="isModalOpened">
|
||||
<textboxQuestion
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
class=""
|
||||
inputId="firstName"
|
||||
:cmsWidgetName="widget.firstNameQuestion"
|
||||
isRequired
|
||||
|
|
@ -106,6 +105,10 @@ export default {
|
|||
setModalStatus(isOpened) {
|
||||
this.isModalOpened = isOpened;
|
||||
},
|
||||
clickFooterButtonEvent() {
|
||||
this.saveContactDetails();
|
||||
this.closeModal();
|
||||
},
|
||||
saveContactDetails() {
|
||||
const contactInfo = {
|
||||
firstName: this.firstName,
|
||||
|
|
@ -115,7 +118,6 @@ export default {
|
|||
};
|
||||
useMainStore().updateContactInfo(contactInfo);
|
||||
this.$emit('update-contact-details');
|
||||
this.closeModal();
|
||||
},
|
||||
resetFormValues() {
|
||||
const { firstName,
|
||||
|
|
|
|||
|
|
@ -299,6 +299,16 @@ describe('tpa-submit', () => {
|
|||
expect(siteFooter.props().cmsWidgetName).toBe('SiteFooterWidget');
|
||||
expect(siteFooter.classes()).toContain('mt-5');
|
||||
});
|
||||
test('contact details drawer', () => {
|
||||
// Arrange
|
||||
const wrapper = shallowMount(tpaSubmit, getMountOptions());
|
||||
|
||||
// Act
|
||||
const contactDetailsDrawer = wrapper.findComponent({ ref: 'contactDetailsDrawer' });
|
||||
|
||||
// Assert
|
||||
expect(contactDetailsDrawer.exists()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
describe('before route enter', () => {
|
||||
test('produces 4 sections', async () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue