test(docs-infra): improve typeahead example and add unit test (#34190)
This commit improves the typeahead example, by using the emitted input value. It also adds a unit test to ensure that the example is working as intended. PR Close #34190
This commit is contained in:
parent
ba54671993
commit
44074499dc
|
@ -0,0 +1,72 @@
|
|||
import { of } from 'rxjs';
|
||||
import { docRegionTypeahead } from './typeahead';
|
||||
|
||||
describe('typeahead', () => {
|
||||
let document;
|
||||
let ajax;
|
||||
let triggertInputChange;
|
||||
|
||||
beforeEach(() => {
|
||||
jasmine.clock().install();
|
||||
const input = {
|
||||
addEventListener: jasmine
|
||||
.createSpy('addEvent')
|
||||
.and.callFake((eventName: string, cb: (e) => void) => {
|
||||
if (eventName === 'input') {
|
||||
triggertInputChange = cb;
|
||||
}
|
||||
}),
|
||||
removeEventListener: jasmine.createSpy('removeEvent'),
|
||||
};
|
||||
|
||||
document = { getElementById: (id: string) => input };
|
||||
ajax = jasmine.createSpy('ajax').and.callFake((url: string) => of('foo bar'));
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jasmine.clock().uninstall();
|
||||
});
|
||||
|
||||
it('should make an ajax call to the corrent endpoint', () => {
|
||||
docRegionTypeahead(document, ajax);
|
||||
triggertInputChange({ target: { value: 'foo' } });
|
||||
jasmine.clock().tick(11);
|
||||
expect(ajax).toHaveBeenCalledWith('/api/endpoint?search=foo');
|
||||
});
|
||||
|
||||
it('should not make an ajax call, when the input length < 3', () => {
|
||||
docRegionTypeahead(document, ajax);
|
||||
triggertInputChange({ target: { value: '' } });
|
||||
jasmine.clock().tick(11);
|
||||
expect(ajax).not.toHaveBeenCalled();
|
||||
triggertInputChange({ target: { value: 'fo' } });
|
||||
jasmine.clock().tick(11);
|
||||
expect(ajax).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not make an ajax call for intermediate values when debouncing', () => {
|
||||
docRegionTypeahead(document, ajax);
|
||||
triggertInputChange({ target: { value: 'foo' } });
|
||||
jasmine.clock().tick(9);
|
||||
triggertInputChange({ target: { value: 'bar' } });
|
||||
jasmine.clock().tick(9);
|
||||
triggertInputChange({ target: { value: 'baz' } });
|
||||
jasmine.clock().tick(9);
|
||||
triggertInputChange({ target: { value: 'qux' } });
|
||||
expect(ajax).not.toHaveBeenCalled();
|
||||
jasmine.clock().tick(10);
|
||||
expect(ajax).toHaveBeenCalledTimes(1);
|
||||
expect(ajax).toHaveBeenCalledWith('/api/endpoint?search=qux');
|
||||
});
|
||||
|
||||
it('should not make an ajax call, when the input value has not changed', () => {
|
||||
docRegionTypeahead(document, ajax);
|
||||
triggertInputChange({ target: { value: 'foo' } });
|
||||
jasmine.clock().tick(11);
|
||||
expect(ajax).toHaveBeenCalled();
|
||||
ajax.calls.reset();
|
||||
triggertInputChange({ target: { value: 'foo' } });
|
||||
jasmine.clock().tick(11);
|
||||
expect(ajax).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
|
@ -1,18 +1,32 @@
|
|||
import { fromEvent } from 'rxjs';
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
|
||||
/*
|
||||
Because of how the code is merged together using the doc regions,
|
||||
we need to indent the imports with the function below.
|
||||
*/
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { fromEvent } from 'rxjs';
|
||||
import { ajax } from 'rxjs/ajax';
|
||||
import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
|
||||
|
||||
// #enddocregion
|
||||
/* tslint:disable:no-shadowed-variable */
|
||||
/* tslint:disable:align */
|
||||
export function docRegionTypeahead(document, ajax) {
|
||||
// #docregion
|
||||
const searchBox = document.getElementById('search-box');
|
||||
|
||||
const searchBox = document.getElementById('search-box');
|
||||
const typeahead = fromEvent(searchBox, 'input').pipe(
|
||||
map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
|
||||
filter(text => text.length > 2),
|
||||
debounceTime(10),
|
||||
distinctUntilChanged(),
|
||||
switchMap(searchTerm => ajax(`/api/endpoint?search=${searchTerm}`))
|
||||
);
|
||||
|
||||
const typeahead = fromEvent(searchBox, 'input').pipe(
|
||||
map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
|
||||
filter(text => text.length > 2),
|
||||
debounceTime(10),
|
||||
distinctUntilChanged(),
|
||||
switchMap(() => ajax('/api/endpoint'))
|
||||
);
|
||||
typeahead.subscribe(data => {
|
||||
// Handle the data from the API
|
||||
});
|
||||
|
||||
typeahead.subscribe(data => {
|
||||
// Handle the data from the API
|
||||
});
|
||||
// #enddocregion
|
||||
return typeahead;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue