diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html
index 7619e692c2..c2bd575b97 100644
--- a/aio/src/app/search/search-results/search-results.component.html
+++ b/aio/src/app/search/search-results/search-results.component.html
@@ -8,14 +8,14 @@
{{area.name}} ({{area.pages.length + area.priorityPages.length}})
-
-
+
{{ page.title }}
diff --git a/aio/src/app/search/search-results/search-results.component.spec.ts b/aio/src/app/search/search-results/search-results.component.spec.ts
index 5a82255a03..1e54faafde 100644
--- a/aio/src/app/search/search-results/search-results.component.spec.ts
+++ b/aio/src/app/search/search-results/search-results.component.spec.ts
@@ -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', () => {
diff --git a/aio/src/app/search/search-results/search-results.component.ts b/aio/src/app/search/search-results/search-results.component.ts
index 8b81d2835a..adf9291985 100644
--- a/aio/src/app/search/search-results/search-results.component.ts
+++ b/aio/src/app/search/search-results/search-results.component.ts
@@ -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