await deleteButton.click();
expect(confirmServiceSpy.openConfirmDialog).toHaveBeenCalledWith(
+ "Delete Policy",
"Are you sure you want to delete this policy instance?"
);
expect(policyServiceSpy.deletePolicy).toHaveBeenCalledWith("policy1");
deleteInstance(instance: PolicyInstance): void {
this.confirmDialogService
.openConfirmDialog(
+ "Delete Policy",
"Are you sure you want to delete this policy instance?"
)
.afterClosed()
* ========================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",
+ },
+ });
+ });
});
* ========================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,
+ },
});
}
}
========================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
* ========================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("");
});
});
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);
- }
}