feat: tests for notification list

intershop · Jan 13, 2023 · 2346734 · 2346734
1 parent 3d98ada
commit 2346734
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 7 deletions.
diff --git a/...ions/account-product-notifications-list/account-product-notifications-list.component.html b/...ions/account-product-notifications-list/account-product-notifications-list.component.html
@@ -7,7 +7,7 @@
   >
     <!-- Product -->
     <ng-container cdkColumnDef="productImage">
-      <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product">
+      <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product-image">
         {{ 'account.notifications.table.product' | translate }}
       </th>
       <td cdk-cell *cdkCellDef="let productNotification">
@@ -24,7 +24,7 @@
 
     <!-- Product Info -->
     <ng-container cdkColumnDef="product">
-      <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product-info"></th>
+      <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-product"></th>
       <td cdk-cell *cdkCellDef="let productNotification">
         <div class="list-item">
           <ish-product-name ishProductContext [sku]="productNotification.sku"></ish-product-name>

diff --git a/...s/account-product-notifications-list/account-product-notifications-list.component.spec.ts b/...s/account-product-notifications-list/account-product-notifications-list.component.spec.ts
@@ -1,5 +1,13 @@
+import { CdkTableModule } from '@angular/cdk/table';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent, MockDirective } from 'ng-mocks';
+
+import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
+import { ProductImageComponent } from 'ish-shared/components/product/product-image/product-image.component';
+import { ProductPriceComponent } from 'ish-shared/components/product/product-price/product-price.component';
+
+import { ProductNotificationType } from '../../../models/product-notification/product-notification.model';
 
 import { AccountProductNotificationsListComponent } from './account-product-notifications-list.component';
 
@@ -8,10 +16,30 @@ describe('Account Product Notifications List Component', () => {
   let fixture: ComponentFixture<AccountProductNotificationsListComponent>;
   let element: HTMLElement;
 
+  const productNotifications = [
+    {
+      id: '123_stock',
+      type: 'stock' as ProductNotificationType,
+      sku: '1234',
+      notificationMailAddress: 'test@test.intershop.de',
+    },
+    {
+      id: '456_stock',
+      type: 'stock' as ProductNotificationType,
+      sku: '5678',
+      notificationMailAddress: 'test@test.intershop.de',
+    },
+  ];
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
-      declarations: [AccountProductNotificationsListComponent],
+      imports: [CdkTableModule, TranslateModule.forRoot()],
+      declarations: [
+        AccountProductNotificationsListComponent,
+        MockComponent(ProductImageComponent),
+        MockComponent(ProductPriceComponent),
+        MockDirective(ProductContextDirective),
+      ],
     }).compileComponents();
   });
 
@@ -26,4 +54,46 @@ describe('Account Product Notifications List Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
   });
+
+  it('should display empty list text and no table if there are no order template', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id=emptyList]')).toBeTruthy();
+
+    expect(element.querySelector('[data-testing-id=th-product-image]')).toBeFalsy();
+    expect(element.querySelector('[data-testing-id=th-product-info]')).toBeFalsy();
+    expect(element.querySelector('[data-testing-id=th-notification]')).toBeFalsy();
+  });
+
+  it('should render table when provided with data', () => {
+    component.productNotifications = productNotifications;
+    component.columnsToDisplay = ['productImage', 'product', 'notification'];
+    fixture.detectChanges();
+
+    expect(element.querySelector('table.cdk-table')).toBeTruthy();
+    expect(element.querySelectorAll('table tr.cdk-row')).toHaveLength(2);
+  });
+
+  it('should display table columns productImage if it is configured', () => {
+    component.productNotifications = productNotifications;
+    component.columnsToDisplay = ['productImage', 'product', 'notification'];
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testing-id=th-product-image]')).toBeTruthy();
+  });
+
+  it('should display table column product if it is configured', () => {
+    component.productNotifications = productNotifications;
+    component.columnsToDisplay = ['product'];
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testing-id=th-product]')).toBeTruthy();
+  });
+
+  it('should display table column notification if it is configured', () => {
+    component.productNotifications = productNotifications;
+    component.columnsToDisplay = ['notification'];
+    fixture.detectChanges();
+
+    expect(element.querySelector('[data-testing-id=th-notification]')).toBeTruthy();
+  });
 });
diff --git a/.../pages/account-product-notifications/account-product-notifications-page.component.spec.ts b/.../pages/account-product-notifications/account-product-notifications-page.component.spec.ts
@@ -1,8 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
-import { instance, mock } from 'ts-mockito';
+import { of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
+
+import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 
 import { ProductNotificationsFacade } from '../../facades/product-notifications.facade';
 
@@ -17,8 +21,12 @@ describe('Account Product Notifications Page Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, TranslateModule.forRoot()],
-      declarations: [AccountProductNotificationsPageComponent, MockComponent(AccountProductNotificationsListComponent)],
+      imports: [NgbNavModule, RouterTestingModule, TranslateModule.forRoot()],
+      declarations: [
+        AccountProductNotificationsPageComponent,
+        MockComponent(AccountProductNotificationsListComponent),
+        MockComponent(LoadingComponent),
+      ],
       providers: [{ provide: ProductNotificationsFacade, useFactory: () => instance(productNotificationsFacade) }],
     }).compileComponents();
   });
@@ -34,4 +42,17 @@ describe('Account Product Notifications Page Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
   });
+
+  it('should display loading overlay if product notifications are loading', () => {
+    when(productNotificationsFacade.productNotificationsLoading$).thenReturn(of(true));
+    fixture.detectChanges();
+    expect(element.querySelector('ish-loading')).toBeTruthy();
+  });
+
+  it('should display price notifactions tab as active', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('[data-testing-id=tab-link-notifications-price]').getAttribute('class')).toContain(
+      'active'
+    );
+  });
 });