59695: Added BrowseBy tests

src/app/shared/browse-by/browse-by.component.html

@@ -16,9 +16,9 @@
             <button class="btn btn-outline-primary" id="paginationControls" ngbDropdownToggle><i class="fas fa-cog" aria-hidden="true"></i></button>
             <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
               <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
-              <button class="dropdown-item" *ngFor="let item of paginationConfig?.pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != paginationConfig?.pageSize}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
+              <button class="dropdown-item page-size-change" *ngFor="let item of paginationConfig?.pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != paginationConfig?.pageSize}" class="fas fa-check" aria-hidden="true"></i> {{item}} </button>
               <h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
-              <button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortConfig?.direction}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
+              <button class="dropdown-item sort-direction-change" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortConfig?.direction}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
             </div>
           </div>
         </div>
@@ -29,8 +29,8 @@
         </li>
       </ul>
       <div>
-        <button type="button" class="btn btn-outline-secondary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><<</button>
+        <button id="nav-prev" type="button" class="btn btn-outline-secondary float-left" (click)="goPrev()" [disabled]="objects?.payload?.currentPage <= 1"><<</button>
-        <button type="button" class="btn btn-outline-secondary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages">>></button>
+        <button id="nav-next" type="button" class="btn btn-outline-secondary float-right" (click)="goNext()" [disabled]="objects?.payload?.currentPage >= objects?.payload?.totalPages">>></button>
       </div>
     </div>
   </div>

src/app/shared/browse-by/browse-by.component.spec.ts

@@ -1,27 +1,68 @@
 import { BrowseByComponent } from './browse-by.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { of as observableOf } from 'rxjs';
 import { SharedModule } from '../shared.module';
 import { CommonModule } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Item } from '../../core/shared/item.model';
-import { ActivatedRouteStub } from '../testing/active-router-stub';
+import { RemoteData } from '../../core/data/remote-data';
-import { MockRouter } from '../mocks/mock-router';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { PageInfo } from '../../core/shared/page-info.model';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { StoreModule } from '@ngrx/store';
+import { MockTranslateLoader } from '../mocks/mock-translate-loader';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 
 describe('BrowseByComponent', () => {
   let comp: BrowseByComponent;
   let fixture: ComponentFixture<BrowseByComponent>;
 
+  const mockItems = [
+    Object.assign(new Item(), {
+      id: 'fakeId-1',
+      metadata: [
+        {
+          key: 'dc.title',
+          value: 'First Fake Title'
+        }
+      ]
+    }),
+    Object.assign(new Item(), {
+      id: 'fakeId-2',
+      metadata: [
+        {
+          key: 'dc.title',
+          value: 'Second Fake Title'
+        }
+      ]
+    })
+  ];
+  const mockItemsRD$ = observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), mockItems)));
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [CommonModule, TranslateModule.forRoot(), SharedModule],
+      imports: [
-      declarations: [],
+        CommonModule,
-      providers: [
+        TranslateModule.forRoot(),
-        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+        SharedModule,
-        { provide: Router, useValue: new MockRouter() }
+        NgbModule.forRoot(),
+        StoreModule.forRoot({}),
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: MockTranslateLoader
+          }
+        }),
+        RouterTestingModule,
+        BrowserAnimationsModule
       ],
+      declarations: [],
+      providers: [],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
@@ -49,4 +90,67 @@ describe('BrowseByComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-viewable-collection'))).toBeDefined();
   });
 
+  describe('when enableArrows is true and objects are defined', () => {
+    beforeEach(() => {
+      comp.enableArrows = true;
+      comp.objects$ = mockItemsRD$;
+      comp.paginationConfig = Object.assign(new PaginationComponentOptions(), {
+        id: 'test-pagination',
+        currentPage: 1,
+        pageSizeOptions: [5,10,15,20],
+        pageSize: 15
+      });
+      comp.sortConfig = Object.assign(new SortOptions('dc.title', SortDirection.ASC));
+      fixture.detectChanges();
+    });
+
+    describe('when clicking the previous arrow button', () => {
+      beforeEach(() => {
+        spyOn(comp.prev, 'emit');
+        fixture.debugElement.query(By.css('#nav-prev')).triggerEventHandler('click', null);
+        fixture.detectChanges();
+      });
+
+      it('should emit a signal to the EventEmitter',() => {
+        expect(comp.prev.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('when clicking the next arrow button', () => {
+      beforeEach(() => {
+        spyOn(comp.next, 'emit');
+        fixture.debugElement.query(By.css('#nav-next')).triggerEventHandler('click', null);
+        fixture.detectChanges();
+      });
+
+      it('should emit a signal to the EventEmitter',() => {
+        expect(comp.next.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('when clicking a different page size', () => {
+      beforeEach(() => {
+        spyOn(comp.pageSizeChange, 'emit');
+        fixture.debugElement.query(By.css('.page-size-change')).triggerEventHandler('click', null);
+        fixture.detectChanges();
+      });
+
+      it('should emit a signal to the EventEmitter',() => {
+        expect(comp.pageSizeChange.emit).toHaveBeenCalled();
+      });
+    });
+
+    describe('when clicking a different sort direction', () => {
+      beforeEach(() => {
+        spyOn(comp.sortDirectionChange, 'emit');
+        fixture.debugElement.query(By.css('.sort-direction-change')).triggerEventHandler('click', null);
+        fixture.detectChanges();
+      });
+
+      it('should emit a signal to the EventEmitter',() => {
+        expect(comp.sortDirectionChange.emit).toHaveBeenCalled();
+      });
+    });
+  });
+
 });