fixed collection selector component after angular 10 upgrade

This commit is contained in:
Giuseppe Digilio
2020-12-02 16:19:26 +01:00
parent b49d46176b
commit 58f1cbe5e5
3 changed files with 45 additions and 40 deletions

View File

@@ -5,7 +5,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ds-collection-dropdown (selectionChange)="selectObject($event.collection)"> <ds-collection-dropdown (selectionChange)="selectObject($event)">
</ds-collection-dropdown> </ds-collection-dropdown>
</div> </div>
</div> </div>

View File

@@ -1,28 +1,33 @@
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ChangeDetectorRef, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { By } from '@angular/platform-browser';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { getTestScheduler, hot } from 'jasmine-marbles';
import { TestScheduler } from 'rxjs/testing';
import { Observable, of } from 'rxjs';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { CollectionSelectorComponent } from './collection-selector.component'; import { CollectionSelectorComponent } from './collection-selector.component';
import { CollectionDropdownComponent } from 'src/app/shared/collection-dropdown/collection-dropdown.component'; import { CollectionDropdownComponent } from '../../shared/collection-dropdown/collection-dropdown.component';
import { Collection } from 'src/app/core/shared/collection.model'; import { Collection } from '../../core/shared/collection.model';
import { of, Observable } from 'rxjs'; import { RemoteData } from '../../core/data/remote-data';
import { RemoteData } from 'src/app/core/data/remote-data'; import { Community } from '../../core/shared/community.model';
import { Community } from 'src/app/core/shared/community.model'; import { FindListOptions } from '../../core/data/request.models';
import { FindListOptions } from 'src/app/core/data/request.models'; import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
import { FollowLinkConfig } from 'src/app/shared/utils/follow-link-config.model'; import { PaginatedList } from '../../core/data/paginated-list';
import { PaginatedList } from 'src/app/core/data/paginated-list'; import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
import { createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils'; import { PageInfo } from '../../core/shared/page-info.model';
import { PageInfo } from 'src/app/core/shared/page-info.model'; import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { CollectionDataService } from '../../core/data/collection-data.service';
import { TranslateLoaderMock } from 'src/app/shared/mocks/translate-loader.mock'; import { MockElementRef } from '../../shared/testing/element-ref.mock';
import { CollectionDataService } from 'src/app/core/data/collection-data.service';
import { ChangeDetectorRef, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { hot } from 'jasmine-marbles';
import { By } from '@angular/platform-browser';
describe('CollectionSelectorComponent', () => { describe('CollectionSelectorComponent', () => {
let component: CollectionSelectorComponent; let component: CollectionSelectorComponent;
let fixture: ComponentFixture<CollectionSelectorComponent>; let fixture: ComponentFixture<CollectionSelectorComponent>;
let scheduler: TestScheduler;
const modal = jasmine.createSpyObj('modal', ['close', 'dismiss']); const modal = jasmine.createSpyObj('modal', ['close', 'dismiss']);
const community: Community = Object.assign(new Community(), { const community: Community = Object.assign(new Community(), {
@@ -110,7 +115,7 @@ describe('CollectionSelectorComponent', () => {
} }
}; };
beforeEach(async(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ imports: [
TranslateModule.forRoot({ TranslateModule.forRoot({
@@ -123,10 +128,10 @@ describe('CollectionSelectorComponent', () => {
declarations: [ CollectionSelectorComponent, CollectionDropdownComponent ], declarations: [ CollectionSelectorComponent, CollectionDropdownComponent ],
providers: [ providers: [
{provide: CollectionDataService, useValue: collectionDataServiceMock}, {provide: CollectionDataService, useValue: collectionDataServiceMock},
{provide: ChangeDetectorRef, useValue: {}}, {provide: ElementRef, useClass: MockElementRef},
{provide: ElementRef, userValue: {}},
{provide: NgbActiveModal, useValue: modal}, {provide: NgbActiveModal, useValue: modal},
{provide: ActivatedRoute, useValue: {}} {provide: ActivatedRoute, useValue: {}},
ChangeDetectorRef
], ],
schemas: [NO_ERRORS_SCHEMA] schemas: [NO_ERRORS_SCHEMA]
}) })
@@ -134,28 +139,25 @@ describe('CollectionSelectorComponent', () => {
})); }));
beforeEach(() => { beforeEach(() => {
scheduler = getTestScheduler();
fixture = TestBed.createComponent(CollectionSelectorComponent); fixture = TestBed.createComponent(CollectionSelectorComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
it('should call selectObject', fakeAsync(() => { it('should call selectObject', () => {
spyOn(component, 'selectObject'); spyOn(component, 'selectObject');
fixture.detectChanges(); scheduler.schedule(() => fixture.detectChanges());
tick(); scheduler.flush();
fixture.whenStable().then(() => {
const collectionItem = fixture.debugElement.query(By.css('.collection-item:nth-child(2)')); const collectionItem = fixture.debugElement.query(By.css('.collection-item:nth-child(2)'));
collectionItem.triggerEventHandler('click', { collectionItem.triggerEventHandler('click', null);
preventDefault: () => {/**/
}
});
expect(component.selectObject).toHaveBeenCalled(); expect(component.selectObject).toHaveBeenCalled();
}); });
}));
it('should close the dialog', () => { it('should close the dialog', () => {
component.close(); component.close();

View File

@@ -1,7 +1,9 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { DSpaceObject } from '../../core/shared/dspace-object.model';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { CollectionListEntry } from '../../shared/collection-dropdown/collection-dropdown.component';
/** /**
* This component displays the dialog that shows the list of selectable collections * This component displays the dialog that shows the list of selectable collections
* on the MyDSpace page * on the MyDSpace page
@@ -18,10 +20,11 @@ export class CollectionSelectorComponent {
/** /**
* Method called when an element has been selected from collection list. * Method called when an element has been selected from collection list.
* Its close the active modal and send selected value to the component container * Its close the active modal and send selected value to the component container
* @param dso The selected DSpaceObject *
* @param event The event object containing a CollectionListEntry
*/ */
selectObject(dso: DSpaceObject) { selectObject(event: CollectionListEntry) {
this.activeModal.close(dso); this.activeModal.close(event.collection);
} }
/** /**