46063: truncation finished, still have to fix some existing tests

src/app/shared/animations/focus.ts

@@ -2,7 +2,7 @@ import { animate, state, transition, trigger, style } from '@angular/animations'
 
 export const focusShadow = trigger('focusShadow', [
 
-  state('focus', style({ 'box-shadow': '0 0 6px #777777' })),
+  state('focus', style({ 'box-shadow': 'rgba(119, 119, 119, 0.6) 0px 0px 6px' })),
 
   state('blur', style({ 'box-shadow': 'none' })),
 

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts

-import {CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
+import { CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable } from 'rxjs/Observable';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -8,6 +8,7 @@ import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
 import { Collection } from '../../../../core/shared/collection.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 
 let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
 const queryParam = 'test query';
@@ -18,29 +19,33 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockCollection: Collection = Object.assign(new Collection(), {
   metadata: [
     {
       key: 'dc.description.abstract',
       language: 'en_US',
       value: 'Short description'
-    } ]
+    }]
 
 });
-
-const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
+const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
 
 describe('CollectionSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
+      declarations: [CollectionSearchResultGridElementComponent, TruncatePipe],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
       ],
 
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();  // compile template and css
   }));
 
@@ -52,12 +57,12 @@ describe('CollectionSearchResultGridElementComponent', () => {
     expect(fixture.debugElement.query(By.css('ds-collection-search-result-grid-element'))).toBeDefined();
   });
 
