feat: display name and document count in a dedicated component

frontend/src/app/aggregation/aggregation.component.html

@@ -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>

frontend/src/app/aggregation/aggregation.component.spec.ts

@@ -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));

frontend/src/app/aggregations/aggregations.component.spec.ts

@@ -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

frontend/src/app/app.module.ts

@@ -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,

frontend/src/app/document-count/document-count.component.html

+<a *ngIf="url" [href]="url">{{ name }}</a>
+<span *ngIf="!url">{{ name }}</span>
+<small class="text-muted ml-1">[{{ count | number }}]</small>

frontend/src/app/document-count/document-count.component.spec.ts

+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]');
+  });
+});

frontend/src/app/document-count/document-count.component.ts

+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;
+
+}

frontend/src/app/home/home.component.spec.ts

@@ -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]
   }));
 

frontend/src/app/pillars/pillars.component.html

@@ -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>

frontend/src/app/pillars/pillars.component.spec.ts

@@ -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' }

frontend/src/app/search/search.component.spec.ts

@@ -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
     ]
   }));