started tests
This commit is contained in:
Jason Wheeler
parent
7f1256f37d
commit
a0c3228021
2 changed files with 72 additions and 193 deletions
|
|
@ -1,204 +1,80 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
|
||||
import { issPageValues } from '@/router/router-constants/issPage-values';
|
||||
import { queryStrings } from '@/constants/query-strings';
|
||||
import { GaActions } from "@/constants/analytics";
|
||||
import ProviderPreference from "@/layouts/provider-preference/provider-preference.vue"
|
||||
import { useMainStore } from '@/store';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { mapStores } from "pinia";
|
||||
|
||||
const pinia = createTestingPinia();
|
||||
useMainStore(pinia);
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { useMainStore } from "@/store";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
import { nextTick } from "vue";
|
||||
|
||||
const ProviderPreferenceMockData = {
|
||||
QuestionText: 'Which auto glass shop would you like to work with?',
|
||||
Answers: [
|
||||
{
|
||||
Name: 'Schedule with Safelite',
|
||||
Text: 'Schedule with Safelite',
|
||||
SubText: '',
|
||||
ImageId: '',
|
||||
SubWidgetName: '',
|
||||
},
|
||||
{
|
||||
Name: 'Find another shop',
|
||||
Text: 'Find another shop',
|
||||
SubText: '',
|
||||
ImageId: '',
|
||||
SubWidgetName: '',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const siteFooterWidgetMockData = {
|
||||
ForwardButtonText: 'Continue',
|
||||
};
|
||||
|
||||
function setupMocks() {
|
||||
const mockRoute = {
|
||||
query: {
|
||||
issPage: 'provider-preference',
|
||||
},
|
||||
};
|
||||
|
||||
const mockRouter = {
|
||||
navigate: jest.fn(),
|
||||
};
|
||||
|
||||
const wrapper = mount(ProviderPreference, {
|
||||
data() {
|
||||
return {
|
||||
SelectedshopLocation: null,
|
||||
};
|
||||
},
|
||||
global: {
|
||||
mixins: [
|
||||
{
|
||||
computed: {
|
||||
...mapStores(useMainStore),
|
||||
GaActions() {
|
||||
return GaActions;
|
||||
},
|
||||
queryStrings() {
|
||||
return queryStrings;
|
||||
},
|
||||
navigationScenarios() {
|
||||
return navigationScenarios;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
|
||||
if (cmsWidgetName === 'SiteFooterWidget') {
|
||||
if (fieldName === 'ForwardButtonText') {
|
||||
return siteFooterWidgetMockData.ForwardButtonText;
|
||||
}
|
||||
}
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
if (cmsWidgetName === 'StateSteeringModal') {
|
||||
if (fieldName === 'BodyText') {
|
||||
return "{if:custom:OH}ohioText{end}{if:custom:CA}cali's Text{end}";
|
||||
}
|
||||
}
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
setupModalLinks: jest.fn(),
|
||||
}));
|
||||
|
||||
if (cmsWidgetName === 'ProviderPreference') {
|
||||
if (fieldName === 'QuestionText') {
|
||||
return ProviderPreferenceMockData.QuestionText;
|
||||
}
|
||||
if (fieldName === 'Answers') {
|
||||
return ProviderPreferenceMockData.Answers;
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}),
|
||||
getFooterInfoBoxHeight: jest.fn(() => 80),
|
||||
getPageNameByQueryString: jest.fn(() => "provider-preference"),
|
||||
pushEventToGA: jest.fn(),
|
||||
},
|
||||
},
|
||||
],
|
||||
mocks: {
|
||||
$route: mockRoute,
|
||||
$router: mockRouter,
|
||||
},
|
||||
stubs: {
|
||||
SiteHeader: true,
|
||||
SiteSubHeader: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return { mockRoute, mockRouter, wrapper };
|
||||
}
|
||||
describe('provider-preference.vue', () => {
|
||||
|
||||
test("getStateSpecificText returns true when values match", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
useMainStore().order.customer.address.state = "ohio";
|
||||
const actual = wrapper.vm.getStateSpecificText("Ohio")
|
||||
|
||||
expect(actual).toBeTruthy();
|
||||
});
|
||||
|
||||
test("getStateSpecificText returns false when values do not match", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
useMainStore().order.customer.address.state = "delaware";
|
||||
const actual = wrapper.vm.getStateSpecificText("Ohio")
|
||||
|
||||
expect(actual).toBeFalsy();
|
||||
});
|
||||
|
||||
test("getStateSpecificText should return correct value for state", () => {
|
||||
const { wrapper } = setupMocks();
|
||||
useMainStore().order.customer.address.state = "ca";
|
||||
|
||||
let actual = wrapper.vm.steeringModalBody;
|
||||
|
||||
expect(actual).toBe("cali's Text");
|
||||
|
||||
useMainStore().order.customer.address.state = "oH";
|
||||
|
||||
actual = wrapper.vm.steeringModalBody;
|
||||
|
||||
expect(actual).toBe("ohioText");
|
||||
});
|
||||
|
||||
test.skip('"Continue" button is disabled when no Shop Location is selected.', () => {
|
||||
const { wrapper } = setupMocks();
|
||||
test("Should display steering modal if steering modal data is present", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
|
||||
expect(continueButton.attributes()['aria-disabled']).toBe('true');
|
||||
});
|
||||
|
||||
test.skip('"Continue" button is enabled after a Shop Location is selected.', async () => {
|
||||
const { wrapper } = setupMocks();
|
||||
// Act
|
||||
wrapper.vm.getSteeringModalBody = jest.fn().mockReturnValue("something");
|
||||
wrapper.vm.setShowSteeringLink();
|
||||
console.log(wrapper.vm.showSteeringLink);
|
||||
|
||||
const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' });
|
||||
// Not using initializeComponent() because it doesn't trigger reactivity in test.
|
||||
await ProviderPreferenceWrapper.setData({
|
||||
questionTextFromCms: ProviderPreferenceMockData.QuestionText,
|
||||
answersFromCms: ProviderPreferenceMockData.Answers,
|
||||
SelectedshopLocation:"Schedule with Safelite"
|
||||
});
|
||||
// Test
|
||||
expect(wrapper.vm.showSteeringLink).toBeTruthy();
|
||||
|
||||
|
||||
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
|
||||
expect(continueButton.attributes()['aria-disabled']).toBe('false');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
test.skip('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => {
|
||||
const { mockRoute, mockRouter, wrapper } = setupMocks();
|
||||
test("Should not display steering modal if steering modal data is not present", async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks();
|
||||
|
||||
const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' });
|
||||
// Not using initializeComponent() because it doesn't trigger reactivity in test.
|
||||
await ProviderPreferenceWrapper.setData({
|
||||
questionTextFromCms: ProviderPreferenceMockData.QuestionText,
|
||||
answersFromCms: ProviderPreferenceMockData.Answers,
|
||||
SelectedshopLocation:"Schedule with Safelite"
|
||||
});
|
||||
// Act
|
||||
wrapper.vm.getSteeringModalBody = jest.fn().mockReturnValue("");
|
||||
wrapper.vm.setShowSteeringLink();
|
||||
console.log(wrapper.vm.showSteeringLink);
|
||||
|
||||
// Test
|
||||
expect(wrapper.vm.showSteeringLink).toBeFalsy();
|
||||
|
||||
const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]');
|
||||
await continueButton.trigger('click');
|
||||
|
||||
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
|
||||
expect(mockRouter.navigate)
|
||||
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, mockRoute);
|
||||
/**
|
||||
* To Do: find a way to confirm that Vue Router really routes to the expected page.
|
||||
* Currently just trust that our custom navigate() method does its job properly.
|
||||
*/
|
||||
});
|
||||
|
||||
test.skip('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => {
|
||||
const { mockRoute, mockRouter, wrapper } = setupMocks();
|
||||
|
||||
await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');
|
||||
expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
|
||||
expect(mockRouter.navigate)
|
||||
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks(mockApiResponses){
|
||||
|
||||
const mountOptions = getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
},
|
||||
});
|
||||
|
||||
const wrapper = shallowMount(
|
||||
ProviderPreference,
|
||||
mountOptions
|
||||
);
|
||||
|
||||
useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
policies:policies,
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const apiResponses = mockApiResponses;
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiResponses);
|
||||
fetchCmsContentForPage.mockImplementation (() => {});
|
||||
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
methods: {
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
|
||||
return headerText.replace("{custom:SafeliteLogo}", "<span class='safeliteLogo'></span>");
|
||||
return headerText?.replace("{custom:SafeliteLogo}", "<span class='safeliteLogo'></span>");
|
||||
},
|
||||
getSubheaderTextFromCms(cmsWidgetName) {
|
||||
return this.getCmsContent(cmsWidgetName, 'SubheaderText');
|
||||
|
|
@ -171,9 +171,12 @@ export default {
|
|||
this.$refs["StateSteeringModal"].openModal();
|
||||
},
|
||||
setShowSteeringLink() {
|
||||
const bodyText = this.$refs["StateSteeringModal"]?.ModalBodyText;
|
||||
const bodyText = this.getSteeringModalBody();
|
||||
this.showSteeringLink = !!bodyText;
|
||||
},
|
||||
getSteeringModalBody() {
|
||||
return this.$refs["StateSteeringModal"]?.ModalBodyText;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
|
|
|
|||
Loading…
Reference in a new issue