From 48ad8f92b73a629d37d5a9d7ea264ddcd86e7f5d Mon Sep 17 00:00:00 2001 From: brydon1 Date: Fri, 7 Jul 2023 20:47:21 -0400 Subject: [PATCH] Finishing contact details tests --- .../contact-details/contact-details.spec.js | 90 ++++++++++++++----- 1 file changed, 66 insertions(+), 24 deletions(-) diff --git a/src/layouts/contact-details/contact-details.spec.js b/src/layouts/contact-details/contact-details.spec.js index 4f690197..f55bc6cc 100644 --- a/src/layouts/contact-details/contact-details.spec.js +++ b/src/layouts/contact-details/contact-details.spec.js @@ -4,12 +4,9 @@ import contactDetails from '@/layouts/contact-details/contact-details.vue'; // Supporting Files import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper'; -import { getRandomString } from '@/helpers/data-generation'; -// import { useMainStore } from '@/store'; -// import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; -// import { nextTick } from 'vue'; -// import baseMixin from '../../mixins/base-mixin'; -// TODO finish this file +import { getRandomString, getRandomInt } from '@/helpers/data-generation'; +import { createTestingPinia } from '@pinia/testing'; +import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; describe('contactDetails.vue', () => { describe('Rendering', () => { @@ -156,29 +153,74 @@ describe('contactDetails.vue', () => { // Assert expect(footer.exists()).toBe(true); }); - test('Existing store data yields expected render', () => { + test('Mocked store yields expected data', () => { // Arrange - // const wrapper = shallowMount(contactDetails); - // set up mock store to contain values for firstname,lastname, email and phone number - // set up mock cms content - // Assert + const mountOptions = getMountOptions(); - // expect(wrapper.element).toMatchSnapshot(); + const firstName = getRandomString(4, 15); + const lastName = getRandomString(4, 15); + const emailAddress = getRandomString(10, 20); + const phoneNumber = getRandomInt(1000000000, 9999999999); + const mainInitialState = { + order: { + customer: { + firstName, + lastName, + emailAddress, + phoneNumber + } + } + }; + mountOptions.global = { + plugins: [createTestingPinia({ + initialState: { + main: mainInitialState + } + })] + }; + + const wrapper = shallowMount(contactDetails, mountOptions); + + // Assert + expect(wrapper.vm.firstName).toBe(firstName); + expect(wrapper.vm.lastName).toBe(lastName); + expect(wrapper.vm.email).toBe(emailAddress); + expect(wrapper.vm.phoneNumber).toBe(phoneNumber); }); }); - // move error tests - describe('Errors', () => { - test('Error rendered when first name cleared', () => {}); - test('Error rendered when last name cleared', () => {}); - test('Error rendered when email cleared', () => {}); - test('Error rendered when email wrong syntax', () => {}); - test('Error rendered when phone number cleared', () => {}); - test('Error rendered when phone number wrong syntax', () => {}); - }); - describe('Navigation', () => { - test('Back button clicked triggers navigation', () => {}); - test('Forward button clicked triggers navigation', () => {}); + test('Back button clicked triggers navigation', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions({ + router: { + navigate: jest.fn() + } + })); + + // Act + wrapper.vm.backButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + expect(wrapper.vm.$router.navigate) + .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined); + }); + test('Forward button clicked triggers navigation', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions({ + router: { + navigate: jest.fn() + } + })); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + expect(wrapper.vm.$router.navigate) + .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined); + }); }); });