Partial test addition
This commit is contained in:
brydon1
parent
c05ff7b35a
commit
4e86ccec33
3 changed files with 206 additions and 27 deletions
64
.eslintrc.js
64
.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']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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', () => {});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,14 +6,17 @@
|
|||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="container-fluid pb-2">
|
||||
<siteSubHeader
|
||||
id="sub-header"
|
||||
ref="siteSubHeader"
|
||||
class="margin-top-16"
|
||||
cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<textboxQuestion
|
||||
ref="firstName"
|
||||
ref="firstNameQuestion"
|
||||
v-model="firstName"
|
||||
class="margin-top-24"
|
||||
inputId="firstName"
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
isRequired
|
||||
validationRules="first-name-required" />
|
||||
<textboxQuestion
|
||||
ref="lastName"
|
||||
ref="lastNameQuestion"
|
||||
v-model="lastName"
|
||||
class="margin-top-16"
|
||||
inputId="lastName"
|
||||
|
|
@ -29,7 +32,7 @@
|
|||
isRequired
|
||||
validationRules="last-name-required" />
|
||||
<textboxQuestion
|
||||
ref="email"
|
||||
ref="emailQuestion"
|
||||
v-model="email"
|
||||
class="margin-top-16"
|
||||
inputId="email"
|
||||
|
|
@ -37,7 +40,7 @@
|
|||
isRequired
|
||||
validationRules="email-address-required|email-address-format" />
|
||||
<textboxQuestion
|
||||
ref="firstName"
|
||||
ref="phoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
class="margin-top-16"
|
||||
inputId="phoneNumber"
|
||||
|
|
@ -45,7 +48,7 @@
|
|||
isRequired
|
||||
validationRules="phone-number-required|phone-number-format" />
|
||||
<checkbox
|
||||
ref="requestTextUpdates"
|
||||
ref="requestTextUpdatesCheckbox"
|
||||
v-model="requestTextUpdates"
|
||||
class="margin-top-8"
|
||||
checkboxName="requestTextUpdates"
|
||||
|
|
@ -53,6 +56,7 @@
|
|||
:checkboxLabel="textContentText" />
|
||||
|
||||
<textareaQuestion
|
||||
ref="notesQuestion"
|
||||
v-model="notesForTechnician"
|
||||
class="margin-top-16"
|
||||
inputId="technicianNotes"
|
||||
|
|
@ -63,7 +67,9 @@
|
|||
maxLength="500"
|
||||
inputRows="30" />
|
||||
|
||||
<p class="disclaimer margin-top-24">
|
||||
<p
|
||||
ref="disclaimerText"
|
||||
class="disclaimer margin-top-24">
|
||||
{{ textUpdateDisclaimerText }} I also agree to Safelite's
|
||||
<textLink
|
||||
class="disclaimer-link"
|
||||
|
|
|
|||
Loading…
Reference in a new issue