From 2346734b630678ceb521c91de89401238be6d78f Mon Sep 17 00:00:00 2001 From: Susanne Schneider Date: Thu, 12 Jan 2023 16:46:09 +0100 Subject: [PATCH] feat: tests for notification list --- ...-product-notifications-list.component.html | 4 +- ...oduct-notifications-list.component.spec.ts | 74 ++++++++++++++++++- ...oduct-notifications-page.component.spec.ts | 27 ++++++- 3 files changed, 98 insertions(+), 7 deletions(-) diff --git a/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.html b/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.html index 9f34efd918..cbb964ffa7 100644 --- a/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.html +++ b/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.html @@ -7,7 +7,7 @@ > - + {{ 'account.notifications.table.product' | translate }} @@ -24,7 +24,7 @@ - +
diff --git a/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.spec.ts b/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.spec.ts index d81fd3ac93..1c67acdfb1 100644 --- a/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-list/account-product-notifications-list.component.spec.ts +++ b/src/app/extensions/product-notifications/pages/account-product-notifications/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; 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/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-page.component.spec.ts b/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-page.component.spec.ts index 1ae0833da7..3d70349380 100644 --- a/src/app/extensions/product-notifications/pages/account-product-notifications/account-product-notifications-page.component.spec.ts +++ b/src/app/extensions/product-notifications/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' + ); + }); });