如何使用浅渲染而不是使用NO_ERRORS_SCHEMA来编写Angular Jasmine简单'应该创建'测试用例 [英] How to write Angular Jasmine simple 'should create' test case using shallow-render instead of using NO_ERRORS_SCHEMA
问题描述
我有一些angular（v6）组件，其模板包含RouterLink引用。这些组件具有默认生成的名为should create的测试用例，该错误打破了错误：
I have a few angular (v6) components whose template contains RouterLink reference. These components have the default generated test case entitled 'should create', which breaks with the error:
无法绑定到'routerLink'因为它不是'a'的已知属性。
（12>
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("12">
我可以使用NO_ERRORS_SCHEMA修复此问题，例如：
I can fix this using NO_ERRORS_SCHEMA, for example:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NotFoundComponent ],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
但是使用这种方法的问题在于它有点太残酷并且隐藏了模板中的所有错误（因为我发现读了这个问题： Angular的NO_ERRORS_SCHEMA问题？）
But the problem with using this method is that it is a bit too brutal and hides all errors with the template (as I discovered reading this question: Problems with Angular's NO_ERRORS_SCHEMA?)
此问题包含各种解决方案，其中1个需要使用名为 shallow-render 的测试帮助程序库。
This question contains various solutions, 1 of which requires the use of a testing helper library called shallow-render.
我需要找出如何编写等效的'should create'测试使用浅渲染而不是NO_ERROR_SCHEMA的情况。记录的示例不包括th是场景，所以我刚刚尝试使用其他示例进行实验。这是我的代码：
I need to find out how to write the equivalent 'should create' test case using shallow-render instead of NO_ERROR_SCHEMA. The examples documented do not cover this scenario, so I have just tried to experiment using the other examples as appropriate. Here is my code:
COMPONENT：
COMPONENT:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'apclib-lock',
templateUrl: './lock.component.html',
styleUrls: ['./lock.component.css']
})
export class LockComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
组件规格：
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LockComponent } from './lock.component';
import { Shallow } from 'shallow-render';
import { AuthenticationModule } from '../authentication.module';
describe('LockComponent', () => {
let component: LockComponent;
let fixture: ComponentFixture<LockComponent>;
let shallow: Shallow<LockComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LockComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LockComponent);
component = fixture.componentInstance;
shallow = new Shallow<LockComponent>(LockComponent, AuthenticationModule);
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
模板：
<section id="wrapper">
<div class="login-register" style="background-image:url(../assets/images/background/login-register.jpg);">
<div class="login-box card">
<div class="card-body">
<form class="form-horizontal form-material" id="loginform" action="index.html">
<div class="form-group text-center">
<div class="col-xs-12">
<a class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" [routerLink]="['/dashboard/dashboard1']">Log In</a>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
错误：
Chrome 67.0.3396（Mac OS X 10.13.5）LockComponent应该创建FAILED
无法绑定到'routerLink'，因为它不是'a'的已知属性。
（12>
] [routerLink] =['/ dashboard / dashboard1']>登录
）：ng：/// DynamicTestModule / LockComponent .html @ 21:95
Chrome 67.0.3396 (Mac OS X 10.13.5) LockComponent should create FAILED Can't bind to 'routerLink' since it isn't a known property of 'a'. ("12"> ][routerLink]="['/dashboard/dashboard1']">Log In "): ng:///DynamicTestModule/LockComponent.html@21:95
我正在尝试以正确的方式做事，并且使用NO_ERRORS_SCHEMA粗暴地隐藏模板错误似乎不是正确的事情，所以我只需要找出如何摆脱使用浅渲染的简单创建测试案例的错误。
I am trying to do things the right way, and brutally hiding template errors using NO_ERRORS_SCHEMA does not seem the right thing to do, so I just need to find out how to get rid of that error for a simple creational test case using shallow-render.
PS：在 https://github.com/getsaf/shallow-render/wiki/Examples 它本来很高兴看到一个名为'带有RouterLink的组件'的例子，因为这是其他开发人员经历的常见错误，也是我尝试切换到浅渲染的主要原因。
PS: in https://github.com/getsaf/shallow-render/wiki/Examples it would have been nice to see an example entitled 'component with RouterLink' as this is a common error experienced by other devs and is the main reason for me trying to switch to shallow-render.
推荐答案
看起来你正在尝试使用Shallow和TestBed的组合.Shallow是一个替换用于TestBed。好消息是，这使得测试更容易编写。
It looks like you're attempting to use a combination of Shallow and TestBed. Shallow is a replacement for TestBed. The good news is that this makes tests much easier to write.
import { Shallow } from 'shallow-render';
import { LockComponent } from './lock.component';
import { AuthenticationModule } from '../authentication.module';
describe('LockComponent', () => {
let shallow: Shallow<LockComponent>;
beforeEach(() => {
shallow = new Shallow<LockComponent>(LockComponent, AuthenticationModule);
});
it('should create', async () => {
const {instance} = await shallow.render();
expect(instance).toBeTruthy();
});
});
旁注：我不是Angular的应该创建默认测试的忠实粉丝，因为他们不喜欢实际上是运用组件或验证它的任何行为。我绝对建议测试组件行为而不是简单的创建测试。
Side note: I'm not a big fan of Angular's "should create" default test because they don't actually exercise the component or verify any of it's behavior. I definitely recommend testing component behavior instead of simple creation tests.
如果您对测试链接的行为感兴趣，那么 RouterModule 可能有点奇怪，你可能希望/需要使用Angular的 RouterTestingModule 。如果你走这条路，我的官方示例规范 StackBlitz ，你可以参考。我刚刚在阅读完这个问题后将其更新为使用 RouterLinkDirective 。
If you're interested in testing the behavior of the link, the RouterModule can be a little weird and you may want/need to use Angular's RouterTestingModule. If you go that route, I have an example spec on the official StackBlitz that you can reference. I just updated it to use the RouterLinkDirective after reading this question.
这篇关于如何使用浅渲染而不是使用NO_ERRORS_SCHEMA来编写Angular Jasmine简单'应该创建'测试用例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
