- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试使用 angular 2 final 测试我的组件,但我收到错误消息,因为该组件使用了 routerLink
指令。我收到以下错误:
Can't bind to 'routerLink' since it isn't a known property of 'a'.
这是ListComponent
模板的相关代码
<a
*ngFor="let item of data.list"
class="box"
routerLink="/settings/{{collectionName}}/edit/{{item._id}}">
这是我的测试。
import { TestBed } from '@angular/core/testing';
import { ListComponent } from './list.component';
import { defaultData, collectionName } from '../../config';
import { initialState } from '../../reducers/reducer';
const data = {
sort: initialState.sort,
list: [defaultData, defaultData],
};
describe(`${collectionName} ListComponent`, () => {
let fixture;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
ListComponent,
],
}).compileComponents(); // compile template and css;
fixture = TestBed.createComponent(ListComponent);
fixture.componentInstance.data = data;
fixture.detectChanges();
});
it('should render 2 items in list', () => {
const el = fixture.debugElement.nativeElement;
expect(el.querySelectorAll('.box').length).toBe(3);
});
});
我看了几个类似问题的答案,但找不到适合我的解决方案。
最佳答案
您需要配置所有路由。对于测试,您可以使用 @angular/router/testing
中的 RouterTestingModule
,而不是使用 RouterModule
,您可以在其中设置一些模拟路线。您还需要从 @angular/common
为您的 *ngFor
导入 CommonModule
。下面是一个完整的通过测试
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { By } from '@angular/platform-browser';
import { Location, CommonModule } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';
import { TestBed, inject, async } from '@angular/core/testing';
@Component({
template: `
<a routerLink="/settings/{{collName}}/edit/{{item._id}}">link</a>
<router-outlet></router-outlet>
`
})
class TestComponent {
collName = 'testing';
item = {
_id: 1
};
}
@Component({
template: ''
})
class DummyComponent {
}
describe('component: TestComponent', function () {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
RouterTestingModule.withRoutes([
{ path: 'settings/:collection/edit/:item', component: DummyComponent }
])
],
declarations: [ TestComponent, DummyComponent ]
});
});
it('should go to url',
async(inject([Router, Location], (router: Router, location: Location) => {
let fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
fixture.debugElement.query(By.css('a')).nativeElement.click();
fixture.whenStable().then(() => {
expect(location.path()).toEqual('/settings/testing/edit/1');
console.log('after expect');
});
})));
});
另一种选择,如果您只想测试路线是否正确呈现,而不尝试导航...
您只需导入 RouterTestingModule
而无需配置任何路由
imports: [ RouterTestingModule ]
然后只需检查链接是否使用正确的 URL 路径呈现,例如
let href = fixture.debugElement.query(By.css('a')).nativeElement
.getAttribute('href');
expect(href).toEqual('/settings/testing/edit/1');
关于使用 routerLink 的 Angular 2 单元测试组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39577920/
In the Angular documentation , routerLink指令选择器定义为: :not(a)[routerLink] 据我所知,这意味着“所有具有routerLink属性的非标
[routerLink] 和 routerLink 有什么区别?你应该如何使用它们? 最佳答案 您会在所有指令中看到这一点: 当您使用括号时,这意味着您正在传递一个可绑定(bind)属性(一个变量)。
我真的很困惑我是否应该使用 About 或 About 最佳答案 两者都是正确的。 About 和 About 将路径作为字符串传递 同时 About 传递一组路由器命令。 两者都受支持。 https
我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标签没有问题,在登录页面中的 ngOnInit 期间,我可以按预期检索状态。使用标签主页也是导航,但状态结果
我试图在我的 routerLink 中传递一个 id,我怎么能连接它? doesnt work. 你有解决方案吗? 提前致谢 最佳答案 你去吧。 Link 关于 Angular 变量到 rou
所以我有一个包含 2 个独立部分的应用程序,需要单独导航,我认为 Aux Routing 是可行的方法。 这是我的路线: export const ROUTES: Routes = [ { pat
我有一个routerLink在我的页面上,转到某个路线,但我收到此错误 基本上,我有一个具有唯一 id 的 Assets 页面,然后当您单击按钮时,id 会发生变化,并且路线应该更新,因此 asset
我对此组件的 html 调用 这是一个动态组件,然后在 onBtnActionClicked($event) 中需要像这样重定向 {{detail.detailId}} 但是正如你所
我的主 app.html 文件中有一个简单的应用程序,其结构如下。 在我的导航列表组件中,我可以轻松创建 routerLinks,如下所示: link 但是,当我进入路由器导出内呈
我正在尝试将 routerLink 与以下函数一起使用: Home callHome(data){ //perform some operations this.router.navig
我在教程中看到他们对 routerLink 属性使用了两种类型的语法。 我找不到任何说明它们之间差异的文档。 最佳答案 这是关于 Angular 非常重要的了解!当您在属性周围使用 [] 时,这意
... path: ':category/:page', ... {{category.attributes.name}} 浏览器中routerLink的第一个参数是NaN。我该如何修复它?
我正在尝试创建一个具有登录功能的 Angular 应用程序。 我用过ng cli生成空白应用程序。它带有 AppComponent 。 然后我创建了一个 LoginComponent和一个 HomeC
我有 2 一切都很好,这是我的RouteConfig在配置文件组件内: @Component({ selector : "profile", templateUrl: '/client
在这个演示应用程序中,我在延迟加载的书籍模块中有以下路由: { path: 'collection', component: CollectionPageComponent }, 并在搜索组件中使用以
我已经使用路由器链接在我的网络应用程序中添加了页面导航,出于某种原因,该页面大部分时间只是重新加载,而在其他时候它工作正常,非常随机。 我很困惑,尤其是为什么它会随机工作。任何见解都会有所帮助。 相关
我从 Vue.js 中的 VueRouter 开始,我遇到了这个错误: [Vue warn]: $attrs is readonly. found in ---> at resources\
我只想在一条路线上删除一个类(class),(或者在所有但只有一条路线上添加一个类(class)。)这怎么可能?我已经尝试使用多个参数的 [routerLink] 无济于事:
我正在制作一个电子商务网站,我的目标是每个对象有多个输入点,例如,他们单击/点击卡片上除按钮以外的任何地方,它将在单击/时转到产品详细信息/点击按钮会将该项目添加到购物车。 目前我转发到详情没有问题,
我想要一种更好的方式来编写这些代码行。 1" class="page-item"> First 1)" class="page-item disabled"> First
我是一名优秀的程序员,十分优秀!