From: maximesson <maxime.bonneau@est.tech>
Date: Fri, 30 Apr 2021 08:18:20 +0000 (+0200)
Subject: Testing in Policy Control Component
X-Git-Tag: 2.2.0~19
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=f86e29a04a460607a84a6668e3798ee2ea792401;p=portal%2Fnonrtric-controlpanel.git

Testing in Policy Control Component

Change-Id: I09d7d2be29b8bd638a3367e03bbdb58292a8e614
Issue-ID: NONRTRIC-505
Signed-off-by: maximesson <maxime.bonneau@est.tech>
---

diff --git a/webapp-frontend/src/app/policy/policy-control.component.html b/webapp-frontend/src/app/policy/policy-control.component.html
index 03aa936..a3edf4e 100644
--- a/webapp-frontend/src/app/policy/policy-control.component.html
+++ b/webapp-frontend/src/app/policy/policy-control.component.html
@@ -21,7 +21,7 @@
   <div fxLayout="row">
     <div class="nrcp-global-page-title">Policy Types</div>
     <div class="refresh-button">
-      <button #refreshButton mat-icon-button color="primary" (click)="refreshTables()">
+      <button id="refreshButton" mat-icon-button color="primary" (click)="refreshTables()">
           <mat-icon>refresh</mat-icon>
       </button>
   </div>
@@ -30,4 +30,4 @@
 
 <nrcp-policy-type *ngFor="let policyTypeId of this.policyTypeIds" [policyTypeId]="policyTypeId" [minimiseTrigger]="minimiseTrigger"></nrcp-policy-type>
 
-<div *ngIf="this.policyTypeIds.length==0">There are no policy types to display.</div>
\ No newline at end of file
+<div id="noInstance" *ngIf="this.policyTypeIds.length==0">There are no policy types to display.</div>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/policy/policy-control.component.spec.ts b/webapp-frontend/src/app/policy/policy-control.component.spec.ts
index 4109dbd..f033361 100644
--- a/webapp-frontend/src/app/policy/policy-control.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-control.component.spec.ts
@@ -22,7 +22,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { By } from "@angular/platform-browser";
 import { MatIconModule } from "@angular/material/icon";
 import { MatTableModule } from "@angular/material/table";
-import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from "@angular/core";
 import { of } from "rxjs";
 
 import { PolicyControlComponent } from "./policy-control.component";
