Implement form preview tests

Author: newmanw

web-app/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/admin-event-form-preview-dialog.component.spec.ts

@@ -1,34 +1,85 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AdminEventFormPreviewDialogComponent } from './admin-event-form-preview-dialog.component';
 
-describe('AdminEventFormPreviewDialogComponent', () => {
-  let component: AdminEventFormPreviewDialogComponent;
-  let fixture: ComponentFixture<AdminEventFormPreviewDialogComponent>;
+import { AdminEventFormPreviewComponent } from './admin-event-form-preview.component';
+
+describe('AdminEventFormPreviewComponent', () => {
+  let component: AdminEventFormPreviewDialogComponent
+  let fixture: ComponentFixture<AdminEventFormPreviewDialogComponent>
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminEventFormPreviewDialogComponent ],
-      imports: [MatDialogModule],
+      imports: [BrowserAnimationsModule, MatDialogModule],
+      declarations: [AdminEventFormPreviewComponent],
       providers: [{
-        provide: MatDialogRef, useValue: {}
-      }, {
-        provide: MAT_DIALOG_DATA, useValue: {
-          fields: []
+        provide: MAT_DIALOG_DATA,
+        useValue: {
+          name: 'Mock Form',
+          fields: [{
+            id: 1,
+            archived: true,
+            name: 'field1',
+            title: 'Field 1',
+            type: 'textfield'
+          },{
+            id: 3,
+            archived: false,
+            name: 'field3',
+            title: 'Field 3',
+            type: 'textfield'
+          },{
+            id: 2,
+            archived: false,
+            name: 'field2',
+            title: 'Field 2',
+            type: 'textfield'
+          }]
         }
       }]
     })
-    .compileComponents();
+      .compileComponents()
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AdminEventFormPreviewDialogComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture.detectChanges()
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have id', () => {
+    const id = component.formGroup.get('id')
+    expect(id).toBeDefined()
+    expect(id.value).toEqual(0)
+  });
+
+  it('should have formId', () => {
+    const formId = component.formGroup.get('formId')
+    expect(formId).toBeDefined()
+    expect(formId.value).toEqual(0)
+  });
+
+  it('should filter archived fields', () => {
+    const nonArchivedFieldNames = component.formDefinition.fields.filter(field => {
+      return !field.archived
+    }).map(field => field.name)
+
+    const controlPaths = Object.keys(component.formGroup.controls).filter(path => {
+      return path !== 'id' && path !== 'formId'
+    })
+
+    controlPaths.forEach(path => {
+      expect(nonArchivedFieldNames).toContain(path)
+    })
+  });
+
+  it('should sort fields', () => {
+    const controlPaths = Object.keys(component.formGroup.controls)
+    expect(controlPaths).toEqual(['id', 'formId', 'field2', 'field3'])
+  });
 });

web-app/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/admin-event-form-preview.component.spec.ts

@@ -1,27 +1,82 @@
+import { Component, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Observable, of } from 'rxjs';
 
 import { AdminEventFormPreviewComponent } from './admin-event-form-preview.component';
 
+@Component({
+  template: '<admin-event-form-preview [formDefinition]="formDefinition"></admin-event-form-preview>'
+})
+class TestHostComponent {
+  formDefinition: any
+
+  @ViewChild(AdminEventFormPreviewComponent, { static: true })
+  public adminEventFormPreviewComponent: AdminEventFormPreviewComponent
+}
+
+class MatDialogMock {
+  open(): any {
+    return {
+      afterClosed: (): Observable<boolean> => of(true)
+    }
+  }
+}
+
 describe('AdminEventFormPreviewComponent', () => {
-  let component: AdminEventFormPreviewComponent;
-  let fixture: ComponentFixture<AdminEventFormPreviewComponent>;
+  let component: AdminEventFormPreviewComponent
+  let hostComponent: TestHostComponent
+  let fixture: ComponentFixture<TestHostComponent>
+  let dialog: MatDialog
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatDialogModule],
-      declarations: [ AdminEventFormPreviewComponent ]
+      imports: [BrowserAnimationsModule, MatDialogModule],
+      declarations: [AdminEventFormPreviewComponent, TestHostComponent],
+      providers: [{
+        provide: MatDialog, useClass: MatDialogMock
+      }]
     })
-    .compileComponents();
+    .compileComponents()
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AdminEventFormPreviewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture = TestBed.createComponent(TestHostComponent)
+    hostComponent = fixture.componentInstance
+    component = hostComponent.adminEventFormPreviewComponent
+    dialog = TestBed.inject(MatDialog)
+    fixture.detectChanges()
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should open dialog', () => {
+    spyOn(dialog, 'open').and.callThrough()
+
+    hostComponent.formDefinition = {
+      fields: []
+    }
+
+    fixture.detectChanges()
+
+    expect(dialog.open).toHaveBeenCalled()
+  });
+
+  it('should close dialog', async(async () => {
+    spyOn(component.onClose, 'emit')
+    spyOn(component.dialog, 'open').and.callThrough()
+
+    hostComponent.formDefinition = {
+      name: 'Mock Form 1',
+      fields: []
+    }
+
+    fixture.detectChanges()
+
+    expect(dialog.open).toHaveBeenCalled()
+    expect(component.onClose.emit).toHaveBeenCalled()
+  }));
 });