Commit 7e258a76 authored by Exbrayat Cédric's avatar Exbrayat Cédric
Browse files

feat: add tooltips in aggregations

Explains what is the number we see.

Fixes #7
parent 627dfe16
import { fakeAsync, TestBed, tick } from '@angular/core/testing'; import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { SmallAggregationComponent } from './small-aggregation.component'; import { SmallAggregationComponent } from './small-aggregation.component';
...@@ -31,7 +32,10 @@ describe('SmallAggregationComponent', () => { ...@@ -31,7 +32,10 @@ describe('SmallAggregationComponent', () => {
} }
beforeEach(() => TestBed.configureTestingModule({ beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule], imports: [
ReactiveFormsModule,
NgbTooltipModule.forRoot()
],
declarations: [SmallAggregationComponent, AggregationNamePipe, DocumentCountComponent] declarations: [SmallAggregationComponent, AggregationNamePipe, DocumentCountComponent]
})); }));
......
import { fakeAsync, TestBed, tick } from '@angular/core/testing'; import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { ComponentTester } from 'ngx-speculoos'; import { ComponentTester } from 'ngx-speculoos';
import { AggregationsComponent } from './aggregations.component'; import { AggregationsComponent } from './aggregations.component';
...@@ -31,7 +31,8 @@ describe('AggregationsComponent', () => { ...@@ -31,7 +31,8 @@ describe('AggregationsComponent', () => {
beforeEach(() => TestBed.configureTestingModule({ beforeEach(() => TestBed.configureTestingModule({
imports: [ imports: [
ReactiveFormsModule, ReactiveFormsModule,
NgbTypeaheadModule.forRoot() NgbTypeaheadModule.forRoot(),
NgbTooltipModule.forRoot()
], ],
declarations: [ declarations: [
AggregationsComponent, AggregationsComponent,
......
...@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http'; ...@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr'; import localeFr from '@angular/common/locales/fr';
import { NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbPaginationModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { routes } from './app.routes'; import { routes } from './app.routes';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
...@@ -46,7 +46,8 @@ registerLocaleData(localeFr); ...@@ -46,7 +46,8 @@ registerLocaleData(localeFr);
ReactiveFormsModule, ReactiveFormsModule,
HttpClientModule, HttpClientModule,
NgbPaginationModule.forRoot(), NgbPaginationModule.forRoot(),
NgbTypeaheadModule.forRoot() NgbTypeaheadModule.forRoot(),
NgbTooltipModule.forRoot()
], ],
providers: [ providers: [
{ provide: LOCALE_ID, useValue: 'fr-FR' } { provide: LOCALE_ID, useValue: 'fr-FR' }
......
<!-- tooltip precising what is the number displayed -->
<ng-template #tooltipContent>
<ng-container [ngPlural]="count">
<ng-template ngPluralCase="=1">Un seul document correspond à <em>{{ name }}</em></ng-template>
<ng-template ngPluralCase="other">{{ count | number }} documents correspondent à <em>{{ name }}</em></ng-template>
</ng-container>
</ng-template>
<!-- name, with a link if necessary, followed by the count -->
<a *ngIf="url" [href]="url">{{ name }}</a> <a *ngIf="url" [href]="url">{{ name }}</a>
<span *ngIf="!url">{{ name }}</span> <span *ngIf="!url">{{ name }}</span>
<small class="ml-1" [class.text-muted]="muted">[{{ count | number }}]</small> <small class="ml-1" [class.text-muted]="muted" [ngbTooltip]="tooltipContent" placement="top" container="body">[{{ count | number }}]</small>
import { TestBed } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr'; import localeFr from '@angular/common/locales/fr';
import { LOCALE_ID } from '@angular/core';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { DocumentCountComponent } from './document-count.component'; import { DocumentCountComponent } from './document-count.component';
import { LOCALE_ID } from '@angular/core';
describe('DocumentCountComponent', () => { describe('DocumentCountComponent', () => {
...@@ -24,12 +25,17 @@ describe('DocumentCountComponent', () => { ...@@ -24,12 +25,17 @@ describe('DocumentCountComponent', () => {
get count() { get count() {
return this.element('small'); return this.element('small');
} }
get tooltip() {
return document.querySelector('ngb-tooltip-window');
}
} }
beforeEach(() => { beforeEach(() => {
registerLocaleData(localeFr); registerLocaleData(localeFr);
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [DocumentCountComponent], declarations: [DocumentCountComponent],
imports: [NgbTooltipModule.forRoot()],
providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }] providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }]
}); });
jasmine.addMatchers(speculoosMatchers); jasmine.addMatchers(speculoosMatchers);
...@@ -66,4 +72,37 @@ describe('DocumentCountComponent', () => { ...@@ -66,4 +72,37 @@ describe('DocumentCountComponent', () => {
expect(tester.link.attr('href')).toBe('http://florilege.arcad-project.org/fr/collections'); expect(tester.link.attr('href')).toBe('http://florilege.arcad-project.org/fr/collections');
expect(tester.count).toHaveText('[1\u00a0298]'); expect(tester.count).toHaveText('[1\u00a0298]');
}); });
it('should display a tooltip to explain the 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();
// and hovering the element
tester.count.dispatchEventOfType('mouseenter');
// then we should have the tooltip displayed
expect(tester.tooltip).not.toBeNull();
expect(tester.tooltip.textContent).toBe('1\u00a0298 documents correspondent à Florilège');
// and hide it when leaving
tester.count.dispatchEventOfType('mouseleave');
expect(tester.tooltip).toBeNull();
// with only one document
component.count = 1;
// when displaying it again
tester.detectChanges();
tester.count.dispatchEventOfType('mouseenter');
// then we should have the tooltip displayed with special text for one document
expect(tester.tooltip).not.toBeNull();
expect(tester.tooltip.textContent).toBe('Un seul document correspond à Florilège');
});
}); });
...@@ -5,7 +5,7 @@ import { Router } from '@angular/router'; ...@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { HttpClientTestingModule } from '@angular/common/http/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home.component'; import { HomeComponent } from './home.component';
import { SearchService } from '../search.service'; import { SearchService } from '../search.service';
...@@ -32,7 +32,13 @@ class HomeComponentTester extends ComponentTester<HomeComponent> { ...@@ -32,7 +32,13 @@ class HomeComponentTester extends ComponentTester<HomeComponent> {
describe('HomeComponent', () => { describe('HomeComponent', () => {
beforeEach(() => TestBed.configureTestingModule({ beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule, RouterTestingModule, HttpClientTestingModule, NgbTypeaheadModule.forRoot()], imports: [
ReactiveFormsModule,
RouterTestingModule,
HttpClientTestingModule,
NgbTypeaheadModule.forRoot(),
NgbTooltipModule.forRoot()
],
declarations: [HomeComponent, PillarsComponent, DocumentCountComponent], declarations: [HomeComponent, PillarsComponent, DocumentCountComponent],
providers: [HttpClientTestingModule] providers: [HttpClientTestingModule]
})); }));
......
...@@ -12,8 +12,15 @@ ...@@ -12,8 +12,15 @@
<div class="card-body"> <div class="card-body">
<!-- title --> <!-- title -->
<!-- tooltip precising what is the number displayed -->
<ng-template #tooltipContent>
<ng-container [ngPlural]="aggregation.buckets.length">
<ng-template ngPluralCase="=1">Un seule valeur possible pour <i>{{ aggregation.name | aggregationName }}</i></ng-template>
<ng-template ngPluralCase="other">{{ aggregation.buckets.length | number }} valeurs possibles pour <i>{{ aggregation.name | aggregationName }}</i></ng-template>
</ng-container>
</ng-template>
<h3 class="card-title">{{ aggregation.name | aggregationName }} <h3 class="card-title">{{ aggregation.name | aggregationName }}
<small class="text-muted ml-1">({{ aggregation.buckets.length | number }})</small> <small class="text-muted ml-1" [ngbTooltip]="tooltipContent" placement="top" container="body">({{ aggregation.buckets.length | number }})</small>
</h3> </h3>
<!-- values as pills and a typeahead to add them --> <!-- values as pills and a typeahead to add them -->
......
...@@ -2,7 +2,7 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing'; ...@@ -2,7 +2,7 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { NgbTypeahead, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbTooltipModule, NgbTypeahead, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { BucketOrRefine, LargeAggregationComponent } from './large-aggregation.component'; import { BucketOrRefine, LargeAggregationComponent } from './large-aggregation.component';
...@@ -47,7 +47,11 @@ describe('LargeAggregationComponent', () => { ...@@ -47,7 +47,11 @@ describe('LargeAggregationComponent', () => {
} }
beforeEach(() => TestBed.configureTestingModule({ beforeEach(() => TestBed.configureTestingModule({
imports: [ReactiveFormsModule, NgbTypeaheadModule.forRoot()], imports: [
ReactiveFormsModule,
NgbTypeaheadModule.forRoot(),
NgbTooltipModule.forRoot()
],
declarations: [LargeAggregationComponent, AggregationNamePipe, DocumentCountComponent] declarations: [LargeAggregationComponent, AggregationNamePipe, DocumentCountComponent]
})); }));
......
...@@ -4,6 +4,7 @@ import { EMPTY, of } from 'rxjs'; ...@@ -4,6 +4,7 @@ import { EMPTY, of } from 'rxjs';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr'; import localeFr from '@angular/common/locales/fr';
import { LOCALE_ID } from '@angular/core'; import { LOCALE_ID } from '@angular/core';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
import { ComponentTester, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
import { PillarsComponent } from './pillars.component'; import { PillarsComponent } from './pillars.component';
...@@ -41,7 +42,10 @@ describe('PillarsComponent', () => { ...@@ -41,7 +42,10 @@ describe('PillarsComponent', () => {
registerLocaleData(localeFr); registerLocaleData(localeFr);
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [PillarsComponent, DocumentCountComponent], declarations: [PillarsComponent, DocumentCountComponent],
imports: [HttpClientTestingModule], imports: [
HttpClientTestingModule,
NgbTooltipModule.forRoot()
],
providers: [ providers: [
{ provide: LOCALE_ID, useValue: 'fr-FR' } { provide: LOCALE_ID, useValue: 'fr-FR' }
] ]
......
...@@ -5,7 +5,7 @@ import { Router } from '@angular/router'; ...@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
import { HttpClientTestingModule } from '@angular/common/http/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NgbPagination, NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbPagination, NgbPaginationModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { ComponentTester, fakeRoute, speculoosMatchers } from 'ngx-speculoos'; import { ComponentTester, fakeRoute, speculoosMatchers } from 'ngx-speculoos';
...@@ -55,6 +55,7 @@ describe('SearchComponent', () => { ...@@ -55,6 +55,7 @@ describe('SearchComponent', () => {
HttpClientTestingModule, HttpClientTestingModule,
NgbPaginationModule.forRoot(), NgbPaginationModule.forRoot(),
NgbTypeaheadModule.forRoot(), NgbTypeaheadModule.forRoot(),
NgbTooltipModule.forRoot(),
NoopAnimationsModule NoopAnimationsModule
], ],
declarations: [ declarations: [
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
// @import "../node_modules/bootstrap/scss/list-group"; // @import "../node_modules/bootstrap/scss/list-group";
// @import "../node_modules/bootstrap/scss/close"; // @import "../node_modules/bootstrap/scss/close";
// @import "../node_modules/bootstrap/scss/modal"; // @import "../node_modules/bootstrap/scss/modal";
// @import "../node_modules/bootstrap/scss/tooltip"; @import "../node_modules/bootstrap/scss/tooltip";
// @import "../node_modules/bootstrap/scss/popover"; // @import "../node_modules/bootstrap/scss/popover";
// @import "../node_modules/bootstrap/scss/carousel"; // @import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/utilities";
......
Supports Markdown
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