55946: Refactoring of object-select and collection-select component

This commit is contained in:
Kristof De Langhe
2018-10-10 13:30:29 +02:00
parent c4203f25d5
commit 0b3b5d3965
12 changed files with 323 additions and 86 deletions

View File

@@ -0,0 +1,27 @@
<ng-container *ngVar="(dsoRD$ | async) as collectionsRD">
<ds-pagination
*ngIf="collectionsRD?.payload?.totalElements > 0"
[paginationOptions]="paginationOptions"
[pageInfoState]="collectionsRD?.payload"
[collectionSize]="collectionsRD?.payload?.totalElements"
[hidePagerWhenSinglePage]="true"
[hideGear]="true">
<div class="table-responsive">
<table id="collection-select" class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">{{'collection.select.table.title' | translate}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let collection of collectionsRD?.payload?.page">
<td><input class="collection-checkbox" [ngModel]="getSelected(collection.id) | async" (change)="switch(collection.id)" type="checkbox" name="{{collection.id}}"></td>
<td><a [routerLink]="['/collection', collection.id]">{{collection.name}}</a></td>
</tr>
</tbody>
</table>
</div>
</ds-pagination>
<button class="btn btn-outline-secondary collection-confirm" (click)="confirmSelected()">{{confirmButton | translate}}</button>
</ng-container>

View File

@@ -0,0 +1,126 @@
import { CollectionSelectComponent } from './item-select.component';
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Item } from '../../../core/shared/item.model';
import { Observable } from 'rxjs/Observable';
import { RemoteData } from '../../../core/data/remote-data';
import { PaginatedList } from '../../../core/data/paginated-list';
import { PageInfo } from '../../../core/shared/page-info.model';
import { PaginationComponentOptions } from '../../pagination/pagination-component-options.model';
import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../shared.module';
import { ObjectSelectServiceStub } from '../../testing/object-select-service-stub';
import { ObjectSelectService } from '../object-select.service';
import { HostWindowService } from '../../host-window.service';
import { HostWindowServiceStub } from '../../testing/host-window-service-stub';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';
describe('ItemSelectComponent', () => {
let comp: CollectionSelectComponent;
let fixture: ComponentFixture<CollectionSelectComponent>;
let itemSelectService: ObjectSelectService;
const mockItemList = [
Object.assign(new Item(), {
id: 'id1',
bitstreams: Observable.of({}),
metadata: [
{
key: 'dc.title',
language: 'en_US',
value: 'This is just a title'
},
{
key: 'dc.type',
language: null,
value: 'Article'
}]
}),
Object.assign(new Item(), {
id: 'id2',
bitstreams: Observable.of({}),
metadata: [
{
key: 'dc.title',
language: 'en_US',
value: 'This is just another title'
},
{
key: 'dc.type',
language: null,
value: 'Article'
}]
})
];
const mockItems = Observable.of(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), mockItemList)));
const mockPaginationOptions = Object.assign(new PaginationComponentOptions(), {
id: 'search-page-configuration',
pageSize: 10,
currentPage: 1
});
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), SharedModule, RouterTestingModule.withRoutes([])],
declarations: [],
providers: [
{ provide: ObjectSelectService, useValue: new ObjectSelectServiceStub() },
{ provide: HostWindowService, useValue: new HostWindowServiceStub(0) }
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CollectionSelectComponent);
comp = fixture.componentInstance;
comp.itemsRD$ = mockItems;
comp.paginationOptions = mockPaginationOptions;
fixture.detectChanges();
itemSelectService = (comp as any).itemSelectService;
});
it(`should show a list of ${mockItemList.length} items`, () => {
const tbody: HTMLElement = fixture.debugElement.query(By.css('table#item-select tbody')).nativeElement;
expect(tbody.children.length).toBe(mockItemList.length);
});
describe('checkboxes', () => {
let checkbox: HTMLInputElement;
beforeEach(() => {
checkbox = fixture.debugElement.query(By.css('input.item-checkbox')).nativeElement;
});
it('should initially be unchecked',() => {
expect(checkbox.checked).toBeFalsy();
});
it('should be checked when clicked', () => {
checkbox.click();
fixture.detectChanges();
expect(checkbox.checked).toBeTruthy();
});
it('should switch the value through item-select-service', () => {
spyOn((comp as any).itemSelectService, 'switch').and.callThrough();
checkbox.click();
expect((comp as any).itemSelectService.switch).toHaveBeenCalled();
});
});
describe('when confirm is clicked', () => {
let confirmButton: HTMLButtonElement;
beforeEach(() => {
confirmButton = fixture.debugElement.query(By.css('button.item-confirm')).nativeElement;
spyOn(comp.confirm, 'emit').and.callThrough();
});
it('should emit the selected items',() => {
confirmButton.click();
expect(comp.confirm.emit).toHaveBeenCalled();
});
});
});

View File

@@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { Collection } from '../../../core/shared/collection.model';
import { ObjectSelectComponent } from '../object-select/object-select.component';
import { isNotEmpty } from '../../empty.util';
import { ObjectSelectService } from '../object-select.service';
@Component({
selector: 'ds-collection-select',
styleUrls: ['./collection-select.component.scss'],
templateUrl: './collection-select.component.html'
})
/**
* A component used to select collections from a specific list and returning the UUIDs of the selected collections
*/
export class CollectionSelectComponent extends ObjectSelectComponent<Collection> {
constructor(protected objectSelectService: ObjectSelectService) {
super(objectSelectService);
}
ngOnInit(): void {
super.ngOnInit();
if (!isNotEmpty(this.confirmButton)) {
this.confirmButton = 'collection.select.confirm';
}
}
}