- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我目前正在使用 ngBootstrap 的自动完成机制(提前输入)。现在我想对输入事件的每个序列是否调用一个方法进行单元测试。我的测试用例目前的错误是:Cannot read property 'pipe' of undefined
<input id="locationEdit" type="text" class="form-control"
[(ngModel)]="user.location" name="location [ngbTypeahead]="search"/>
public ngOnInit() {
this.search = (text$: Observable<string>) =>
text$.pipe(
tap(() => {
this.isSearching = true;
this.searchFailed = false;
}),
debounceTime(750),
distinctUntilChanged(),
switchMap(term =>
this.cityService.getLocation(term).pipe(
tap((response) => {
this.searchFailed = response.length === 0;
this.isSearching = false;
})))
);
}
it('should call spy on city search', fakeAsync(() => {
component.user = <User>{uid: 'test', username: 'mleko', location: null, description: null};
const spy = (<jasmine.Spy>cityStub.getLocation).and.returnValue(of['München Bayern']);
fixture.detectChanges();
const compiled: DebugElement = fixture.debugElement.query(By.css('#locationEdit'));
compiled.nativeElement.value = 'München';
compiled.nativeElement.dispatchEvent(new Event('input'));
tick(1000);
fixture.detectChanges();
expect(spy).toHaveBeenCalled();
}));
有人可以帮我正确模拟 this.search 吗?
根据@dmcgrandle 的绝妙建议,我不需要渲染 HTML 和模拟输入事件来检查预输入是否正常工作。我宁愿做一个 Observable,它发出值并将其分配给函数。一种方法是:
it('should call spy on city search', fakeAsync(() => {
const spy = (<jasmine.Spy>cityStub.getLocation).and.returnValue(of['München Bayern']);
component.ngOnInit();
const textMock = of(['M', 'Mün', 'München']).pipe(flatMap(index => index));
component.search(textMock);
tick();
expect(spy).toHaveBeenCalled();
}));
但问题仍然是,component.search
没有调用 spy 。在 switchMap
运算符的搜索函数中,我添加了一个 console.log
以查看函数是否发出了值。但事实并非如此。
最佳答案
我不认为你真的想在测试期间调用任何 ngBootstrap 代码——毕竟你想对你的代码进行单元测试,而不是他们的。 :)
因此,我建议通过设置您自己的定时 Observable 并使用它调用您的函数来模拟用户实际键入的内容。也许每 100 毫秒模拟发送一个字符。像这样:
it('should call spy on city search', fakeAsync(() => {
component.user = <User>{uid: 'test', username: 'mleko', location: null, description: null};
// Change next line depending on implementation of cityStub ...
const spy = spyOn(cityStub, 'getLocation').and.returnValue(of('München Bayern'));
fixture.detectChanges();
let inputTextArray = ['M', 'Mü', 'Mün', 'Münc', 'Münch', 'Münche', 'München'];
let textMock$ : Observable<string> = interval(100).pipe(take(7),map(index => inputTextArray[index]));
component.search(textMock$);
tick(1000);
expect(spy).toHaveBeenCalled();
}));
更新:
我在这里整理了一个 stackblitz 来测试它:https://stackblitz.com/edit/stackoverflow-question-52914753 (打开左侧的 app 文件夹,然后单击 my.component.spec.ts 以查看测试文件)
一旦我把它放在那里,就很明显出了什么问题——没有订阅可观察对象,因为订阅似乎是由 ngBootstrap 完成的,所以为了测试我们需要明确订阅。这是我建议的新规范(取自 stackblitz):
it('should call spy on city search', fakeAsync(() => {
const cityStub = TestBed.get(CityService);
const spy = spyOn(cityStub, 'getLocation').and.returnValue(of('München Bayern'));
fixture.detectChanges();
let inputTextArray = ['M', 'Mü', 'Mün', 'Münc', 'Münch', 'Münche', 'München'];
let textMock$ : Observable<string> = interval(100).pipe(take(7),map(index => inputTextArray[index]));
component.search(textMock$).subscribe(result => {
expect(result).toEqual('München Bayern');
});
tick(1000);
expect(spy).toHaveBeenCalled();
}));
关于 Angular Testing - ngBootstraps typeahead,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52914753/
在我的 html 页面中,我尝试添加 Typeahead 以进行自动完成,但我无法解决与 TypeError 和 ReferenceError 相关的问题。 我在 CodePen 上尝试了一个示例,工
我已经使用 npm 安装了 typeahead.js。根据我的阅读,这包括预输入和猎犬。 然后我在我的模块中需要 jquery 之后需要它。 但现在当我打电话 new Bloodhound() Blo
我正在尝试使用Twitter提前输入,但遇到了问题。我不知道如何提前将字符串传递给服务器。是通过GET参数吗?如果是这样,该参数的名称是什么? 最佳答案 通过GET参数最简单,您可以选择所需的任何参数
看起来 CSS 不适用于我的 Typeahead。 我正在尝试重现可滚动下拉菜单,例如 https://twitter.github.io/typeahead.js/examples 这是我的代码:
我正在这样设置 typeahead: $this.typeahead({ prefetch: $this.data('url-prefetch'),
我有一个 Typeahead 实例拉入一个列出机场的远程 JSON 对象,我需要按“位置组”将它们分组到建议中,如下图所示: ...这里是如何格式化 JSON 的示例: { "locations
作为标题,我想问:“是否可以限制预先输入显示的建议?” 例如,我有 3 个数据集,每个数据集有 10000 个结果(来自查询)。主题以字符 t 开头大约有 3000 个结果或可能更多。 如果我输入 t
我想实现的功能是,如果我点击一个 DOM 元素,它会自动填充其中包含指定值的预先输入,它应该为此触发 typeahead:selected。 我发现了很多与之相关的查询,答案是 jQuery#type
首先,请检查:http://ws.luyencong.net/data/search/query.php?do=advanced 您可以将该 JSON 的所有内容粘贴到此处:http://pro.js
我一直在尝试结合几个功能 in typeahead plugin特别是多数据集 + 空 + 默认建议。到目前为止没有运气,希望有人可以帮助 现在,为了使其工作,它是多个数据集之间的选择---或---空
我正在尝试将预输入结果放入页面上的特定 div 中。我获得了 JSON 回调数据,但我不知道如何使用它来填充特定的 div。 process 函数的唯一作用是在搜索字段下方列出结果,无论其长度如何。
正如在 screenshot - 使用 typeahead 时如何禁用自动填充? 谢谢。 附注: 使用的浏览器是 Chrome 版本 47.0.2526.106(64 位) 最佳答案 添加 autoc
正如在 screenshot - 使用 typeahead 时如何禁用自动填充? 谢谢。 附注: 使用的浏览器是 Chrome 版本 47.0.2526.106(64 位) 最佳答案 添加 autoc
我使用的是 0.11.1 版的 Twitter Typeahead。现在我正试图让远程工作正常,但不知何故我认为我的行为很奇怪。 这是使用本地数组的工作代码: var localArray = [{"
我试过在 web 应用程序中应用 twitters typeahead 插件。我使用 typeahead 插件初始化了许多 typeahead 输入字段,这似乎以某种方式起作用。该插件栩栩如生。然而,
所以我使用Materialziecss和第三方库进行标签输入 Materializecss:http://materializecss.com/ Materialize 标签库:http://henr
我想用 Typeahead JS 做一个简单的自动完成但我不能让它工作。我按照手册中的说明进行操作,但我不确定我在这里做错了什么。我无法从 json 文件中获取正确的值。它是一个带有对象的数组,我只想
我有一个 Angular uib-typeahead。这是我创建的 plunkr 的链接。 https://plnkr.co/edit/8XwhSXsZlyd0oKSljS9t?p=preview .
我实际上想发送我选择的主题(一个包含许多变量的 json 对象),而不是存储在 topicsPopulate 中的字符串(主题名称)。Topics 是一个主题数组,一个主题看起来像这样, {
我正在尝试使用带有 react-bootstrap-typeahead 的旧 jQuery typeahead 来复制搜索字段。它查询使用多个异步数据源,并显示按这些数据源的返回分组的结果。 例如,如
我是一名优秀的程序员,十分优秀!