chore: fix errors in storefrontlib lib unit tests (CXSPA-5225) (#18060)

Co-authored-by: Hakwoo Kim <[email protected]>
SAP · Nov 7, 2023 · 475961e · 475961e
1 parent c28b1b0
commit 475961e
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 13 deletions.
diff --git a/projects/storefrontlib/cms-components/misc/message/message.component.spec.ts b/projects/storefrontlib/cms-components/misc/message/message.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, Input } from '@angular/core';
+import { Component, DebugElement, Directive, Input } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { GlobalMessageType, I18nTestingModule } from '@spartacus/core';
@@ -25,6 +25,13 @@ class MockCxIconComponent {
   @Input() type: ICON_TYPE;
 }
 
+@Directive({
+  selector: '[cxAtMessage]',
+})
+class MockAtMessageDirective {
+  @Input() cxAtMessage: string | string[] | undefined;
+}
+
 describe('MessageComponent', () => {
   let component: MessageComponent;
   let fixture: ComponentFixture<MessageComponent>;
@@ -34,7 +41,11 @@ describe('MessageComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [I18nTestingModule],
-        declarations: [MessageComponent, MockCxIconComponent],
+        declarations: [
+          MessageComponent,
+          MockCxIconComponent,
+          MockAtMessageDirective,
+        ],
       }).compileComponents();
     })
   );

diff --git a/...rontlib/cms-components/myaccount/address-book/address-form/address-form.component.spec.ts b/...rontlib/cms-components/myaccount/address-book/address-form/address-form.component.spec.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, DebugElement } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  DebugElement,
+  Directive,
+  Input,
+} from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -109,6 +114,13 @@ class MockLaunchDialogService implements Partial<LaunchDialogService> {
   }
 }
 