-  it('should only show the description if "short description" metadata is present',() => {
+  it('should only show the description if "short description" metadata is present', () => {
     const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
 
     if (mockCollection.shortDescription.length > 0) {
       expect(descriptionText).toBeDefined();
-    }else {
+    } else {
       expect(descriptionText).not.toBeDefined();
     }
   });

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts

@@ -7,6 +7,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Community } from '../../../../core/shared/community.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
 
 let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
 const queryParam = 'test query';
@@ -17,6 +19,10 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockCommunity: Community = Object.assign(new Community(), {
   metadata: [
     {
@@ -27,13 +33,14 @@ const mockCommunity: Community = Object.assign(new Community(), {
 
 });
 
-const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
+const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
 
 describe('CommunitySearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -7,21 +7,23 @@
             </div>
         </a>
         <div class="card-body">
-            <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3" type="h4">
+                <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+            </ds-truncatable-part>
             <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
                class="item-authors card-text text-muted">
-                <ds-truncatable-part [id]="dso.id" [minLines]="1">
+                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="1">
                     <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
                     <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
                         <span [innerHTML]="authorMd.value"></span>
                     </span>
                 </ds-truncatable-part>
             </p>
-            <ds-truncatable-part [id]="dso.id" [minLines]="3">
-                <p class="item-abstract card-text"
-                   [innerHTML]="getFirstValue('dc.description.abstract')">
-                </p>
-            </ds-truncatable-part>
+            <p class="item-abstract card-text">
+                <ds-truncatable-part [fixedHeight]="true" [id]="dso.id" [minLines]="3">
+                    <span [innerHTML]="getFirstValue('dc.description.abstract')"></span>
+                </ds-truncatable-part>
+            </p>
             <div class="text-center">
                 <a [routerLink]="['/items/' + dso.id]"
                    class="lead btn btn-primary viewButton">View</a>

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts

@@ -7,6 +7,7 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { Item } from '../../../../core/shared/item.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
 
 let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
 let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
@@ -18,6 +19,11 @@ const activatedRouteStub = {
     scope: scopeParam
   })
 };
+
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
 const mockItem: Item = Object.assign(new Item(), {
   metadata: [
     {
@@ -31,48 +37,48 @@ const mockItem: Item = Object.assign(new Item(), {
       value: '1650-06-26'
     }]
 });
-const createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+const createdGridElementComponent: ItemSearchResultGridElementComponent = new ItemSearchResultGridElementComponent(mockItem, truncatableServiceStub as TruncatableService);
 
 describe('ItemSearchResultGridElementComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ItemSearchResultGridElementComponent, TruncatePipe ],
+      declarations: [ItemSearchResultGridElementComponent, TruncatePipe],
       providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
         { provide: Router, useClass: RouterStub },
         { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
       ],
 
-      schemas: [ NO_ERRORS_SCHEMA ]
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();  // compile template and css
   }));
 
   beforeEach(async(() => {
     fixture = TestBed.createComponent(ItemSearchResultGridElementComponent);
     itemSearchResultGridElementComponent = fixture.componentInstance;
-
   }));
 
-  it('should show the item result cards in the grid element',() => {
+  it('should show the item result cards in the grid element', () => {
     expect(fixture.debugElement.query(By.css('ds-item-search-result-grid-element'))).toBeDefined();
   });
 
-  it('should only show the author span if the author metadata is present',() => {
+  it('should only show the author span if the author metadata is present', () => {
     const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
 
     if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
       expect(itemAuthorField).toBeDefined();
-    }else {
+    } else {
       expect(itemAuthorField).not.toBeDefined();
     }
   });
 
-  it('should only show the date span if the issuedate is present',() => {
+  it('should only show the date span if the issuedate is present', () => {
     const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
 
     if (mockItem.findMetadata('dc.date.issued').length > 0) {
       expect(dateField).toBeDefined();
-    }else {
+    } else {
       expect(dateField).not.toBeDefined();
     }
   });

src/app/shared/object-list/collection-list-element/collection-list-element.component.spec.ts

+import { CollectionListElementComponent } from './collection-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { Collection } from '../../../core/shared/collection.model';
+let fixture: ComponentFixture<CollectionListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+const createdListElementComponent:CollectionListElementComponent= new CollectionListElementComponent(mockCollection);
+
+describe('CollectionListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionListElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionListElementComponent);
+  }));
+
+  it('should show the collection cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-collection-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+})

src/app/shared/object-list/community-list-element/community-list-element.component.spec.ts

+import { CommunityListElementComponent } from './community-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { Observable } from 'rxjs/Observable';
+import { By } from '@angular/platform-browser';
+import { Community } from '../../../core/shared/community.model';
+
+let communityListElementComponent: CommunityListElementComponent;
+let fixture: ComponentFixture<CommunityListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+
+const createdListElementComponent:CommunityListElementComponent= new CommunityListElementComponent(mockCommunity);
+
+describe('CommunityListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityListElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityListElementComponent);
+    communityListElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-community-list-element'))).toBeDefined();
+  })
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-list/item-list-element/item-list-element.component.spec.ts

+import { ItemListElementComponent } from './item-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
+import { Item } from '../../../core/shared/item.model';
+
+let itemListElementComponent: ItemListElementComponent;
+let fixture: ComponentFixture<ItemListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+/* tslint:disable:no-shadowed-variable */
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    }]
+});
+
+const createdListElementComponent:ItemListElementComponent= new ItemListElementComponent(mockItem);
+
+describe('ItemListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemListElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: {createdListElementComponent}}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemListElementComponent);
+    itemListElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the list element',() => {
+    expect(fixture.debugElement.query(By.css('ds-item-list-element'))).toBeDefined()
+  });
+
+  it('should only show the author span if the author metadata is present',() => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    }else {
+      expect(itemAuthorField).toBeDefined();
+    }
+  });
+
+})

src/app/shared/object-list/object-list.component.html

@@ -11,7 +11,7 @@
   (sortFieldChange)="onSortFieldChange($event)"
   (paginationChange)="onPaginationChange($event)">
   <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
-      <li *ngFor="let object of objects?.payload?.page" class="mt-2 mb-2">
+      <li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
         <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
       </li>
   </ul>

src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts

