From: elinuxhenrik Date: Tue, 20 Apr 2021 15:55:45 +0000 (+0200) Subject: Add coverage of TypedPolicyEditorComponent X-Git-Tag: 2.2.0~24 X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=bf404f832241494839f43ad33e12ceac24625451;p=portal%2Fnonrtric-controlpanel.git Add coverage of TypedPolicyEditorComponent Change-Id: I0ed6260dc8cd50a79e34a5486ff8c7d753b09220 Issue-ID: NONRTRIC-494 Signed-off-by: elinuxhenrik --- diff --git a/webapp-frontend/src/app/interceptor.mock.ts b/webapp-frontend/src/app/interceptor.mock.ts index 42e6855..7163412 100644 --- a/webapp-frontend/src/app/interceptor.mock.ts +++ b/webapp-frontend/src/app/interceptor.mock.ts @@ -114,6 +114,10 @@ const urls = [ url: "/a1-policy/v2/policies/2000?ric=ric1&type=1", json: "", }, + { + url: "/a1-policy/v2/rics?policytype_id=0", + json: ric1, + }, { url: "/a1-policy/v2/rics?policytype_id=1", json: ric1, diff --git a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.spec.ts b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.spec.ts index fc4a166..d3b8263 100644 --- a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.spec.ts +++ b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.spec.ts @@ -22,14 +22,15 @@ import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/compiler"; import { Component } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { MatIconModule } from "@angular/material/icon"; -import { BrowserModule } from "@angular/platform-browser"; +import { BrowserModule, By } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { TypedPolicyEditorComponent } from "./typed-policy-editor.component"; describe("TypedPolicyEditorComponent", () => { - let component: TestTypedPolicyEditorComponentHostComponent; - let fixture: ComponentFixture; + let hostComponent: TestTypedPolicyEditorComponentHostComponent; + let componentUnderTest: TypedPolicyEditorComponent; + let hostFixture: ComponentFixture; beforeEach(async () => { TestBed.configureTestingModule({ @@ -43,119 +44,199 @@ describe("TypedPolicyEditorComponent", () => { }); beforeEach(() => { - fixture = TestBed.createComponent( + hostFixture = TestBed.createComponent( TestTypedPolicyEditorComponentHostComponent ); - component = fixture.componentInstance; - fixture.detectChanges(); + hostComponent = hostFixture.componentInstance; + componentUnderTest = hostFixture.debugElement.query( + By.directive(TypedPolicyEditorComponent) + ).componentInstance; + hostFixture.detectChanges(); }); it("should create", () => { - expect(component).toBeTruthy(); + expect(hostComponent).toBeTruthy(); }); it("should have JSON form visible and JSON and JSON Schema not visible", () => { - let propertiesHeading = fixture.debugElement.nativeElement.querySelector( + let propertiesHeading = hostFixture.debugElement.nativeElement.querySelector( "#propertiesHeading" ); expect(propertiesHeading).toBeTruthy(); expect(propertiesHeading.innerText).toContain("Properties"); - let propertiesIcon = fixture.debugElement.nativeElement.querySelector( + + let propertiesIcon = hostFixture.debugElement.nativeElement.querySelector( "#propertiesIcon" ); expect(propertiesIcon).toBeTruthy(); expect(propertiesIcon.innerText).toEqual("expand_less"); - let jsonForm = fixture.debugElement.nativeElement.querySelector( + + let jsonForm = hostFixture.debugElement.nativeElement.querySelector( "json-schema-form" ); expect(jsonForm).toBeTruthy(); - let jsonHeading = fixture.debugElement.nativeElement.querySelector( + let jsonHeading = hostFixture.debugElement.nativeElement.querySelector( "#jsonHeading" ); expect(jsonHeading).toBeTruthy(); expect(jsonHeading.innerText).toContain("JSON"); - let jsonIcon = fixture.debugElement.nativeElement.querySelector( + + let jsonIcon = hostFixture.debugElement.nativeElement.querySelector( "#jsonIcon" ); expect(jsonIcon).toBeTruthy(); expect(jsonIcon.innerText).toEqual("expand_more"); - let jsonDiv = fixture.debugElement.nativeElement.querySelector("#jsonDiv"); + + let jsonDiv = hostFixture.debugElement.nativeElement.querySelector( + "#jsonDiv" + ); expect(jsonDiv).toBeFalsy(); - let schemaHeading = fixture.debugElement.nativeElement.querySelector( + let schemaHeading = hostFixture.debugElement.nativeElement.querySelector( "#schemaHeading" ); expect(schemaHeading).toBeTruthy(); expect(schemaHeading.innerText).toContain("JSON Schema"); - let schemaIcon = fixture.debugElement.nativeElement.querySelector( + + let schemaIcon = hostFixture.debugElement.nativeElement.querySelector( "#schemaIcon" ); expect(schemaIcon).toBeTruthy(); expect(schemaIcon.innerText).toEqual("expand_more"); - let schemaDiv = fixture.debugElement.nativeElement.querySelector( + + let schemaDiv = hostFixture.debugElement.nativeElement.querySelector( "#schemaDiv" ); expect(schemaDiv).toBeFalsy(); }); it("should hide JSON form", () => { - let propertiesHeading = fixture.debugElement.nativeElement.querySelector( + let propertiesHeading = hostFixture.debugElement.nativeElement.querySelector( "#propertiesHeading" ); expect(propertiesHeading).toBeTruthy(); propertiesHeading.click(); - fixture.detectChanges(); + hostFixture.detectChanges(); - let propertiesIcon = fixture.debugElement.nativeElement.querySelector( + let propertiesIcon = hostFixture.debugElement.nativeElement.querySelector( "#propertiesIcon" ); expect(propertiesIcon).toBeTruthy(); expect(propertiesIcon.innerText).toEqual("expand_more"); - let propertiesDiv = fixture.debugElement.nativeElement.querySelector( + + let propertiesDiv = hostFixture.debugElement.nativeElement.querySelector( "propertiesDiv" ); expect(propertiesDiv).toBeFalsy(); }); - it("should show JSON with text for dark mode", () => { - let jsonHeading = fixture.debugElement.nativeElement.querySelector( + it("should show JSON with text for dark mode and correct content", () => { + let jsonHeading = hostFixture.debugElement.nativeElement.querySelector( "#jsonHeading" ); expect(jsonHeading).toBeTruthy(); jsonHeading.click(); - fixture.detectChanges(); + hostFixture.detectChanges(); - let jsonIcon = fixture.debugElement.nativeElement.querySelector( + let jsonIcon = hostFixture.debugElement.nativeElement.querySelector( "#jsonIcon" ); expect(jsonIcon).toBeTruthy(); expect(jsonIcon.innerText).toEqual("expand_less"); - let jsonDiv = fixture.debugElement.nativeElement.querySelector("#jsonDiv"); + + componentUnderTest.onChanges('{ "qosObjectives": "test" }'); + hostFixture.detectChanges(); + + let jsonDiv = hostFixture.debugElement.nativeElement.querySelector( + "#jsonDiv" + ); expect(jsonDiv).toBeTruthy(); let jsonText = jsonDiv.querySelector("pre"); expect(jsonText.classList).toContain("text__dark"); + expect(jsonText.innerText).toEqual('"{ \\"qosObjectives\\": \\"test\\" }"'); + }); + + it("should present error info in JSON div", () => { + const errors = [ + { + keyword: "required", + dataPath: "/scope/qosObjectives", + schemaPath: "#/properties/scope/qosObjectives/required", + params: { missingProperty: "priorityLevel" }, + message: "should have required property 'priorityLevel'", + }, + ]; + componentUnderTest.validationErrors(errors); + hostFixture.detectChanges(); + componentUnderTest.prettyValidationErrors; + hostFixture.detectChanges(); + + // Show the JSON + let jsonHeading = hostFixture.debugElement.nativeElement.querySelector( + "#jsonHeading" + ); + expect(jsonHeading).toBeTruthy(); + jsonHeading.click(); + hostFixture.detectChanges(); + + let jsonDiv = hostFixture.debugElement.nativeElement.querySelector( + "#jsonDiv" + ); + expect(jsonDiv.innerText).toContain("Not valid — errors:"); + expect(jsonDiv.innerText).toContain( + "scope.qosObjectives: should have required property 'priorityLevel'" + ); }); - it("should show JSON Schema with text for dark mode", () => { - let schemaHeading = fixture.debugElement.nativeElement.querySelector( + it("should show JSON Schema with text for dark mode and correct content", () => { + let schemaHeading = hostFixture.debugElement.nativeElement.querySelector( "#schemaHeading" ); expect(schemaHeading).toBeTruthy(); schemaHeading.click(); - fixture.detectChanges(); + hostFixture.detectChanges(); - let schemaIcon = fixture.debugElement.nativeElement.querySelector( + let schemaIcon = hostFixture.debugElement.nativeElement.querySelector( "#schemaIcon" ); expect(schemaIcon).toBeTruthy(); expect(schemaIcon.innerText).toEqual("expand_less"); - let schemaDiv = fixture.debugElement.nativeElement.querySelector( + + componentUnderTest.schemaAsString; + hostFixture.detectChanges(); + let schemaDiv = hostFixture.debugElement.nativeElement.querySelector( "#schemaDiv" ); expect(schemaDiv).toBeTruthy(); + let jsonSchemaText = schemaDiv.querySelector("pre"); expect(jsonSchemaText.classList).toContain("text__dark"); + expect(jsonSchemaText.innerText).toContain('qosObjectives: {'); + }); + + it("should send a valid json", () => { + let emittedValidJson: string; + componentUnderTest.validJson.subscribe((json: string) => { + emittedValidJson = json; + }); + + componentUnderTest.onChanges('{ "qosObjectives": "test" }'); + hostFixture.detectChanges(); + componentUnderTest.isValid(true); + + expect(emittedValidJson).toEqual('"{ \\"qosObjectives\\": \\"test\\" }"'); + }); + + it("should send null when invalid json", () => { + let emittedValidJson: string; + componentUnderTest.validJson.subscribe((json: string) => { + emittedValidJson = json; + }); + + componentUnderTest.isValid(false); + + expect(emittedValidJson).toBeFalsy(); }); @Component({ @@ -167,8 +248,8 @@ describe("TypedPolicyEditorComponent", () => { >`, }) class TestTypedPolicyEditorComponentHostComponent { - policyJson: string = '{"A":"A"}'; + policyJson: string = "{ jsonSchemaObject: 'test' }"; jsonSchemaObject: string = - 'policy_schema": { "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "A": "string" }, "required": [ "A" ]}'; + "{type: 'object',properties: {qosObjectives: {additionalProperties: false,type: 'object',properties: {priorityLevel: {type: 'number'}},required: ['priorityLevel']}},required: ['qosObjectives']}"; } });