webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.spec.ts

   1 // -
   2 //   ========================LICENSE_START=================================
   3 //   O-RAN-SC
   4 //   %%
   5 //   Copyright (C) 2021: 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 { CUSTOM_ELEMENTS_SCHEMA } from "@angular/compiler";
  22 import { Component } from "@angular/core";
  23 import { ComponentFixture, TestBed } from "@angular/core/testing";
  24 import { MatIconModule } from "@angular/material/icon";
  25 import { BrowserModule, By } from "@angular/platform-browser";
  26 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  27
  28 import { TypedPolicyEditorComponent } from "./typed-policy-editor.component";
  29
  30 describe("TypedPolicyEditorComponent", () => {
  31   let hostComponent: TestTypedPolicyEditorComponentHostComponent;
  32   let componentUnderTest: TypedPolicyEditorComponent;
  33   let hostFixture: ComponentFixture<TestTypedPolicyEditorComponentHostComponent>;
  34
  35   beforeEach(async () => {
  36     TestBed.configureTestingModule({
  37       imports: [BrowserModule, BrowserAnimationsModule, MatIconModule],
  38       declarations: [
  39         TypedPolicyEditorComponent,
  40         TestTypedPolicyEditorComponentHostComponent,
  41       ],
  42       schemas: [CUSTOM_ELEMENTS_SCHEMA],
  43     }).compileComponents();
  44   });
  45
  46   beforeEach(() => {
  47     hostFixture = TestBed.createComponent(
  48       TestTypedPolicyEditorComponentHostComponent
  49     );
  50     hostComponent = hostFixture.componentInstance;
  51     componentUnderTest = hostFixture.debugElement.query(
  52       By.directive(TypedPolicyEditorComponent)
  53     ).componentInstance;
  54     hostFixture.detectChanges();
  55   });
  56
  57   it("should create", () => {
  58     expect(hostComponent).toBeTruthy();
  59   });
  60
  61   it("should have JSON form visible and JSON and JSON Schema not visible", () => {
  62     let propertiesHeading = hostFixture.debugElement.nativeElement.querySelector(
  63       "#propertiesHeading"
  64     );
  65     expect(propertiesHeading).toBeTruthy();
  66     expect(propertiesHeading.innerText).toContain("Properties");
  67
  68     let propertiesIcon = hostFixture.debugElement.nativeElement.querySelector(
  69       "#propertiesIcon"
  70     );
  71     expect(propertiesIcon).toBeTruthy();
  72     expect(propertiesIcon.innerText).toEqual("expand_less");
  73
  74     let jsonForm = hostFixture.debugElement.nativeElement.querySelector(
  75       "json-schema-form"
  76     );
  77     expect(jsonForm).toBeTruthy();
  78
  79     let jsonHeading = hostFixture.debugElement.nativeElement.querySelector(
  80       "#jsonHeading"
  81     );
  82     expect(jsonHeading).toBeTruthy();
  83     expect(jsonHeading.innerText).toContain("JSON");
  84
  85     let jsonIcon = hostFixture.debugElement.nativeElement.querySelector(
  86       "#jsonIcon"
  87     );
  88     expect(jsonIcon).toBeTruthy();
  89     expect(jsonIcon.innerText).toEqual("expand_more");
  90
  91     let jsonDiv = hostFixture.debugElement.nativeElement.querySelector(
  92       "#jsonDiv"
  93     );
  94     expect(jsonDiv).toBeFalsy();
  95
  96     let schemaHeading = hostFixture.debugElement.nativeElement.querySelector(
  97       "#schemaHeading"
  98     );
  99     expect(schemaHeading).toBeTruthy();
 100     expect(schemaHeading.innerText).toContain("JSON Schema");
 101
 102     let schemaIcon = hostFixture.debugElement.nativeElement.querySelector(
 103       "#schemaIcon"
 104     );
 105     expect(schemaIcon).toBeTruthy();
 106     expect(schemaIcon.innerText).toEqual("expand_more");
 107
 108     let schemaDiv = hostFixture.debugElement.nativeElement.querySelector(
 109       "#schemaDiv"
 110     );
 111     expect(schemaDiv).toBeFalsy();
 112   });
 113
 114   it("should hide JSON form", () => {
 115     let propertiesHeading = hostFixture.debugElement.nativeElement.querySelector(
 116       "#propertiesHeading"
 117     );
 118     expect(propertiesHeading).toBeTruthy();
 119     propertiesHeading.click();
 120     hostFixture.detectChanges();
 121
 122     let propertiesIcon = hostFixture.debugElement.nativeElement.querySelector(
 123       "#propertiesIcon"
 124     );
 125     expect(propertiesIcon).toBeTruthy();
 126     expect(propertiesIcon.innerText).toEqual("expand_more");
 127
 128     let propertiesDiv = hostFixture.debugElement.nativeElement.querySelector(
 129       "propertiesDiv"
 130     );
 131     expect(propertiesDiv).toBeFalsy();
 132   });
 133
 134   it("should show JSON with text for dark mode and correct content", () => {
 135     let jsonHeading = hostFixture.debugElement.nativeElement.querySelector(
 136       "#jsonHeading"
 137     );
 138     expect(jsonHeading).toBeTruthy();
 139     jsonHeading.click();
 140     hostFixture.detectChanges();
 141
 142     let jsonIcon = hostFixture.debugElement.nativeElement.querySelector(
 143       "#jsonIcon"
 144     );
 145     expect(jsonIcon).toBeTruthy();
 146     expect(jsonIcon.innerText).toEqual("expand_less");
 147
 148     componentUnderTest.onChanges('{ "qosObjectives": "test" }');
 149     hostFixture.detectChanges();
 150
 151     let jsonDiv = hostFixture.debugElement.nativeElement.querySelector(
 152       "#jsonDiv"
 153     );
 154     expect(jsonDiv).toBeTruthy();
 155     let jsonText = jsonDiv.querySelector("pre");
 156     expect(jsonText.classList).toContain("text__dark");
 157     expect(jsonText.innerText).toEqual('"{ \\"qosObjectives\\": \\"test\\" }"');
 158   });
 159
 160   it("should present error info in JSON div", () => {
 161     const errors = [
 162       {
 163         keyword: "required",
 164         dataPath: "/scope/qosObjectives",
 165         schemaPath: "#/properties/scope/qosObjectives/required",
 166         params: { missingProperty: "priorityLevel" },
 167         message: "should have required property 'priorityLevel'",
 168       },
 169     ];
 170     componentUnderTest.validationErrors(errors);
 171     hostFixture.detectChanges();
 172     componentUnderTest.prettyValidationErrors;
 173     hostFixture.detectChanges();
 174
 175     // Show the JSON
 176     let jsonHeading = hostFixture.debugElement.nativeElement.querySelector(
 177       "#jsonHeading"
 178     );
 179     expect(jsonHeading).toBeTruthy();
 180     jsonHeading.click();
 181     hostFixture.detectChanges();
 182
 183     let jsonDiv = hostFixture.debugElement.nativeElement.querySelector(
 184       "#jsonDiv"
 185     );
 186     expect(jsonDiv.innerText).toContain("Not valid — errors:");
 187     expect(jsonDiv.innerText).toContain(
 188       "scope.qosObjectives: should have required property 'priorityLevel'"
 189     );
 190   });
 191
 192   it("should show JSON Schema with text for dark mode and correct content", () => {
 193     let schemaHeading = hostFixture.debugElement.nativeElement.querySelector(
 194       "#schemaHeading"
 195     );
 196     expect(schemaHeading).toBeTruthy();
 197     schemaHeading.click();
 198     hostFixture.detectChanges();
 199
 200     let schemaIcon = hostFixture.debugElement.nativeElement.querySelector(
 201       "#schemaIcon"
 202     );
 203     expect(schemaIcon).toBeTruthy();
 204     expect(schemaIcon.innerText).toEqual("expand_less");
 205
 206     componentUnderTest.schemaAsString;
 207     hostFixture.detectChanges();
 208     let schemaDiv = hostFixture.debugElement.nativeElement.querySelector(
 209       "#schemaDiv"
 210     );
 211     expect(schemaDiv).toBeTruthy();
 212
 213     let jsonSchemaText = schemaDiv.querySelector("pre");
 214     expect(jsonSchemaText.classList).toContain("text__dark");
 215     expect(jsonSchemaText.innerText).toContain('qosObjectives: {');
 216   });
 217
 218   it("should send a valid json", () => {
 219     let emittedValidJson: string;
 220     componentUnderTest.validJson.subscribe((json: string) => {
 221       emittedValidJson = json;
 222     });
 223
 224     componentUnderTest.onChanges('{ "qosObjectives": "test" }');
 225     hostFixture.detectChanges();
 226     componentUnderTest.isValid(true);
 227
 228     expect(emittedValidJson).toEqual('"{ \\"qosObjectives\\": \\"test\\" }"');
 229   });
 230
 231   it("should send null when invalid json", () => {
 232     let emittedValidJson: string;
 233     componentUnderTest.validJson.subscribe((json: string) => {
 234       emittedValidJson = json;
 235     });
 236
 237     componentUnderTest.isValid(false);
 238
 239     expect(emittedValidJson).toBeFalsy();
 240   });
 241
 242   @Component({
 243     selector: `typed-policy-editor-host-component`,
 244     template: `<nrcp-typed-policy-editor
 245       [jsonObject]="policyJson"
 246       [jsonSchemaObject]="jsonSchemaObject"
 247       [darkMode]="true"
 248     ></nrcp-typed-policy-editor>`,
 249   })
 250   class TestTypedPolicyEditorComponentHostComponent {
 251     policyJson: string = "{ jsonSchemaObject: 'test' }";
 252     jsonSchemaObject: string =
 253       "{type: 'object',properties: {qosObjectives: {additionalProperties: false,type: 'object',properties: {priorityLevel: {type: 'number'}},required: ['priorityLevel']}},required: ['qosObjectives']}";
 254   }
 255 });