diff --git a/src/layouts/endorsements-page/endorsements-page.spec.js b/src/layouts/endorsements-page/endorsements-page.spec.js new file mode 100644 index 00000000..119bba29 --- /dev/null +++ b/src/layouts/endorsements-page/endorsements-page.spec.js @@ -0,0 +1,111 @@ +// Components +import endorsementsPage from '@/layouts/endorsements-page/endorsements-page.vue'; + +// Supporting Files +import { shallowMount } from '@vue/test-utils'; +import { getMountOptions } from '@/helpers/unit-test-helper.js'; +import navigationScenarios from '@/router/router-constants/navigation-scenarios'; +import { createTestingPinia } from '@pinia/testing'; +import { getRandomString, getRandomInt } from '@/helpers/data-generation.js'; +import { useMainStore } from '@/store'; + +// import { useMainStore } from '@/store/index.js'; + +describe('endorsementsPage.vue', () => { + describe('Rendering', () => { + test('Should render site header', () => { + // Arrange + const wrapper = shallowMount(endorsementsPage, getMountOptions()); + + // Act + const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); + + // Assert + expect(siteHeader.exists()).toBe(true); + }); + test('Should render site subheader', () => { + // Arrange + const wrapper = shallowMount(endorsementsPage, getMountOptions()); + + // Act + const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' }); + + // Assert + expect(siteSubHeader.exists()).toBe(true); + }); + test('Should render buttonQuestion component', () => { + // Arrange + const wrapper = shallowMount(endorsementsPage, getMountOptions()); + + // Act + const buttonQuestion = wrapper.findComponent({ ref: 'endorsementQuestion' }); + + // Assert + expect(buttonQuestion.exists()).toBe(true); + }); + test('Should render site footer', () => { + // Arrange + const wrapper = shallowMount(endorsementsPage, getMountOptions()); + + // Act + const siteFooter = wrapper.findComponent({ ref: 'siteFooter' }); + + // Assert + expect(siteFooter.exists()).toBe(true); + }); + }); + describe('Navigation', () => { + test('Back button clicked triggers navigation', () => { + // Arrange + const wrapper = shallowMount(endorsementsPage, 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(endorsementsPage, getMountOptions({ + router: { + navigate: jest.fn() + } + })); + + // Act + wrapper.vm.forwardButtonAction(); + wrapper.vm.navigateForward(); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + expect(wrapper.vm.$router.navigate) + .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined); + }); + // *TO DO: once service is ready, revise this test to ensure data is saved to the store + test('Forward button clicked saves endorsement question answers', () => { + // Arrange + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + }, + global: { + plugins: [createTestingPinia()] + } + }); + const wrapper = shallowMount(endorsementsPage, mountOptions); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(useMainStore().saveEndorsementQuestionAnswers).toHaveBeenCalled(); + }); + }); +}); diff --git a/src/layouts/endorsements-page/endorsements-page.vue b/src/layouts/endorsements-page/endorsements-page.vue index de2ee33b..4b779dca 100644 --- a/src/layouts/endorsements-page/endorsements-page.vue +++ b/src/layouts/endorsements-page/endorsements-page.vue @@ -6,12 +6,16 @@ @invalidSubmit="onInvalidSubmit">