From 134476ea6d7b5d88341e28ba15f5dbbbce577598 Mon Sep 17 00:00:00 2001 From: elinuxhenrik Date: Wed, 10 Mar 2021 12:49:33 +0100 Subject: [PATCH] Add test of typed policy editor component Change-Id: I0a5a7aae97d3e170fcd161da54449457ee0ba182 Signed-off-by: elinuxhenrik Issue-ID: NONRTRIC-462 --- .../policy-instance-dialog.component.ts | 10 +- .../typed-policy-editor.component.html | 22 ++-- .../typed-policy-editor.component.spec.ts | 123 +++++++++++++++++++-- .../typed-policy-editor.component.ts | 9 +- 4 files changed, 127 insertions(+), 37 deletions(-) diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts index 3c2ea2b..12b2f94 100644 --- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts +++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts @@ -17,7 +17,7 @@ * limitations under the License. * ========================LICENSE_END=================================== */ -import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core'; +import { Component, Inject, OnInit, ViewChild } from '@angular/core'; import { MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import * as uuid from 'uuid'; import { CreatePolicyInstance, PolicyInstance, PolicyTypeSchema } from '../../interfaces/policy.types'; @@ -27,7 +27,6 @@ import { NotificationService } from './../../services/ui/notification.service'; import { UiService } from '../../services/ui/ui.service'; import { HttpErrorResponse } from '@angular/common/http'; import { FormGroup, FormControl, Validators } from '@angular/forms'; -import { ChangeDetectorRef } from '@angular/core'; import { Ric, Rics } from '../../interfaces/ric'; import { TypedPolicyEditorComponent } from '../typed-policy-editor/typed-policy-editor.component'; @@ -37,7 +36,7 @@ import { TypedPolicyEditorComponent } from '../typed-policy-editor/typed-policy- templateUrl: './policy-instance-dialog.component.html', styleUrls: ['./policy-instance-dialog.component.scss'] }) -export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit { +export class PolicyInstanceDialogComponent implements OnInit { @ViewChild(TypedPolicyEditorComponent) policyEditor: TypedPolicyEditorComponent; instanceForm: FormGroup; @@ -63,7 +62,6 @@ export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit { } constructor( - private cdr: ChangeDetectorRef, private dataService: PolicyService, private errorService: ErrorDialogService, private notificationService: NotificationService, @@ -90,10 +88,6 @@ export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit { } } - ngAfterViewInit() { - this.cdr.detectChanges(); - } - get ricSelector() { return this.instanceForm.get('ricSelector'); } onSubmit() { diff --git a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html index 9e6e1e4..ecbfd15 100644 --- a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html +++ b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html @@ -20,11 +20,11 @@ --> -

- {{isVisible.form ? 'expand_less' : 'expand_more'}} +

+ {{isVisible.form ? 'expand_less' : 'expand_more'}} Properties

-
+
{{jsonFormStatusMessage}}
-

-{{isVisible.json ? 'expand_less' : 'expand_more'}} -Json +{{isVisible.json ? 'expand_less' : 'expand_more'}} +JSON

-
+
@@ -53,11 +53,11 @@ Json
-

-{{isVisible.schema ? 'expand_less' : 'expand_more'}} -Json Schema +

+{{isVisible.schema ? 'expand_less' : 'expand_more'}} +JSON Schema

-
+
Schema
{{schemaAsString}}
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 9f58af2..6c745e3 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 @@ -1,36 +1,56 @@ +// - +// ========================LICENSE_START================================= +// O-RAN-SC +// %% +// Copyright (C) 2021: Nordix Foundation +// %% +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ========================LICENSE_END=================================== +// + import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/compiler'; -import { ChangeDetectorRef } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +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 { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TypedPolicyEditorComponent } from './typed-policy-editor.component'; describe('TypedPolicyEditorComponent', () => { - let component: TypedPolicyEditorComponent; - let fixture: ComponentFixture; + let component: TestTypedPolicyEditorComponentHostComponent; + let fixture: ComponentFixture; - beforeEach(async(() => { + beforeEach(async () => { TestBed.configureTestingModule({ imports: [ + BrowserModule, BrowserAnimationsModule, MatIconModule ], declarations: [ - TypedPolicyEditorComponent + TypedPolicyEditorComponent, + TestTypedPolicyEditorComponentHostComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA - ], - providers: [ - ChangeDetectorRef ] }) .compileComponents(); - })); + }); beforeEach(() => { - fixture = TestBed.createComponent(TypedPolicyEditorComponent); + fixture = TestBed.createComponent(TestTypedPolicyEditorComponentHostComponent); component = fixture.componentInstance; fixture.detectChanges(); }); @@ -38,4 +58,85 @@ describe('TypedPolicyEditorComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should have JSON form visible and JSON and JSON Schema not visible', () => { + let propertiesHeading = fixture.debugElement.nativeElement.querySelector('#propertiesHeading'); + expect(propertiesHeading).toBeTruthy(); + expect(propertiesHeading.innerText).toContain('Properties'); + let propertiesIcon = fixture.debugElement.nativeElement.querySelector('#propertiesIcon'); + expect(propertiesIcon).toBeTruthy(); + expect(propertiesIcon.innerText).toEqual('expand_less'); + let jsonForm = fixture.debugElement.nativeElement.querySelector('json-schema-form'); + expect(jsonForm).toBeTruthy(); + + let jsonHeading = fixture.debugElement.nativeElement.querySelector('#jsonHeading'); + expect(jsonHeading).toBeTruthy(); + expect(jsonHeading.innerText).toContain('JSON') + let jsonIcon = fixture.debugElement.nativeElement.querySelector('#jsonIcon'); + expect(jsonIcon).toBeTruthy(); + expect(jsonIcon.innerText).toEqual('expand_more'); + let jsonDiv = fixture.debugElement.nativeElement.querySelector('#jsonDiv'); + expect(jsonDiv).toBeFalsy(); + + let schemaHeading = fixture.debugElement.nativeElement.querySelector('#schemaHeading'); + expect(schemaHeading).toBeTruthy(); + expect(schemaHeading.innerText).toContain('JSON Schema'); + let schemaIcon = fixture.debugElement.nativeElement.querySelector('#schemaIcon'); + expect(schemaIcon).toBeTruthy(); + expect(schemaIcon.innerText).toEqual('expand_more'); + let schemaDiv = fixture.debugElement.nativeElement.querySelector('#schemaDiv'); + expect(schemaDiv).toBeFalsy(); + }); + + it('should hide JSON form', () => { + let propertiesHeading = fixture.debugElement.nativeElement.querySelector('#propertiesHeading'); + expect(propertiesHeading).toBeTruthy(); + propertiesHeading.click(); + fixture.detectChanges(); + + let propertiesIcon = fixture.debugElement.nativeElement.querySelector('#propertiesIcon'); + expect(propertiesIcon).toBeTruthy(); + expect(propertiesIcon.innerText).toEqual('expand_more'); + let propertiesDiv = fixture.debugElement.nativeElement.querySelector('propertiesDiv'); + expect(propertiesDiv).toBeFalsy(); + }); + + it('should show JSON with text for dark mode', () => { + let jsonHeading = fixture.debugElement.nativeElement.querySelector('#jsonHeading'); + expect(jsonHeading).toBeTruthy(); + jsonHeading.click(); + fixture.detectChanges(); + + let jsonIcon = fixture.debugElement.nativeElement.querySelector('#jsonIcon'); + expect(jsonIcon).toBeTruthy(); + expect(jsonIcon.innerText).toEqual('expand_less'); + let jsonDiv = fixture.debugElement.nativeElement.querySelector('#jsonDiv'); + expect(jsonDiv).toBeTruthy(); + let jsonText = jsonDiv.querySelector('pre'); + expect(jsonText.classList).toContain('text__dark'); + }); + + it('should show JSON Schema with text for dark mode', () => { + let schemaHeading = fixture.debugElement.nativeElement.querySelector('#schemaHeading'); + expect(schemaHeading).toBeTruthy(); + schemaHeading.click(); + fixture.detectChanges(); + + let schemaIcon = fixture.debugElement.nativeElement.querySelector('#schemaIcon'); + expect(schemaIcon).toBeTruthy(); + expect(schemaIcon.innerText).toEqual('expand_less'); + let schemaDiv = fixture.debugElement.nativeElement.querySelector('#schemaDiv'); + expect(schemaDiv).toBeTruthy(); + let jsonSchemaText = schemaDiv.querySelector('pre'); + expect(jsonSchemaText.classList).toContain('text__dark'); + }); + + @Component({ + selector: `typed-policy-editor-host-component`, + template: `` + }) + class TestTypedPolicyEditorComponentHostComponent { + policyJson: string = '{"A":"A"}'; + jsonSchemaObject: string = 'policy_schema": { "$schema": "http://json-schema.org/draft-07/schema#", "description": "Type 1 policy type", "additionalProperties": false, "title": "1", "type": "object", "properties": { "A": "string" }, "required": [ "A" ]}'; + } }); diff --git a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts index d05c78f..5a99e39 100644 --- a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts +++ b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts @@ -19,7 +19,7 @@ // import { animate, state, style, transition, trigger } from '@angular/animations'; -import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { JsonPointer } from 'angular6-json-schema-form'; @Component({ @@ -65,8 +65,7 @@ export class TypedPolicyEditorComponent implements OnInit { formIsValid: boolean = false; formValidationErrors: any; - constructor( - private cdr: ChangeDetectorRef) { + constructor() { this.formActive = false; } @@ -74,10 +73,6 @@ export class TypedPolicyEditorComponent implements OnInit { this.formActive = true; } - ngAfterViewInit() { - this.cdr.detectChanges(); - } - public onChanges(formData: any) { this.liveFormData = formData; } -- 2.16.6