diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 56a73881..65526ce9 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -99,6 +99,10 @@ const endpoints = Object.freeze({ url: '/vehicle/api/v1/vehicle/lookup', method: 'GET' }, + GetAccountInfo: { + url: '/account/api/v1/account/', + method: 'GET' + }, LogExperimentExposureIfAssigned: { url: '/experiments/api/v1/experiments/log-exposure', method: 'POST' diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap new file mode 100644 index 00000000..f0fe9808 --- /dev/null +++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`cart-dropdown component initial data rendered as expected 1`] = ` +Object { + "currencyFormatter": NumberFormat {}, + "isExpanded": false, + "widget": Object { + "amountDue": "AmountDueTextWidget", + }, +} +`; diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js new file mode 100644 index 00000000..e55bdc36 --- /dev/null +++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js @@ -0,0 +1,159 @@ +import { shallowMount } from '@vue/test-utils'; +import { createTestingPinia } from '@pinia/testing'; +import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; + +// Supporting Files +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store'; + +function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + } + }); + + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + + mountOptions.global.plugins = [testingPinia]; + mountOptions.data = () => (initialData); + mountOptions.propsData = propsData; + + const wrapper = shallowMount(cartDropdown, mountOptions); + wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {}); + wrapper.vm.setCmsContent = jest.fn(); + return { wrapper }; +} + +describe('cart-dropdown component', () => { + test('initial data rendered as expected', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Assert + expect(wrapper.vm.$data).toMatchSnapshot(); + }); + describe('displays', () => { + test('cart dropdown head', () => { + // Arrange + const reference = '#cart-dropdown-head'; + const { wrapper } = getMountedComponent(cartDropdown); + + // Act + const head = wrapper.find(reference); + + // Assert + expect(head.exists()).toBeTruthy(); + }); + test('cart table', () => { + // Arrange + const reference = '#cart-table'; + const isExpanded = true; + const initialData = { isExpanded }; + const { wrapper } = getMountedComponent(cartDropdown, {}, initialData); + + // Act + const cartTable = wrapper.find(reference); + + // Assert + expect(cartTable.exists()).toBeTruthy(); + }); + }); + describe('computed', () => { + test.each([ + [true, true], + [false, false], + [false, null] + ])('isVerified returns %p when isVerified store value is %p', (expected, isVerified) => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { isVerified } + } + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isVerified; + + // Assert + expect(result).toBe(expected); + }); + describe('amountDueDisplayed', () => { + test('returns verifying coverage text when isVerified false', () => { + // Arrange + const VERIFYING_COVERAGE = 'Verifying coverage'; + const storeData = { + order: { + payment: { + insuranceCoverage: { + isVerified: false + } + } + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.amountDueDisplayed; + + // Assert + expect(result).toBe(VERIFYING_COVERAGE); + }); + test('returns formatted amount due when isVerified false', () => { + // TODO finish when methods done + }); + }); + describe('amountDue', () => { + test('returns 0 when showAsPaid is true', () => { + // Arrange + const propsData = { + showAsPaid: true + }; + const { wrapper } = getMountedComponent({}, {}, propsData); + + // Act + const result = wrapper.vm.amountDue; + + // Assert + expect(result).toBe(0); + }); + test('returns sum of subTotal and salesTax when showAsPaid is false', () => { + // TODO when subTotal and salesTax are finished + }); + }); + describe('subTotal', () => { + // TODO when method implemented + }); + describe('salesTax', () => { + // TODO when method implemented + }); + }); + describe('method', () => { + test.each([ + ['$0.00', 0], + ['$12.00', 12], + ['$12.30', 12.3], + ['$12.34', 12.34], + ['$12.35', 12.345], + ['$12.34', 12.344], + ['-$1.00', -1] + ])('get FormattedAmount returns `%` when amount %', (expected, amount) => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Act + const result = wrapper.vm.getFormattedAmount(amount); + + // Assert + expect(result).toBe(expected); + }); + }); +}); diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue new file mode 100644 index 00000000..9ebfa58d --- /dev/null +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js new file mode 100644 index 00000000..fe981266 --- /dev/null +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -0,0 +1,131 @@ +// Components +import orderConfirmation from '@/layouts/order-confirmation/order-confirmation.vue'; + +// Supporting Files +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import { useMainStore } from '@/store/index.js'; +import settleAllPromises from '@/helpers/layout-helper.js'; +import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; +import { mount } from '@vue/test-utils'; +import { createTestingPinia } from '@pinia/testing'; + +jest.mock('@/helpers/layout-helper.js', () => jest.fn()); + +jest.mock('@/helpers/cms-content-helper', () => ({ + fetchCmsContentForPage: jest.fn() +})); + +const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => ''), + setCmsContent: jest.fn() + } +}; + +const footerStub = { + render: () => {}, + methods: { + updateButtonText: jest.fn() + } +}; + +const headerStub = { + render: () => {} +}; + +function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) { + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn(), + navigateToExternalUrl: jest.fn() + } + }); + + mountOptions.global.stubs = { + siteFooter: footerStub, + siteHeader: headerStub + }; + + const testingPinia = createTestingPinia({ + initialState: { + main: mainInitialState + } + }); + useMainStore(testingPinia); + methodToRun(); + + mountOptions.global.plugins = [testingPinia]; + mountOptions.mixins = [mockMixin]; + mountOptions.data = () => ( + initialData + ); + + const apiResponses = { + supportingItems: [] + }; + const apiPromise = Promise.resolve(apiResponses); + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const wrapper = mount(orderConfirmation, mountOptions); + return { wrapper }; +} + +describe('OrderConfirmation.vue', () => { + describe('Rendering', () => { + test('Should render Site Header', () => { + // Arrange + const { wrapper } = getMountedComponent({}); + + // Act + const siteHeader = wrapper.findComponent(headerStub); + + // Assert + expect(siteHeader.exists()).toBe(true); + }); + test('If Advanced flow, should display Site Footer', () => { + // Arrange + const carrierReturnUrl = 'testURL'; + const initialStore = { + issConfig: { + successReturnURL: carrierReturnUrl + } + }; + const { wrapper } = getMountedComponent(initialStore); + + // Act + const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); + + // Assert + expect(siteFooter.exists()).toBe(true); + }); + test('If Essential flow, should not display Site Footer', () => { + // Arrange + const { wrapper } = getMountedComponent(); + + // Act + const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); + + // Assert + expect(siteFooter.isVisible()).toBe(false); + }); + }); + describe('Navigation', () => { + test('If Advanced flow, forward button action navigates to carrier URL', () => { + // Arrange + const carrierReturnUrl = 'testURL'; + const initialStore = { + issConfig: { + successReturnURL: carrierReturnUrl + } + }; + const { wrapper } = getMountedComponent(initialStore); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigateToExternalUrl).toHaveBeenCalledWith(carrierReturnUrl); + }); + }); +}); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 21abb3cf..63b028eb 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -7,14 +7,16 @@
-
+

Placeholder for order confirmation page

+ v-if="carrierUrl" + ref="siteFooter" + cmsWidgetName="SiteFooterWidget" + :isStackedVertically="true" + :isForwardActionDisabled="!meta.valid" + @ForwardClicked="forwardButtonAction" + @backClicked="navigateBack" />
@@ -29,6 +31,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import { Form } from 'vee-validate'; import BaseFormMixin from '@/mixins/base-form-mixin.js'; +import { useMainStore } from '@/store'; export default { name: 'order-confirmation', @@ -54,17 +57,38 @@ export default { vm.setCmsContent(resultMap.cmsContent); }); }, - methods: - { - forwardButtonAction() { - return this.navigateForward(); - }, - navigateForward() { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD, - this.$route - ); - } + setup() { + const mainStore = useMainStore(); + return { mainStore }; + }, + computed: { + carrierName() { + return this.mainStore.issConfig.clientName; + }, + carrierUrl() { + return this.mainStore.issConfig.successReturnURL; } + }, + mounted() { + if (this.carrierUrl) { + this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`); + } + }, + methods: { + forwardButtonAction() { + this.$router.navigateToExternalUrl(this.carrierUrl); + } + } }; + diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 5d50380d..8b03a875 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -19,8 +19,10 @@

-
Cart Placeholder
-
+ +
Pia Alert Placeholder
-
+
{ }, techNotes: '' }, - customer: { + contactInfo: { firstName: 'first', lastName: 'last', emailAddress: 'builddigitaltest@safelite.com', - phoneNumber: '555-555-5555', - isSmsOptIn: false + phoneNumber: '555-555-5555' }, damage: { isRepair: false, diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue index 36f072c6..7612e842 100644 --- a/src/layouts/payment-page/payment-page.vue +++ b/src/layouts/payment-page/payment-page.vue @@ -38,71 +38,191 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +