search.component.spec.ts 9.47 KB
Newer Older
Exbrayat Cédric's avatar
Exbrayat Cédric committed
1
2
3
4
5
6
import { TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { By } from '@angular/platform-browser';
7
import { NgbPagination, NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
8
9
10
11
12
13
14
import { of } from 'rxjs';
import { ComponentTester, fakeRoute, speculoosMatchers } from 'ngx-speculoos';

import { SearchComponent } from './search.component';
import { GeneticResourcesComponent } from '../genetic-resources/genetic-resources.component';
import { GeneticResourceComponent } from '../genetic-resource/genetic-resource.component';
import { SearchService } from '../search.service';
15
import { toGeneticResource, toSecondPage, toSinglePage } from '../models/test-model-generators';
16
import { GeneticResourceModel } from '../models/genetic-resource.model';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

class SearchComponentTester extends ComponentTester<SearchComponent> {
  constructor() {
    super(SearchComponent);
  }

  get searchBar() {
    return this.input('input');
  }

  get searchButton() {
    return this.button('button');
  }

  get results() {
    return this.debugElement.query(By.directive(GeneticResourcesComponent));
  }
Exbrayat Cédric's avatar
Exbrayat Cédric committed
34
35
36
37

  get pagination() {
    return this.debugElement.query(By.directive(NgbPagination));
  }
Exbrayat Cédric's avatar
Exbrayat Cédric committed
38
39
40
41
}

describe('SearchComponent', () => {
  beforeEach(() => TestBed.configureTestingModule({
42
43
44
45
46
47
48
    imports: [
      ReactiveFormsModule,
      RouterTestingModule,
      HttpClientTestingModule,
      NgbPaginationModule.forRoot(),
      NgbTypeaheadModule.forRoot()
    ],
Exbrayat Cédric's avatar
Exbrayat Cédric committed
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
    declarations: [SearchComponent, GeneticResourcesComponent, GeneticResourceComponent]
  }));

  beforeEach(() => jasmine.addMatchers(speculoosMatchers));

  it('should search on init if there is a query', () => {
    // given a component
    const router = TestBed.get(Router) as Router;
    spyOn(router, 'navigate');
    const searchService = TestBed.get(SearchService) as SearchService;
    const results = toSinglePage([]);
    spyOn(searchService, 'search').and.returnValue(of(results));

    // with a query on init
    const query = 'Bacteria';
    const queryParams = of({ query });
    const activatedRoute = fakeRoute({ queryParams });
    const component = new SearchComponent(activatedRoute, router, searchService);

    // when loading
    component.ngOnInit();

    // then the search should be populated
    expect(component.searchForm.get('search').value).toBe(query);
    // the search service called
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
74
    expect(searchService.search).toHaveBeenCalledWith(query, 1);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
    // and the results fetched
    expect(component.results).toEqual(results);
  });

  it('should search on init if there is a query and a page', () => {
    // given a component
    const router = TestBed.get(Router) as Router;
    spyOn(router, 'navigate');
    const searchService = TestBed.get(SearchService) as SearchService;
    const results = toSinglePage([]);
    spyOn(searchService, 'search').and.returnValue(of(results));

    // with a query on init
    const query = 'Bacteria';
    const page = 3;
    const queryParams = of({ query, page });
    const activatedRoute = fakeRoute({ queryParams });
    const component = new SearchComponent(activatedRoute, router, searchService);

    // when loading
    component.ngOnInit();

    // then the search should be populated
    expect(component.searchForm.get('search').value).toBe(query);
    // the search service called
    expect(searchService.search).toHaveBeenCalledWith(query, 3);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
101
102
103
104
    // and the results fetched
    expect(component.results).toEqual(results);
  });

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
105
  it('should navigate to search and reset the page to default when a query is entered', () => {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
106
107
108
109
110
    // given a component
    const router = TestBed.get(Router) as Router;
    spyOn(router, 'navigate');
    const searchService = TestBed.get(SearchService) as SearchService;
    spyOn(searchService, 'search');
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
111
112
113
114
    // with a current query Rosa and a current page 2
    let query = 'Rosa';
    const queryParams = of({ query, page: 2 });
    const activatedRoute = fakeRoute({ queryParams });
Exbrayat Cédric's avatar
Exbrayat Cédric committed
115
116
    const component = new SearchComponent(activatedRoute, router, searchService);

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
117
    query = 'Bacteria';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
118
    component.searchForm.get('search').setValue(query);
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
119
    // when searching with a new query Bacteria
Exbrayat Cédric's avatar
Exbrayat Cédric committed
120
121
    component.newSearch();

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
122
123
    // then it should redirect to the search with the new query and no page
    expect(router.navigate).toHaveBeenCalledWith(['.'], { relativeTo: activatedRoute, queryParams: { query, page: undefined } });
Exbrayat Cédric's avatar
Exbrayat Cédric committed
124
125
  });

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
126
  it('should navigate to requested page when pagination is used', () => {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
    // given a component
    const router = TestBed.get(Router) as Router;
    spyOn(router, 'navigate');
    const searchService = TestBed.get(SearchService) as SearchService;
    spyOn(searchService, 'search');
    const query = 'Bacteria';
    const queryParams = of({ query });
    const activatedRoute = fakeRoute({ queryParams });
    const component = new SearchComponent(activatedRoute, router, searchService);
    component.query = query;

    // when navigating
    component.navigateToPage(2);

    // then it should redirect to the search with correct parameters
    expect(router.navigate).toHaveBeenCalledWith(['.'], { relativeTo: activatedRoute, queryParams: { query, page: 2 } });
Exbrayat Cédric's avatar
Exbrayat Cédric committed
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
  });

  it('should display a search bar and trigger a search', () => {
    // given a component
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;
    spyOn(component, 'newSearch');

    // then it should display the search bar containing that query
    tester.detectChanges();

    expect(tester.searchBar).toHaveValue('');

    // with a query
    const query = 'Bacteria';
    tester.searchBar.fillWith(query);

    // trigger search
    tester.searchButton.click();
    expect(component.newSearch).toHaveBeenCalled();
    expect(component.searchForm.get('search').value).toBe(query);
  });

166
  it('should display results and pagination', () => {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
167
168
169
170
    // given a component
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;

171
172
    // then it should not display results if empty
    expect(tester.results).toBeNull();
Exbrayat Cédric's avatar
Exbrayat Cédric committed
173
174
175

    // when it has results
    const resource = toGeneticResource('Bacteria');
176
    component.results = toSecondPage([resource]);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
177
178
179
180
181
182
    tester.detectChanges();

    // then it should display them
    expect(tester.results).not.toBeNull();
    const componentInstance = tester.results.componentInstance as GeneticResourcesComponent;
    expect(componentInstance.geneticResources).toEqual(component.results);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
183
184
185
186

    // and a pagination with one page
    expect(tester.pagination).not.toBeNull();
    const paginationComponent = tester.pagination.componentInstance as NgbPagination;
187
188
    expect(paginationComponent.page).toBe(2);
    expect(paginationComponent.pageCount).toBe(2);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
189
190
  });

191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
  it('should limit pagination to 500 pages, even if more results', () => {
    // given a component
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;

    // when it has results
    const content: Array<GeneticResourceModel> = [];
    for (let i = 0; i < 20; i++) {
      content.push(toGeneticResource(`Bacteria ${i}`));
    }

    // in page 200 on a limited number of pages
    component.results = toSinglePage(content);
    component.results.totalElements = 12000;
    component.results.totalPages = 500;
    component.results.number = 200;
    tester.detectChanges();

    // then it should limit the pagination to 500 pages in the pagination
    // and a pagination with one page
    expect(tester.pagination).not.toBeNull();
    const paginationComponent = tester.pagination.componentInstance as NgbPagination;
    expect(paginationComponent.page).toBe(201);
    expect(paginationComponent.pageCount).toBe(500);
  });

217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
  it('should hide results and pagination on a new search', () => {
    // given a component
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;
    // with results
    const resource = toGeneticResource('Bacteria');
    component.results = toSecondPage([resource]);
    tester.detectChanges();

    // displayed
    expect(tester.results).not.toBeNull();

    // when a new search is triggered
    component.newSearch();
    tester.detectChanges();

    // then it should hide previous results
    expect(tester.results).toBeNull();

    // and pagination
    expect(tester.pagination).toBeNull();
  });

240
241
242
243
244
245
246
247
248
249
  it('should not display pagination if no result yet', () => {
    // given a component with no result yet
    const tester = new SearchComponentTester();

    // then it should not display the pagination bar
    expect(tester.pagination).toBeNull();
  });

  it('should not display pagination if empty result', () => {
    // given a component with an empty result
Exbrayat Cédric's avatar
Exbrayat Cédric committed
250
251
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;
252
253
    component.results = toSinglePage([]);
    tester.detectChanges();
Exbrayat Cédric's avatar
Exbrayat Cédric committed
254
255

    // then it should display results even if empty
256
257
    expect(tester.pagination).toBeNull();
  });
Exbrayat Cédric's avatar
Exbrayat Cédric committed
258

259
260
261
262
263
  it('should not display pagination if only one page of results', () => {
    // given a component with an empty result
    const tester = new SearchComponentTester();
    const component = tester.componentInstance;
    component.results = toSinglePage([toGeneticResource('Bacteria')]);
Exbrayat Cédric's avatar
Exbrayat Cédric committed
264
265
    tester.detectChanges();

266
267
    // then it should display results even if empty
    expect(tester.pagination).toBeNull();
Exbrayat Cédric's avatar
Exbrayat Cédric committed
268
269
  });
});