webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts

   1 /*-
   2  * ========================LICENSE_START=================================
   3  * O-RAN-SC
   4  * %%
   5  * Copyright (C) 2019 Nordix Foundation
   6  * %%
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================LICENSE_END===================================
  19  */
  20
  21 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  22 import { ComponentFixture, TestBed } from "@angular/core/testing";
  23 import { HarnessLoader } from "@angular/cdk/testing";
  24 import { MatButtonModule } from "@angular/material/button";
  25 import { MatButtonHarness } from "@angular/material/button/testing";
  26 import {
  27   MatDialogModule,
  28   MatDialogRef,
  29   MAT_DIALOG_DATA,
  30 } from "@angular/material/dialog";
  31 import { MatSelectModule } from "@angular/material/select";
  32 import { MatInputModule } from "@angular/material/input";
  33 import { AbstractControl, ReactiveFormsModule } from "@angular/forms";
  34 import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
  35 import { ToastrModule } from "ngx-toastr";
  36
  37 import { PolicyService } from "../../services/policy/policy.service";
  38 import { ErrorDialogService } from "../../services/ui/error-dialog.service";
  39 import { UiService } from "../../services/ui/ui.service";
  40 import { PolicyInstanceDialogComponent } from "./policy-instance-dialog.component";
  41 import {
  42   ChangeDetectorRef,
  43   Component,
  44   CUSTOM_ELEMENTS_SCHEMA,
  45 } from "@angular/core";
  46 import { TypedPolicyEditorComponent } from "../typed-policy-editor/typed-policy-editor.component";
  47 import { RicSelectorComponent } from "../ric-selector/ric-selector.component";
  48 import { NoTypePolicyEditorComponent } from "../no-type-policy-editor/no-type-policy-editor.component";
  49 import { PolicyTypeSchema } from "../../interfaces/policy.types";
  50
  51 describe("PolicyInstanceDialogComponent", () => {
  52   const untypedSchema = "{}";
  53   const untypedSchemaObject = {
  54     id: "",
  55     name: "",
  56     schemaObject: untypedSchema,
  57   } as PolicyTypeSchema;
  58   const typedSchema =
  59     '{ "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "priorityLevel": "number" }, "required": [ "priorityLevel" ]}';
  60   const typedSchemaObject = {
  61     id: "Type 1",
  62     name: "Type 1",
  63     schemaObject: typedSchema,
  64   } as PolicyTypeSchema;
  65
  66   let component: PolicyInstanceDialogComponent;
  67   let fixture: ComponentFixture<PolicyInstanceDialogComponent>;
  68   let loader: HarnessLoader;
  69   let policyServiceSpy: jasmine.SpyObj<PolicyService>;
  70   let errDialogServiceSpy: jasmine.SpyObj<ErrorDialogService>;
  71
  72   beforeEach(async () => {
  73     policyServiceSpy = jasmine.createSpyObj("PolicyService", ["putPolicy"]);
  74     errDialogServiceSpy = jasmine.createSpyObj("ErrorDialogService", [
  75       "displayError",
  76     ]);
  77
  78     TestBed.configureTestingModule({
  79       imports: [
  80         BrowserAnimationsModule,
  81         MatButtonModule,
  82         MatDialogModule,
  83         MatInputModule,
  84         MatSelectModule,
  85         ReactiveFormsModule,
  86         ToastrModule.forRoot(),
  87       ],
  88       schemas: [CUSTOM_ELEMENTS_SCHEMA],
  89       declarations: [
  90         PolicyInstanceDialogComponent,
  91         RicSelectorStubComponent,
  92         NoTypePolicyEditorStubComponent,
  93         TypedPolicyEditorStubComponent,
  94       ],
  95       providers: [
  96         ChangeDetectorRef,
  97         { provide: MatDialogRef, useValue: component },
  98         { provide: PolicyService, useValue: policyServiceSpy },
  99         { provide: ErrorDialogService, useValue: errDialogServiceSpy },
 100         { provide: MAT_DIALOG_DATA, useValue: true },
 101         UiService,
 102       ],
 103     });
 104   });
 105
 106   describe("content when creating policy without type", () => {
 107     beforeEach(async () => {
 108       const policyData = {
 109         createSchema: untypedSchemaObject,
 110       };
 111       TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: policyData }); // Should be provided with a policy
 112       ({ fixture, component, loader } = compileAndGetComponents(
 113         fixture,
 114         component,
 115         loader
 116       ));
 117     });
 118
 119     it("should contain oran logo and create title and no instance info", async () => {
 120       let ele = fixture.debugElement.nativeElement.querySelector("img");
 121       expect(ele.src).toContain("assets/oran-logo.png");
 122
 123       ele = fixture.debugElement.nativeElement.querySelector("text");
 124       expect(ele.textContent).toEqual(
 125         "Create new policy instance of type < No Type >"
 126       );
 127
 128       ele = fixture.debugElement.nativeElement.querySelector("#instanceInfo");
 129       expect(ele).toBeFalsy();
 130     });
 131
 132     it("should contain ric select", async () => {
 133       const ele = fixture.debugElement.nativeElement.querySelector(
 134         "nrcp-ric-selector"
 135       );
 136       expect(ele).toBeTruthy();
 137     });
 138
 139     it("should contain json editor", async () => {
 140       const ele = fixture.debugElement.nativeElement.querySelector(
 141         "nrcp-no-type-policy-editor"
 142       );
 143       expect(ele).toBeTruthy();
 144     });
 145
 146     it("should contain enabled Close button and disabled Submit button", async () => {
 147       component.ngOnInit();
 148
 149       let closeButton: MatButtonHarness = await loader.getHarness(
 150         MatButtonHarness.with({ selector: "#closeButton" })
 151       );
 152       expect(await closeButton.isDisabled()).toBeFalsy();
 153       expect(await closeButton.getText()).toEqual("Close");
 154
 155       let submitButton: MatButtonHarness = await loader.getHarness(
 156         MatButtonHarness.with({ selector: "#submitButton" })
 157       );
 158       // expect(await submitButton.isDisabled()).toBeTruthy();
 159       expect(await submitButton.getText()).toEqual("Submit");
 160     });
 161   });
 162
 163   describe("content when creating policy with type", () => {
 164     beforeEach(async () => {
 165       const policyData = {
 166         name: "Type 1",
 167         createSchema: typedSchemaObject,
 168       };
 169       TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: policyData }); // Should be provided with a policy
 170       ({ fixture, component, loader } = compileAndGetComponents(
 171         fixture,
 172         component,
 173         loader
 174       ));
 175     });
 176
 177     it("should contain oran logo and create title and no instance info", async () => {
 178       let ele = fixture.debugElement.nativeElement.querySelector("img");
 179       expect(ele.src).toContain("assets/oran-logo.png");
 180
 181       ele = fixture.debugElement.nativeElement.querySelector("text");
 182       expect(ele.textContent).toEqual(
 183         "Create new policy instance of type Type 1"
 184       );
 185
 186       ele = fixture.debugElement.nativeElement.querySelector("#instanceInfo");
 187       expect(ele).toBeFalsy();
 188     });
 189
 190     it("should contain ric select", async () => {
 191       const ele = fixture.debugElement.nativeElement.querySelector(
 192         "nrcp-ric-selector"
 193       );
 194       expect(ele).toBeTruthy();
 195     });
 196
 197     it("should contain typed json editor", async () => {
 198       const ele = fixture.debugElement.nativeElement.querySelector(
 199         "nrcp-typed-policy-editor"
 200       );
 201       expect(ele).toBeTruthy();
 202     });
 203
 204     it("should contain enabled Close button and disabled Submit button", async () => {
 205       component.ngOnInit();
 206
 207       let closeButton: MatButtonHarness = await loader.getHarness(
 208         MatButtonHarness.with({ selector: "#closeButton" })
 209       );
 210       expect(await closeButton.isDisabled()).toBeFalsy();
 211       expect(await closeButton.getText()).toEqual("Close");
 212
 213       let submitButton: MatButtonHarness = await loader.getHarness(
 214         MatButtonHarness.with({ selector: "#submitButton" })
 215       );
 216       // expect(await submitButton.isDisabled()).toBeTruthy();
 217       expect(await submitButton.getText()).toEqual("Submit");
 218     });
 219   });
 220
 221   describe("content when editing policy without type", () => {
 222     beforeEach(async () => {
 223       const policyData = {
 224         createSchema: untypedSchemaObject,
 225         instanceId: "instanceId",
 226         instanceJson: '{"qosObjectives": {"priorityLevel": 3100}}',
 227         name: "Type 1",
 228         ric: "ric1",
 229       };
 230       TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: policyData }); // Should be provided with a policy
 231       ({ fixture, component, loader } = compileAndGetComponents(
 232         fixture,
 233         component,
 234         loader
 235       ));
 236     });
 237
 238     it("should contain oran logo and instance info", async () => {
 239       let ele = fixture.debugElement.nativeElement.querySelector("img");
 240       expect(ele.src).toContain("assets/oran-logo.png");
 241
 242       ele = fixture.debugElement.nativeElement.querySelector("text");
 243       expect(ele.childNodes[0].childNodes[0]).toBeFalsy(); // No create title
 244
 245       ele = fixture.debugElement.nativeElement.querySelector("#instanceInfo");
 246       expect(ele).toBeTruthy();
 247       expect(ele.innerText).toEqual("[ric1] Instance ID: instanceId");
 248     });
 249
 250     it("should not contain ric select", async () => {
 251       const ele = fixture.debugElement.nativeElement.querySelector(
 252         "nrcp-ric-selector"
 253       );
 254       expect(ele).toBeFalsy();
 255     });
 256
 257     it("should contain json editor", async () => {
 258       const ele = fixture.debugElement.nativeElement.querySelector(
 259         "nrcp-no-type-policy-editor"
 260       );
 261       expect(ele).toBeTruthy();
 262     });
 263
 264     it("should contain enabled Close and Submit buttons", async () => {
 265       let closeButton: MatButtonHarness = await loader.getHarness(
 266         MatButtonHarness.with({ selector: "#closeButton" })
 267       );
 268       expect(await closeButton.isDisabled()).toBeFalsy();
 269       expect(await closeButton.getText()).toEqual("Close");
 270
 271       let submitButton: MatButtonHarness = await loader.getHarness(
 272         MatButtonHarness.with({ selector: "#submitButton" })
 273       );
 274       expect(await submitButton.isDisabled()).toBeFalsy();
 275       expect(await submitButton.getText()).toEqual("Submit");
 276     });
 277   });
 278
 279   describe("content when editing policy with type", () => {
 280     beforeEach(async () => {
 281       const policyData = {
 282         createSchema: typedSchemaObject,
 283         instanceId: "instanceId",
 284         instanceJson: '{"qosObjectives": {"priorityLevel": 3100}}',
 285         name: "name",
 286         ric: "ric1",
 287       };
 288       TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: policyData }); // Should be provided with a policy
 289       ({ fixture, component, loader } = compileAndGetComponents(
 290         fixture,
 291         component,
 292         loader
 293       ));
 294     });
 295
 296     it("should contain oran logo and instance info", async () => {
 297       let ele = fixture.debugElement.nativeElement.querySelector("img");
 298       expect(ele.src).toContain("assets/oran-logo.png");
 299
 300       ele = fixture.debugElement.nativeElement.querySelector("text");
 301       expect(ele.childNodes[0].childNodes[0]).toBeFalsy(); // No create title
 302
 303       ele = fixture.debugElement.nativeElement.querySelector("#instanceInfo");
 304       expect(ele).toBeTruthy();
 305       expect(ele.innerText).toEqual("[ric1] Instance ID: instanceId");
 306     });
 307
 308     it("should not contain ric select", async () => {
 309       const ele = fixture.debugElement.nativeElement.querySelector(
 310         "nrcp-ric-selector"
 311       );
 312       expect(ele).toBeFalsy();
 313     });
 314
 315     it("should contain typed json editor", async () => {
 316       const ele = fixture.debugElement.nativeElement.querySelector(
 317         "nrcp-typed-policy-editor"
 318       );
 319       expect(ele).toBeTruthy();
 320     });
 321
 322     it("should contain enabled Close and Submit buttons", async () => {
 323       let closeButton: MatButtonHarness = await loader.getHarness(
 324         MatButtonHarness.with({ selector: "#closeButton" })
 325       );
 326       expect(await closeButton.isDisabled()).toBeFalsy();
 327       expect(await closeButton.getText()).toEqual("Close");
 328
 329       let submitButton: MatButtonHarness = await loader.getHarness(
 330         MatButtonHarness.with({ selector: "#submitButton" })
 331       );
 332       expect(await submitButton.isDisabled()).toBeFalsy();
 333       expect(await submitButton.getText()).toEqual("Submit");
 334     });
 335   });
 336 });
 337
 338 function compileAndGetComponents(
 339   fixture: ComponentFixture<PolicyInstanceDialogComponent>,
 340   component: PolicyInstanceDialogComponent,
 341   loader: HarnessLoader
 342 ) {
 343   TestBed.compileComponents();
 344
 345   fixture = TestBed.createComponent(PolicyInstanceDialogComponent);
 346   component = fixture.componentInstance;
 347   fixture.detectChanges();
 348   loader = TestbedHarnessEnvironment.loader(fixture);
 349   return { fixture, component, loader };
 350 }
 351
 352 @Component({
 353   selector: "nrcp-ric-selecor",
 354   template: "",
 355   providers: [
 356     { provide: RicSelectorComponent, useClass: RicSelectorStubComponent },
 357   ],
 358 })
 359 class RicSelectorStubComponent {
 360   get selectedRic(): string {
 361     return "ric1";
 362   }
 363 }
 364
 365 @Component({
 366   selector: "nrcp-no-type-policy-editor",
 367   template: "",
 368   providers: [
 369     {
 370       provide: NoTypePolicyEditorComponent,
 371       useClass: NoTypePolicyEditorStubComponent,
 372     },
 373   ],
 374 })
 375 class NoTypePolicyEditorStubComponent {
 376   get policyJsonTextArea(): AbstractControl {
 377     const textArea = { value: "{}" } as AbstractControl;
 378     return textArea;
 379   }
 380 }
 381
 382 @Component({
 383   selector: "nrcp-typed-policy-editor",
 384   template: "",
 385   providers: [
 386     {
 387       provide: TypedPolicyEditorComponent,
 388       useClass: TypedPolicyEditorStubComponent,
 389     },
 390   ],
 391 })
 392 class TypedPolicyEditorStubComponent {
 393   get formIsValid(): boolean {
 394     return true;
 395   }
 396 }