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 @@
Multi, fixed
- Single, template (fixed)
+ Single, complex object (fixed)
- Multi, template (fixed)
+ Multi, complex object (fixed)
{
let
@@ -37,7 +43,7 @@ describe('TypeaheadComponent', () => {
it('should copy observable suggestions to allmatches', fakeAsync(() => {
const suggestions: string[] = ['ABC', 'DEF', 'GHI'];
- const suggestions$: Observable = Observable.of(suggestions);
+ const suggestions$: TypeaheadSuggestions = Observable.of(suggestions);
component.suggestions = suggestions$;
fixture.detectChanges();
tick();
@@ -93,7 +99,7 @@ describe('TypeaheadComponent', () => {
const input = ( 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 = ( 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 = ( 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 = ( 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 = ( 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);
+ }));
+
});