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); + })); + });