Commit 6615531d authored by Exbrayat Cédric's avatar Exbrayat Cédric Committed by Exbrayat Cédric
Browse files

feat: display name and document count in a dedicated component

parent ac83ba97
......@@ -12,8 +12,7 @@
[id]="aggregation.name + bucket.key"
[formControlName]="bucket.key">
<label class="form-check-label" [for]="aggregation.name + bucket.key">
<span>{{ bucket.key }}</span>
<small class="text-muted ml-1">[{{ bucket.documentCount | number }}]</small>
<rare-document-count [name]="bucket.key" [count]="bucket.documentCount"></rare-document-count>
</label>
</div>
</div>
......
......@@ -6,8 +6,9 @@ import { AggregationComponent } from './aggregation.component';
import { toAggregation } from '../models/test-model-generators';
import { AggregationCriterion } from '../models/aggregation-criterion';
import { AggregationNamePipe } from '../aggregation-name.pipe';
import { DocumentCountComponent } from '../document-count/document-count.component';
describe('AggregationsComponent', () => {
describe('AggregationComponent', () => {
const aggregation = toAggregation('coo', ['France', 'Italy', 'New Zealand']);
......@@ -31,7 +32,7 @@ describe('AggregationsComponent', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [AggregationComponent, AggregationNamePipe]
declarations: [AggregationComponent, AggregationNamePipe, DocumentCountComponent]
}));
beforeEach(() => jasmine.addMatchers(speculoosMatchers));
......
......@@ -8,6 +8,7 @@ import { AggregationComponent } from '../aggregation/aggregation.component';
import { toAggregation } from '../models/test-model-generators';
import { AggregationCriterion } from '../models/aggregation-criterion';
import { AggregationNamePipe } from '../aggregation-name.pipe';
import { DocumentCountComponent } from '../document-count/document-count.component';
describe('AggregationsComponent', () => {
......@@ -23,7 +24,7 @@ describe('AggregationsComponent', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [AggregationsComponent, AggregationComponent, AggregationNamePipe]
declarations: [AggregationsComponent, AggregationComponent, AggregationNamePipe, DocumentCountComponent]
}));
it('should display no aggregations if null', () => {
......@@ -130,7 +131,7 @@ describe('AggregationsComponent', () => {
component.selectedCriteria = [
{ name: 'domain', values: ['Plant'] },
{ name: 'coo', values: ['Italy'] }
];
];
tester.detectChanges();
// then it should emit an event
......
......@@ -18,6 +18,7 @@ import { AggregationsComponent } from './aggregations/aggregations.component';
import { AggregationComponent } from './aggregation/aggregation.component';
import { PillarsComponent } from './pillars/pillars.component';
import { AggregationNamePipe } from './aggregation-name.pipe';
import { DocumentCountComponent } from './document-count/document-count.component';
registerLocaleData(localeFr);
......@@ -31,7 +32,8 @@ registerLocaleData(localeFr);
AggregationsComponent,
AggregationComponent,
PillarsComponent,
AggregationNamePipe
AggregationNamePipe,
DocumentCountComponent
],
imports: [
BrowserAnimationsModule,
......
<a *ngIf="url" [href]="url">{{ name }}</a>
<span *ngIf="!url">{{ name }}</span>
<small class="text-muted ml-1">[{{ count | number }}]</small>
import { TestBed } from '@angular/core/testing';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { DocumentCountComponent } from './document-count.component';
import { LOCALE_ID } from '@angular/core';
describe('DocumentCountComponent', () => {
class DocumentCountComponentTester extends ComponentTester<DocumentCountComponent> {
constructor() {
super(DocumentCountComponent);
}
get name() {
return this.element('span');
}
get link() {
return this.element('a');
}
get count() {
return this.element('small');
}
}
beforeEach(() => {
registerLocaleData(localeFr);
TestBed.configureTestingModule({
declarations: [DocumentCountComponent],
providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }]
});
jasmine.addMatchers(speculoosMatchers);
});
it('should display a name and a count', () => {
// given a component with a name and count
const tester = new DocumentCountComponentTester();
const component = tester.componentInstance;
component.name = 'Biotope';
component.count = 1298;
// when displaying it
tester.detectChanges();
// then we should have the name and the count properly formatted
expect(tester.name).toHaveText('Biotope');
expect(tester.count).toHaveText('[1\u00a0298]');
});
it('should display a link if it is possible and a count', () => {
// given a component with a name, a url and a count
const tester = new DocumentCountComponentTester();
const component = tester.componentInstance;
component.name = 'Florilège';
component.count = 1298;
component.url = 'http://florilege.arcad-project.org/fr/collections';
// when displaying it
tester.detectChanges();
// then we should have the name in a link and the count properly formatted
expect(tester.link).toHaveText('Florilège');
expect(tester.link.attr('href')).toBe('http://florilege.arcad-project.org/fr/collections');
expect(tester.count).toHaveText('[1\u00a0298]');
});
});
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
@Component({
selector: 'rare-document-count',
templateUrl: './document-count.component.html',
styleUrls: ['./document-count.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DocumentCountComponent {
@Input() name: string;
@Input() url: string;
@Input() count: number;
}
......@@ -2,14 +2,15 @@ import { TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { By } from '@angular/platform-browser';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { HomeComponent } from './home.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home.component';
import { SearchService } from '../search.service';
import { PillarsComponent } from '../pillars/pillars.component';
import { By } from '@angular/platform-browser';
import { DocumentCountComponent } from '../document-count/document-count.component';
class HomeComponentTester extends ComponentTester<HomeComponent> {
constructor() {
......@@ -32,7 +33,7 @@ class HomeComponentTester extends ComponentTester<HomeComponent> {
describe('HomeComponent', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule, RouterTestingModule, HttpClientTestingModule, NgbTypeaheadModule.forRoot()],
declarations: [HomeComponent, PillarsComponent],
declarations: [HomeComponent, PillarsComponent, DocumentCountComponent],
providers: [HttpClientTestingModule]
}));
......
......@@ -3,9 +3,10 @@
<span class="pillar-name">{{ pillar.name }}</span>
<ul class="list-unstyled source">
<li *ngFor="let databaseSource of pillar.databaseSources">
<a *ngIf="databaseSource.url" [href]="databaseSource.url">{{ databaseSource.name }}</a>
<span *ngIf="!databaseSource.url">{{ databaseSource.name }}</span>
<small class="text-muted ml-1">[{{ databaseSource.documentCount | number }}]</small>
<rare-document-count [name]="databaseSource.name"
[url]="databaseSource.url"
[count]="databaseSource.documentCount">
</rare-document-count>
</li>
</ul>
</li>
......
......@@ -9,6 +9,7 @@ import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { PillarsComponent } from './pillars.component';
import { PillarService } from '../pillar.service';
import { PillarModel } from '../models/pillar.model';
import { DocumentCountComponent } from '../document-count/document-count.component';
class PillarsComponentTester extends ComponentTester<PillarsComponent> {
constructor() {
......@@ -39,7 +40,7 @@ describe('PillarsComponent', () => {
beforeEach(() => {
registerLocaleData(localeFr);
TestBed.configureTestingModule({
declarations: [PillarsComponent],
declarations: [PillarsComponent, DocumentCountComponent],
imports: [HttpClientTestingModule],
providers: [
{ provide: LOCALE_ID, useValue: 'fr-FR' }
......
......@@ -18,6 +18,7 @@ import { toAggregation, toGeneticResource, toSecondPage, toSinglePage } from '..
import { AggregationsComponent } from '../aggregations/aggregations.component';
import { AggregationComponent } from '../aggregation/aggregation.component';
import { AggregationNamePipe } from '../aggregation-name.pipe';
import { DocumentCountComponent } from '../document-count/document-count.component';
class SearchComponentTester extends ComponentTester<SearchComponent> {
constructor() {
......@@ -61,7 +62,8 @@ describe('SearchComponent', () => {
GeneticResourceComponent,
AggregationsComponent,
AggregationComponent,
AggregationNamePipe
AggregationNamePipe,
DocumentCountComponent
]
}));
......
Markdown is supported
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