From 134476ea6d7b5d88341e28ba15f5dbbbce577598 Mon Sep 17 00:00:00 2001
From: elinuxhenrik <henrik.b.andersson@est.tech>
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 <henrik.b.andersson@est.tech>
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 @@
 
 -->
 
-<h4 class="default-cursor" (click)="toggleVisible('form')">
-    <mat-icon matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
+<h4 id="propertiesHeading" class="default-cursor" (click)="toggleVisible('form')">
+    <mat-icon id="propertiesIcon" matTooltip="Properties">{{isVisible.form ? 'expand_less' : 'expand_more'}}</mat-icon>
     Properties
 </h4>
-<div *ngIf="isVisible.form" class="json-schema-form" [@expandSection]="true">
+<div id="propertiesDiv" *ngIf="isVisible.form" class="json-schema-form" [@expandSection]="true">
     <div *ngIf="!formActive">{{jsonFormStatusMessage}}</div>
 
     <json-schema-form id="json-schema-form" *ngIf="formActive" [form]="jsonSchemaObject"
@@ -33,12 +33,12 @@
         (validationErrors)="validationErrors($event)">
     </json-schema-form>
 </div>
-<h4 [class.text-danger]="!formIsValid && !isVisible.json" [class.default-cursor]="formIsValid || isVisible.json"
+<h4 id="jsonHeading" [class.text-danger]="!formIsValid && !isVisible.json" [class.default-cursor]="formIsValid || isVisible.json"
 (click)="toggleVisible('json')">
-<mat-icon matTooltip="Json">{{isVisible.json ? 'expand_less' : 'expand_more'}}</mat-icon>
-Json
+<mat-icon id="jsonIcon" matTooltip="Json">{{isVisible.json ? 'expand_less' : 'expand_more'}}</mat-icon>
+JSON
 </h4>
-<div *ngIf="isVisible.json" fxLayout="column" [@expandSection]="true">
+<div id="jsonDiv" *ngIf="isVisible.json" fxLayout="column" [@expandSection]="true">
 <div>
     <strong *ngIf="formIsValid || prettyValidationErrors" [class.text-muted]="formIsValid"
         [class.text-danger]="!formIsValid">
@@ -53,11 +53,11 @@ Json
 </div>
 </div>
 
-<h4 class="default-cursor" (click)="toggleVisible('schema')">
-<mat-icon matTooltip="Json Schema">{{isVisible.schema ? 'expand_less' : 'expand_more'}}</mat-icon>
-Json Schema
+<h4 id="schemaHeading" class="default-cursor" (click)="toggleVisible('schema')">
+<mat-icon id="schemaIcon" matTooltip="Json Schema">{{isVisible.schema ? 'expand_less' : 'expand_more'}}</mat-icon>
+JSON Schema
 </h4>
-<div *ngIf="isVisible.schema" fxLayout="column" [@expandSection]="true">
+<div id="schemaDiv" *ngIf="isVisible.schema" fxLayout="column" [@expandSection]="true">
 <strong class="text-muted">Schema</strong>
 <pre [class.text__dark]="darkMode">{{schemaAsString}}</pre>
 </div>
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<TypedPolicyEditorComponent>;
+  let component: TestTypedPolicyEditorComponentHostComponent;
+  let fixture: ComponentFixture<TestTypedPolicyEditorComponentHostComponent>;
 
-  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: `<nrcp-typed-policy-editor [jsonObject]="policyJson" [jsonSchemaObject]="jsonSchemaObject" [darkMode]="true"></nrcp-typed-policy-editor>`
+  })
+  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