From ce004c2e58b7123ea27115ab8efbc88e621e420f Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 23 Dec 2019 15:10:08 +0100 Subject: [PATCH 1/9] Resolve conflict occurred when two or more pagination components are present in the same page --- .../shared/pagination/pagination.component.ts | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts index 014f01f152..9c378d1aff 100644 --- a/src/app/shared/pagination/pagination.component.ts +++ b/src/app/shared/pagination/pagination.component.ts @@ -225,10 +225,14 @@ export class PaginationComponent implements OnDestroy, OnInit { } /** + * @param cdRef + * ChangeDetectorRef is a singleton service provided by Angular. * @param route * Route is a singleton service provided by Angular. * @param router * Router is a singleton service provided by Angular. + * @param hostWindowService + * the HostWindowService singleton. */ constructor(private cdRef: ChangeDetectorRef, private route: ActivatedRoute, @@ -243,7 +247,7 @@ export class PaginationComponent implements OnDestroy, OnInit { * The page being navigated to. */ public doPageChange(page: number) { - this.updateRoute({ page: page.toString() }); + this.updateRoute({ pageId: this.id, page: page.toString() }); } /** @@ -253,7 +257,7 @@ export class PaginationComponent implements OnDestroy, OnInit { * The page size being navigated to. */ public doPageSizeChange(pageSize: number) { - this.updateRoute({ page: 1, pageSize: pageSize }); + this.updateRoute({ pageId: this.id, page: 1, pageSize: pageSize }); } /** @@ -263,7 +267,7 @@ export class PaginationComponent implements OnDestroy, OnInit { * The sort direction being navigated to. */ public doSortDirectionChange(sortDirection: SortDirection) { - this.updateRoute({ page: 1, sortDirection: sortDirection }); + this.updateRoute({ pageId: this.id, page: 1, sortDirection: sortDirection }); } /** @@ -273,7 +277,7 @@ export class PaginationComponent implements OnDestroy, OnInit { * The sort field being navigated to. */ public doSortFieldChange(field: string) { - this.updateRoute({ page: 1, sortField: field }); + this.updateRoute({ pageId: this.id, page: 1, sortField: field }); } /** @@ -413,27 +417,30 @@ export class PaginationComponent implements OnDestroy, OnInit { * Method to update all pagination variables to the current query parameters */ private setFields() { - // (+) converts string to a number - const page = this.currentQueryParams.page; - if (this.currentPage !== +page) { - this.setPage(+page); - } + // set fields only when page id is the one configured for this pagination instance + if (this.currentQueryParams.pageId === this.id) { + // (+) converts string to a number + const page = this.currentQueryParams.page; + if (this.currentPage !== +page) { + this.setPage(+page); + } - const pageSize = this.currentQueryParams.pageSize; - if (this.pageSize !== +pageSize) { - this.setPageSize(+pageSize); - } + const pageSize = this.currentQueryParams.pageSize; + if (this.pageSize !== +pageSize) { + this.setPageSize(+pageSize); + } - const sortDirection = this.currentQueryParams.sortDirection; - if (this.sortDirection !== sortDirection) { - this.setSortDirection(sortDirection); - } + const sortDirection = this.currentQueryParams.sortDirection; + if (this.sortDirection !== sortDirection) { + this.setSortDirection(sortDirection); + } - const sortField = this.currentQueryParams.sortField; - if (this.sortField !== sortField) { - this.setSortField(sortField); + const sortField = this.currentQueryParams.sortField; + if (this.sortField !== sortField) { + this.setSortField(sortField); + } + this.cdRef.detectChanges(); } - this.cdRef.detectChanges(); } /** From e004098016d86a06b75fe5b75a793870a66bf3ec Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 23 Dec 2019 15:11:38 +0100 Subject: [PATCH 2/9] Added pagination to community's collection list in the community page --- ...ty-page-sub-collection-list.component.html | 15 +- ...page-sub-collection-list.component.spec.ts | 169 ++++++++++++++++++ ...nity-page-sub-collection-list.component.ts | 63 ++++++- 3 files changed, 235 insertions(+), 12 deletions(-) create mode 100644 src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html index 9156a99b18..bf6ce7fd57 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html @@ -1,14 +1,13 @@

{{'community.sub-collection-list.head' | translate}}

- + +
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts new file mode 100644 index 0000000000..2150676dd6 --- /dev/null +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts @@ -0,0 +1,169 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { RouterTestingModule } from '@angular/router/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component'; +import { Community } from '../../core/shared/community.model'; +import { SharedModule } from '../../shared/shared.module'; +import { CollectionDataService } from '../../core/data/collection-data.service'; +import { FindListOptions } from '../../core/data/request.models'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils'; +import { PaginatedList } from '../../core/data/paginated-list'; +import { PageInfo } from '../../core/shared/page-info.model'; +import { HostWindowService } from '../../shared/host-window.service'; +import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; + +describe('CommunityPageSubCollectionListComponent Component', () => { + let comp: CommunityPageSubCollectionListComponent; + let fixture: ComponentFixture; + let collectionDataServiceStub: any; + let subCollList = []; + + const collections = [Object.assign(new Community(), { + id: '123456789-1', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 1' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-2', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 2' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-3', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 3' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-4', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 4' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-5', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 5' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-6', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 6' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-7', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Collection 7' } + ] + } + }) + ]; + + const mockCommunity = Object.assign(new Community(), { + id: '123456789', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'Test title' } + ] + } + }); + + collectionDataServiceStub = { + findByParent(parentUUID: string, options: FindListOptions = {}) { + let currentPage = options.currentPage; + let elementsPerPage = options.elementsPerPage; + if (currentPage === undefined) { + currentPage = 1 + } + elementsPerPage = 5; + const startPageIndex = (currentPage - 1) * elementsPerPage; + let endPageIndex = (currentPage * elementsPerPage); + if (endPageIndex > subCollList.length) { + endPageIndex = subCollList.length; + } + return createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), subCollList.slice(startPageIndex, endPageIndex))); + + } + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot(), SharedModule, + RouterTestingModule.withRoutes([]), + NoopAnimationsModule], + declarations: [CommunityPageSubCollectionListComponent], + providers: [ + { provide: CollectionDataService, useValue: collectionDataServiceStub }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, + ], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommunityPageSubCollectionListComponent); + comp = fixture.componentInstance; + comp.community = mockCommunity; + }); + + it('should display a list of collections', () => { + subCollList = collections; + fixture.detectChanges(); + + const collList = fixture.debugElement.queryAll(By.css('li')); + expect(collList.length).toEqual(5); + expect(collList[0].nativeElement.textContent).toContain('Collection 1'); + expect(collList[1].nativeElement.textContent).toContain('Collection 2'); + expect(collList[2].nativeElement.textContent).toContain('Collection 3'); + expect(collList[3].nativeElement.textContent).toContain('Collection 4'); + expect(collList[4].nativeElement.textContent).toContain('Collection 5'); + }); + + it('should not display the header when collection list is empty', () => { + subCollList = []; + fixture.detectChanges(); + + const subComHead = fixture.debugElement.queryAll(By.css('h2')); + expect(subComHead.length).toEqual(0); + }); + + it('should update list of collection on pagination change', () => { + subCollList = collections; + fixture.detectChanges(); + + const pagination = Object.create({}); + pagination.pageId = comp.pageId; + pagination.page = 2; + pagination.pageSize = 5; + pagination.sortField = 'dc.title'; + pagination.sortDirection = 'ASC'; + comp.onPaginationChange(pagination); + fixture.detectChanges(); + + const collList = fixture.debugElement.queryAll(By.css('li')); + expect(collList.length).toEqual(2); + expect(collList[0].nativeElement.textContent).toContain('Collection 6'); + expect(collList[1].nativeElement.textContent).toContain('Collection 7'); + }); +}); diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts index b8a5d60002..18f48c3482 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts @@ -1,12 +1,16 @@ import { Component, Input, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; + +import { BehaviorSubject } from 'rxjs'; +import { take } from 'rxjs/operators'; import { RemoteData } from '../../core/data/remote-data'; import { Collection } from '../../core/shared/collection.model'; import { Community } from '../../core/shared/community.model'; - import { fadeIn } from '../../shared/animations/fade'; import { PaginatedList } from '../../core/data/paginated-list'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; +import { CollectionDataService } from '../../core/data/collection-data.service'; @Component({ selector: 'ds-community-page-sub-collection-list', @@ -16,9 +20,60 @@ import { PaginatedList } from '../../core/data/paginated-list'; }) export class CommunityPageSubCollectionListComponent implements OnInit { @Input() community: Community; - subCollectionsRDObs: Observable>>; + + /** + * The pagination configuration + */ + config: PaginationComponentOptions; + + /** + * The pagination id + */ + pageId = 'community-collections-pagination'; + + /** + * The sorting configuration + */ + sortConfig: SortOptions; + + /** + * A list of remote data objects of communities' collections + */ + subCollectionsRDObs: BehaviorSubject>> = new BehaviorSubject>>({} as any); + + constructor(private cds: CollectionDataService) {} ngOnInit(): void { - this.subCollectionsRDObs = this.community.collections; + this.config = new PaginationComponentOptions(); + this.config.id = this.pageId; + this.config.pageSize = 5; + this.config.currentPage = 1; + this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); + this.updatePage(); + } + + /** + * Called when one of the pagination settings is changed + * @param event The new pagination data + */ + onPaginationChange(event) { + this.config.currentPage = event.page; + this.config.pageSize = event.pageSize; + this.sortConfig.field = event.sortField; + this.sortConfig.direction = event.sortDirection; + this.updatePage(); + } + + /** + * Update the list of collections + */ + updatePage() { + this.cds.findByParent(this.community.id,{ + currentPage: this.config.currentPage, + elementsPerPage: this.config.pageSize, + sort: { field: this.sortConfig.field, direction: this.sortConfig.direction } + }).pipe(take(1)).subscribe((results) => { + this.subCollectionsRDObs.next(results); + }); } } From fcbb690b29cf87bf421826d4b4c6e8f0abc1181e Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 23 Dec 2019 15:12:05 +0100 Subject: [PATCH 3/9] Added pagination to community's sub-community list in the community page --- ...ity-page-sub-community-list.component.html | 15 +- ...-page-sub-community-list.component.spec.ts | 138 ++++++++++++++---- ...unity-page-sub-community-list.component.ts | 66 ++++++++- 3 files changed, 178 insertions(+), 41 deletions(-) diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.html b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.html index 6cd62ba48d..880ea9cc8e 100644 --- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.html +++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.html @@ -1,14 +1,13 @@

