Merge pull request #605 from Safelite/feature/richardson/SSR-1149

add in PIA alert to payment-method page
This commit is contained in:
brich1212safe 2024-04-01 16:33:16 -04:00 committed by GitHub
commit ff047d7e15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 67 additions and 22 deletions

View file

@ -5,39 +5,70 @@ import paymentMethod from '@/layouts/payment-method/payment-method.vue';
import { shallowMount } from '@vue/test-utils';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { useMainStore } from '@/store';
import issPageValues from '@/router/router-constants/issPage-values';
import { paymentMethods } from '@/constants/payment-method-constants';
import queryStrings from '@/constants/query-strings';
function setupMocks() {
const mountOptions = getMountOptions();
function setupMocks({ customMountOptions = {}, queryString }) {
const mountOptions = getMountOptions({
...customMountOptions,
route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} }
});
const wrapper = shallowMount(paymentMethod, mountOptions);
return { wrapper };
return wrapper;
}
describe('payment-method.vue', () => {
test('getting payment method when method is pay later', async () => {
describe('Payment Method Type', () => {
test('getting payment method when method is pay later', async () => {
// Arrange
const { wrapper } = setupMocks();
const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
const wrapper = setupMocks({});
const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
// Act
const paymethod = wrapper.vm.getPaymentMethodFromStore();
// Act
const paymethod = wrapper.vm.getPaymentMethodFromStore();
// Assert
expect(paymethod).toBe(payLaterPaymentMethod);
// Assert
expect(paymethod).toBe(payLaterPaymentMethod);
});
test('getting payment method when method is pay in advance', async () => {
// Arrange
const wrapper = setupMocks({});
const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
// Act
const paymethod = wrapper.vm.getPaymentMethodFromStore();
// Assert
expect(paymethod).not.toBe(payInAdvancePaymentMethod);
});
});
test('getting payment method when method is pay in advance', async () => {
// Arrange
const { wrapper } = setupMocks();
const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
// Act
const paymethod = wrapper.vm.getPaymentMethodFromStore();
describe('Pay In Advance Error Alert', () => {
test('show pay in advance error alert when contained in querystring', () => {
// Arrange
const queryString = {
[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.AFTERPAY
};
const wrapper = setupMocks({ queryString });
// Assert
expect(paymethod).not.toBe(payInAdvancePaymentMethod);
// Assert
const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
expect(payInAdvanceErrorAlert.exists()).toBeTruthy();
expect(payInAdvanceErrorAlert.isVisible()).toBeTruthy();
});
test('hide pay in advance error alert when not contained in querystring', () => {
// Arrange
const wrapper = setupMocks({});
// Assert
const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
expect(payInAdvanceErrorAlert.exists()).toBeFalsy();
});
});
});

View file

@ -26,7 +26,13 @@
servicePackageTitleWidgetName="ServicePackageTitle"
:availableVaps="availableVaps" />
<hr class="mt-0 mb-5" />
<div>Pia Alert Placeholder</div>
<alert
v-if="displayPayInAdvanceAlert"
name="payInAdvanceErrorAlert"
class="my-4"
cmsWidgetName="PayInAdvanceErrorAlertWidget"
alertClass="alert-danger"
:isDismissible="false" />
<paymentMethodQuestion
v-model="paymentMethodInternalModel"
cmsWidgetName="PaymentMethodWidget"
@ -53,12 +59,14 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
import alert from '@/ux-components/alert/alert.vue';
// Supporting Items
import settleAllPromises from '@/helpers/layout-helper';
import { useMainStore } from '@/store';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { paymentMethods } from '@/constants/payment-method-constants';
import queryStrings from '@/constants/query-strings';
import globalRules from '@/constants/global-rules';
import { Form } from 'vee-validate';
import issPageValues from '@/router/router-constants/issPage-values';
@ -75,7 +83,8 @@ export default {
siteFooter,
reviewDropdown,
cartDropdown,
paymentMethodQuestion
paymentMethodQuestion,
alert
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -155,6 +164,11 @@ export default {
},
paymentMethod() {
return this.paymentMethodInternalModel;
},
displayPayInAdvanceAlert() {
return (
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
);
}
},
watch: {