feat(aio): tell user when no search results

closes #16294

aio/src/app/search/search-results/search-results.component.html

@@ -1,4 +1,4 @@
-<div class="search-results" *ngIf="(searchAreas | async)?.length > 0" >
+<div class="search-results" *ngIf="hasAreas | async" >
   <h2 class="visually-hidden">Search Results</h2>
   <div class="search-area" *ngFor="let area of searchAreas | async">
     <h3>{{area.name}}</h3>
@@ -9,4 +9,6 @@
     </ul>
   </div>
 </div>
-
+<div class="search-results" *ngIf="notFound" >
+  <p>No results found.</p>
+</div>

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -13,6 +13,9 @@ describe('SearchResultsComponent', () => {
   let searchResults: Subject<SearchResults>;
   let currentAreas: SearchArea[];
 
+  /** Get all text from component element */
+  function getText() { return fixture.debugElement.nativeElement.innerText; }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ SearchResultsComponent ],
@@ -138,7 +141,30 @@ describe('SearchResultsComponent', () => {
       fixture.detectChanges();
       component.hideResults();
       fixture.detectChanges();
-      expect(fixture.debugElement.queryAll(By.css('a'))).toEqual([]);
+      expect(getText()).toBe('');
+    });
+  });
+
+  describe('when no query results', () => {
+
+    it('should display "not found" message', () => {
+      searchResults.next({ query: 'something', results: [] });
+      fixture.detectChanges();
+      expect(getText()).toContain('No results');
+    });
+
+    it('should not display "not found" message after hideResults()', () => {
+      searchResults.next({ query: 'something', results: [] });
+      fixture.detectChanges();
+      component.hideResults();
+      fixture.detectChanges();
+      expect(getText()).toBe('');
+    });
+
+    it('should not display "not found" message when query is empty', () => {
+      searchResults.next({ query: '', results: [] });
+      fixture.detectChanges();
+      expect(getText()).toBe('');
     });
   });
 });

aio/src/app/search/search-results/search-results.component.ts

@@ -20,7 +20,7 @@ export class SearchResultsComponent implements OnInit {
 
   readonly defaultArea = 'other';
 
-  showResults = false;
+  notFound = false;
 
   @Output()
   resultSelected = new EventEmitter<SearchResult>();
@@ -29,6 +29,7 @@ export class SearchResultsComponent implements OnInit {
    * A mapping of the search results grouped into areas
    */
   searchAreas = new ReplaySubject<SearchArea[]>(1);
+  hasAreas = this.searchAreas.map(areas => areas.length > 0);
 
   constructor(private searchService: SearchService) {}
 
@@ -50,11 +51,12 @@ export class SearchResultsComponent implements OnInit {
 
   hideResults() {
     this.searchAreas.next([]);
+    this.notFound = false;
   }
 
   // Map the search results into groups by area
   private processSearchResults(search: SearchResults) {
-    this.showResults = true;
+    this.notFound = search.query.trim() && search.results.length === 0;
     const searchAreaMap = {};
     search.results.forEach(result => {
       if (!result.title) { return; } // bad data; should fix