From d7302935f04641520f062d0b0519a23ae346d5cc Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 10 Oct 2024 12:00:27 +0200 Subject: [PATCH 1/8] feat(a11y): add a11y selected label improvements to checkout CheckoutDeliveryAddress/CheckoutPaymentMethod components --- .../checkout-delivery-address.component.ts | 10 ++++++++-- .../checkout-payment-method.component.ts | 8 ++++++-- .../user/profile/assets/translations/en/address.json | 1 + projects/assets/src/translations/en/payment.json | 1 + .../feature-toggles/config/feature-toggles.ts | 8 ++++++++ .../src/app/spartacus/spartacus-features.module.ts | 1 + 6 files changed, 25 insertions(+), 4 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts index ceb05c41b1a..37b0c0ca2a2 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts @@ -118,8 +118,12 @@ export class CheckoutDeliveryAddressComponent implements OnInit { const numbers = getAddressNumbers(address, textPhone, textMobile); const isSelected: boolean = selected && selected.id === address.id; + const isButtonRole = this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') && !isSelected; + const role = isButtonRole ? 'button' : 'region'; + + return { - role: 'region', + role, title: address.defaultAddress ? textDefaultDeliveryAddress : '', textBold: address.firstName + ' ' + address.lastName, text: [ @@ -225,7 +229,9 @@ export class CheckoutDeliveryAddressComponent implements OnInit { 'checkoutAddress.defaultDeliveryAddress' ), this.translationService.translate('checkoutAddress.shipToThisAddress'), - this.translationService.translate('addressCard.selected'), + this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') ? + this.translationService.translate('addressCard.selectedAddress') : + this.translationService.translate('addressCard.selected'), this.translationService.translate('addressCard.phoneNumber'), this.translationService.translate('addressCard.mobileNumber'), ]); diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts index 866decf0e04..567eb39ae29 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts @@ -151,7 +151,9 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy { this.selectedMethod$, this.translationService.translate('paymentForm.useThisPayment'), this.translationService.translate('paymentCard.defaultPaymentMethod'), - this.translationService.translate('paymentCard.selected'), + this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') ? + this.translationService.translate('paymentCard.selectedPayment') : + this.translationService.translate('paymentCard.selected'), ]).pipe( tap(([paymentMethods, selectedMethod]) => this.selectDefaultPaymentMethod(paymentMethods, selectedMethod) @@ -299,9 +301,11 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy { 'a11yHideSelectBtnForSelectedAddrOrPayment' ); const isSelected = selected?.id === paymentDetails.id; + const isButtonRole = this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') && !isSelected; + const role = isButtonRole ? 'button' : 'region'; return { - role: 'region', + role, title: paymentDetails.defaultPayment ? cardLabels.textDefaultPaymentMethod : '', diff --git a/feature-libs/user/profile/assets/translations/en/address.json b/feature-libs/user/profile/assets/translations/en/address.json index 7b74ac04b06..bbfad2191ca 100644 --- a/feature-libs/user/profile/assets/translations/en/address.json +++ b/feature-libs/user/profile/assets/translations/en/address.json @@ -57,6 +57,7 @@ "addressCard": { "default": "DEFAULT", "selected": "Selected", + "selectedAddress": "Selected Address", "setAsDefault": "Set as default", "shipTo": "Ship To", "billTo": "Bill To", diff --git a/projects/assets/src/translations/en/payment.json b/projects/assets/src/translations/en/payment.json index a38ca12d4ab..b20f8300ed9 100644 --- a/projects/assets/src/translations/en/payment.json +++ b/projects/assets/src/translations/en/payment.json @@ -40,6 +40,7 @@ "defaultPaymentLabel": "Default payment method", "additionalPaymentLabel": "Additional payment method {{ number }}", "selected": "Selected", + "selectedPayment": "Selected Payment", "deletePaymentSuccess": "Payment method deleted successfully" }, "paymentTypes": { diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts index 0fac75b627a..128fed6b22a 100644 --- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts +++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts @@ -319,6 +319,13 @@ export interface FeatureTogglesInterface { */ a11yHideSelectBtnForSelectedAddrOrPayment?: boolean; + /** + * If enabled, the "Checkout Shipping address/Payment" views + * will have a more a11y friendly selected label, including the context + * indicating weather the user is on a selected Address or Payment regsion. + */ + a11ySelectLabelWithContextForSelectedAddrOrPayment?: boolean; + /** * Determines whether the controls in the `CarouselComponent` are focusable and accessible from the keyboard. */ @@ -677,6 +684,7 @@ export const defaultFeatureToggles: Required = { a11yUnitsListKeyboardControls: false, a11yCartItemsLinksStyles: false, a11yHideSelectBtnForSelectedAddrOrPayment: false, + a11ySelectLabelWithContextForSelectedAddrOrPayment: false, a11yFocusableCarouselControls: false, a11yUseTrapTabInsteadOfTrapInDialogs: false, cmsGuardsServiceUseGuardsComposer: false, diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index b2749c81b2a..0950b82dc60 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -332,6 +332,7 @@ if (environment.cpq) { a11yUnitsListKeyboardControls: true, a11yCartItemsLinksStyles: true, a11yHideSelectBtnForSelectedAddrOrPayment: true, + a11ySelectLabelWithContextForSelectedAddrOrPayment: true, a11yFocusableCarouselControls: true, a11yUseTrapTabInsteadOfTrapInDialogs: true, cmsGuardsServiceUseGuardsComposer: true, From 84b25d4089ddace67e4eb74b5b5a7436c62247c4 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 10 Oct 2024 15:16:53 +0200 Subject: [PATCH 2/8] fix(a11y): fix linting issues --- .../checkout-delivery-address.component.ts | 14 +++++++++----- .../checkout-payment-method.component.ts | 13 +++++++++---- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts index 37b0c0ca2a2..b3a13892819 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts @@ -118,10 +118,12 @@ export class CheckoutDeliveryAddressComponent implements OnInit { const numbers = getAddressNumbers(address, textPhone, textMobile); const isSelected: boolean = selected && selected.id === address.id; - const isButtonRole = this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') && !isSelected; + const isButtonRole = + this.featureConfigService?.isEnabled( + 'a11ySelectLabelWithContextForSelectedAddrOrPayment' + ) && !isSelected; const role = isButtonRole ? 'button' : 'region'; - return { role, title: address.defaultAddress ? textDefaultDeliveryAddress : '', @@ -229,9 +231,11 @@ export class CheckoutDeliveryAddressComponent implements OnInit { 'checkoutAddress.defaultDeliveryAddress' ), this.translationService.translate('checkoutAddress.shipToThisAddress'), - this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') ? - this.translationService.translate('addressCard.selectedAddress') : - this.translationService.translate('addressCard.selected'), + this.featureConfigService?.isEnabled( + 'a11ySelectLabelWithContextForSelectedAddrOrPayment' + ) + ? this.translationService.translate('addressCard.selectedAddress') + : this.translationService.translate('addressCard.selected'), this.translationService.translate('addressCard.phoneNumber'), this.translationService.translate('addressCard.mobileNumber'), ]); diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts index 567eb39ae29..cc9b0c9a391 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts @@ -151,9 +151,11 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy { this.selectedMethod$, this.translationService.translate('paymentForm.useThisPayment'), this.translationService.translate('paymentCard.defaultPaymentMethod'), - this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') ? - this.translationService.translate('paymentCard.selectedPayment') : - this.translationService.translate('paymentCard.selected'), + this.featureConfigService?.isEnabled( + 'a11ySelectLabelWithContextForSelectedAddrOrPayment' + ) + ? this.translationService.translate('paymentCard.selectedPayment') + : this.translationService.translate('paymentCard.selected'), ]).pipe( tap(([paymentMethods, selectedMethod]) => this.selectDefaultPaymentMethod(paymentMethods, selectedMethod) @@ -301,7 +303,10 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy { 'a11yHideSelectBtnForSelectedAddrOrPayment' ); const isSelected = selected?.id === paymentDetails.id; - const isButtonRole = this.featureConfigService?.isEnabled('a11ySelectLabelWithContextForSelectedAddrOrPayment') && !isSelected; + const isButtonRole = + this.featureConfigService?.isEnabled( + 'a11ySelectLabelWithContextForSelectedAddrOrPayment' + ) && !isSelected; const role = isButtonRole ? 'button' : 'region'; return { From e3d77e3d59a8a79a06cace548bf8a2ac4484fdc8 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 10 Oct 2024 16:47:49 +0200 Subject: [PATCH 3/8] fix(a11y): fix PR SonnarQube issue --- .../checkout-delivery-address.component.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts index b3a13892819..fc59f861334 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts @@ -118,11 +118,7 @@ export class CheckoutDeliveryAddressComponent implements OnInit { const numbers = getAddressNumbers(address, textPhone, textMobile); const isSelected: boolean = selected && selected.id === address.id; - const isButtonRole = - this.featureConfigService?.isEnabled( - 'a11ySelectLabelWithContextForSelectedAddrOrPayment' - ) && !isSelected; - const role = isButtonRole ? 'button' : 'region'; + const role = this.getCardRole(isSelected); return { role, @@ -339,4 +335,12 @@ export class CheckoutDeliveryAddressComponent implements OnInit { protected shouldUseAddressSavedInCart(): boolean { return !!this.checkoutConfigService?.shouldUseAddressSavedInCart(); } + + private getCardRole(isCardSelected: boolean): 'button' | 'region' { + const isButtonRole = + this.featureConfigService?.isEnabled( + 'a11ySelectLabelWithContextForSelectedAddrOrPayment' + ) && !isCardSelected; + return isButtonRole ? 'button' : 'region'; + } } From 821a8cb27eb126912e02a0922cd9eedd0adfe321 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 17 Oct 2024 11:09:04 +0200 Subject: [PATCH 4/8] fix: address PR comment - make method protected --- .../checkout-delivery-address.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts index fc59f861334..04609ab5c90 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts @@ -336,7 +336,7 @@ export class CheckoutDeliveryAddressComponent implements OnInit { return !!this.checkoutConfigService?.shouldUseAddressSavedInCart(); } - private getCardRole(isCardSelected: boolean): 'button' | 'region' { + protected getCardRole(isCardSelected: boolean): 'button' | 'region' { const isButtonRole = this.featureConfigService?.isEnabled( 'a11ySelectLabelWithContextForSelectedAddrOrPayment' From 38fb4303a9652633d704b8201d51aae9d9782267 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 17 Oct 2024 12:43:10 +0200 Subject: [PATCH 5/8] fix: address PR comment - add unit tests for newly added getCardRole method for checkout-delivery-address.component.ts --- ...heckout-delivery-address.component.spec.ts | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts index 4ffc059ad42..4d90384c9d2 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts @@ -199,6 +199,7 @@ describe('CheckoutDeliveryAddressComponent', () => { spyOn(component, 'addAddress').and.callThrough(); spyOn(component, 'selectAddress').and.callThrough(); spyOn(component, 'setAddress').and.callThrough(); + spyOn(component, 'getCardRole').and.callThrough(); }); it('should be created', () => { @@ -345,6 +346,67 @@ describe('CheckoutDeliveryAddressComponent', () => { ); expect(card.actions?.length).toBe(1); }); + + describe('role', () => { + it('should be set to "region" for selected addresses when feature flag is enabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(true); + expect(component.getCardContent( + // isSelected = true! + mockAddress1, + mockAddress1, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role).toEqual('region'); + expect(component['getCardRole']).toHaveBeenCalledWith(true); + }); + + it('should be set to "region" when feature flag is disabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(false); + + expect(component.getCardContent( + // isSelected = true! + mockAddress1, + mockAddress1, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role).toEqual('region'); + expect(component['getCardRole']).toHaveBeenCalledWith(true); + + expect(component.getCardContent( + // isSelected = false! + mockAddress1, + mockAddress2, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role).toEqual('region'); + expect(component['getCardRole']).toHaveBeenCalledWith(false); + }); + + it('should be set to "button" for all non selected addresses when feature flag is enabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(true); + + expect(component.getCardContent( + // isSelected = false! + mockAddress1, + mockAddress2, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role).toEqual('button'); + expect(component['getCardRole']).toHaveBeenCalledWith(false); + }); + }); }); describe('UI continue button', () => { @@ -500,4 +562,11 @@ describe('CheckoutDeliveryAddressComponent', () => { expect(getSpinner()).toBeFalsy(); }); }); + + // describe('getCardRole()', () => { + // it('should get card role as region', () => { + // const role = component.getCardRole(true); + // expect(role).toEqual('button'); + // }); + // }); }); From 30b2b6b90c26a3e96d1b143bd5b65b43079528bd Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 17 Oct 2024 12:56:45 +0200 Subject: [PATCH 6/8] fix: address PR comment - add unit tests for newly added getCardRole method for checkout-payment-method.component.ts --- .../checkout-payment-method.component.spec.ts | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts index 82ed2c11f85..0cba28565ac 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts @@ -617,5 +617,82 @@ describe('CheckoutPaymentMethodComponent', () => { ); expect(globalMessageService.add).not.toHaveBeenCalled(); }); + + describe('createCard().role', () => { + let paymentMethod1: PaymentDetails; + beforeEach(() => { + paymentMethod1= { + id: 'selected payment method', + accountHolderName: 'Name', + cardNumber: '123456789', + cardType: { + code: 'Visa', + name: 'Visa', + }, + expiryMonth: '01', + expiryYear: '2022', + cvn: '123', + defaultPayment: true, + }; + }); + + it('should be set to "region" for selected cards when feature flag is enabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(true); + + expect(component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + paymentMethod1 + ).role).toEqual('region'); + }); + + it('should be set to "region" when feature flag is disabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(false); + + expect(component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + paymentMethod1 + ).role).toEqual('region'); + + expect(component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + // payment method that isn't the selected one + {...paymentMethod1, id: 'newId'} + ).role).toEqual('region'); + }); + + it('should be set to "button" for all non selected card when feature flag is enabled', () => { + spyOn(featureConfig, 'isEnabled').and.returnValue(true); + + expect(component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + // payment method that isn't the selected one + {...paymentMethod1, id: 'newId'} + ).role).toEqual('button'); + }); + }); }); }); From d77acbd8ad91e0a59726f17b49d583e94f7997d5 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 17 Oct 2024 15:24:06 +0200 Subject: [PATCH 7/8] fix: address PR comments related to tests. --- ...heckout-delivery-address.component.spec.ts | 43 ++----------------- .../checkout-payment-method.component.spec.ts | 37 ++-------------- 2 files changed, 6 insertions(+), 74 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts index 4d90384c9d2..99ffb4becbd 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts @@ -348,26 +348,11 @@ describe('CheckoutDeliveryAddressComponent', () => { }); describe('role', () => { - it('should be set to "region" for selected addresses when feature flag is enabled', () => { + beforeEach(() => { spyOn(featureConfig, 'isEnabled').and.returnValue(true); - expect(component.getCardContent( - // isSelected = true! - mockAddress1, - mockAddress1, - 'default', - 'shipTo', - 'selected', - 'P', - 'M' - ).role).toEqual('region'); - expect(component['getCardRole']).toHaveBeenCalledWith(true); }); - - it('should be set to "region" when feature flag is disabled', () => { - spyOn(featureConfig, 'isEnabled').and.returnValue(false); - + it('should be set to "region" for selected address', () => { expect(component.getCardContent( - // isSelected = true! mockAddress1, mockAddress1, 'default', @@ -377,25 +362,10 @@ describe('CheckoutDeliveryAddressComponent', () => { 'M' ).role).toEqual('region'); expect(component['getCardRole']).toHaveBeenCalledWith(true); - - expect(component.getCardContent( - // isSelected = false! - mockAddress1, - mockAddress2, - 'default', - 'shipTo', - 'selected', - 'P', - 'M' - ).role).toEqual('region'); - expect(component['getCardRole']).toHaveBeenCalledWith(false); }); - it('should be set to "button" for all non selected addresses when feature flag is enabled', () => { - spyOn(featureConfig, 'isEnabled').and.returnValue(true); - + it('should be set to "button" for all non selected addresses', () => { expect(component.getCardContent( - // isSelected = false! mockAddress1, mockAddress2, 'default', @@ -562,11 +532,4 @@ describe('CheckoutDeliveryAddressComponent', () => { expect(getSpinner()).toBeFalsy(); }); }); - - // describe('getCardRole()', () => { - // it('should get card role as region', () => { - // const role = component.getCardRole(true); - // expect(role).toEqual('button'); - // }); - // }); }); diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts index 0cba28565ac..05ac77a1529 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts @@ -621,6 +621,7 @@ describe('CheckoutPaymentMethodComponent', () => { describe('createCard().role', () => { let paymentMethod1: PaymentDetails; beforeEach(() => { + spyOn(featureConfig, 'isEnabled').and.returnValue(true); paymentMethod1= { id: 'selected payment method', accountHolderName: 'Name', @@ -636,9 +637,7 @@ describe('CheckoutPaymentMethodComponent', () => { }; }); - it('should be set to "region" for selected cards when feature flag is enabled', () => { - spyOn(featureConfig, 'isEnabled').and.returnValue(true); - + it('should be set to "region" for selected payment card', () => { expect(component['createCard']( paymentMethod1, { @@ -651,36 +650,7 @@ describe('CheckoutPaymentMethodComponent', () => { ).role).toEqual('region'); }); - it('should be set to "region" when feature flag is disabled', () => { - spyOn(featureConfig, 'isEnabled').and.returnValue(false); - - expect(component['createCard']( - paymentMethod1, - { - textDefaultPaymentMethod: '✓ DEFAULT', - textExpires: 'Expires', - textUseThisPayment: 'Use this payment', - textSelected: 'Selected', - }, - paymentMethod1 - ).role).toEqual('region'); - - expect(component['createCard']( - paymentMethod1, - { - textDefaultPaymentMethod: '✓ DEFAULT', - textExpires: 'Expires', - textUseThisPayment: 'Use this payment', - textSelected: 'Selected', - }, - // payment method that isn't the selected one - {...paymentMethod1, id: 'newId'} - ).role).toEqual('region'); - }); - - it('should be set to "button" for all non selected card when feature flag is enabled', () => { - spyOn(featureConfig, 'isEnabled').and.returnValue(true); - + it('should be set to "button" for non selected payment cards', () => { expect(component['createCard']( paymentMethod1, { @@ -689,7 +659,6 @@ describe('CheckoutPaymentMethodComponent', () => { textUseThisPayment: 'Use this payment', textSelected: 'Selected', }, - // payment method that isn't the selected one {...paymentMethod1, id: 'newId'} ).role).toEqual('button'); }); From 7a5ffd880cbd6e7f07ed3d54ff19878f2d8cbf10 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Fri, 18 Oct 2024 09:38:35 +0200 Subject: [PATCH 8/8] fix: address PR comments related to tests - fix linting errors. --- ...heckout-delivery-address.component.spec.ts | 42 +++++++++-------- .../checkout-payment-method.component.spec.ts | 46 ++++++++++--------- 2 files changed, 48 insertions(+), 40 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts index 99ffb4becbd..abc6fb649a4 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts @@ -346,34 +346,38 @@ describe('CheckoutDeliveryAddressComponent', () => { ); expect(card.actions?.length).toBe(1); }); - + describe('role', () => { beforeEach(() => { spyOn(featureConfig, 'isEnabled').and.returnValue(true); }); it('should be set to "region" for selected address', () => { - expect(component.getCardContent( - mockAddress1, - mockAddress1, - 'default', - 'shipTo', - 'selected', - 'P', - 'M' - ).role).toEqual('region'); + expect( + component.getCardContent( + mockAddress1, + mockAddress1, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role + ).toEqual('region'); expect(component['getCardRole']).toHaveBeenCalledWith(true); }); it('should be set to "button" for all non selected addresses', () => { - expect(component.getCardContent( - mockAddress1, - mockAddress2, - 'default', - 'shipTo', - 'selected', - 'P', - 'M' - ).role).toEqual('button'); + expect( + component.getCardContent( + mockAddress1, + mockAddress2, + 'default', + 'shipTo', + 'selected', + 'P', + 'M' + ).role + ).toEqual('button'); expect(component['getCardRole']).toHaveBeenCalledWith(false); }); }); diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts index 05ac77a1529..ae49b1db0fb 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts @@ -622,7 +622,7 @@ describe('CheckoutPaymentMethodComponent', () => { let paymentMethod1: PaymentDetails; beforeEach(() => { spyOn(featureConfig, 'isEnabled').and.returnValue(true); - paymentMethod1= { + paymentMethod1 = { id: 'selected payment method', accountHolderName: 'Name', cardNumber: '123456789', @@ -638,29 +638,33 @@ describe('CheckoutPaymentMethodComponent', () => { }); it('should be set to "region" for selected payment card', () => { - expect(component['createCard']( - paymentMethod1, - { - textDefaultPaymentMethod: '✓ DEFAULT', - textExpires: 'Expires', - textUseThisPayment: 'Use this payment', - textSelected: 'Selected', - }, - paymentMethod1 - ).role).toEqual('region'); + expect( + component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + paymentMethod1 + ).role + ).toEqual('region'); }); it('should be set to "button" for non selected payment cards', () => { - expect(component['createCard']( - paymentMethod1, - { - textDefaultPaymentMethod: '✓ DEFAULT', - textExpires: 'Expires', - textUseThisPayment: 'Use this payment', - textSelected: 'Selected', - }, - {...paymentMethod1, id: 'newId'} - ).role).toEqual('button'); + expect( + component['createCard']( + paymentMethod1, + { + textDefaultPaymentMethod: '✓ DEFAULT', + textExpires: 'Expires', + textUseThisPayment: 'Use this payment', + textSelected: 'Selected', + }, + { ...paymentMethod1, id: 'newId' } + ).role + ).toEqual('button'); }); }); });