From: elinuxhenrik <henrik.b.andersson@est.tech>
Date: Wed, 14 Apr 2021 11:13:15 +0000 (+0200)
Subject: Simplify and add tests of confirm dialog
X-Git-Tag: 2.2.0~33
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=76bf355447e6bb041dd52edceeffeff272acae38;p=portal%2Fnonrtric-controlpanel.git

Simplify and add tests of confirm dialog

Change-Id: I51c5ce78e59b040e9143e1af449de9bd0b6a10b2
Issue-ID: NONRTRIC-474
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
---

diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
index 8f29d42..12a4c34 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
@@ -322,6 +322,7 @@ describe("PolicyInstanceComponent", () => {
     await deleteButton.click();
 
     expect(confirmServiceSpy.openConfirmDialog).toHaveBeenCalledWith(
+      "Delete Policy",
       "Are you sure you want to delete this policy instance?"
     );
     expect(policyServiceSpy.deletePolicy).toHaveBeenCalledWith("policy1");
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
index 6441e56..8d1924a 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
@@ -192,6 +192,7 @@ export class PolicyInstanceComponent implements OnInit {
   deleteInstance(instance: PolicyInstance): void {
     this.confirmDialogService
       .openConfirmDialog(
+        "Delete Policy",
         "Are you sure you want to delete this policy instance?"
       )
       .afterClosed()
diff --git a/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts b/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
index 8abece5..cb06ec1 100644
--- a/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
+++ b/webapp-frontend/src/app/services/ui/confirm-dialog.service.spec.ts
@@ -18,20 +18,64 @@
  * ========================LICENSE_END===================================
  */
 
-import { TestBed } from '@angular/core/testing';
+import { TestBed } from "@angular/core/testing";
 
-import { ConfirmDialogService } from './confirm-dialog.service';
-import { MatDialogModule } from '@angular/material/dialog';
-import {UiService} from './ui.service';
+import { ConfirmDialogService } from "./confirm-dialog.service";
+import { MatDialog, MatDialogModule } from "@angular/material/dialog";
+import { UiService } from "./ui.service";
+import { ConfirmDialogComponent } from "@app/ui/confirm-dialog/confirm-dialog.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
-describe('ConfirmDialogService', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [ MatDialogModule ],
-    providers: [UiService]
-  }));
+describe("ConfirmDialogService", () => {
+  let matDialogSpy: jasmine.SpyObj<MatDialog>;
+  let service: ConfirmDialogService;
 
-  it('should be created', () => {
-    const service: ConfirmDialogService = TestBed.inject(ConfirmDialogService);
+  beforeEach(() => {
+    matDialogSpy = jasmine.createSpyObj("MatDialog", ["open"]);
+
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatDialogModule],
+      providers: [
+        { provide: MatDialog, useValue: matDialogSpy },
+        UiService,
+      ],
+    });
+
+    service = TestBed.inject(ConfirmDialogService);
+  });
+
+  it("should be created", () => {
     expect(service).toBeTruthy();
   });
+
+  it("should open confirm dialog with correct dark mode and data", () => {
+    const uiService: UiService = TestBed.inject(UiService);
+    uiService.darkModeState.next(false);
+
+    service.openConfirmDialog("Heading", "Message");
+
+    expect(matDialogSpy.open).toHaveBeenCalledWith(ConfirmDialogComponent, {
+      panelClass: "",
+      width: "480px",
+      position: { top: "100px" },
+      data: {
+        heading: "Heading",
+        message: "Message",
+      },
+    });
+
+    uiService.darkModeState.next(true);
+
+    service.openConfirmDialog("Heading", "Message");
+
+    expect(matDialogSpy.open).toHaveBeenCalledWith(ConfirmDialogComponent, {
+      panelClass: "dark-theme",
+      width: "480px",
+      position: { top: "100px" },
+      data: {
+        heading: "Heading",
+        message: "Message",
+      },
+    });
+  });
 });
diff --git a/webapp-frontend/src/app/services/ui/confirm-dialog.service.ts b/webapp-frontend/src/app/services/ui/confirm-dialog.service.ts
index 29cbad5..1fefc8f 100644
--- a/webapp-frontend/src/app/services/ui/confirm-dialog.service.ts
+++ b/webapp-frontend/src/app/services/ui/confirm-dialog.service.ts
@@ -18,38 +18,34 @@
  * ========================LICENSE_END===================================
  */
 
-import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '@ui/confirm-dialog/confirm-dialog.component';
-import { UiService } from './ui.service';
+import { Injectable } from "@angular/core";
+import { MatDialog, MatDialogRef } from "@angular/material/dialog";
+import { ConfirmDialogComponent } from "@ui/confirm-dialog/confirm-dialog.component";
+import { UiService } from "./ui.service";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class ConfirmDialogService {
+  constructor(private dialog: MatDialog, private ui: UiService) {}
 
-  darkMode: boolean;
-  panelClass = '';
-
-  constructor(private dialog: MatDialog,
-    private ui: UiService) { }
-
-  openConfirmDialog(msg: string) {
+  openConfirmDialog(heading: string, msg: string): MatDialogRef<any> {
+    let panelClass = "";
+    let darkMode: boolean;
     this.ui.darkModeState.subscribe((isDark) => {
-      this.darkMode = isDark;
+      darkMode = isDark;
     });
-    if (this.darkMode) {
-      this.panelClass = 'dark-theme';
-    } else {
-      this.panelClass = '';
+    if (darkMode) {
+      panelClass = "dark-theme";
     }
     return this.dialog.open(ConfirmDialogComponent, {
-      panelClass: this.panelClass,
-      width: '480px',
-      position: { top: '100px' },
+      panelClass: panelClass,
+      width: "480px",
+      position: { top: "100px" },
       data: {
-        message: msg
-      }
+        heading: heading,
+        message: msg,
+      },
     });
   }
 }
diff --git a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.html b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.html
index c4d475a..66be675 100644
--- a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.html
+++ b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.html
@@ -18,12 +18,13 @@
   ========================LICENSE_END===================================
   -->
 
-  <div mat-dialog-title>
+  <div id="title" mat-dialog-title>
+    {{data.heading}}
   </div>
-  <div mat-dialog-content>
+  <div id="message" mat-dialog-content>
     {{data.message}}
   </div>
   <div mat-dialog-actions class="modal-footer justify-content-center">
-    <button mat-button class="mat-raised-button" [mat-dialog-close]="false">Cancel</button>
-    <button mat-button class="mat-raised-button mat-primary" [mat-dialog-close]="true">OK</button>
+    <button id="cancelButton" mat-button class="mat-raised-button" mat-dialog-close>Cancel</button>
+    <button id="okButton" mat-button class="mat-raised-button mat-primary" [mat-dialog-close]="true">OK</button>
   </div>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
index ef0e92f..3f4fecf 100644
--- a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.spec.ts
@@ -18,35 +18,82 @@
  * ========================LICENSE_END===================================
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ConfirmDialogComponent } from "./confirm-dialog.component";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+import { HarnessLoader } from "@angular/cdk/testing";
+import { MatButtonHarness } from "@angular/material/button/testing";
 
-describe('ConfirmDialogComponent', () => {
+describe("ConfirmDialogComponent", () => {
   let component: ConfirmDialogComponent;
   let fixture: ComponentFixture<ConfirmDialogComponent>;
+  let loader: HarnessLoader;
+
+  let dialogRefSpy: jasmine.SpyObj<MatDialogRef<any>>;
 
   beforeEach(async(() => {
+    dialogRefSpy = jasmine.createSpyObj("MatDialogRef", ["close"]);
+
     TestBed.configureTestingModule({
-      declarations: [ ConfirmDialogComponent ],
-      imports: [ MatDialogModule ],
+      declarations: [ConfirmDialogComponent],
+      imports: [MatDialogModule],
       providers: [
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-        { provide: MatDialogRef, useValue: {} }
-    ]
-    })
-    .compileComponents();
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { heading: "Delete Policy", message: "Do?" },
+        },
+        { provide: MatDialogRef, useValue: dialogRefSpy },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ConfirmDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
   });
 
-  it('should create', () => {
+  it("should create and contain correct title, message and buttons", async () => {
     expect(component).toBeTruthy();
+
+    const title = fixture.debugElement.nativeElement.querySelector("#title");
+    expect(title.innerText).toEqual("Delete Policy");
+
+    const message = fixture.debugElement.nativeElement.querySelector(
+      "#message"
+    );
+    expect(message.innerText).toEqual("Do?");
+
+    const cancelButton = fixture.debugElement.nativeElement.querySelector(
+      "#cancelButton"
+    );
+    expect(cancelButton).toBeTruthy();
+
+    const okButton = fixture.debugElement.nativeElement.querySelector(
+      "#okButton"
+    );
+    expect(okButton).toBeTruthy();
+  });
+
+  it("should close dialog with true when Ok button clicked", async () =>{
+    let okButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#okButton" })
+    );
+    await okButton.click();
+
+    expect(dialogRefSpy.close).toHaveBeenCalledWith(true);
+  });
+
+  it("should close dialog without data when Cancel button clicked", async () =>{
+    let cancelButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#cancelButton" })
+    );
+    await cancelButton.click();
+
+    expect(dialogRefSpy.close).toHaveBeenCalledWith("");
   });
 });
diff --git a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.ts b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.ts
index 8b389bb..97bb650 100644
--- a/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.ts
+++ b/webapp-frontend/src/app/ui/confirm-dialog/confirm-dialog.component.ts
@@ -25,15 +25,8 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
   selector: 'nrcp-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
 })
-export class ConfirmDialogComponent implements OnInit {
+export class ConfirmDialogComponent {
 
   constructor(@Inject(MAT_DIALOG_DATA) public data,
     public dialogRef: MatDialogRef<ConfirmDialogComponent>) { }
-
-  ngOnInit() {
-  }
-
-  closeDialog() {
-    this.dialogRef.close(false);
-  }
 }