honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): leave results panel open when opening search result on new page

Browse Source 
Fixes #17580
This commit is contained in:
Georgios Kalpakas 2017-06-18 10:33:24 +03:00 committed by Hans
parent 1c6a252596
commit 2447bd1bac
3 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/src/app/search/search-results/search-results.component.html
View File

@ -8,14 +8,14 @@
<h3>{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
<ul class="priority-pages" >
<li class="search-page" *ngFor="let page of area.priorityPages">
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
<span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
</a>
</li>
</ul>
<ul>
<li class="search-page" *ngFor="let page of area.pages">
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
<a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
<span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
</a>
</li>

49
aio/src/app/search/search-results/search-results.component.spec.ts
View File

@ -1,3 +1,4 @@
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
@ -128,19 +129,47 @@ describe('SearchResultsComponent', () => {
expect(component.searchAreas).toEqual([]);
});
it('should emit a "resultSelected" event when a search result anchor is clicked', () => {
const searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
describe('when a search result anchor is clicked', () => {
let searchResult: SearchResult;
let selected: SearchResult;
component.resultSelected.subscribe(result => selected = result);
let anchor: DebugElement;
searchResults.next({ query: 'something', results: [searchResult] });
fixture.detectChanges();
expect(selected).toBeUndefined();
beforeEach(() => {
component.resultSelected.subscribe(result => selected = result);
const anchor = fixture.debugElement.query(By.css('a'));
anchor.triggerEventHandler('click', {});
fixture.detectChanges();
expect(selected).toEqual(searchResult);
selected = null;
searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
searchResults.next({ query: 'something', results: [searchResult] });
fixture.detectChanges();
anchor = fixture.debugElement.query(By.css('a'));
expect(selected).toBeNull();
});
it('should emit a "resultSelected" event', () => {
anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: false});
fixture.detectChanges();
expect(selected).toBe(searchResult);
});
it('should not emit an event if mouse button is not zero (middle or right)', () => {
anchor.triggerEventHandler('click', {button: 1, ctrlKey: false, metaKey: false});
fixture.detectChanges();
expect(selected).toBeNull();
});
it('should not emit an event if the `ctrl` key is pressed', () => {
anchor.triggerEventHandler('click', {button: 0, ctrlKey: true, metaKey: false});
fixture.detectChanges();
expect(selected).toBeNull();
});
it('should not emit an event if the `meta` key is pressed', () => {
anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: true});
fixture.detectChanges();
expect(selected).toBeNull();
});
});
describe('when no query results', () => {

7
aio/src/app/search/search-results/search-results.component.ts
View File

@ -45,8 +45,11 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
this.resultsSubscription.unsubscribe();
}
onResultSelected(page: SearchResult) {
this.resultSelected.emit(page);
onResultSelected(page: SearchResult, event: MouseEvent) {
// Emit a `resultSelected` event if the result is to be displayed on this page.
if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
this.resultSelected.emit(page);
}
}
// Map the search results into groups by area