ItemSelectComponent tests

src/app/shared/item-select/item-select.component.html

@@ -17,7 +17,7 @@
       </thead>
       <tbody>
         <tr *ngFor="let item of (itemsRD$ | async)?.payload?.page">
-          <td><input [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
+          <td><input class="item-checkbox" [ngModel]="getSelected(item.id) | async" (change)="switch(item.id)" type="checkbox" name="{{item.id}}"></td>
           <td><a [routerLink]="['/items', item.id]">{{(item.owningCollection | async)?.payload?.name}}</a></td>
           <td><a *ngIf="item.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0" [routerLink]="['/items', item.id]">{{item.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])[0].value}}</a></td>
           <td><a [routerLink]="['/items', item.id]">{{item.findMetadata("dc.title")}}</a></td>
@@ -26,4 +26,4 @@
     </table>
   </div>
 </ds-pagination>
-<button class="btn btn-outline-secondary" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+<button class="btn btn-outline-secondary item-confirm" (click)="confirmSelected()">{{confirmButton | translate}}</button>

src/app/shared/item-select/item-select.component.spec.ts

@@ -1,5 +1,5 @@
 import { ItemSelectComponent } from './item-select.component';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { SharedModule } from '../shared.module';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -58,7 +58,6 @@ fdescribe('ItemSelectComponent', () => {
         }]
     })
   ];
-  const mockCheckedItems= [mockItemList[0].id];
   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',
@@ -71,7 +70,7 @@ fdescribe('ItemSelectComponent', () => {
       imports: [TranslateModule.forRoot(), SharedModule, RouterTestingModule.withRoutes([])],
       declarations: [],
       providers: [
-        { provide: ItemSelectService, useValue: new ItemSelectServiceStub(mockCheckedItems) },
+        { provide: ItemSelectService, useValue: new ItemSelectServiceStub() },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -92,11 +91,41 @@ fdescribe('ItemSelectComponent', () => {
     expect(tbody.children.length).toBe(mockItemList.length);
   });
 
-  it('should have the correct items selected', () => {
+  describe('checkboxes', () => {
-    for (const item of mockItemList) {
+    let checkbox: HTMLInputElement;
-      const checked = (mockCheckedItems.indexOf(item.id) > -1);
+
-      const checkbox: HTMLElement = fixture.debugElement.query(By.css(`input[name=${item.id}]`)).nativeElement;
+    beforeEach(() => {
-      expect(checkbox.getAttribute('checked')).toBe(checked);
+      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();
+    });
   });
 });