fixining compilation in unit testing

add unit test for package-header.component

Issue-ID: CCSDK-2032
Change-Id: I459ee690b84ae7eb7a852c6dc65fe1702fb6bf4a
Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>

2 files changed, 67 insertions, 26 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
index c058f81c7..09dd4187f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
@@ -2,9 +2,9 @@
 <header class="page-title">
     <div class="row">
         <h2 class="col m-0">CBA Packages
-            <span>({{numberOfPackages}} packages)</span>
+            <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
         </h2>
         <div class="col">
         </div>
     </div>
-</header>
\ No newline at end of file
+</header>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts
index 06a09e851..39228af76 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts
@@ -1,25 +1,66 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PackagesHeaderComponent } from './packages-header.component';
-
-describe('PackagesHeaderComponent', () => {
-  let component: PackagesHeaderComponent;
-  let fixture: ComponentFixture<PackagesHeaderComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PackagesHeaderComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PackagesHeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PackagesHeaderComponent} from './packages-header.component';
+import {PackagesStore} from '../../packages.store';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
+import {PackagesDashboardState} from '../../model/packages-dashboard.state';
+import {getBluePrintPageMock} from '../../blueprint.page.mock';
+import {of} from 'rxjs';
+import {By} from '@angular/platform-browser';
+
+fdescribe('PackagesHeaderComponent', () => {
+    let component: PackagesHeaderComponent;
+    let fixture: ComponentFixture<PackagesHeaderComponent>;
+    let packageStoreStub: Partial<PackagesStore>;
+    let packageDashboardState;
+    beforeEach(() => {
+        packageDashboardState = new PackagesDashboardState();
+        packageDashboardState.totalPackagesWithoutSearchorFilters = 9;
+
+        packageStoreStub = {state$: of(packageDashboardState)};
+        TestBed.resetTestEnvironment();
+        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
+            platformBrowserDynamicTesting());
+        TestBed.configureTestingModule({
+            declarations: [PackagesHeaderComponent],
+            providers: [
+                {provide: PackagesStore, useValue: packageStoreStub}
+            ]
+        });
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PackagesHeaderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should display the number of packages', () => {
+        component.numberOfPackages = 10;
+        const numberOfPackage = fixture.debugElement.query(By.css('#numberOfPackages'));
+        const numberOfPackageElement: HTMLElement = numberOfPackage.nativeElement;
+        fixture.detectChanges();
+        expect(numberOfPackageElement.textContent).toContain('' + 10);
+    });
+
+    it('should equals number of packages at store ', async(() => {
+        packageDashboardState.totalPackagesWithoutSearchorFilters = 17;
+        packageStoreStub = {state$: of(packageDashboardState)};
+
+        fixture = TestBed.createComponent(PackagesHeaderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        const numberOfPackage = fixture.debugElement.query(By.css('#numberOfPackages'));
+        const numberOfPackageElement: HTMLElement = numberOfPackage.nativeElement;
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(numberOfPackageElement.textContent).toContain('' + 17);
+        });
+
+    }));
+
 });