Added tests

src/app/submission/form/collection/submission-form-collection.component.spec.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -23,6 +23,7 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { Collection } from '../../../core/shared/collection.model';
+import { createTestComponent } from '../../../shared/testing/utils';
 
 const subcommunities = [Object.assign(new Community(), {
   name: 'SubCommunity 1',
@@ -186,6 +187,7 @@ describe('SubmissionFormCollectionComponent Component', () => {
   const collectionId = '1234567890-1';
   const definition = 'traditional';
   const submissionRestResponse = mockSubmissionRestResponse;
+  const searchedCollection = 'Community 2-Collection 2';
 
   const communityDataService: any = jasmine.createSpyObj('communityDataService', {
     findAll: jasmine.createSpy('findAll')
@@ -206,148 +208,218 @@ describe('SubmissionFormCollectionComponent Component', () => {
         NgbModule.forRoot(),
         TranslateModule.forRoot()
       ],
-      declarations: [SubmissionFormCollectionComponent],
+      declarations: [
+        SubmissionFormCollectionComponent,
+        TestComponent
+      ],
       providers: [
         { provide: SubmissionJsonPatchOperationsService, useClass: SubmissionJsonPatchOperationsServiceStub },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
         { provide: CommunityDataService, useValue: communityDataService },
         { provide: JsonPatchOperationsBuilder, useValue: jsonPatchOpBuilder },
         { provide: Store, useValue: store },
-        ChangeDetectorRef
+        ChangeDetectorRef,
+        SubmissionFormCollectionComponent
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SubmissionFormCollectionComponent);
-    comp = fixture.componentInstance;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    jsonPatchOpServiceStub = TestBed.get(SubmissionJsonPatchOperationsService);
-    comp.currentCollectionId = collectionId;
-    comp.currentDefinition = definition;
-    comp.submissionId = submissionId;
-  });
+  describe('', () => {
+    let testComp: TestComponent;
+    let testFixture: ComponentFixture<TestComponent>;
 
-  afterEach(() => {
-    comp = null;
-    compAsAny = null;
-    fixture = null;
-    submissionServiceStub = null;
-    jsonPatchOpServiceStub = null;
-  });
+    // synchronous beforeEach
+    beforeEach(() => {
+      const html = `
+        <ds-submission-form-collection [currentCollectionId]="collectionId"
+                                       [currentDefinition]="definitionId"
+                                       [submissionId]="submissionId"
+                                       (collectionChange)="onCollectionChange($event)">
+        </ds-submission-form-collection>`;
 
-  it('should init JsonPatchOperationPathCombiner', () => {
-    const expected = new JsonPatchOperationPathCombiner('sections', 'collection');
-
-    fixture.detectChanges();
-
-    expect(compAsAny.pathCombiner).toEqual(expected);
-  });
-
-  it('should init collection list properly', () => {
-    communityDataService.findAll.and.returnValue(mockCommunityList);
-
-    comp.ngOnChanges({
-      currentCollectionId: new SimpleChange(null, collectionId, true)
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
     });
 
-    comp.searchListCollection$.pipe(
-      filter(() => !comp.disabled$.getValue())
-    ).subscribe((list) => {
-      expect(list).toEqual(mockCollectionList);
-    })
-  });
+    afterEach(() => {
+      testFixture.destroy();
+    });
 
-  it('should show only the searched collection', () => {
-    comp.searchListCollection$ = observableOf(mockCollectionList);
-    fixture.detectChanges();
+    it('should create SubmissionFormCollectionComponent', inject([SubmissionFormCollectionComponent], (app: SubmissionFormCollectionComponent) => {
 
-    comp.searchField.patchValue('Community 2-Collection 2');
-    fixture.detectChanges();
+      expect(app).toBeDefined();
 
-    comp.searchListCollection$.pipe(
-      filter(() => !comp.disabled$.getValue())
-    ).subscribe((list) => {
-      expect(list).toEqual([mockCollectionList[3]]);
-    })
-  });
-
-  it('should emit collectionChange event when selecting a new collection', () => {
-    spyOn(comp.searchField, 'reset').and.callThrough();
-    spyOn(comp.collectionChange, 'emit').and.callThrough();
-    jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(observableOf(submissionRestResponse));
-    comp.ngOnInit();
-    comp.onSelect(mockCollectionList[1]);
-    fixture.detectChanges();
-
-    expect(comp.searchField.reset).toHaveBeenCalled();
-    expect(comp.collectionChange.emit).toHaveBeenCalledWith(submissionRestResponse[0]);
-    expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled();
-    expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id);
-    expect(comp.selectedCollectionName).toBe(mockCollectionList[1].collection.name);
-
-  });
-
-  it('should reset searchField when dropdown menu has been closed', () => {
-    spyOn(comp.searchField, 'reset').and.callThrough();
-    comp.toggled(false);
-
-    expect(comp.searchField.reset).toHaveBeenCalled();
+    }));
   });
 
   describe('', () => {
-    let dropdowBtn: DebugElement;
-    let dropdownMenu: DebugElement;
-
     beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionFormCollectionComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      submissionServiceStub = TestBed.get(SubmissionService);
+      jsonPatchOpServiceStub = TestBed.get(SubmissionJsonPatchOperationsService);
+      comp.currentCollectionId = collectionId;
+      comp.currentDefinition = definition;
+      comp.submissionId = submissionId;
+    });
 
+    afterEach(() => {
+      comp = null;
+      compAsAny = null;
+      fixture = null;
+      submissionServiceStub = null;
+      jsonPatchOpServiceStub = null;
+    });
+
+    it('should init JsonPatchOperationPathCombiner', () => {
+      const expected = new JsonPatchOperationPathCombiner('sections', 'collection');
+
+      fixture.detectChanges();
+
+      expect(compAsAny.pathCombiner).toEqual(expected);
+    });
+
+    it('should init collection list properly', () => {
+      communityDataService.findAll.and.returnValue(mockCommunityList);
+
+      comp.ngOnChanges({
+        currentCollectionId: new SimpleChange(null, collectionId, true)
+      });
+
+      comp.searchListCollection$.pipe(
+        filter(() => !comp.disabled$.getValue())
+      ).subscribe((list) => {
+        expect(list).toEqual(mockCollectionList);
+      })
+    });
+
+    it('should show only the searched collection', () => {
       comp.searchListCollection$ = observableOf(mockCollectionList);
       fixture.detectChanges();
-      dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton'));
-      dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu'));
+
+      comp.searchField.setValue(searchedCollection);
+      fixture.detectChanges();
+
+      comp.searchListCollection$.pipe(
+        filter(() => !comp.disabled$.getValue())
+      ).subscribe((list) => {
+        expect(list).toEqual([mockCollectionList[3]]);
+      })
     });
 
-    it('should have dropdown menu closed', () => {
+    it('should emit collectionChange event when selecting a new collection', () => {
+      spyOn(comp.searchField, 'reset').and.callThrough();
+      spyOn(comp.collectionChange, 'emit').and.callThrough();
+      jsonPatchOpServiceStub.jsonPatchByResourceID.and.returnValue(observableOf(submissionRestResponse));
+      comp.ngOnInit();
+      comp.onSelect(mockCollectionList[1]);
+      fixture.detectChanges();
 
-      expect(dropdowBtn).not.toBeUndefined();
-      expect(dropdownMenu.nativeElement.classList).not.toContain('show');
+      expect(comp.searchField.reset).toHaveBeenCalled();
+      expect(comp.collectionChange.emit).toHaveBeenCalledWith(submissionRestResponse[0]);
+      expect(submissionServiceStub.changeSubmissionCollection).toHaveBeenCalled();
+      expect(comp.selectedCollectionId).toBe(mockCollectionList[1].collection.id);
+      expect(comp.selectedCollectionName).toBe(mockCollectionList[1].collection.name);
 
     });
 
-    it('should display dropdown menu when click on dropdown button', fakeAsync(() => {
+    it('should reset searchField when dropdown menu has been closed', () => {
+      spyOn(comp.searchField, 'reset').and.callThrough();
+      comp.toggled(false);
 
-      spyOn(comp, 'onClose');
-      dropdowBtn.triggerEventHandler('click', null);
-      tick();
-      fixture.detectChanges();
+      expect(comp.searchField.reset).toHaveBeenCalled();
+    });
 
-      fixture.whenStable().then(() => {
-        expect(comp.onClose).toHaveBeenCalled();
-        expect(dropdownMenu.nativeElement.classList).toContain('show');
-        expect(dropdownMenu.queryAll(By.css('.collection-item')).length).toBe(4);
-      });
-    }));
+    describe('', () => {
+      let dropdowBtn: DebugElement;
+      let dropdownMenu: DebugElement;
 
-    it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => {
+      beforeEach(() => {
 
-      spyOn(comp, 'onSelect');
-      dropdowBtn.triggerEventHandler('click', null);
-      tick();
-      fixture.detectChanges();
-
-      const secondLink: DebugElement = dropdownMenu.query(By.css('.collection-item:nth-child(2)'));
-      secondLink.triggerEventHandler('click', null);
-      tick();
-      fixture.detectChanges();
-
-      fixture.whenStable().then(() => {
-
-        expect(comp.onSelect).toHaveBeenCalled();
+        comp.searchListCollection$ = observableOf(mockCollectionList);
+        fixture.detectChanges();
+        dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton'));
+        dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu'));
       });
 
-    }));
+      it('should have dropdown menu closed', () => {
+
+        expect(dropdowBtn).not.toBeUndefined();
+        expect(dropdownMenu.nativeElement.classList).not.toContain('show');
+
+      });
+
+      it('should display dropdown menu when click on dropdown button', fakeAsync(() => {
+
+        spyOn(comp, 'onClose');
+        dropdowBtn.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          expect(comp.onClose).toHaveBeenCalled();
+          expect(dropdownMenu.nativeElement.classList).toContain('show');
+          expect(dropdownMenu.queryAll(By.css('.collection-item')).length).toBe(4);
+        });
+      }));
+
+      it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => {
+
+        spyOn(comp, 'onSelect');
+        dropdowBtn.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        const secondLink: DebugElement = dropdownMenu.query(By.css('.collection-item:nth-child(2)'));
+        secondLink.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+
+          expect(comp.onSelect).toHaveBeenCalled();
+        });
+      }));
+
+      it('should update searchField on input type', fakeAsync(() => {
+
+        dropdowBtn.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          const input = fixture.debugElement.query(By.css('input.form-control'));
+          const el = input.nativeElement;
+
+          expect(el.value).toBe('');
+
+          el.value = searchedCollection;
+          el.dispatchEvent(new Event('input'));
+
+          fixture.detectChanges();
+
+          expect(fixture.componentInstance.searchField.value).toEqual(searchedCollection);
+        });
+      }));
+
+    });
 
   });
 });
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  collectionId = '1234567890-1';
+  definitionId = 'traditional';
+  submissionId = mockSubmissionId;
+
+  onCollectionChange = () => { return; }
+
+}