+import { CollectionSearchResultListElementComponent } from './collection-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Collection } from '../../../../core/shared/collection.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let fixture: ComponentFixture<CollectionSearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+
+});
+const createdListElementComponent: CollectionSearchResultListElementComponent = new CollectionSearchResultListElementComponent(mockCollection, truncatableServiceStub as TruncatableService);
+
+describe('CollectionSearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CollectionSearchResultListElementComponent, TruncatePipe],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionSearchResultListElementComponent);
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-collection-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present', () => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    } else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts

+import { CommunitySearchResultListElementComponent } from './community-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let fixture: ComponentFixture<CommunitySearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+const createdListElementComponent: CommunitySearchResultListElementComponent = new CommunitySearchResultListElementComponent(mockCommunity, truncatableServiceStub as TruncatableService);
+
+describe('CommunitySearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunitySearchResultListElementComponent, TruncatePipe ],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunitySearchResultListElementComponent);
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-community-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html

 <ds-truncatable [id]="dso.id">
-    <div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
         <a
             [routerLink]="['/items/' + dso.id]" class="lead"
             [innerHTML]="getFirstValue('dc.title')"></a>
-        <div>
   <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
@@ -23,6 +21,4 @@
                         [innerHTML]="getFirstValue('dc.description.abstract')"></span>
                 </ds-truncatable-part>
             </div>
-        </div>
-    </div>
 </ds-truncatable>
\ No newline at end of file

src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.spec.ts

+import { ItemSearchResultListElementComponent } from './item-search-result-list-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Item } from '../../../../core/shared/item.model';
+import { TruncatableService } from '../../../truncatable/truncatable.service';
+
+let itemSearchResultListElementComponent: ItemSearchResultListElementComponent;
+let fixture: ComponentFixture<ItemSearchResultListElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+const truncatableServiceStub: any = {
+  isCollapsed: (id: number) => Observable.of(true),
+};
+
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    },
+    {
+      key: 'dc.date.issued',
+      language: null,
+      value: '1650-06-26'
+    }]
+});
+const createdListElementComponent: ItemSearchResultListElementComponent = new ItemSearchResultListElementComponent(mockItem, truncatableServiceStub as TruncatableService);
+
+describe('ItemSearchResultListElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ItemSearchResultListElementComponent, TruncatePipe],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdListElementComponent) }
+      ],
+
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemSearchResultListElementComponent);
+    itemSearchResultListElementComponent = fixture.componentInstance;
+  }));
+
+  it('should show the item result cards in the list element', () => {
+    expect(fixture.debugElement.query(By.css('ds-item-search-result-list-element'))).toBeDefined();
+  });
+
+  it('should only show the author span if the author metadata is present', () => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    } else {
+      expect(itemAuthorField).not.toBeDefined();
+    }
+  });
+
+  it('should only show the date span if the issuedate is present', () => {
+    const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+
+    if (mockItem.findMetadata('dc.date.issued').length > 0) {
+      expect(dateField).toBeDefined();
+    } else {
+      expect(dateField).not.toBeDefined();
+    }
+  });
+
+});

src/app/shared/truncatable/truncatable-part/truncatable-part.component.html

-<div class="clamp-{{lines}} {{type}}">
-    <ng-content></ng-content>
+<div class="clamp-{{lines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
+    <div class="content">
+        <ng-content></ng-content>
+    </div>
 </div>
\ No newline at end of file

src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss

@@ -3,22 +3,27 @@
 
 @mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
     $height: $line-height * $font-size-base * $size-factor;
-    max-height: $lines * $height;
-    position: relative;
-    overflow: hidden;
-    line-height: $line-height;
-    overflow-wrap: break-word;
-    &:after {
-        content: "";
-        position: absolute;
-        padding-right: 15px;
-        top: ($lines - 1) * $height;
-        right: 0;
-        width: 30%;
-        min-width: 75px;
-        max-width: 150px;
-        height: $height;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 50%);
+    &.fixedHeight {
+        height: $lines * $height;
+    }
+    .content {
+        max-height: $lines * $height;
+        position: relative;
+        overflow: hidden;
+        line-height: $line-height;
+        overflow-wrap: break-word;
+        &:after {
+            content: "";
+            position: absolute;
+            padding-right: 15px;
+            top: ($lines - 1) * $height;
+            right: 0;
+            width: 30%;
+            min-width: 75px;
+            max-width: 150px;
+            height: $height;
+            background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 70%);
+        }
     }
 
 }
@@ -26,15 +31,18 @@
 $h4-factor: strip-unit($h4-font-size);
 @for $i from 1 through 15 {
     .clamp-#{$i} {
+        transition: height 1s;
         @include clamp($i);
         &.title {
             @include clamp($i, 1.25);
         }
         &.h4 {
             @include clamp($i, $h4-factor, $headings-line-height);
-
         }
     }
 }
 
 
+.clamp-none {
+    overflow: hidden;
+}
\ No newline at end of file