{{'community.sub-community-list.head' | translate}}

- + +
diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts index 2feaa3afa6..ff3eb4d074 100644 --- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts +++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts @@ -1,21 +1,26 @@ -import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {TranslateModule} from '@ngx-translate/core'; -import {NO_ERRORS_SCHEMA} from '@angular/core'; -import {CommunityPageSubCommunityListComponent} from './community-page-sub-community-list.component'; -import {Community} from '../../core/shared/community.model'; -import {RemoteData} from '../../core/data/remote-data'; -import {PaginatedList} from '../../core/data/paginated-list'; -import {PageInfo} from '../../core/shared/page-info.model'; -import {SharedModule} from '../../shared/shared.module'; -import {RouterTestingModule} from '@angular/router/testing'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {By} from '@angular/platform-browser'; -import {of as observableOf, Observable } from 'rxjs'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { RouterTestingModule } from '@angular/router/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; + +import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component'; +import { Community } from '../../core/shared/community.model'; +import { PaginatedList } from '../../core/data/paginated-list'; +import { PageInfo } from '../../core/shared/page-info.model'; +import { SharedModule } from '../../shared/shared.module'; import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils'; +import { FindListOptions } from '../../core/data/request.models'; +import { HostWindowService } from '../../shared/host-window.service'; +import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; +import { CommunityDataService } from '../../core/data/community-data.service'; describe('SubCommunityList Component', () => { let comp: CommunityPageSubCommunityListComponent; let fixture: ComponentFixture; + let communityDataServiceStub: any; + let subCommList = []; const subcommunities = [Object.assign(new Community(), { id: '123456789-1', @@ -32,27 +37,76 @@ describe('SubCommunityList Component', () => { { language: 'en_US', value: 'SubCommunity 2' } ] } + }), + Object.assign(new Community(), { + id: '123456789-3', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'SubCommunity 3' } + ] + } + }), + Object.assign(new Community(), { + id: '12345678942', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'SubCommunity 4' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-5', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'SubCommunity 5' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-6', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'SubCommunity 6' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-7', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'SubCommunity 7' } + ] + } }) ]; - const emptySubCommunitiesCommunity = Object.assign(new Community(), { + const mockCommunity = Object.assign(new Community(), { + id: '123456789', metadata: { 'dc.title': [ { language: 'en_US', value: 'Test title' } ] - }, - subcommunities: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])) + } }); - const mockCommunity = Object.assign(new Community(), { - metadata: { - 'dc.title': [ - { language: 'en_US', value: 'Test title' } - ] - }, - subcommunities: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), subcommunities)) - }) - ; + communityDataServiceStub = { + findByParent(parentUUID: string, options: FindListOptions = {}) { + let currentPage = options.currentPage; + let elementsPerPage = options.elementsPerPage; + if (currentPage === undefined) { + currentPage = 1 + } + elementsPerPage = 5; + + const startPageIndex = (currentPage - 1) * elementsPerPage; + let endPageIndex = (currentPage * elementsPerPage); + if (endPageIndex > subCommList.length) { + endPageIndex = subCommList.length; + } + return createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), subCommList.slice(startPageIndex, endPageIndex))); + + } + }; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -60,6 +114,10 @@ describe('SubCommunityList Component', () => { RouterTestingModule.withRoutes([]), NoopAnimationsModule], declarations: [CommunityPageSubCommunityListComponent], + providers: [ + { provide: CommunityDataService, useValue: communityDataServiceStub }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, + ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); })); @@ -67,23 +125,47 @@ describe('SubCommunityList Component', () => { beforeEach(() => { fixture = TestBed.createComponent(CommunityPageSubCommunityListComponent); comp = fixture.componentInstance; + comp.community = mockCommunity; + }); it('should display a list of subCommunities', () => { - comp.community = mockCommunity; + subCommList = subcommunities; fixture.detectChanges(); const subComList = fixture.debugElement.queryAll(By.css('li')); - expect(subComList.length).toEqual(2); + expect(subComList.length).toEqual(5); expect(subComList[0].nativeElement.textContent).toContain('SubCommunity 1'); expect(subComList[1].nativeElement.textContent).toContain('SubCommunity 2'); + expect(subComList[2].nativeElement.textContent).toContain('SubCommunity 3'); + expect(subComList[3].nativeElement.textContent).toContain('SubCommunity 4'); + expect(subComList[4].nativeElement.textContent).toContain('SubCommunity 5'); }); it('should not display the header when subCommunities are empty', () => { - comp.community = emptySubCommunitiesCommunity; + subCommList = []; fixture.detectChanges(); const subComHead = fixture.debugElement.queryAll(By.css('h2')); expect(subComHead.length).toEqual(0); }); + + it('should update list of collection on pagination change', () => { + subCommList = subcommunities; + fixture.detectChanges(); + + const pagination = Object.create({}); + pagination.pageId = comp.pageId; + pagination.page = 2; + pagination.pageSize = 5; + pagination.sortField = 'dc.title'; + pagination.sortDirection = 'ASC'; + comp.onPaginationChange(pagination); + fixture.detectChanges(); + + const collList = fixture.debugElement.queryAll(By.css('li')); + expect(collList.length).toEqual(2); + expect(collList[0].nativeElement.textContent).toContain('SubCommunity 6'); + expect(collList[1].nativeElement.textContent).toContain('SubCommunity 7'); + }); }); diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts index 91f6d7bac1..34ef05c2c4 100644 --- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts +++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts @@ -1,26 +1,82 @@ import { Component, Input, OnInit } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { take } from 'rxjs/operators'; + import { RemoteData } from '../../core/data/remote-data'; import { Community } from '../../core/shared/community.model'; - import { fadeIn } from '../../shared/animations/fade'; import { PaginatedList } from '../../core/data/paginated-list'; -import {Observable} from 'rxjs'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; +import { CommunityDataService } from '../../core/data/community-data.service'; @Component({ selector: 'ds-community-page-sub-community-list', styleUrls: ['./community-page-sub-community-list.component.scss'], templateUrl: './community-page-sub-community-list.component.html', - animations:[fadeIn] + animations: [fadeIn] }) /** * Component to render the sub-communities of a Community */ export class CommunityPageSubCommunityListComponent implements OnInit { @Input() community: Community; - subCommunitiesRDObs: Observable>>; + + /** + * The pagination configuration + */ + config: PaginationComponentOptions; + + /** + * The pagination id + */ + pageId = 'community-subCommunities-pagination'; + + /** + * The sorting configuration + */ + sortConfig: SortOptions; + + /** + * A list of remote data objects of communities' collections + */ + subCommunitiesRDObs: BehaviorSubject>> = new BehaviorSubject>>({} as any); + + constructor(private cds: CommunityDataService) { + } ngOnInit(): void { - this.subCommunitiesRDObs = this.community.subcommunities; + this.config = new PaginationComponentOptions(); + this.config.id = this.pageId; + this.config.pageSize = 5; + this.config.currentPage = 1; + this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); + this.updatePage(); + } + + /** + * Called when one of the pagination settings is changed + * @param event The new pagination data + */ + onPaginationChange(event) { + this.config.currentPage = event.page; + this.config.pageSize = event.pageSize; + this.sortConfig.field = event.sortField; + this.sortConfig.direction = event.sortDirection; + this.updatePage(); + } + + /** + * Update the list of sub-communities + */ + updatePage() { + this.cds.findByParent(this.community.id, { + currentPage: this.config.currentPage, + elementsPerPage: this.config.pageSize, + sort: { field: this.sortConfig.field, direction: this.sortConfig.direction } + }).pipe(take(1)).subscribe((results) => { + this.subCommunitiesRDObs.next(results); + }); } } From b18cfcbd25c9ab332fef4cc5205d56a3c9f99665 Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 23 Dec 2019 17:23:17 +0100 Subject: [PATCH 4/9] fixed issue with type of object emitted onPaginationChange event --- ...page-sub-collection-list.component.spec.ts | 35 ++++++++++++------ ...nity-page-sub-collection-list.component.ts | 8 ++-- ...-page-sub-community-list.component.spec.ts | 37 +++++++++++++------ ...unity-page-sub-community-list.component.ts | 8 ++-- .../top-level-community-list.component.ts | 23 +++++++----- 5 files changed, 71 insertions(+), 40 deletions(-) diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts index 2150676dd6..09332dda16 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.spec.ts @@ -5,6 +5,8 @@ import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; + import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component'; import { Community } from '../../core/shared/community.model'; import { SharedModule } from '../../shared/shared.module'; @@ -15,8 +17,9 @@ import { PaginatedList } from '../../core/data/paginated-list'; import { PageInfo } from '../../core/shared/page-info.model'; import { HostWindowService } from '../../shared/host-window.service'; import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; +import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; -describe('CommunityPageSubCollectionListComponent Component', () => { +describe('CommunityPageSubCollectionList Component', () => { let comp: CommunityPageSubCollectionListComponent; let fixture: ComponentFixture; let collectionDataServiceStub: any; @@ -109,13 +112,18 @@ describe('CommunityPageSubCollectionListComponent Component', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot(), SharedModule, + imports: [ + TranslateModule.forRoot(), + SharedModule, RouterTestingModule.withRoutes([]), - NoopAnimationsModule], + NgbModule.forRoot(), + NoopAnimationsModule + ], declarations: [CommunityPageSubCollectionListComponent], providers: [ { provide: CollectionDataService, useValue: collectionDataServiceStub }, { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, + { provide: SelectableListService, useValue: {} }, ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); @@ -140,7 +148,7 @@ describe('CommunityPageSubCollectionListComponent Component', () => { expect(collList[4].nativeElement.textContent).toContain('Collection 5'); }); - it('should not display the header when collection list is empty', () => { + it('should not display the header when list of collections is empty', () => { subCollList = []; fixture.detectChanges(); @@ -148,16 +156,21 @@ describe('CommunityPageSubCollectionListComponent Component', () => { expect(subComHead.length).toEqual(0); }); - it('should update list of collection on pagination change', () => { + it('should update list of collections on pagination change', () => { subCollList = collections; fixture.detectChanges(); - const pagination = Object.create({}); - pagination.pageId = comp.pageId; - pagination.page = 2; - pagination.pageSize = 5; - pagination.sortField = 'dc.title'; - pagination.sortDirection = 'ASC'; + const pagination = Object.create({ + pagination:{ + id: comp.pageId, + currentPage: 2, + pageSize: 5 + }, + sort: { + field: 'dc.title', + direction: 'ASC' + } + }); comp.onPaginationChange(pagination); fixture.detectChanges(); diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts index 18f48c3482..64c274444e 100644 --- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts +++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts @@ -57,10 +57,10 @@ export class CommunityPageSubCollectionListComponent implements OnInit { * @param event The new pagination data */ onPaginationChange(event) { - this.config.currentPage = event.page; - this.config.pageSize = event.pageSize; - this.sortConfig.field = event.sortField; - this.sortConfig.direction = event.sortDirection; + this.config.currentPage = event.pagination.currentPage; + this.config.pageSize = event.pagination.pageSize; + this.sortConfig.field = event.sort.field; + this.sortConfig.direction = event.sort.direction; this.updatePage(); } diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts index ff3eb4d074..41502e7bd4 100644 --- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts +++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts @@ -5,6 +5,8 @@ import { RouterTestingModule } from '@angular/router/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; + import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component'; import { Community } from '../../core/shared/community.model'; import { PaginatedList } from '../../core/data/paginated-list'; @@ -15,8 +17,9 @@ import { FindListOptions } from '../../core/data/request.models'; import { HostWindowService } from '../../shared/host-window.service'; import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; import { CommunityDataService } from '../../core/data/community-data.service'; +import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; -describe('SubCommunityList Component', () => { +describe('CommunityPageSubCommunityListComponent Component', () => { let comp: CommunityPageSubCommunityListComponent; let fixture: ComponentFixture; let communityDataServiceStub: any; @@ -110,13 +113,18 @@ describe('SubCommunityList Component', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [TranslateModule.forRoot(), SharedModule, + imports: [ + TranslateModule.forRoot(), + SharedModule, RouterTestingModule.withRoutes([]), - NoopAnimationsModule], + NgbModule.forRoot(), + NoopAnimationsModule + ], declarations: [CommunityPageSubCommunityListComponent], providers: [ { provide: CommunityDataService, useValue: communityDataServiceStub }, { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, + { provide: SelectableListService, useValue: {} }, ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); @@ -129,7 +137,7 @@ describe('SubCommunityList Component', () => { }); - it('should display a list of subCommunities', () => { + it('should display a list of sub-communities', () => { subCommList = subcommunities; fixture.detectChanges(); @@ -142,7 +150,7 @@ describe('SubCommunityList Component', () => { expect(subComList[4].nativeElement.textContent).toContain('SubCommunity 5'); }); - it('should not display the header when subCommunities are empty', () => { + it('should not display the header when list of sub-communities is empty', () => { subCommList = []; fixture.detectChanges(); @@ -150,16 +158,21 @@ describe('SubCommunityList Component', () => { expect(subComHead.length).toEqual(0); }); - it('should update list of collection on pagination change', () => { + it('should update list of sub-communities on pagination change', () => { subCommList = subcommunities; fixture.detectChanges(); - const pagination = Object.create({}); - pagination.pageId = comp.pageId; - pagination.page = 2; - pagination.pageSize = 5; - pagination.sortField = 'dc.title'; - pagination.sortDirection = 'ASC'; + const pagination = Object.create({ + pagination:{ + id: comp.pageId, + currentPage: 2, + pageSize: 5 + }, + sort: { + field: 'dc.title', + direction: 'ASC' + } + }); comp.onPaginationChange(pagination); fixture.detectChanges(); diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts index 34ef05c2c4..1bd664021e 100644 --- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts +++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.ts @@ -60,10 +60,10 @@ export class CommunityPageSubCommunityListComponent implements OnInit { * @param event The new pagination data */ onPaginationChange(event) { - this.config.currentPage = event.page; - this.config.pageSize = event.pageSize; - this.sortConfig.field = event.sortField; - this.sortConfig.direction = event.sortDirection; + this.config.currentPage = event.pagination.currentPage; + this.config.pageSize = event.pagination.pageSize; + this.sortConfig.field = event.sort.field; + this.sortConfig.direction = event.sort.direction; this.updatePage(); } diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts b/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts index 1115d785a3..02c3cb54a0 100644 --- a/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts +++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.ts @@ -1,15 +1,15 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; -import { BehaviorSubject, Observable } from 'rxjs'; + +import { BehaviorSubject } from 'rxjs'; +import { take } from 'rxjs/operators'; + import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; import { CommunityDataService } from '../../core/data/community-data.service'; import { PaginatedList } from '../../core/data/paginated-list'; - import { RemoteData } from '../../core/data/remote-data'; import { Community } from '../../core/shared/community.model'; - import { fadeInOut } from '../../shared/animations/fade'; import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; -import { take } from 'rxjs/operators'; /** * this component renders the Top-Level Community list @@ -33,6 +33,11 @@ export class TopLevelCommunityListComponent implements OnInit { */ config: PaginationComponentOptions; + /** + * The pagination id + */ + pageId = 'top-level-pagination'; + /** * The sorting configuration */ @@ -40,7 +45,7 @@ export class TopLevelCommunityListComponent implements OnInit { constructor(private cds: CommunityDataService) { this.config = new PaginationComponentOptions(); - this.config.id = 'top-level-pagination'; + this.config.id = this.pageId; this.config.pageSize = 5; this.config.currentPage = 1; this.sortConfig = new SortOptions('dc.title', SortDirection.ASC); @@ -55,10 +60,10 @@ export class TopLevelCommunityListComponent implements OnInit { * @param event The new pagination data */ onPaginationChange(event) { - this.config.currentPage = event.page; - this.config.pageSize = event.pageSize; - this.sortConfig.field = event.sortField; - this.sortConfig.direction = event.sortDirection; + this.config.currentPage = event.pagination.currentPage; + this.config.pageSize = event.pagination.pageSize; + this.sortConfig.field = event.sort.field; + this.sortConfig.direction = event.sort.direction; this.updatePage(); } From c09010e15142a6e213993265c67ec83627d7568a Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 23 Dec 2019 17:23:43 +0100 Subject: [PATCH 5/9] Added test for TopLevelCommunityList Component --- ...top-level-community-list.component.spec.ts | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts diff --git a/src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts b/src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts new file mode 100644 index 0000000000..fa164fe624 --- /dev/null +++ b/src/app/+home-page/top-level-community-list/top-level-community-list.component.spec.ts @@ -0,0 +1,161 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule } from '@ngx-translate/core'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { RouterTestingModule } from '@angular/router/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { By } from '@angular/platform-browser'; + +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; + +import { TopLevelCommunityListComponent } from './top-level-community-list.component'; +import { Community } from '../../core/shared/community.model'; +import { PaginatedList } from '../../core/data/paginated-list'; +import { PageInfo } from '../../core/shared/page-info.model'; +import { SharedModule } from '../../shared/shared.module'; +import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils'; +import { FindListOptions } from '../../core/data/request.models'; +import { HostWindowService } from '../../shared/host-window.service'; +import { HostWindowServiceStub } from '../../shared/testing/host-window-service-stub'; +import { CommunityDataService } from '../../core/data/community-data.service'; +import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service'; + +describe('TopLevelCommunityList Component', () => { + let comp: TopLevelCommunityListComponent; + let fixture: ComponentFixture; + let communityDataServiceStub: any; + + const topCommList = [Object.assign(new Community(), { + id: '123456789-1', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 1' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-2', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 2' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-3', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 3' } + ] + } + }), + Object.assign(new Community(), { + id: '12345678942', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 4' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-5', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 5' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-6', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 6' } + ] + } + }), + Object.assign(new Community(), { + id: '123456789-7', + metadata: { + 'dc.title': [ + { language: 'en_US', value: 'TopCommunity 7' } + ] + } + }) + ]; + + communityDataServiceStub = { + findTop(options: FindListOptions = {}) { + let currentPage = options.currentPage; + let elementsPerPage = options.elementsPerPage; + if (currentPage === undefined) { + currentPage = 1 + } + elementsPerPage = 5; + + const startPageIndex = (currentPage - 1) * elementsPerPage; + let endPageIndex = (currentPage * elementsPerPage); + if (endPageIndex > topCommList.length) { + endPageIndex = topCommList.length; + } + return createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), topCommList.slice(startPageIndex, endPageIndex))); + + } + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + TranslateModule.forRoot(), + SharedModule, + RouterTestingModule.withRoutes([]), + NgbModule.forRoot(), + NoopAnimationsModule + ], + declarations: [TopLevelCommunityListComponent], + providers: [ + { provide: CommunityDataService, useValue: communityDataServiceStub }, + { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, + { provide: SelectableListService, useValue: {} }, + ], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TopLevelCommunityListComponent); + comp = fixture.componentInstance; + fixture.detectChanges(); + + }); + + it('should display a list of top-communities', () => { + const subComList = fixture.debugElement.queryAll(By.css('li')); + + expect(subComList.length).toEqual(5); + expect(subComList[0].nativeElement.textContent).toContain('TopCommunity 1'); + expect(subComList[1].nativeElement.textContent).toContain('TopCommunity 2'); + expect(subComList[2].nativeElement.textContent).toContain('TopCommunity 3'); + expect(subComList[3].nativeElement.textContent).toContain('TopCommunity 4'); + expect(subComList[4].nativeElement.textContent).toContain('TopCommunity 5'); + }); + + it('should update list of top-communities on pagination change', () => { + const pagination = Object.create({ + pagination:{ + id: comp.pageId, + currentPage: 2, + pageSize: 5 + }, + sort: { + field: 'dc.title', + direction: 'ASC' + } + }); + comp.onPaginationChange(pagination); + fixture.detectChanges(); + + const collList = fixture.debugElement.queryAll(By.css('li')); + expect(collList.length).toEqual(2); + expect(collList[0].nativeElement.textContent).toContain('TopCommunity 6'); + expect(collList[1].nativeElement.textContent).toContain('TopCommunity 7'); + }); +}); From 027182130544c0c76c995e84f0cf42a5e6c83e5b Mon Sep 17 00:00:00 2001 From: lotte Date: Tue, 14 Jan 2020 14:50:46 +0100 Subject: [PATCH 6/9] updated tslint rules that have been renamed --- tslint.json | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/tslint.json b/tslint.json index b4f905d324..92bb66cee1 100644 --- a/tslint.json +++ b/tslint.json @@ -40,7 +40,7 @@ ], "no-access-missing-member": false, "no-arg": true, - "no-attribute-parameter-decorator": true, + "no-attribute-decorator": true, "no-bitwise": true, "no-console": [ true, @@ -81,9 +81,8 @@ false ], "prefer-const": true, - "pipe-naming": [ + "pipe-prefix": [ true, - "camelCase", "ds" ], "quotemark": [ @@ -147,10 +146,10 @@ "no-input-rename": true, "no-output-rename": true, "templates-use-public": false, - "use-host-property-decorator": true, - "use-input-property-decorator": true, + "no-host-metadata-property": true, + "no-inputs-metadata-property": true, "use-life-cycle-interface": false, - "use-output-property-decorator": true, + "no-outputs-metadata-property": true, "use-pipe-transform-interface": true // "rxjs-collapse-imports": true, // "rxjs-pipeable-operators-only": true, From 2e06357291fecb9453891f5e4b03ec46cb76f8ab Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Wed, 15 Jan 2020 11:12:49 +0100 Subject: [PATCH 7/9] upgrade to bionic --- .travis.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 901dee8186..4dd4943f7c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,5 @@ sudo: required -dist: trusty +dist: bionic env: # Install the latest docker-compose version for ci testing. @@ -38,7 +38,6 @@ addons: sources: - google-chrome packages: - - dpkg - google-chrome-stable language: node_js From 1d6e9d5b96b7807cfbacd2f0f92acf6b18b2cb90 Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Wed, 15 Jan 2020 11:32:29 +0100 Subject: [PATCH 8/9] add xvfb service for headless chrome --- .travis.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.travis.yml b/.travis.yml index 4dd4943f7c..9c80cc0447 100644 --- a/.travis.yml +++ b/.travis.yml @@ -12,6 +12,9 @@ env: DSPACE_REST_NAMESPACE: '/server/api' DSPACE_REST_SSL: false +services: + - xvfb + before_install: # Docker Compose Install - curl -L https://github.com/docker/compose/releases/download/${COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose From 94a71b69d1022a0932f346e4216fe8f6db4faf5b Mon Sep 17 00:00:00 2001 From: Art Lowel Date: Wed, 15 Jan 2020 11:56:04 +0100 Subject: [PATCH 9/9] remove chrome source, doesn't work anyway and doesn't seem to be needed. Remove chromium to try to solve the issue where travis can't find chrome --- .travis.yml | 9 --------- 1 file changed, 9 deletions(-) diff --git a/.travis.yml b/.travis.yml index 9c80cc0447..c42923886d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -36,13 +36,6 @@ before_script: after_script: - docker-compose -f ./docker/docker-compose-travis.yml down -addons: - apt: - sources: - - google-chrome - packages: - - google-chrome-stable - language: node_js node_js: @@ -55,8 +48,6 @@ cache: bundler_args: --retry 5 script: - # Use Chromium instead of Chrome. - - export CHROME_BIN=chromium-browser - yarn run build - yarn run ci - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js