From 4e86ccec33db93a07fdfc999039fb649947a79af Mon Sep 17 00:00:00 2001 From: brydon1 Date: Fri, 7 Jul 2023 12:18:29 -0400 Subject: [PATCH] Partial test addition --- .eslintrc.js | 64 +++++--- .../contact-details/contact-details.spec.js | 149 ++++++++++++++++++ .../contact-details/contact-details.vue | 20 ++- 3 files changed, 206 insertions(+), 27 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index aa0da332..706c027e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,21 +1,45 @@ -module.exports = { - extends: [ - 'eslint-config-airbnb-base', - 'plugin:vue/vue3-strongly-recommended' - ], - rules: { - 'linebreak-style': 'off', - 'vue/component-definition-name-casing': ['warn', 'kebab-case'], - 'vue/require-default-prop': 'off', - 'vue/attribute-hyphenation': ['warn', 'never'], - 'vue/v-on-event-hyphenation': ['warn', 'never'] - }, - settings: { - 'import/resolver': { - alias: { - map: [['@', './src/']], - extensions: ['.js', '.vue'] - } +module.exports = { + env: { + browser: true, + jest: true + }, + extends: [ + 'eslint-config-airbnb-base', + 'plugin:vue/vue3-recommended' + ], + rules: { + 'linebreak-style': 'off', + 'vue/component-definition-name-casing': ['warn', 'kebab-case'], + 'vue/require-default-prop': 'off', + 'vue/attribute-hyphenation': ['warn', 'never'], + 'vue/v-on-event-hyphenation': ['warn', 'never'], + 'object-curly-newline': ['error', { consistent: true }], + 'function-paren-newline': ['error', 'never'], + 'operator-linebreak': ['error', 'before'], + 'implicit-arrow-linebreak': ['error', 'below'], + 'comma-dangle': ['error', 'never'], + indent: ['error', 4], + 'vue/html-indent': 'off', + 'vue/html-closing-bracket-newline': ['error', { + singleline: 'never', + multiline: 'never' + }], + 'vue/html-self-closing': ['error', { + html: { + void: 'any', + normal: 'any', + component: 'any' + }, + svg: 'always', + math: 'always' + }] + }, + settings: { + 'import/resolver': { + alias: { + map: [['@', './src/']], + extensions: ['.js', '.vue'] + } + } } - } -}; \ No newline at end of file +}; diff --git a/src/layouts/contact-details/contact-details.spec.js b/src/layouts/contact-details/contact-details.spec.js index db058176..f8e5293a 100644 --- a/src/layouts/contact-details/contact-details.spec.js +++ b/src/layouts/contact-details/contact-details.spec.js @@ -1,4 +1,153 @@ // Components 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-generator'; +// 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 + +describe('contactDetails.vue', () => { + describe('Rendering', () => { + test('Should render site header', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); + + // Assert + expect(siteHeader.exists()).toBe(true); + }); + test('Should render sub title', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' }); + + // Assert + expect(siteSubHeader.exists()).toBe(true); + }); + test('Should render first name question subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const firstNameQuestion = wrapper.findComponent({ ref: 'firstNameQuestion' }); + + // Assert + expect(firstNameQuestion.exists()).toBe(true); + }); + test('Should render last name question subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const lastNameQuestion = wrapper.findComponent({ ref: 'lastNameQuestion' }); + + // Assert + expect(lastNameQuestion.exists()).toBe(true); + }); + test('Should render email question subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const emailQuestion = wrapper.findComponent({ ref: 'emailQuestion' }); + + // Assert + expect(emailQuestion.exists()).toBe(true); + }); + test('Should render phone number question subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const phoneNumberQuestion = wrapper.findComponent({ ref: 'phoneNumberQuestion' }); + + // Assert + expect(phoneNumberQuestion.exists()).toBe(true); + }); + test('Should render text updates checkbox subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const textUpdatesCheckbox = wrapper.findComponent({ ref: 'requestTextUpdatesCheckbox' }); + + // Assert + expect(textUpdatesCheckbox.exists()).toBe(true); + }); + test('Should render technician notes textarea question subcomponent', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const notesQuestion = wrapper.findComponent({ ref: 'notesQuestion' }); + + // Assert + expect(notesQuestion.exists()).toBe(true); + }); + test.only('Should render disclaimer text', () => { + // Arrange + const disclaimerText = 'the disclaimer.'; + const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => + disclaimerText) + } + }; + const mountOptions = getMountOptions(); + mountOptions.mixins = [mockMixin]; + const wrapper = shallowMount(contactDetails, mountOptions); + wrapper.vm.setCmsContent = jest.fn(); + const expectedDisclaimerText = `*${disclaimerText} I also agree to Safelite\'s`; + + // Act + const componentText = wrapper.text(); + + // Assert + expect(componentText).toContain(expectedDisclaimerText); + }); + test('Should render privacy policy link', () => {}); + test('Should render terms of use link', () => {}); + test('Should render site footer', () => { + // Arrange + const wrapper = shallowMount(contactDetails, getMountOptions()); + + // Act + const footer = wrapper.findComponent({ ref: 'siteFooter' }); + + // Assert + expect(footer.exists()).toBe(true); + }); + test('Existing store data yields expected render', () => { + // 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 + + // expect(wrapper.element).toMatchSnapshot(); + }); + }); + + 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', () => {}); + }); +}); diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue index e32c3128..96aed43f 100644 --- a/src/layouts/contact-details/contact-details.vue +++ b/src/layouts/contact-details/contact-details.vue @@ -6,14 +6,17 @@ @invalidSubmit="onInvalidSubmit">
- +
-

+

{{ textUpdateDisclaimerText }} I also agree to Safelite's