src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { TruncatablePartComponent } from './truncatable-part.component';
+import { TruncatableService } from '../truncatable.service';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('TruncatablePartComponent', () => {
+  let comp: TruncatablePartComponent;
+  let fixture: ComponentFixture<TruncatablePartComponent>;
+  const id1 = '123';
+  const id2 = '456';
+
+  let truncatableService;
+  const truncatableServiceStub: any = {
+    isCollapsed: (id: string) => {
+      if (id === id1) {
+        return Observable.of(true)
+      } else {
+        return Observable.of(false);
+      }
+    }
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [TruncatablePartComponent],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(TruncatablePartComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TruncatablePartComponent);
+    comp = fixture.componentInstance; // TruncatablePartComponent test instance
+    fixture.detectChanges();
+    truncatableService = (comp as any).filterService;
+  });
+
+  describe('When the item is collapsed', () => {
+    beforeEach(() => {
+      comp.id = id1;
+      comp.minLines = 5;
+      (comp as any).setLines();
+      fixture.detectChanges();
+    })
+    ;
+
+    it('lines should equal minlines', () => {
+      expect((comp as any).lines).toEqual(comp.minLines.toString());
+    });
+  });
+
+  describe('When the item is expanded', () => {
+    beforeEach(() => {
+      comp.id = id2;
+    })
+    ;
+
+    it('lines should equal maxlines when maxlines has a value', () => {
+      comp.maxLines = 5;
+      (comp as any).setLines();
+      fixture.detectChanges();
+      expect((comp as any).lines).toEqual(comp.maxLines.toString());
+    });
+
+    it('lines should equal \'none\' when maxlines has no value', () => {
+      (comp as any).setLines();
+      fixture.detectChanges();
+      expect((comp as any).lines).toEqual('none');
+    });
+  });
+});

src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

-import {
-  Component, Input, OnDestroy, OnInit, ElementRef, ViewChild
-} from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { TruncatableService } from '../truncatable.service';
+import { cardExpand } from '../../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable-part',
   templateUrl: './truncatable-part.component.html',
-  styleUrls: ['./truncatable-part.component.scss']
+  styleUrls: ['./truncatable-part.component.scss'],
+  animations: [cardExpand]
 })
 
 export class TruncatablePartComponent implements OnInit, OnDestroy {
   @Input() minLines: number;
   @Input() maxLines = -1;
-  @Input() initialExpand = false;
   @Input() id: string;
   @Input() type: string;
-  private lines: string;
+  @Input() fixedHeight = false;
+  lines: string;
   private sub;
 
   public constructor(private service: TruncatableService) {
@@ -38,5 +38,4 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.sub.unsubscribe();
   }
-
 }

