diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.html b/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
index a94a3e9..ee8b2d0 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.html
@@ -19,7 +19,7 @@
   -->
 
 <div fxLayout="row" fxLayoutGap="10px">
-  <div class="default-cursor" (click)="toggleVisible()">
+  <div id="visible" class="default-cursor" (click)="toggleVisible()">
     <mat-icon matTooltip="Properties">{{isVisible.value? 'expand_less' : 'expand_more'}}</mat-icon>
   </div>
   <div>
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
index d02f1b2..28e99b0 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.spec.ts
@@ -21,9 +21,12 @@
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { PolicyTypeComponent } from "./policy-type.component";
-import { PolicyType } from "@interfaces/policy.types";
+import { PolicyType, PolicyTypeSchema } from "@interfaces/policy.types";
 import { PolicyService } from "@services/policy/policy.service";
 import { of } from "rxjs";
+import { MockComponent } from "ng-mocks";
+import { PolicyInstanceComponent } from "../policy-instance/policy-instance.component";
+import { By } from "@angular/platform-browser";
 
 describe("PolicyTypeComponent", () => {
   let component: PolicyTypeComponent;
@@ -33,13 +36,16 @@
   beforeEach(async(() => {
     policyServiceSpy = jasmine.createSpyObj("PolicyService", ["getPolicyType"]);
     const policyTypeSchema = JSON.parse(
-      '{"schemaObject": {"description": "Type 1 policy type"}}'
+      '{"title": "1", "description": "Type 1 policy type"}'
     );
     const policyType = { policy_schema: policyTypeSchema } as PolicyType;
     policyServiceSpy.getPolicyType.and.returnValue(of(policyType));
 
     TestBed.configureTestingModule({
-      declarations: [PolicyTypeComponent],
+      declarations: [
+        PolicyTypeComponent,
+        MockComponent(PolicyInstanceComponent),
+      ],
       providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
     }).compileComponents();
   }));
@@ -53,4 +59,49 @@
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("should not call service when no type, display correct type info and no PolicyInstanceComponent added", () => {
+    expect(policyServiceSpy.getPolicyType).not.toHaveBeenCalled();
+
+    expect(component.policyType).toEqual("< No Type >");
+    expect(component.policyDescription).toEqual("Type with no schema");
+
+    const ele = fixture.debugElement.nativeElement.querySelector("nrcp-policy-instance");
+    expect(ele).toBeFalsy();
+});
+
+  it("should call service when type, display correct type info and no PolicyInstanceComponent added", () => {
+    component.policyTypeId = "type1";
+    component.loadTypeInfo();
+
+    expect(policyServiceSpy.getPolicyType).toHaveBeenCalledWith("type1");
+
+    expect(component.policyType).toEqual("type1");
+    expect(component.policyDescription).toEqual("Type 1 policy type");
+
+    const ele = fixture.debugElement.nativeElement.querySelector("nrcp-policy-instance");
+    expect(ele).toBeFalsy();
+  });
+
+  it("should add PolicyInstanceComponent with correct data when toggle visible to visible", async () => {
+    const ele = fixture.debugElement.nativeElement.querySelector("#visible");
+    expect(ele.innerText).toEqual("expand_more");
+
+    ele.click();
+    fixture.detectChanges();
+
+    expect(ele.innerText).toEqual("expand_less");
+
+    const policyInstanceComp: PolicyInstanceComponent = fixture.debugElement.query(
+      By.directive(PolicyInstanceComponent)
+    ).componentInstance;
+    expect(policyInstanceComp).toBeTruthy();
+    const expectedPolicyType = {
+      id: undefined,
+      name: undefined,
+      schemaObject: JSON.parse("{}")
+    } as PolicyTypeSchema;
+    expect(policyInstanceComp.policyTypeSchema).toEqual(expectedPolicyType);
+    expect(policyInstanceComp.expanded).toBeTruthy();
+  });
 });
diff --git a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
index 7d82cb4..cfc0eb5 100644
--- a/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
+++ b/webapp-frontend/src/app/policy/policy-type/policy-type.component.ts
@@ -46,7 +46,12 @@
   constructor(private policyService: PolicyService) {}
 
   ngOnInit(): void {
-    if (this.policyTypeId !== "") {
+    this.loadTypeInfo();
+    this.isVisible.next(false);
+  }
+
+  public loadTypeInfo() {
+    if (this.policyTypeId && this.policyTypeId !== "") {
       this.policyService
         .getPolicyType(this.policyTypeId)
         .subscribe((policyType: PolicyType) => {
@@ -57,15 +62,14 @@
         });
     } else {
       const noType = {
-        policy_schema: JSON.parse('{"schemaObject": "{}"}'),
+        policy_schema: JSON.parse('{}'),
       } as PolicyType;
       const noTypeSchema = this.getSchemaObject(noType);
       this.policyTypeInfo = new PolicyTypeInfo(noTypeSchema);
       this.policyType = "< No Type >";
       this.policyDescription = "Type with no schema";
     }
-    this.isVisible.next(false);
-  }
+}
 
   private getSchemaObject(policyType: PolicyType) {
     const policyTypeSchema = {} as PolicyTypeSchema;
@@ -75,10 +79,6 @@
     return policyTypeSchema;
   }
 
-  public setIsVisible(status: boolean) {
-    this.isVisible.next(status);
-  }
-
   public toggleVisible() {
     this.isVisible.next(!this.isVisible.value);
   }