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 { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+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(() => {
+  describe('', () => {
-    fixture = TestBed.createComponent(SubmissionFormCollectionComponent);
+    let testComp: TestComponent;
-    comp = fixture.componentInstance;
+    let testFixture: ComponentFixture<TestComponent>;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    jsonPatchOpServiceStub = TestBed.get(SubmissionJsonPatchOperationsService);
-    comp.currentCollectionId = collectionId;
-    comp.currentDefinition = definition;
-    comp.submissionId = submissionId;
-  });
 
-  afterEach(() => {
+    // synchronous beforeEach
-    comp = null;
+    beforeEach(() => {
-    compAsAny = null;
+      const html = `
-    fixture = null;
+        <ds-submission-form-collection [currentCollectionId]="collectionId"
-    submissionServiceStub = null;
+                                       [currentDefinition]="definitionId"
-    jsonPatchOpServiceStub = null;
+                                       [submissionId]="submissionId"
-  });
+                                       (collectionChange)="onCollectionChange($event)">
+        </ds-submission-form-collection>`;
 
-  it('should init JsonPatchOperationPathCombiner', () => {
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    const expected = new JsonPatchOperationPathCombiner('sections', 'collection');
+      testComp = testFixture.componentInstance;
-
-    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(
+    afterEach(() => {
-      filter(() => !comp.disabled$.getValue())
+      testFixture.destroy();
-    ).subscribe((list) => {
+    });
-      expect(list).toEqual(mockCollectionList);
-    })
-  });
 
-  it('should show only the searched collection', () => {
+    it('should create SubmissionFormCollectionComponent', inject([SubmissionFormCollectionComponent], (app: SubmissionFormCollectionComponent) => {
-    comp.searchListCollection$ = observableOf(mockCollectionList);
-    fixture.detectChanges();
 
-    comp.searchField.patchValue('Community 2-Collection 2');
+      expect(app).toBeDefined();
-    fixture.detectChanges();
 
-    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(comp.searchField.reset).toHaveBeenCalled();
-      expect(dropdownMenu.nativeElement.classList).not.toContain('show');
+      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');
+      expect(comp.searchField.reset).toHaveBeenCalled();
-      dropdowBtn.triggerEventHandler('click', null);
+    });
-      tick();
-      fixture.detectChanges();
 
-      fixture.whenStable().then(() => {
+    describe('', () => {
-        expect(comp.onClose).toHaveBeenCalled();
+      let dropdowBtn: DebugElement;
-        expect(dropdownMenu.nativeElement.classList).toContain('show');
+      let dropdownMenu: DebugElement;
-        expect(dropdownMenu.queryAll(By.css('.collection-item')).length).toBe(4);
-      });
-    }));
 
-    it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => {
+      beforeEach(() => {
 
-      spyOn(comp, 'onSelect');
+        comp.searchListCollection$ = observableOf(mockCollectionList);
-      dropdowBtn.triggerEventHandler('click', null);
+        fixture.detectChanges();
-      tick();
+        dropdowBtn = fixture.debugElement.query(By.css('#collectionControlsMenuButton'));
-      fixture.detectChanges();
+        dropdownMenu = fixture.debugElement.query(By.css('#collectionControlsDropdownMenu'));
-
-      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 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; }
+
+}

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

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { of as observableOf } from 'rxjs';
@@ -14,6 +14,7 @@ import { SubmissionService } from '../../submission.service';
 import { SubmissionRestServiceStub } from '../../../shared/testing/submission-rest-service-stub';
 import { SubmissionFormFooterComponent } from './submission-form-footer.component';
 import { SubmissionRestService } from '../../submission-rest.service';
+import { createTestComponent } from '../../../shared/testing/utils';
 
 describe('SubmissionFormFooterComponent Component', () => {
 
@@ -36,160 +37,203 @@ describe('SubmissionFormFooterComponent Component', () => {
         NgbModule.forRoot(),
         TranslateModule.forRoot()
       ],
-      declarations: [SubmissionFormFooterComponent],
+      declarations: [
+        SubmissionFormFooterComponent,
+        TestComponent
+      ],
       providers: [
         { provide: SubmissionService, useClass: SubmissionServiceStub },
         { provide: SubmissionRestService, useClass: SubmissionRestServiceStub },
         { provide: Store, useValue: store },
         ChangeDetectorRef,
-        NgbModal
+        NgbModal,
+        SubmissionFormFooterComponent
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  describe('', () => {
-    fixture = TestBed.createComponent(SubmissionFormFooterComponent);
+    let testComp: TestComponent;
-    comp = fixture.componentInstance;
+    let testFixture: ComponentFixture<TestComponent>;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    submissionRestServiceStub = TestBed.get(SubmissionRestService);
-    comp.submissionId = submissionId;
 
-  });
+    // synchronous beforeEach
-
-  afterEach(() => {
-    comp = null;
-    compAsAny = null;
-    fixture = null;
-    submissionServiceStub = null;
-    submissionRestServiceStub = null;
-  });
-
-  describe('ngOnChanges', () => {
     beforeEach(() => {
-      submissionServiceStub.getSubmissionStatus.and.returnValue(hot('-a-b', {
+      const html = `
-        a: false,
+        <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>`;
-        b: true
-      }));
 
-      submissionServiceStub.getSubmissionSaveProcessingStatus.and.returnValue(hot('-a-b', {
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-        a: false,
+      testComp = testFixture.componentInstance;
-        b: true
+      testFixture.detectChanges();
-      }));
-
-      submissionServiceStub.getSubmissionDepositProcessingStatus.and.returnValue(hot('-a-b', {
-        a: false,
-        b: true
-      }));
     });
 
-    it('should set submissionIsInvalid properly', () => {
+    afterEach(() => {
+      testFixture.destroy();
+    });
 
-      const expected = cold('-c-d', {
+    it('should create SubmissionFormFooterComponent', inject([SubmissionFormFooterComponent], (app: SubmissionFormFooterComponent) => {
-        c: true,
+
-        d: false
+      expect(app).toBeDefined();
+
+    }));
+  });
+
+  describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionFormFooterComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      submissionServiceStub = TestBed.get(SubmissionService);
+      submissionRestServiceStub = TestBed.get(SubmissionRestService);
+      comp.submissionId = submissionId;
+
+    });
+
+    afterEach(() => {
+      comp = null;
+      compAsAny = null;
+      fixture = null;
+      submissionServiceStub = null;
+      submissionRestServiceStub = null;
+    });
+
+    describe('ngOnChanges', () => {
+      beforeEach(() => {
+        submissionServiceStub.getSubmissionStatus.and.returnValue(hot('-a-b', {
+          a: false,
+          b: true
+        }));
+
+        submissionServiceStub.getSubmissionSaveProcessingStatus.and.returnValue(hot('-a-b', {
+          a: false,
+          b: true
+        }));
+
+        submissionServiceStub.getSubmissionDepositProcessingStatus.and.returnValue(hot('-a-b', {
+          a: false,
+          b: true
+        }));
       });
 
-      comp.ngOnChanges({
+      it('should set submissionIsInvalid properly', () => {
-        submissionId: new SimpleChange(null, submissionId, true)
+
+        const expected = cold('-c-d', {
+          c: true,
+          d: false
+        });
+
+        comp.ngOnChanges({
+          submissionId: new SimpleChange(null, submissionId, true)
+        });
+
+        fixture.detectChanges();
+
+        expect(compAsAny.submissionIsInvalid).toBeObservable(expected);
       });
 
+      it('should set processingSaveStatus properly', () => {
+
+        const expected = cold('-c-d', {
+          c: false,
+          d: true
+        });
+
+        comp.ngOnChanges({
+          submissionId: new SimpleChange(null, submissionId, true)
+        });
+
+        fixture.detectChanges();
+
+        expect(comp.processingSaveStatus).toBeObservable(expected);
+      });
+
+      it('should set processingDepositStatus properly', () => {
+
+        const expected = cold('-c-d', {
+          c: false,
+          d: true
+        });
+
+        comp.ngOnChanges({
+          submissionId: new SimpleChange(null, submissionId, true)
+        });
+
+        fixture.detectChanges();
+
+        expect(comp.processingDepositStatus).toBeObservable(expected);
+      });
+    });
+
+    it('should call dispatchSave on save', () => {
+
+      comp.save(null);
+      fixture.detectChanges();
+
+      expect(submissionServiceStub.dispatchSave).toHaveBeenCalledWith(submissionId);
+    });
+
+    it('should call dispatchSaveForLater on save for later', () => {
+
+      comp.saveLater(null);
+      fixture.detectChanges();
+
+      expect(submissionServiceStub.dispatchSaveForLater).toHaveBeenCalledWith(submissionId);
+    });
+
+    it('should call dispatchDeposit on save', () => {
+
+      comp.deposit(null);
+      fixture.detectChanges();
+
+      expect(submissionServiceStub.dispatchDeposit).toHaveBeenCalledWith(submissionId);
+    });
+
+    it('should call dispatchDiscard on discard confirmation', fakeAsync(() => {
+      comp.showDepositAndDiscard = observableOf(true);
+      fixture.detectChanges();
+      const modalBtn = fixture.debugElement.query(By.css('.btn-danger'));
+
+      modalBtn.nativeElement.click();
+      fixture.detectChanges();
+
+      const confirmBtn: any = ((document as any).querySelector('.btn-danger:nth-child(2)'));
+      confirmBtn.click();
+
       fixture.detectChanges();
 
-      expect(compAsAny.submissionIsInvalid).toBeObservable(expected);
+      fixture.whenStable().then(() => {
-    });
+        expect(submissionServiceStub.dispatchDiscard).toHaveBeenCalledWith(submissionId);
-
-    it('should set processingSaveStatus properly', () => {
-
-      const expected = cold('-c-d', {
-        c: false,
-        d: true
-      });
-
-      comp.ngOnChanges({
-        submissionId: new SimpleChange(null, submissionId, true)
       });
+    }));
 
+    it('should have deposit button disabled when submission is not valid', () => {
+      comp.showDepositAndDiscard = observableOf(true);
+      compAsAny.submissionIsInvalid = observableOf(true);
       fixture.detectChanges();
+      const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(comp.processingSaveStatus).toBeObservable(expected);
+      expect(depositBtn.nativeElement.disabled).toBeTruthy();
     });
 
-    it('should set processingDepositStatus properly', () => {
+    it('should not have deposit button disabled when submission is valid', () => {
-
+      comp.showDepositAndDiscard = observableOf(true);
-      const expected = cold('-c-d', {
+      compAsAny.submissionIsInvalid = observableOf(false);
-        c: false,
-        d: true
-      });
-
-      comp.ngOnChanges({
-        submissionId: new SimpleChange(null, submissionId, true)
-      });
-
       fixture.detectChanges();
+      const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(comp.processingDepositStatus).toBeObservable(expected);
+      expect(depositBtn.nativeElement.disabled).toBeFalsy();
     });
-  });
 
-  it('should call dispatchSave on save', () => {
-
-    comp.save(null);
-    fixture.detectChanges();
-
-    expect(submissionServiceStub.dispatchSave).toHaveBeenCalledWith(submissionId);
-  });
-
-  it('should call dispatchSaveForLater on save for later', () => {
-
-    comp.saveLater(null);
-    fixture.detectChanges();
-
-    expect(submissionServiceStub.dispatchSaveForLater).toHaveBeenCalledWith(submissionId);
-  });
-
-  it('should call dispatchDeposit on save', () => {
-
-    comp.deposit(null);
-    fixture.detectChanges();
-
-    expect(submissionServiceStub.dispatchDeposit).toHaveBeenCalledWith(submissionId);
-  });
-
-  it('should call dispatchDiscard on discard confirmation', fakeAsync(() => {
-    comp.showDepositAndDiscard = observableOf(true);
-    fixture.detectChanges();
-    const modalBtn = fixture.debugElement.query(By.css('.btn-danger'));
-
-    modalBtn.nativeElement.click();
-    fixture.detectChanges();
-
-    const confirmBtn: any = ((document as any).querySelector('.btn-danger:nth-child(2)'));
-    confirmBtn.click();
-
-    fixture.detectChanges();
-
-    fixture.whenStable().then(() => {
-      expect(submissionServiceStub.dispatchDiscard).toHaveBeenCalledWith(submissionId);
-    });
-  }));
-
-  it('should have deposit button disabled when submission is not valid', () => {
-    comp.showDepositAndDiscard = observableOf(true);
-    compAsAny.submissionIsInvalid = observableOf(true);
-    fixture.detectChanges();
-    const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
-
-    expect(depositBtn.nativeElement.disabled).toBeTruthy();
-  });
-
-  it('should not have deposit button disabled when submission is valid', () => {
-    comp.showDepositAndDiscard = observableOf(true);
-    compAsAny.submissionIsInvalid = observableOf(false);
-    fixture.detectChanges();
-    const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
-
-    expect(depositBtn.nativeElement.disabled).toBeFalsy();
   });
 });
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  submissionId = mockSubmissionId;
+
+}

src/app/submission/form/section-add/submission-form-section-add.component.spec.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { of as observableOf } from 'rxjs';
@@ -15,6 +15,7 @@ import { SectionsServiceStub } from '../../../shared/testing/sections-service-st
 import { SectionsService } from '../../sections/sections.service';
 import { HostWindowServiceStub } from '../../../shared/testing/host-window-service-stub';
 import { HostWindowService } from '../../../shared/host-window.service';
+import { createTestComponent } from '../../../shared/testing/utils';
 
 const mockAvailableSections: any = [
   {
@@ -37,7 +38,7 @@ const mockAvailableSections: any = [
   }
 ];
 
-describe('SubmissionFormFooterComponent Component', () => {
+describe('SubmissionFormSectionAddComponent Component', () => {
 
   let comp: SubmissionFormSectionAddComponent;
   let compAsAny: any;
@@ -61,108 +62,153 @@ describe('SubmissionFormFooterComponent Component', () => {
         NgbModule.forRoot(),
         TranslateModule.forRoot()
       ],
-      declarations: [SubmissionFormSectionAddComponent],
+      declarations: [
+        SubmissionFormSectionAddComponent,
+        TestComponent
+      ],
       providers: [
         { provide: HostWindowService, useValue: window },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
         { provide: SectionsService, useClass: SectionsServiceStub },
         { provide: Store, useValue: store },
-        ChangeDetectorRef
+        ChangeDetectorRef,
+        SubmissionFormSectionAddComponent
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  describe('', () => {
-    fixture = TestBed.createComponent(SubmissionFormSectionAddComponent);
+    let testComp: TestComponent;
-    comp = fixture.componentInstance;
+    let testFixture: ComponentFixture<TestComponent>;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    sectionsServiceStub = TestBed.get(SectionsService);
-    comp.submissionId = submissionId;
-    comp.collectionId = collectionId;
 
-  });
+    // synchronous beforeEach
+    beforeEach(() => {
+      const html = `
+        <ds-submission-form-section-add [collectionId]="collectionId"
+                                        [submissionId]="submissionId">
+        </ds-submission-form-section-add>`;
 
-  afterEach(() => {
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    comp = null;
+      testComp = testFixture.componentInstance;
-    compAsAny = null;
+      testFixture.detectChanges();
-    fixture = null;
+    });
-    submissionServiceStub = null;
-    sectionsServiceStub = null;
-  });
 
-  it('should init sectionList properly', () => {
+    afterEach(() => {
-    submissionServiceStub.getDisabledSectionsList.and.returnValue(observableOf(mockAvailableSections));
+      testFixture.destroy();
+    });
 
-    fixture.detectChanges();
+    it('should create SubmissionFormSectionAddComponent', inject([SubmissionFormSectionAddComponent], (app: SubmissionFormSectionAddComponent) => {
 
-    comp.sectionList.subscribe((list) => {
+      expect(app).toBeDefined();
-      expect(list).toEqual(mockAvailableSections);
-    })
-
-  });
-
-  it('should call addSection', () => {
-    comp.addSection(mockAvailableSections[1].id);
-
-    fixture.detectChanges();
-
-    expect(sectionsServiceStub.addSection).toHaveBeenCalledWith(submissionId, mockAvailableSections[1].id);
 
+    }));
   });
 
   describe('', () => {
-    let dropdowBtn: DebugElement;
-    let dropdownMenu: DebugElement;
-
     beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionFormSectionAddComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      submissionServiceStub = TestBed.get(SubmissionService);
+      sectionsServiceStub = TestBed.get(SectionsService);
+      comp.submissionId = submissionId;
+      comp.collectionId = collectionId;
 
+    });
+
+    afterEach(() => {
+      comp = null;
+      compAsAny = null;
+      fixture = null;
+      submissionServiceStub = null;
+      sectionsServiceStub = null;
+    });
+
+    it('should init sectionList properly', () => {
       submissionServiceStub.getDisabledSectionsList.and.returnValue(observableOf(mockAvailableSections));
-      comp.ngOnInit();
+
       fixture.detectChanges();
-      dropdowBtn = fixture.debugElement.query(By.css('#sectionControls'));
-      dropdownMenu = fixture.debugElement.query(By.css('.sections-dropdown-menu'));
-    });
 
-    it('should have dropdown menu closed', () => {
+      comp.sectionList.subscribe((list) => {
-
+        expect(list).toEqual(mockAvailableSections);
-      expect(dropdowBtn).not.toBeUndefined();
+      })
-      expect(dropdownMenu.nativeElement.classList).not.toContain('show');
 
     });
 
-    it('should display dropdown menu when click on dropdown button', fakeAsync(() => {
+    it('should call addSection', () => {
+      comp.addSection(mockAvailableSections[1].id);
 
-      dropdowBtn.triggerEventHandler('click', null);
-      tick();
       fixture.detectChanges();
 
-      fixture.whenStable().then(() => {
+      expect(sectionsServiceStub.addSection).toHaveBeenCalledWith(submissionId, mockAvailableSections[1].id);
-        expect(dropdownMenu.nativeElement.classList).toContain('show');
 
-        expect(dropdownMenu.queryAll(By.css('.dropdown-item')).length).toBe(2);
+    });
+
+    describe('', () => {
+      let dropdowBtn: DebugElement;
+      let dropdownMenu: DebugElement;
+
+      beforeEach(() => {
+
+        submissionServiceStub.getDisabledSectionsList.and.returnValue(observableOf(mockAvailableSections));
+        comp.ngOnInit();
+        fixture.detectChanges();
+        dropdowBtn = fixture.debugElement.query(By.css('#sectionControls'));
+        dropdownMenu = fixture.debugElement.query(By.css('.sections-dropdown-menu'));
       });
 
-    }));
+      it('should have dropdown menu closed', () => {
 
-    it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => {
+        expect(dropdowBtn).not.toBeUndefined();
-      spyOn(comp, 'addSection');
+        expect(dropdownMenu.nativeElement.classList).not.toContain('show');
-      dropdowBtn.triggerEventHandler('click', null);
-      tick();
-      fixture.detectChanges();
 
-      const secondLink: DebugElement = dropdownMenu.query(By.css('.dropdown-item:nth-child(2)'));
-      secondLink.triggerEventHandler('click', null);
-      tick();
-      fixture.detectChanges();
-
-      fixture.whenStable().then(() => {
-
-        expect(comp.addSection).toHaveBeenCalled();
       });
 
-    }));
+      it('should display dropdown menu when click on dropdown button', fakeAsync(() => {
+
+        dropdowBtn.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          expect(dropdownMenu.nativeElement.classList).toContain('show');
+
+          expect(dropdownMenu.queryAll(By.css('.dropdown-item')).length).toBe(2);
+        });
+
+      }));
+
+      it('should trigger onSelect method when select a new collection from dropdown menu', fakeAsync(() => {
+        spyOn(comp, 'addSection');
+        dropdowBtn.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        const secondLink: DebugElement = dropdownMenu.query(By.css('.dropdown-item:nth-child(2)'));
+        secondLink.triggerEventHandler('click', null);
+        tick();
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+
+          expect(comp.addSection).toHaveBeenCalled();
+        });
+
+      }));
+    });
 
   });
 });
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  collectionId = mockSubmissionCollectionId;
+  submissionId = mockSubmissionId;
+
+}

src/app/submission/form/submission-form.component.html

@@ -30,7 +30,6 @@
     </ng-container>
   </div>
   <div *ngIf="!(isLoading() | async)" class="submission-form-footer mt-3 mb-3 position-sticky">
-    <ds-submission-form-footer
+    <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
-      [submissionId]="submissionId"></ds-submission-form-footer>
   </div>
 </div>

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

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
+import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
 import { of as observableOf } from 'rxjs';
 
 import { SubmissionServiceStub } from '../../shared/testing/submission-service-stub';
@@ -9,7 +9,6 @@ import {
   mockSubmissionCollectionId,
   mockSubmissionDefinition,
   mockSubmissionId,
-  mockSubmissionObject,
   mockSubmissionObjectNew,
   mockSubmissionSelfUrl,
   mockSubmissionState
@@ -20,6 +19,7 @@ import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
 import { AuthServiceStub } from '../../shared/testing/auth-service-stub';
 import { AuthService } from '../../core/auth/auth.service';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service-stub';
+import { createTestComponent } from '../../shared/testing/utils';
 
 describe('SubmissionFormComponent Component', () => {
 
@@ -41,124 +41,172 @@ describe('SubmissionFormComponent Component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [],
-      declarations: [SubmissionFormComponent],
+      declarations: [
+        SubmissionFormComponent,
+        TestComponent
+      ],
       providers: [
         { provide: AuthService, useClass: AuthServiceStub },
         { provide: HALEndpointService, useValue: new HALEndpointServiceStub('workspaceitems') },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
-        ChangeDetectorRef
+        ChangeDetectorRef,
+        SubmissionFormComponent
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  describe('', () => {
-    fixture = TestBed.createComponent(SubmissionFormComponent);
+    let testComp: TestComponent;
-    comp = fixture.componentInstance;
+    let testFixture: ComponentFixture<TestComponent>;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    authServiceStub = TestBed.get(AuthService);
-  });
 
-  afterEach(() => {
+    // synchronous beforeEach
-    comp = null;
+    beforeEach(() => {
-    compAsAny = null;
+      const html = `
-    fixture = null;
+        <ds-submission-submit-form [collectionId]="collectionId"
-  });
+                                   [selfUrl]="selfUrl"
+                                   [submissionDefinition]="submissionDefinition"
+                                   [submissionId]="submissionId"></ds-submission-submit-form>`;
 
-  it('should not has effect when collectionId and submissionId are undefined', () => {
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-
+      testComp = testFixture.componentInstance;
-    fixture.detectChanges();
-
-    expect(compAsAny.isActive).toBeTruthy();
-    expect(compAsAny.submissionSections).toBeUndefined();
-    comp.loading.subscribe((loading) => {
-      expect(loading).toBeTruthy();
     });
 
-    expect(compAsAny.subs).toEqual([]);
+    afterEach(() => {
-    expect(submissionServiceStub.startAutoSave).not.toHaveBeenCalled();
+      testFixture.destroy();
-  });
-
-  it('should init properly when collectionId and submissionId are defined', () => {
-    comp.collectionId = collectionId;
-    comp.submissionId = submissionId;
-    comp.submissionDefinition = submissionDefinition;
-    comp.selfUrl = selfUrl;
-    comp.sections = sectionsData;
-
-    submissionServiceStub.getSubmissionObject.and.returnValue(observableOf(submissionState));
-    submissionServiceStub.getSubmissionSections.and.returnValue(observableOf(sectionsList));
-    spyOn(authServiceStub, 'buildAuthHeader').and.returnValue('token');
-
-    comp.ngOnChanges({
-      collectionId: new SimpleChange(null, collectionId, true),
-      submissionId: new SimpleChange(null, submissionId, true)
-    });
-    fixture.detectChanges();
-
-    comp.loading.subscribe((loading) => {
-      expect(loading).toBeFalsy();
     });
 
-    comp.submissionSections.subscribe((submissionSections) => {
+    it('should create SubmissionFormComponent', inject([SubmissionFormComponent], (app: SubmissionFormComponent) => {
-      expect(submissionSections).toEqual(sectionsList);
+
+      expect(app).toBeDefined();
+
+    }));
+  });
+
+  describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionFormComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      submissionServiceStub = TestBed.get(SubmissionService);
+      authServiceStub = TestBed.get(AuthService);
     });
 
-    expect(submissionServiceStub.dispatchInit).toHaveBeenCalledWith(
+    afterEach(() => {
-      collectionId,
+      comp = null;
-      submissionId,
+      compAsAny = null;
-      selfUrl,
+      fixture = null;
-      submissionDefinition,
+    });
-      sectionsData,
-      null);
-    expect(submissionServiceStub.startAutoSave).toHaveBeenCalled();
-  });
 
-  it('should update properly on collection change', () => {
+    it('should not has effect when collectionId and submissionId are undefined', () => {
-    comp.collectionId = collectionId;
-    comp.submissionId = submissionId;
-    comp.submissionDefinition = submissionDefinition;
-    comp.selfUrl = selfUrl;
-    comp.sections = sectionsData;
 
-    comp.onCollectionChange(submissionObjectNew);
+      fixture.detectChanges();
 
-    fixture.detectChanges();
+      expect(compAsAny.isActive).toBeTruthy();
+      expect(compAsAny.submissionSections).toBeUndefined();
+      comp.loading.subscribe((loading) => {
+        expect(loading).toBeTruthy();
+      });
 
-    expect(comp.collectionId).toEqual(submissionObjectNew.collection.id);
+      expect(compAsAny.subs).toEqual([]);
-    expect(comp.submissionDefinition).toEqual(submissionObjectNew.submissionDefinition);
+      expect(submissionServiceStub.startAutoSave).not.toHaveBeenCalled();
-    expect(comp.definitionId).toEqual(submissionObjectNew.submissionDefinition.name);
+    });
-    expect(comp.sections).toEqual(submissionObjectNew.sections);
 
-    expect(submissionServiceStub.resetSubmissionObject).toHaveBeenCalledWith(
+    it('should init properly when collectionId and submissionId are defined', () => {
-      submissionObjectNew.collection.id,
+      comp.collectionId = collectionId;
-      submissionId,
+      comp.submissionId = submissionId;
-      selfUrl,
+      comp.submissionDefinition = submissionDefinition;
-      submissionObjectNew.submissionDefinition,
+      comp.selfUrl = selfUrl;
-      submissionObjectNew.sections);
+      comp.sections = sectionsData;
-  });
 
-  it('should update only collection id on collection change when submission definition is not changed', () => {
+      submissionServiceStub.getSubmissionObject.and.returnValue(observableOf(submissionState));
-    comp.collectionId = collectionId;
+      submissionServiceStub.getSubmissionSections.and.returnValue(observableOf(sectionsList));
-    comp.submissionId = submissionId;
+      spyOn(authServiceStub, 'buildAuthHeader').and.returnValue('token');
-    comp.definitionId = 'traditional';
-    comp.submissionDefinition = submissionDefinition;
-    comp.selfUrl = selfUrl;
-    comp.sections = sectionsData;
 
-    comp.onCollectionChange({
+      comp.ngOnChanges({
-      collection: {
+        collectionId: new SimpleChange(null, collectionId, true),
-        id: '45f2f3f1-ba1f-4f36-908a-3f1ea9a557eb'
+        submissionId: new SimpleChange(null, submissionId, true)
-      },
+      });
-      submissionDefinition: {
+      fixture.detectChanges();
-        name: 'traditional'
-      }
-    } as  any);
 
-    fixture.detectChanges();
+      comp.loading.subscribe((loading) => {
+        expect(loading).toBeFalsy();
+      });
+
+      comp.submissionSections.subscribe((submissionSections) => {
+        expect(submissionSections).toEqual(sectionsList);
+      });
+
+      expect(submissionServiceStub.dispatchInit).toHaveBeenCalledWith(
+        collectionId,
+        submissionId,
+        selfUrl,
+        submissionDefinition,
+        sectionsData,
+        null);
+      expect(submissionServiceStub.startAutoSave).toHaveBeenCalled();
+    });
+
+    it('should update properly on collection change', () => {
+      comp.collectionId = collectionId;
+      comp.submissionId = submissionId;
+      comp.submissionDefinition = submissionDefinition;
+      comp.selfUrl = selfUrl;
+      comp.sections = sectionsData;
+
+      comp.onCollectionChange(submissionObjectNew);
+
+      fixture.detectChanges();
+
+      expect(comp.collectionId).toEqual(submissionObjectNew.collection.id);
+      expect(comp.submissionDefinition).toEqual(submissionObjectNew.submissionDefinition);
+      expect(comp.definitionId).toEqual(submissionObjectNew.submissionDefinition.name);
+      expect(comp.sections).toEqual(submissionObjectNew.sections);
+
+      expect(submissionServiceStub.resetSubmissionObject).toHaveBeenCalledWith(
+        submissionObjectNew.collection.id,
+        submissionId,
+        selfUrl,
+        submissionObjectNew.submissionDefinition,
+        submissionObjectNew.sections);
+    });
+
+    it('should update only collection id on collection change when submission definition is not changed', () => {
+      comp.collectionId = collectionId;
+      comp.submissionId = submissionId;
+      comp.definitionId = 'traditional';
+      comp.submissionDefinition = submissionDefinition;
+      comp.selfUrl = selfUrl;
+      comp.sections = sectionsData;
+
+      comp.onCollectionChange({
+        collection: {
+          id: '45f2f3f1-ba1f-4f36-908a-3f1ea9a557eb'
+        },
+        submissionDefinition: {
+          name: 'traditional'
+        }
+      } as  any);
+
+      fixture.detectChanges();
+
+      expect(comp.collectionId).toEqual('45f2f3f1-ba1f-4f36-908a-3f1ea9a557eb');
+      expect(submissionServiceStub.resetSubmissionObject).not.toHaveBeenCalled()
+    });
 
-    expect(comp.collectionId).toEqual('45f2f3f1-ba1f-4f36-908a-3f1ea9a557eb');
-    expect(submissionServiceStub.resetSubmissionObject).not.toHaveBeenCalled()
   });
 });
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  collectionId = mockSubmissionCollectionId;
+  selfUrl = mockSubmissionSelfUrl;
+  submissionDefinition = mockSubmissionDefinition;
+  submissionId = mockSubmissionId;
+
+}

src/app/submission/form/submission-upload-files/submission-upload-files.component.spec.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
 
 import { of as observableOf } from 'rxjs';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -27,6 +27,7 @@ import { cold, hot } from 'jasmine-marbles';
 import { SubmissionJsonPatchOperationsServiceStub } from '../../../shared/testing/submission-json-patch-operations-service-stub';
 import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service';
 import { SharedModule } from '../../../shared/shared.module';
+import { createTestComponent } from '../../../shared/testing/utils';
 
 describe('SubmissionUploadFilesComponent Component', () => {
 
@@ -54,7 +55,10 @@ describe('SubmissionUploadFilesComponent Component', () => {
         SharedModule,
         TranslateModule.forRoot()
       ],
-      declarations: [SubmissionUploadFilesComponent],
+      declarations: [
+        SubmissionUploadFilesComponent,
+        TestComponent
+      ],
       providers: [
         { provide: NotificationsService, useClass: NotificationsServiceStub },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
@@ -62,103 +66,153 @@ describe('SubmissionUploadFilesComponent Component', () => {
         { provide: TranslateService, useValue: getMockTranslateService() },
         { provide: SubmissionJsonPatchOperationsService, useValue: submissionJsonPatchOperationsServiceStub },
         { provide: Store, useValue: store },
-        ChangeDetectorRef
+        ChangeDetectorRef,
+        SubmissionUploadFilesComponent
       ],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  describe('', () => {
-    fixture = TestBed.createComponent(SubmissionUploadFilesComponent);
+    let testComp: TestComponent;
-    comp = fixture.componentInstance;
+    let testFixture: ComponentFixture<TestComponent>;
-    compAsAny = comp;
-    submissionServiceStub = TestBed.get(SubmissionService);
-    sectionsServiceStub = TestBed.get(SectionsService);
-    notificationsServiceStub = TestBed.get(NotificationsService);
-    translateService = TestBed.get(TranslateService);
-    comp.submissionId = submissionId;
-    comp.collectionId = collectionId;
-    comp.sectionId = 'upload';
-    comp.uploadFilesOptions = {
-      url: '',
-      authToken: null,
-      disableMultipart: false,
-      itemAlias: null
-    };
 
-  });
+    // synchronous beforeEach
+    beforeEach(() => {
+      const html = `
+        <ds-submission-upload-files [submissionId]="submissionId"
+                                    [collectionId]="collectionId"
+                                    [sectionId]="'upload'"
+                                    [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>`;
 
-  afterEach(() => {
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    comp = null;
+      testComp = testFixture.componentInstance;
-    compAsAny = null;
+    });
-    fixture = null;
+
-    submissionServiceStub = null;
+    afterEach(() => {
-    sectionsServiceStub = null;
+      testFixture.destroy();
-    notificationsServiceStub = null;
+    });
-    translateService = null;
+
-  });
+    it('should create SubmissionUploadFilesComponent', inject([SubmissionUploadFilesComponent], (app: SubmissionUploadFilesComponent) => {
+
+      expect(app).toBeDefined();
 
-  it('should init uploadEnabled properly', () => {
-    sectionsServiceStub.isSectionAvailable.and.returnValue(hot('-a-b', {
-      a: false,
-      b: true
     }));
-
-    const expected = cold('-c-d', {
-      c: false,
-      d: true
-    });
-
-    comp.ngOnChanges();
-    fixture.detectChanges();
-
-    expect(compAsAny.uploadEnabled).toBeObservable(expected);
   });
 
-  it('should show a success notification and call updateSectionData on upload complete', () => {
+  describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionUploadFilesComponent);
+      comp = fixture.componentInstance;
+      compAsAny = comp;
+      submissionServiceStub = TestBed.get(SubmissionService);
+      sectionsServiceStub = TestBed.get(SectionsService);
+      notificationsServiceStub = TestBed.get(NotificationsService);
+      translateService = TestBed.get(TranslateService);
+      comp.submissionId = submissionId;
+      comp.collectionId = collectionId;
+      comp.sectionId = 'upload';
+      comp.uploadFilesOptions = {
+        url: '',
+        authToken: null,
+        disableMultipart: false,
+        itemAlias: null
+      };
 
-    const expectedErrors: any = mockUploadResponse1ParsedErrors;
-    compAsAny.uploadEnabled = observableOf(true);
-    fixture.detectChanges();
-
-    comp.onCompleteItem(Object.assign({}, uploadRestResponse, { sections: mockSectionsData }));
-
-    Object.keys(mockSectionsData).forEach((sectionId) => {
-      expect(sectionsServiceStub.updateSectionData).toHaveBeenCalledWith(
-        submissionId,
-        sectionId,
-        mockSectionsData[sectionId],
-        expectedErrors[sectionId]
-      );
     });
 
-    expect(notificationsServiceStub.success).toHaveBeenCalled();
+    afterEach(() => {
-
+      comp = null;
-  });
+      compAsAny = null;
-
+      fixture = null;
-  it('should show an error notification and call updateSectionData on upload complete', () => {
+      submissionServiceStub = null;
-
+      sectionsServiceStub = null;
-    const responseErrors = mockUploadResponse2Errors;
+      notificationsServiceStub = null;
-
+      translateService = null;
-    const expectedErrors: any = mockUploadResponse2ParsedErrors;
-    compAsAny.uploadEnabled = observableOf(true);
-    fixture.detectChanges();
-
-    comp.onCompleteItem(Object.assign({}, uploadRestResponse, {
-      sections: mockSectionsData,
-      errors: responseErrors.errors
-    }));
-
-    Object.keys(mockSectionsData).forEach((sectionId) => {
-      expect(sectionsServiceStub.updateSectionData).toHaveBeenCalledWith(
-        submissionId,
-        sectionId,
-        mockSectionsData[sectionId],
-        expectedErrors[sectionId]
-      );
     });
 
-    expect(notificationsServiceStub.success).not.toHaveBeenCalled();
+    it('should init uploadEnabled properly', () => {
+      sectionsServiceStub.isSectionAvailable.and.returnValue(hot('-a-b', {
+        a: false,
+        b: true
+      }));
+
+      const expected = cold('-c-d', {
+        c: false,
+        d: true
+      });
+
+      comp.ngOnChanges();
+      fixture.detectChanges();
+
+      expect(compAsAny.uploadEnabled).toBeObservable(expected);
+    });
+
+    it('should show a success notification and call updateSectionData on upload complete', () => {
+
+      const expectedErrors: any = mockUploadResponse1ParsedErrors;
+      compAsAny.uploadEnabled = observableOf(true);
+      fixture.detectChanges();
+
+      comp.onCompleteItem(Object.assign({}, uploadRestResponse, { sections: mockSectionsData }));
+
+      Object.keys(mockSectionsData).forEach((sectionId) => {
+        expect(sectionsServiceStub.updateSectionData).toHaveBeenCalledWith(
+          submissionId,
+          sectionId,
+          mockSectionsData[sectionId],
+          expectedErrors[sectionId]
+        );
+      });
+
+      expect(notificationsServiceStub.success).toHaveBeenCalled();
+
+    });
+
+    it('should show an error notification and call updateSectionData on upload complete', () => {
+
+      const responseErrors = mockUploadResponse2Errors;
+
+      const expectedErrors: any = mockUploadResponse2ParsedErrors;
+      compAsAny.uploadEnabled = observableOf(true);
+      fixture.detectChanges();
+
+      comp.onCompleteItem(Object.assign({}, uploadRestResponse, {
+        sections: mockSectionsData,
+        errors: responseErrors.errors
+      }));
+
+      Object.keys(mockSectionsData).forEach((sectionId) => {
+        expect(sectionsServiceStub.updateSectionData).toHaveBeenCalledWith(
+          submissionId,
+          sectionId,
+          mockSectionsData[sectionId],
+          expectedErrors[sectionId]
+        );
+      });
+
+      expect(notificationsServiceStub.success).not.toHaveBeenCalled();
+
+    });
 
   });
 });
+
+// declare a test component
+@Component({
+  selector: 'ds-test-cmp',
+  template: ``
+})
+class TestComponent {
+
+  submissionId = mockSubmissionId;
+  collectionId = mockSubmissionCollectionId;
+  sectionId = 'upload';
+  uploadFilesOptions = {
+    url: '',
+    authToken: null,
+    disableMultipart: false,
+    itemAlias: null
+  };
+
+}