@@ -31,57 +31,121 @@ import { PolicyService } from "@services/policy/policy.service";
 import { MockComponent } from "ng-mocks";
 import { PolicyTypeComponent } from "./policy-type/policy-type.component";
 import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatButtonModule } from '@angular/material/button';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
 describe("PolicyControlComponent", () => {
-  let component: PolicyControlComponent;
-  let fixture: ComponentFixture<PolicyControlComponent>;
+  let hostComponent: PolicyControlComponent;
+  let hostFixture: ComponentFixture<PolicyControlComponent>;
   let loader: HarnessLoader;
+  let policyServiceSpy: jasmine.SpyObj<PolicyService>;
+  let el: DebugElement;
 
   beforeEach(async(() => {
-    const policyServiceSpy = jasmine.createSpyObj("PolicyService", [
+    policyServiceSpy = jasmine.createSpyObj("PolicyService", [
       "getPolicyTypes",
     ]);
-    const policyTypes = { policytype_ids: ["type1", "type2"] } as PolicyTypes;
-    policyServiceSpy.getPolicyTypes.and.returnValue(of(policyTypes));
 
     TestBed.configureTestingModule({
-      imports: [MatIconModule, MatTableModule, BrowserAnimationsModule],
+      imports: [
+        MatIconModule,
+        MatTableModule,
+        BrowserAnimationsModule,
+        MatButtonModule,
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [
         PolicyControlComponent,
         MockComponent(PolicyTypeComponent),
       ],
-      providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
-    }).compileComponents();
+      providers: [
+        { provide: PolicyService, useValue: policyServiceSpy }
+      ],
+    });
   }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PolicyControlComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    loader = TestbedHarnessEnvironment.loader(fixture);
-  });
+  describe("normally functioning", () => {
+    beforeEach(() => {
+      const policyTypes = { policytype_ids: ["type1", "type2"] } as PolicyTypes;
+      policyServiceSpy.getPolicyTypes.and.returnValue(of(policyTypes));
 
-  it("should create", () => {
-    expect(component).toBeTruthy();
-  });
+      compileAndGetComponents();
+    });
+
+    it("should create", () => {
+      expect(hostComponent).toBeTruthy();
+    });
+
+    it("should contain two PolicyType components instantiated with the correct type", () => {
+      const typeComponents: PolicyTypeComponent[] = hostFixture.debugElement
+        .queryAll(By.directive(PolicyTypeComponent))
+        .map((component) => component.componentInstance);
+
+      expect(typeComponents.length).toEqual(2);
+      expect(typeComponents[0].policyTypeId).toEqual("type1");
+      expect(typeComponents[1].policyTypeId).toEqual("type2");
+    });
+
+    it("should call the refresh button when clicking on it", async () => {
+      let refreshButton: MatButtonHarness = await loader.getHarness(
+        MatButtonHarness.with({ selector: "#refreshButton" })
+      );
+      spyOn(hostComponent, "refreshTables");
+      await refreshButton.click();
+      expect(hostComponent.refreshTables).toHaveBeenCalled();
+    })
+
+    it("should close instance tables when clicking on refresh button", async () => {
+      let refreshButton: MatButtonHarness = await loader.getHarness(
+        MatButtonHarness.with({ selector: "#refreshButton" })
+      );
+      const policyTypeComponent: PolicyTypeComponent = hostFixture.debugElement.query(
+        By.directive(PolicyTypeComponent)
+      ).componentInstance;
+      let booleanTrigger = policyTypeComponent.minimiseTrigger
+      await refreshButton.click();
+      expect(policyTypeComponent.minimiseTrigger).not.toEqual(booleanTrigger);
+    })
+
+    it("should render the types sorted when clicking on refresh button", async () => {
+      const typeComponents: PolicyTypeComponent[] = hostFixture.debugElement
+        .queryAll(By.directive(PolicyTypeComponent))
+        .map((component) => component.componentInstance);
+
+      for(var i= 0; i < typeComponents.length-1; i++){
+        expect(typeComponents[i].policyTypeId<typeComponents[i+1].policyTypeId).toBeTruthy();
+      }
+    })
+  })
+
+  describe("no types", () => {
+    beforeEach(() => {
+      policyServiceSpy.getPolicyTypes.and.returnValue(
+        of({
+          policytype_ids: [],
+        } as PolicyTypes)
+      );
 
-  it("should contain two PolicyType components instantiated with the correct type", () => {
-    const typeComponents: PolicyTypeComponent[] = fixture.debugElement
-      .queryAll(By.directive(PolicyTypeComponent))
-      .map((component) => component.componentInstance);
+      compileAndGetComponents();
+    });
 
-    expect(typeComponents.length).toEqual(2);
-    expect(typeComponents[0].policyTypeId).toEqual("type1");
-    expect(typeComponents[1].policyTypeId).toEqual("type2");
+    it("should display message of no types", async () => {
+      expect(policyServiceSpy.getPolicyTypes.length).toEqual(0);
+      const content = el.query(By.css('#noInstance')).nativeElement;
+      expect(content.innerText).toBe("There are no policy types to display.");
+    });
   });
 
-  /*it("should reload when clicking on refresh button", async () => {
-    let refreshButton: MatButtonHarness = await loader.getHarness(
-      MatButtonHarness.with({ selector: "#refreshButton" })
-    );
+  function compileAndGetComponents() {
+    TestBed.compileComponents();
+    console.log(TestBed);
 
-  })*/
+    hostFixture = TestBed.createComponent(PolicyControlComponent);
+    hostComponent = hostFixture.componentInstance;
+    el = hostFixture.debugElement;
+    hostFixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(hostFixture);
+    return { hostFixture, hostComponent, loader };
+  }
 });
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
index 859e1f8..b5db979 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
@@ -27,11 +27,12 @@ import { of } from "rxjs";
 import { MockComponent } from "ng-mocks";
 import { PolicyInstanceComponent } from "../policy-instance/policy-instance.component";
 import { By } from "@angular/platform-browser";
+import { Component, SimpleChange, ViewChild } from '@angular/core';
 
 describe("PolicyTypeComponent", () => {
-  let component: PolicyTypeComponent;
+  let component: TestPolicyTypeHostComponent;
   let policyServiceSpy: jasmine.SpyObj<PolicyService>;
-  let fixture: ComponentFixture<PolicyTypeComponent>;
+  let fixture: ComponentFixture<TestPolicyTypeHostComponent>;
 
   beforeEach(async(() => {
     policyServiceSpy = jasmine.createSpyObj("PolicyService", ["getPolicyType"]);
@@ -45,13 +46,14 @@ describe("PolicyTypeComponent", () => {
       declarations: [
         PolicyTypeComponent,
         MockComponent(PolicyInstanceComponent),
+        TestPolicyTypeHostComponent,
       ],
       providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(PolicyTypeComponent);
+    fixture = TestBed.createComponent(TestPolicyTypeHostComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -63,21 +65,21 @@ describe("PolicyTypeComponent", () => {
   it("should not call service when no type, display correct type info and no PolicyInstanceComponent added", () => {
     expect(policyServiceSpy.getPolicyType).not.toHaveBeenCalled();
 
-    expect(component.policyType).toEqual("< No Type >");
-    expect(component.policyDescription).toEqual("Type with no schema");
+    expect(component.policyTypeComponent.policyType).toEqual("< No Type >");
+    expect(component.policyTypeComponent.policyDescription).toEqual("Type with no schema");
 
     const ele = fixture.debugElement.nativeElement.querySelector("nrcp-policy-instance");
     expect(ele).toBeFalsy();
 });
 
   it("should call service when type, display correct type info and no PolicyInstanceComponent added", () => {
-    component.policyTypeId = "type1";
-    component.loadTypeInfo();
+    component.policyTypeComponent.policyTypeId = "type1";
+    component.policyTypeComponent.loadTypeInfo();
 
     expect(policyServiceSpy.getPolicyType).toHaveBeenCalledWith("type1");
 
-    expect(component.policyType).toEqual("type1");
-    expect(component.policyDescription).toEqual("Type 1 policy type");
+    expect(component.policyTypeComponent.policyType).toEqual("type1");
+    expect(component.policyTypeComponent.policyDescription).toEqual("Type 1 policy type");
 
     const ele = fixture.debugElement.nativeElement.querySelector("nrcp-policy-instance");
     expect(ele).toBeFalsy();
@@ -103,4 +105,34 @@ describe("PolicyTypeComponent", () => {
     } as PolicyTypeSchema;
     expect(policyInstanceComp.policyTypeSchema).toEqual(expectedPolicyType);
   });
+
+  it("should call ngOnChanges when minimiseTrigger is changed", async() => {
+    spyOn(component.policyTypeComponent, "ngOnChanges");
+    component.minimiseTrigger = !component.minimiseTrigger;
+    fixture.detectChanges();
+    expect(component.policyTypeComponent.ngOnChanges).toHaveBeenCalled();
+  });
+
+  it("should close all tables when the types are refreshed", async() => {
+    const ele = fixture.debugElement.nativeElement.querySelector("#visible");
+    ele.click();
+    fixture.detectChanges();
+    component.policyTypeComponent.ngOnChanges({
+      minimiseTrigger: new SimpleChange(null, null, component.policyTypeComponent.minimiseTrigger)
+    });
+    fixture.detectChanges();
+    expect(ele.innerText).toEqual("expand_more");
+  });
+
+  @Component({
+    selector: `policy-type-host-component`,
+    template: `<nrcp-policy-type
+      [minimiseTrigger]="this.minimiseTrigger"
+    ></nrcp-policy-type>`,
+  })
+  class TestPolicyTypeHostComponent {
+    @ViewChild(PolicyTypeComponent)
+    policyTypeComponent: PolicyTypeComponent;
+    minimiseTrigger: boolean = false;
+  }
 });
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
index 7271419..3e8a2ee 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
@@ -18,7 +18,7 @@
  * ========================LICENSE_END===================================
  */
 
-import { Component, Input, OnInit, OnChanges} from "@angular/core";
+import { Component, Input, OnInit, OnChanges, SimpleChanges} from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { PolicyType, PolicyTypeSchema } from "@interfaces/policy.types";
 import { PolicyService } from "@app/services/policy/policy.service";
@@ -52,8 +52,10 @@ export class PolicyTypeComponent implements OnInit, OnChanges {
     this.isVisible.next(false);
   }
 
-  ngOnChanges(): void {
-    this.isVisible.next(false);
+  ngOnChanges(changes: SimpleChanges): void {
+    if(changes['minimiseTrigger']){
+      this.isVisible.next(false);
+    }
   }
 
   public loadTypeInfo() {