Add test of typed policy editor component

[portal/nonrtric-controlpanel.git] / webapp-frontend / src / app / policy / typed-policy-editor / typed-policy-editor.component.spec.ts

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 (file)
--- 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" ]}';
+  }
 });