src/app/shared/truncatable/truncatable.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { TruncatableComponent } from './truncatable.component';
+import { TruncatableService } from './truncatable.service';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('TruncatableComponent', () => {
+  let comp: TruncatableComponent;
+  let fixture: ComponentFixture<TruncatableComponent>;
+  const identifier = '1234567890';
+  let truncatableService;
+  const truncatableServiceStub: any = {
+    isCollapsed: (id: string) => {
+      if (id === '1') {
+        return Observable.of(true)
+      } else {
+        return Observable.of(false);
+      }
+    },
+    expand: (id: string) => {
+    },
+    collapse: (id: string) => {
+    },
+    toggle: (id: string) => {
+    }
+  };
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      declarations: [TruncatableComponent],
+      providers: [
+        { provide: TruncatableService, useValue: truncatableServiceStub },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(TruncatableComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TruncatableComponent);
+    comp = fixture.componentInstance; // TruncatableComponent test instance
+    comp.id = identifier;
+    fixture.detectChanges();
+    truncatableService = (comp as any).service;
+  });
+
+  describe('When the item is hoverable', () => {
+    beforeEach(() => {
+      comp.onHover = true;
+      fixture.detectChanges();
+    })
+    ;
+
+    it('should call collapse on the TruncatableService', () => {
+      spyOn(truncatableService, 'collapse');
+      comp.hoverCollapse();
+      expect(truncatableService.collapse).toHaveBeenCalledWith(identifier);
+    });
+
+    it('should call expand on the TruncatableService', () => {
+      spyOn(truncatableService, 'expand');
+      comp.hoverExpand();
+      expect(truncatableService.expand).toHaveBeenCalledWith(identifier);
+    });
+  });
+
+  describe('When the item is not hoverable', () => {
+    beforeEach(() => {
+      comp.onHover = false;
+      fixture.detectChanges();
+    })
+    ;
+
+    it('should not call collapse on the TruncatableService', () => {
+      spyOn(truncatableService, 'collapse');
+      comp.hoverCollapse();
+      expect(truncatableService.collapse).not.toHaveBeenCalled();
+    });
+
+    it('should not call expand on the TruncatableService', () => {
+      spyOn(truncatableService, 'expand');
+      comp.hoverExpand();
+      expect(truncatableService.expand).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('When toggle is called', () => {
+    beforeEach(() => {
+      spyOn(truncatableService, 'toggle');
+      comp.toggle();
+    });
+
+    it('should call toggle on the TruncatableService', () => {
+      expect(truncatableService.toggle).toHaveBeenCalledWith(identifier);
+    });
+  });
+
+});

src/app/shared/truncatable/truncatable.component.ts

@@ -2,11 +2,14 @@ import {
   Component, Input
 } from '@angular/core';
 import { TruncatableService } from './truncatable.service';
+import { Observable } from 'rxjs/Observable';
+import { cardExpand } from '../animations/card-expand';
 
 @Component({
   selector: 'ds-truncatable',
   templateUrl: './truncatable.component.html',
-  styleUrls: ['./truncatable.component.scss']
+  styleUrls: ['./truncatable.component.scss'],
+
 })
 export class TruncatableComponent {
   @Input() initialExpand = false;
@@ -39,4 +42,5 @@ export class TruncatableComponent {
   public toggle() {
     this.service.toggle(this.id);
   }
+
 }

src/app/shared/truncatable/truncatable.reducer.spec.ts

+import * as deepFreeze from 'deep-freeze';
+
+import { truncatableReducer } from './truncatable.reducer';
+import {
+  TruncatableCollapseAction, TruncatableExpandAction,
+  TruncatableToggleAction
+} from './truncatable.actions';
+
+const id1 = '123';
+const id2 = '456';
+class NullAction extends TruncatableCollapseAction {
+  type = null;
+  constructor() {
+    super(undefined);
+  }
+}
+
+describe('truncatableReducer', () => {
+
+  it('should return the current state when no valid actions have been made', () => {
+    const state = { 123: { collapsed: true, page: 1 } };
+    const action = new NullAction();
+    const newState = truncatableReducer(state, action);
+
+    expect(newState).toEqual(state);
+  });
+
+  it('should start with an empty object', () => {
+    const state = Object.create({});
+    const action = new NullAction();
+    const initialState = truncatableReducer(undefined, action);
+
+    // The search filter starts collapsed
+    expect(initialState).toEqual(state);
+  });
+
+  it('should set collapsed to true in response to the COLLAPSE action', () => {
+    const state = {};
+    state[id1] = { collapsed: false};
+    const action = new TruncatableCollapseAction(id1);
+    const newState = truncatableReducer(state, action);
+
+    expect(newState[id1].collapsed).toEqual(true);
+  });
+
+  it('should perform the COLLAPSE action without affecting the previous state', () => {
+    const state = {};
+    state[id1] = { collapsed: false};
+    deepFreeze([state]);
+
+    const action = new TruncatableCollapseAction(id1);
+    truncatableReducer(state, action);
+
+    // no expect required, deepFreeze will ensure an exception is thrown if the state
+    // is mutated, and any uncaught exception will cause the test to fail
+  });
+
+  it('should set filterCollapsed to false in response to the EXPAND action', () => {
+    const state = {};
+    state[id1] = { collapsed: true };
+    const action = new TruncatableExpandAction(id1);
+    const newState = truncatableReducer(state, action);
+
+    expect(newState[id1].collapsed).toEqual(false);
+  });
+
+  it('should perform the EXPAND action without affecting the previous state', () => {
+    const state = {};
+    state[id1] = { collapsed: true };
+    deepFreeze([state]);
+
+    const action = new TruncatableExpandAction(id1);
+    truncatableReducer(state, action);
+  });
+
+  it('should flip the value of filterCollapsed in response to the TOGGLE action', () => {
+    const state1 = {};
+    state1[id1] = { collapsed: true };
+    const action = new TruncatableToggleAction(id1);
+
+    const state2 = truncatableReducer(state1, action);
+    const state3 = truncatableReducer(state2, action);
+
+    expect(state2[id1].collapsed).toEqual(false);
+    expect(state3[id1].collapsed).toEqual(true);
+  });
+
+  it('should perform the TOGGLE action without affecting the previous state', () => {
+    const state = {};
+    state[id2] = { collapsed: true };
+    deepFreeze([state]);
+
+    const action = new TruncatableToggleAction(id2);
+    truncatableReducer(state, action);
+  });
+});