Fix failing tests

This commit is contained in:
Alex Humphries 2026-01-16 17:40:16 -05:00
parent 1402137bbc
commit f8a0de9599
6 changed files with 204 additions and 147 deletions

View file

@ -314,7 +314,6 @@ describe('Google Map', () => {
// Arrange
const wrapper = shallowMount(googleMap, {});
await awaitingSetupTicks(wrapper);
const numberOfExtendCallsDuringMount = 2;
mockGeocode.mockImplementation(() => {
const result = {
@ -329,7 +328,7 @@ describe('Google Map', () => {
const result = wrapper.vm.getBounds(locations);
// Assert
expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCallsDuringMount + numberOfExtendCallsPostMount);
expect(mockExtend).toHaveBeenCalledTimes(numberOfExtendCallsPostMount);
expect(result).toBe(mockLatLngBound);
}
);

View file

@ -2,13 +2,13 @@
exports[`Shop list button should render correctly with all relevant props 1`] = `
<transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true" selectedvalue="selected value">
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" buttonlabel="Label of button" buttonlabelsubcopy="Sub copy of button" buttonbodycopy="button body copy" screenreaderonlytext="screen reader only text" additionalbuttondata="[object Object]" alttext="" iswide="false" value="1234"></base-input-button-stub>
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" buttonlabel="Label of button" buttonlabelsubcopy="Sub copy of button" buttonbodycopy="button body copy" screenreaderonlytext="screen reader only text" additionalbuttondata="[object Object]" alttext="" iswide="false" value="1234"></base-input-button-stub>
</transition-stub>
`;
exports[`Shop list button should render correctly with required props 1`] = `
<transition-stub name="fade" mode="out-in" appear="false" persisted="false" css="true">
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" alttext="" iswide="false" value="1234"></base-input-button-stub>
<base-input-button-stub modelvalue="value of modal" groupname="name of group" buttonwrapperclasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2" ismultiselect="false" validationrules="" isrequired="true" selectinginitiatesload="false" suppresserror="false" alttext="" iswide="false" value="1234"></base-input-button-stub>
</transition-stub>
`;

View file

@ -149,10 +149,9 @@ describe('Shop list button', () => {
// Assert
expect(buttonLabelSubCopy.exists()).toBeTruthy();
expect(buttonLabelSubCopy.classes().length).toBe(4);
expect(buttonLabelSubCopy.classes().length).toBe(3);
expect(buttonLabelSubCopy.classes()).toContain('m-0');
expect(buttonLabelSubCopy.classes()).toContain('caption');
expect(buttonLabelSubCopy.classes()).toContain('ms-2');
expect(buttonLabelSubCopy.classes()).toContain('button-label-sub-copy');
expect(buttonLabelSubCopy.classes()).toContain(textPosition);
});
test('when "textPosition" prop not provided', async () => {
@ -173,10 +172,9 @@ describe('Shop list button', () => {
// Assert
expect(buttonLabelSubCopy.exists()).toBeTruthy();
expect(buttonLabelSubCopy.classes().length).toBe(3);
expect(buttonLabelSubCopy.classes().length).toBe(2);
expect(buttonLabelSubCopy.classes()).toContain('m-0');
expect(buttonLabelSubCopy.classes()).toContain('caption');
expect(buttonLabelSubCopy.classes()).toContain('ms-2');
expect(buttonLabelSubCopy.classes()).toContain('button-label-sub-copy');
});
});
describe('availability indicator block with expected when displayAvailabilityIndicators true', () => {
@ -378,8 +376,7 @@ describe('Shop list button', () => {
// Assert
expect(buttonBodyCopy.exists()).toBeTruthy();
expect(buttonBodyCopy.classes()).toContain('m-0');
expect(buttonBodyCopy.classes()).toContain('button-label-sub-copy');
expect(buttonBodyCopy.classes()).toContain('small');
expect(buttonBodyCopy.classes()).toContain('button-body-copy');
});
test('screen reader only text when screenReaderOnlyText provided', async () => {
// Arrange

View file

@ -1,29 +1,13 @@
/* eslint-env jest */
import baseMixin from '@/mixins/base-mixin';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { mount, flushPromises } from '@vue/test-utils';
import { createTestingPinia } from '@pinia/testing';
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
import routerParams from '@/router/router-constants/router-params';
import { useMainStore } from '@/store';
import serviceLocation from '@/layouts/service-location/service-location.vue';
// Define Mocks
jest.mock('@/helpers/cms-content-helper', () => ({
fetchCmsContentForPage: jest.fn(() => Promise.resolve('content'))
}));
/** @ignore */
function setupMocks() {
const wrapper = shallowMount(
serviceLocation,
getMountOptions({
router: {
navigate: jest.fn()
}
})
);
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
return { wrapper };
}
import { getZipCodeData } from '@/helpers/service-location-helper';
const mockGetServiceabilityDetails = () => {
const serviceabilityDetails = {
@ -35,123 +19,199 @@ const mockGetServiceabilityDetails = () => {
return Promise.resolve(serviceabilityDetails);
};
const mockZipcodeData = (zip) => {
if (zip === '43235' || zip === '55555') {
return Promise.resolve({
containsMilitaryBase: false,
isValid: true,
isServiceable: true,
city: 'Columbus',
state: 'OH',
zipCodeCtu: '01820'
});
}
if (zip === '45433') {
return Promise.resolve({
containsMilitaryBase: true,
isValid: true,
isServiceable: true,
city: 'Columbus',
state: 'OH',
zipCodeCtu: '01820'
});
}
return Promise.resolve({
containsMilitaryBase: false,
isValid: false,
isServiceable: false,
city: null,
state: null,
zipCodeCtu: null
});
}
const mockProviders = () => {
return Promise.resolve([
{
"address": {
"city": "COLUMBUS",
"country": "US",
"state": "OH",
"streetAddress": "6826 Sawmill Rd",
"streetAddress2": "",
"zipCode": "43235",
"zipCodeCtu": "03357"
},
"distanceInMiles": 4.136335989015438,
"providerNumber": "003357",
"companyName": "SAFELITE AUTOGLASS - COLUMBUS, OH",
"phoneNumber": "6142336400",
"isSafeliteShop": true
},
{
"address": {
"city": "Lewis Center",
"country": "US",
"state": "OH",
"streetAddress": "1343 Cameron Ave",
"streetAddress2": "",
"zipCode": "43035",
"zipCodeCtu": "03357"
},
"distanceInMiles": 8.193072412262042,
"providerNumber": "003417",
"companyName": "SAFELITE AUTOGLASS - LEWIS CENTER, OH",
"phoneNumber": "6147815433",
"isSafeliteShop": true
}
])
}
jest.mock(
'@/helpers/service-location-helper',
() => ({
getServiceabilityDetails: jest.fn((mockServiceZipCode) => mockGetServiceabilityDetails(mockServiceZipCode))
getServiceabilityDetails: jest.fn((mockServiceZipCode) => mockGetServiceabilityDetails(mockServiceZipCode)),
getZipCodeData: jest.fn((mockServiceZipCode) => mockZipcodeData(mockServiceZipCode)),
getMobileZipCodeData: jest.fn((mockServiceZipCode) => mockZipcodeData(mockServiceZipCode))
})
);
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
// linkWidgetName is not defined. This whole spec file needs review.
if (widgetName === linkWidgetName) {
return mockLinkCmsContent[cmsFieldName];
const mockRoute = {
params: {}
};
const mockRouter = {
navigate: jest.fn()
};
const mountOptions = {
global: {
mixins: [
{
computed: {
navigationScenarios() {
return navigationScenarios;
},
routerParams() {
return routerParams;
}
},
methods: {
getCmsContent: jest.fn(),
getFooterInfoBoxHeight: jest.fn(() => 80),
getPageNameByQueryString: jest.fn(() => '')
}
}
if (widgetName === modalWidgetName) {
return mockModalCmsContent[cmsFieldName];
}
return null;
}),
getZipCodeData: jest.fn((zip) => {
if (zip === '43235' || zip === '55555') {
return Promise.resolve({
containsMilitaryBase: false,
isValid: true,
state: 'OH',
zipCodeCtu: '01820'
});
}
if (zip === '45433') {
return Promise.resolve({
containsMilitaryBase: true,
isValid: true,
state: 'OH'
});
}
return Promise.resolve({
containsMilitaryBase: false,
isValid: false,
state: null,
zipCodeCtu: null
});
}),
onSubmit: jest.fn(),
onInvalidSubmit: jest.fn()
],
mocks: {
$route: mockRoute,
$router: mockRouter
},
stubs: {
alert: true,
textBlock: true,
appointmentTypeQuestion: true,
contentGroupModal: true,
siteFooter: true,
siteHeader: true,
siteSubHeader: true,
shopAddress: true,
serviceZipQuestion: true
}
}
};
function setupMocks({ appointmentType = AppointmentTypeStrings.IN_SHOP }) {
mountOptions.global.plugins = [createTestingPinia({
initialState: {
main: {
order: {
serviceLocation: {
appointmentType: appointmentType
}
}
}
}
})];
useMainStore().getProviders = jest.fn().mockImplementation(() => mockProviders());
const wrapper = mount(serviceLocation, mountOptions);
describe('navigation', () => {
test('if the back button is clicked, navigate back', async () => {
// Arrange
const { wrapper } = setupMocks({
wrapper.vm.$router.navigateWithSpinner = jest.fn();
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
return { wrapper };
}
beforeEach(() => {
jest.clearAllMocks();
});
describe('service-location.vue', () => {
describe('navigation', () => {
test('if the back button is clicked, navigate back', async () => {
// Arrange
const { wrapper } = setupMocks({
});
// Act
await wrapper.vm.navigateBack();
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
});
describe('updating service zip', () => {
test('updates the page model after changing the service zip code', () => {
// Arrange
const { wrapper } = setupMocks({ appointmentType: AppointmentTypeStrings.IN_SHOP });
const newServiceZipCode = '61606';
const shopAddressComponent = wrapper.findComponent({
ref: 'shopAddress'
});
// Act
shopAddressComponent.vm.$emit('zip-updated', newServiceZipCode);
// Assert
expect(wrapper.vm.zipCode).toStrictEqual(newServiceZipCode);
});
// Act
await wrapper.vm.navigateBack();
test('displays military zip message when zip is updated', async () => {
// Arrange
const { wrapper } = setupMocks({ appointmentType: AppointmentTypeStrings.MOBILE });
// Assert
expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
});
});
describe('updating service zip', () => {
test('updates the page model after changing the service zip code', () => {
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin]
});
const newServiceZipCodeQuestion = {
zipCode: '61606',
state: 'IL'
};
const serviceZipCodeComponent = wrapper.findComponent({
ref: 'serviceZipCodeQuestion'
});
// Act
serviceZipCodeComponent.vm.$emit('update:modelValue', newServiceZipCodeQuestion);
// Assert
expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
});
test('displays military zip message when zip is updated', () => {
// Arrange
const { wrapper } = setupMocks({});
const mobileLocationQuestionsComponent = wrapper.findComponent({
ref: 'mobileLocationQuestions'
});
mobileLocationQuestionsComponent.resetComponent = jest.fn();
const serviceZipCodeComponent = wrapper.findComponent({
ref: 'serviceZipCodeQuestion'
});
serviceZipCodeComponent.resetMobileFeePart = jest.fn();
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
// TODO: Use or remove
const newServiceZipCodeQuestion = {
zipCode: '45433',
state: 'OH'
};
// Act
serviceZipCodeComponent.vm.$emit('updated-contains-military-base', true);
// Assert
expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
const mobileServiceZipCodeQuestion = wrapper.findComponent({
ref: 'mobileServiceZipCodeQuestion'
});
expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
const newMobileServiceZipCode = '45433'
// Act
mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
});
});
});

View file

@ -62,6 +62,7 @@
:isCollapsible="true"
alertClass="alert-warning" />
<shopAddress
ref="shopAddress"
v-model="selectedProvider"
:serviceZipcode="zipCode"
:selectedAppointmentType="selectedAppointmentType"
@ -79,7 +80,7 @@
<div
v-if="isMobile">
<div class="expandable-link-container">
<a
<a
v-if="displayMilitaryZipAlert && !militaryBaseWarningExpanded"
href="#"
class="expandable-link"

View file

@ -4,7 +4,7 @@ import serviceZipQuestion from '@/layouts/service-location/service-zip-question/
describe('service-zip-question.vue', () => {
it('Should get the modelValue', async () => {
// Arrange
const text = 'test';
const text = '12345';
const wrapper = shallowMount(serviceZipQuestion, {
props: {
modelValue: text
@ -14,15 +14,15 @@ describe('service-zip-question.vue', () => {
// Act
const modelValueText = wrapper.vm.internalZipcode;
wrapper.vm.internalZipcode = 'test also';
wrapper.vm.internalZipcode = '55555';
// Assert
expect(modelValueText).toEqual('test');
expect(modelValueText).toEqual('12345');
});
it('Should emit to set value', async () => {
// Arrange
const text = 'test';
const text = '12345';
const wrapper = shallowMount(serviceZipQuestion, {
props: {
modelValue: text
@ -31,10 +31,10 @@ describe('service-zip-question.vue', () => {
});
// Act
wrapper.vm.internalZipcode = 'test also';
wrapper.vm.internalZipcode = '55555';
wrapper.vm.updateModelValue();
// Assert
expect(wrapper.emitted('update:modelValue')).toEqual([['test also']]);
expect(wrapper.emitted('update:modelValue')).toEqual([['55555']]);
});
});