From 7c587b9b343bec809712238c6c003690047ed292 Mon Sep 17 00:00:00 2001
From: Joao Grassi <joaop.grassi@gmail.com>
Date: Mon, 20 Nov 2017 17:19:24 +0100
Subject: [PATCH] Adding unit tests

Covering number of suggestions and adding/removing custom items
---
 config/karma.conf.js              |  9 ++++
 demo/src/app/app.component.html   |  4 +-
 tests/typeahead.component.spec.ts | 86 +++++++++++++++++++++++++++++--
 3 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/config/karma.conf.js b/config/karma.conf.js
index 02146a1..62ae5aa 100644
--- a/config/karma.conf.js
+++ b/config/karma.conf.js
@@ -1,5 +1,8 @@
 var testWebpackConfig = require('./webpack.test.js');
 
+const ENV = process.env.npm_lifecycle_event;
+const isTestWatch = ENV === 'test-watch';
+
 module.exports = function (config) {
 
   var configuration = {
@@ -86,6 +89,12 @@ module.exports = function (config) {
     singleRun: true
   };
 
+  if(isTestWatch) {
+    configuration.browsers = ['Chrome'];
+    configuration.reporters.push('kjhtml');
+    configuration.plugins.push(require('karma-jasmine-html-reporter'));
+  }
+
   if (process.env.TRAVIS) {
     configuration.browsers = ['Chrome_travis_ci'];
     configuration.reporters = ['mocha'];
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 0275272..3888b08 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -33,13 +33,13 @@ <h6>Multi, fixed</h6>
           <type-ahead formControlName="hobbyMultiFixedSet" [suggestions]="hobbies"
                      class="form-control" [custom]="false" [multi]="true"></type-ahead>
 
-          <h6>Single, template (fixed)</h6>
+          <h6>Single, complex object (fixed)</h6>
           <type-ahead formControlName="countrySingle" [suggestions]="countries"
                      class="form-control" idField="code" [complex]="true"></type-ahead>
           <type-ahead formControlName="countrySingleSet" [suggestions]="countries"
                      class="form-control" idField="code" [complex]="true"></type-ahead>
 
-          <h6>Multi, template (fixed)</h6>
+          <h6>Multi, complex object (fixed)</h6>
           <type-ahead formControlName="countryMulti" [suggestions]="countries" [settings]="customSettings"
                       class="form-control" idField="code" [multi]="true" [complex]="true"></type-ahead>
           <type-ahead formControlName="countryMultiSet" [suggestions]="countries" [settings]="customSettings"
diff --git a/tests/typeahead.component.spec.ts b/tests/typeahead.component.spec.ts
index f3f437e..51d1135 100644
--- a/tests/typeahead.component.spec.ts
+++ b/tests/typeahead.component.spec.ts
@@ -2,6 +2,12 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin
 import { ReactiveFormsModule } from '@angular/forms';
 import { TypeaheadComponent } from '../src/typeahead.component';
 import { Observable } from 'rxjs';
+import { TypeaheadSuggestions } from '../src/typeahead.interface';
+
+const KEY_UP = 'keyup';
+const KEY_DOWN = 'keydown';
+const ENTER = 'Enter';
+const BACKSPACE = 'Backspace';
 
 describe('TypeaheadComponent', () => {
   let
@@ -37,7 +43,7 @@ describe('TypeaheadComponent', () => {
 
   it('should copy observable suggestions to allmatches', fakeAsync(() => {
     const suggestions: string[] = ['ABC', 'DEF', 'GHI'];
-    const suggestions$: Observable<string[]> = Observable.of(suggestions);
+    const suggestions$: TypeaheadSuggestions = Observable.of(suggestions);
     component.suggestions = suggestions$;
     fixture.detectChanges();
     tick();
@@ -93,7 +99,7 @@ describe('TypeaheadComponent', () => {
 
     const input = (<any> component)._input;
     expect(component.isExpanded).toBeFalsy();
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    input.dispatchEvent(new KeyboardEvent(KEY_DOWN, { key: 'a' }));
     fixture.detectChanges();
     expect(component.isExpanded).toBeTruthy();
   }));
@@ -105,11 +111,83 @@ describe('TypeaheadComponent', () => {
     tick();
 
     const input = (<any> component)._input;
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    input.dispatchEvent(new KeyboardEvent(KEY_DOWN, { key: 'a' }));
     fixture.detectChanges();
     expect(component.isExpanded).toBeTruthy();
-    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    input.dispatchEvent(new KeyboardEvent(KEY_DOWN, { key: 'Escape' }));
     fixture.detectChanges();
     expect(component.isExpanded).toBeFalsy();
   }));
+
+  it('should limit the number of suggestions shown', fakeAsync(() => {
+    const suggestions = ['batman', 'flash', 'aquaman', 'orin', 'robin', 'spectre'];
+    component.suggestions = suggestions;
+    component.settings.suggestionsLimit = 2;
+    fixture.detectChanges();
+
+    const input = (<any> component)._input;
+
+    input.value = 'a';
+    input.dispatchEvent(new KeyboardEvent(KEY_UP, { key: 'a' }));
+    jasmine.clock().tick(50);
+    fixture.detectChanges();
+
+    const dropDownItems = fixture.nativeElement.querySelectorAll('.dropdown-menu .dropdown-item');
+
+    expect(component.isExpanded).toBeTruthy();
+    expect(dropDownItems.length).toBe(2);
+  }));
+
+  it('multi - should be able to enter new items with Enter key', fakeAsync(() => {
+    const suggestions = ['batman', 'flash', 'aquaman', 'orin', 'robin', 'spectre'];
+    component.suggestions = suggestions;
+    component.multi = true;
+    fixture.detectChanges();
+    const customValue1 = 'hulk';
+    const customValue2 = 'antman';
+
+    const input = (<any> component)._input;
+
+    // enter Hulk
+    input.value = customValue1;
+    input.dispatchEvent(new KeyboardEvent(KEY_UP, { key: ENTER }));
+    jasmine.clock().tick(50);
+    fixture.detectChanges();
+
+    // Enter Antman
+    input.value = customValue2;
+    input.dispatchEvent(new KeyboardEvent(KEY_UP, { key: ENTER }));
+    jasmine.clock().tick(50);
+    fixture.detectChanges();
+
+    const customItems = fixture.nativeElement.querySelectorAll('.typeahead-badge');
+    expect(customItems[0].innerText).toContain(customValue1);
+    expect(customItems[1].innerText).toContain(customValue2);
+  }));
+
+  it('multi - should delete item with Backspace key', fakeAsync(() => {
+    const suggestions = ['batman', 'flash', 'aquaman', 'orin', 'robin', 'spectre'];
+    component.suggestions = suggestions;
+    component.multi = true;
+    fixture.detectChanges();
+    const customValue1 = 'hulk';
+
+    const input = (<any> component)._input;
+
+    // enter Hulk
+    input.value = customValue1;
+    input.dispatchEvent(new KeyboardEvent(KEY_UP, { key: ENTER }));
+    jasmine.clock().tick(50);
+    fixture.detectChanges();
+
+    // delete with backspace
+    input.dispatchEvent(new KeyboardEvent(KEY_DOWN, { key: BACKSPACE }));
+    input.dispatchEvent(new KeyboardEvent(KEY_UP, { key: BACKSPACE }));
+    jasmine.clock().tick(50);
+    fixture.detectChanges();
+
+    const customItems = fixture.nativeElement.querySelectorAll('.typeahead-badge');
+    expect(customItems.length).toBe(0);
+  }));
+
 });