+@Directive({
+  selector: '[cxNgSelectA11y]',
+})
+class MockNgSelectA11yDirective {
+  @Input() cxNgSelectA11y: { ariaLabel?: string; ariaControls?: string };
+}
+
 describe('AddressFormComponent', () => {
   let component: AddressFormComponent;
   let fixture: ComponentFixture<AddressFormComponent>;
@@ -135,7 +147,7 @@ describe('AddressFormComponent', () => {
           I18nTestingModule,
           FormErrorsModule,
         ],
-        declarations: [AddressFormComponent],
+        declarations: [AddressFormComponent, MockNgSelectA11yDirective],
         providers: [
           { provide: LaunchDialogService, useClass: MockLaunchDialogService },
           { provide: UserService, useClass: MockUserService },
@@ -283,13 +295,16 @@ describe('AddressFormComponent', () => {
   });
 
   it('should emit submitAddress if dialog was closed with selected address as parameter', () => {
+    spyOn(launchDialogService, 'openDialogAndSubscribe');
     const mockAddressVerificationResult: AddressValidation = {
       decision: 'REVIEW',
     };
     dialogClose$.next(mockAddress);
 
     component.openSuggestedAddress(mockAddressVerificationResult);
 
+    expect(launchDialogService.openDialogAndSubscribe).toHaveBeenCalled();
+
     component.submitAddress.pipe(take(1)).subscribe((address) => {
       expect(address).toEqual(mockAddress);
     });

diff --git a/...book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.spec.ts b/...book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.spec.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { Address, I18nTestingModule } from '@spartacus/core';
-import { LaunchDialogService } from '../../../../../layout';
+import { FocusDirective, LaunchDialogService } from '../../../../../layout';
 import { of } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { ICON_TYPE } from '../../../../misc/index';
@@ -41,7 +41,11 @@ describe('SuggestedAddressDialogComponent', () => {
         providers: [
           { provide: LaunchDialogService, useClass: MockLaunchDialogService },
         ],
-        declarations: [SuggestedAddressDialogComponent, MockCxIconComponent],
+        declarations: [
+          SuggestedAddressDialogComponent,
+          MockCxIconComponent,
+          FocusDirective,
+        ],
       }).compileComponents();
     })
   );

diff --git a/...components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.spec.ts b/...components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.spec.ts
@@ -6,6 +6,7 @@ import { Observable, of } from 'rxjs';
 import { ICON_TYPE } from '../../../../../cms-components/misc/icon/index';
 import { LaunchDialogService } from '../../../../../layout/index';
 import { CouponDialogComponent } from './coupon-dialog.component';
+import { FocusDirective } from '@spartacus/storefront';
 
 const mockCoupon: CustomerCoupon = {
   couponId: 'CustomerCoupon',
@@ -41,7 +42,11 @@ describe('CouponDialogComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [CouponDialogComponent, MockCxIconComponent],
+        declarations: [
+          CouponDialogComponent,
+          MockCxIconComponent,
+          FocusDirective,
+        ],
         imports: [I18nTestingModule],
         providers: [
           { provide: LaunchDialogService, useClass: MockLaunchDialogService },

diff --git a/projects/storefrontlib/cms-components/myaccount/my-interests/my-interests.component.spec.ts b/projects/storefrontlib/cms-components/myaccount/my-interests/my-interests.component.spec.ts
@@ -1,6 +1,7 @@
 import {
   Component,
   DebugElement,
+  Directive,
   EventEmitter,
   Input,
   Output,
@@ -89,6 +90,13 @@ class MockGlobalMessageService implements Partial<GlobalMessageService> {
 })
 class MockSpinnerComponent {}
 
+@Directive({
+  selector: '[cxAtMessage]',
+})
+class MockAtMessageDirective {
+  @Input() cxAtMessage: string | string[] | undefined;
+}
+
 const p553637$: Observable<Product> = of({
   code: '553637',
   name: 'NV10',
@@ -222,6 +230,7 @@ describe('MyInterestsComponent', () => {
           MockPaginationComponent,
           MockSortingComponent,
           MockFeatureLevelDirective,
+          MockAtMessageDirective,
         ],
       }).compileComponents();
     })

diff --git a/.../storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.spec.ts b/.../storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, DebugElement, Input } from '@angular/core';
+import { Component, DebugElement, Directive, Input } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
@@ -13,6 +13,7 @@ import { EMPTY, Observable, of } from 'rxjs';
 import { ICON_TYPE } from '../../../cms-components/misc/icon';
 import { CardComponent } from '../../../shared/components/card/card.component';
 import { PaymentMethodsComponent } from './payment-methods.component';
+import { FocusDirective } from '@spartacus/storefront';
 
 class MockGlobalMessageService {
   add = jasmine.createSpy();
@@ -24,6 +25,13 @@ class MockGlobalMessageService {
 })
 class MockCxSpinnerComponent {}
 
+@Directive({
+  selector: '[cxAtMessage]',
+})
+class MockAtMessageDirective {
+  @Input() cxAtMessage: string | string[] | undefined;
+}
+
 const mockPayment: PaymentDetails = {
   defaultPayment: true,
   accountHolderName: 'John Doe',
@@ -71,6 +79,8 @@ describe('PaymentMethodsComponent', () => {
           MockCxSpinnerComponent,
           CardComponent,
           MockCxIconComponent,
+          MockAtMessageDirective,
+          FocusDirective,
         ],
         providers: [
           { provide: UserPaymentService, useClass: MockUserPaymentService },

diff --git a/...components/product/carousel/product-carousel-item/product-carousel-item.component.spec.ts b/...components/product/carousel/product-carousel-item/product-carousel-item.component.spec.ts
@@ -1,4 +1,5 @@
 import {
+  Component,
   Directive,
   Injector,
   Input,
@@ -39,6 +40,16 @@ class MockOutletDirective implements Partial<OutletDirective> {
   @Input() cxOutlet: string;
 }
 
+@Component({
+  selector: 'cx-media',
+  template: '<img>',
+})
+class MockMediaComponent {
+  @Input() container: any;
+  @Input() format: string;
+  @Input() alt: string;
+}
+
 describe('ProductCarouselItemComponent in product-carousel', () => {
   let component: ProductCarouselItemComponent;
   let componentInjector: Injector;
@@ -69,6 +80,7 @@ describe('ProductCarouselItemComponent in product-carousel', () => {
           ProductCarouselItemComponent,
           MockUrlPipe,
           MockOutletDirective,
+          MockMediaComponent,
         ],
         providers: [
           {

diff --git a/.../stock-notification/stock-notification-dialog/stock-notification-dialog.component.spec.ts b/.../stock-notification/stock-notification-dialog/stock-notification-dialog.component.spec.ts
@@ -13,6 +13,7 @@ import { Observable, of } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { UrlTestingModule } from 'projects/core/src/routing/configurable-routes/url-translation/testing/url-testing.module';
 import { LaunchDialogService } from '../../../../layout/launch-dialog/services/index';
+import { FocusDirective } from '@spartacus/storefront';
 
 describe('StockNotificationDialogComponent', () => {
   let component: StockNotificationDialogComponent;
@@ -44,7 +45,7 @@ describe('StockNotificationDialogComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [StockNotificationDialogComponent],
+        declarations: [StockNotificationDialogComponent, FocusDirective],
         imports: [
           I18nTestingModule,
           RouterTestingModule,

diff --git a/...refrontlib/cms-components/product/stock-notification/stock-notification.component.spec.ts b/...refrontlib/cms-components/product/stock-notification/stock-notification.component.spec.ts
@@ -30,6 +30,7 @@ import { StockNotificationComponent } from './stock-notification.component';
 
 import { LAUNCH_CALLER } from '../../../layout/launch-dialog/config/index';
 import { LaunchDialogService } from '../../../layout/launch-dialog/services/index';
+import { FocusDirective } from '@spartacus/storefront';
 
 class MockLaunchDialogService implements Partial<LaunchDialogService> {
   openDialog(
@@ -125,6 +126,7 @@ describe('StockNotificationComponent', () => {
           StockNotificationComponent,
           StockNotificationDialogComponent,
           MockUrlPipe,
+          FocusDirective,
         ],
         providers: [
           { provide: UserIdService, useValue: userIdService },

diff --git a/projects/storefrontlib/shared/components/card/card.component.spec.ts b/projects/storefrontlib/shared/components/card/card.component.spec.ts
@@ -1,9 +1,10 @@
-import { Component, DebugElement, Input } from '@angular/core';
+import { Component, DebugElement, Directive, Input } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { I18nTestingModule } from '@spartacus/core';
 import { ICON_TYPE } from '../../../cms-components/misc/index';
 import { Card, CardComponent, CardLinkAction } from './card.component';
+import { FocusDirective } from '@spartacus/storefront';
 
 @Component({
   selector: 'cx-icon',
@@ -13,6 +14,13 @@ class MockCxIconComponent {
   @Input() type: ICON_TYPE;
 }
 
+@Directive({
+  selector: '[cxAtMessage]',
+})
+class MockAtMessageDirective {
+  @Input() cxAtMessage: string | string[] | undefined;
+}
+
 describe('CardComponent', () => {
   let component: CardComponent;
   let fixture: ComponentFixture<CardComponent>;
@@ -22,7 +30,12 @@ describe('CardComponent', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [I18nTestingModule],
-        declarations: [CardComponent, MockCxIconComponent],
+        declarations: [
+          CardComponent,
+          MockCxIconComponent,
+          MockAtMessageDirective,
+          FocusDirective,
+        ],
       }).compileComponents();
     })
   );

diff --git a/...ects/storefrontlib/shared/components/chat-messaging/messaging/messaging.component.spec.ts b/...ects/storefrontlib/shared/components/chat-messaging/messaging/messaging.component.spec.ts
@@ -7,6 +7,7 @@ import { IconModule } from '../../../../cms-components';
 import { FileUploadModule, FormErrorsModule } from '../../form';
 import { MessagingComponent } from './messaging.component';
 import { MessageEvent } from './messaging.model';
+import { AvatarComponent } from '@spartacus/storefront';
 
 const mockMessageEvent: MessageEvent = {
   rightAlign: false,
@@ -31,7 +32,7 @@ describe('MessagingComponent', () => {
         FormErrorsModule,
         ReactiveFormsModule,
       ],
-      declarations: [MessagingComponent],
+      declarations: [MessagingComponent, AvatarComponent],
     }).compileComponents();
   });
 

diff --git a/projects/storefrontlib/shared/components/list-navigation/sorting/sorting.component.spec.ts b/projects/storefrontlib/shared/components/list-navigation/sorting/sorting.component.spec.ts
@@ -3,16 +3,24 @@ import { SortingComponent } from './sorting.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
 import { I18nTestingModule } from '@spartacus/core';
+import { Directive, Input } from '@angular/core';
 
 describe('SortingComponent', () => {
+  @Directive({
+    selector: '[cxNgSelectA11y]',
+  })
+  class MockNgSelectA11yDirective {
+    @Input() cxNgSelectA11y: { ariaLabel?: string; ariaControls?: string };
+  }
+
   let component: SortingComponent;
   let fixture: ComponentFixture<SortingComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [NgSelectModule, FormsModule, I18nTestingModule],
-        declarations: [SortingComponent],
+        declarations: [SortingComponent, MockNgSelectA11yDirective],
       }).compileComponents();
     })
   );