Skip to content
Snippets Groups Projects
Commit 5f76bba0 authored by Lotte Hofstede's avatar Lotte Hofstede
Browse files

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

parent 58a26c03
Branches
Tags
No related merge requests found
Showing
with 772 additions and 58 deletions
......@@ -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' })),
......
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();
}
});
......
......@@ -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) }
......
......@@ -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>
......
......@@ -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();
}
});
......
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();
}
});
})
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();
}
});
});
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();
}
});
})
......@@ -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>
......
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();
}
});
});
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();
}
});
});
<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
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();
}
});
});
<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
......@@ -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
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');
});
});
});
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();
}
}
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);
});
});
});
......@@ -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);
}
}
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);
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment