javascript - 如何使用浅渲染而不是使用 NO_ERRORS_SCHEMA 编写 Angular Jasmine 简单的 'should create' 测试用例

Question

我有一些 Angular (v6) 组件，其模板包含 RouterLink 引用。这些组件具有默认生成的名为“should create”的测试用例，它因错误而中断:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("12">

我可以使用 NO_ERRORS_SCHEMA 解决这个问题，例如:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NotFoundComponent ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

但是使用这种方法的问题是它有点过于残酷并且隐藏了模板的所有错误(正如我在阅读这个问题时发现的:Problems with Angular's NO_ERRORS_SCHEMA?)

这个问题包含各种解决方案，其中 1 个需要使用名为 shallow-render 的测试帮助程序库。

我需要找出如何使用 shallow-render 而不是 NO_ERROR_SCHEMA 来编写等效的“应该创建”测试用例。记录的示例不涵盖这种情况，因此我只是尝试酌情使用其他示例进行试验。这是我的代码:

组件:

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 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 粗暴地隐藏模板错误似乎不是正确的做法，所以我只需要找出如何使用一个简单的创建测试用例来消除该错误浅渲染。

附言:在https://github.com/getsaf/shallow-render/wiki/Examples如果能看到一个名为“带 RouterLink 的组件”的示例，那就太好了，因为这是其他开发人员遇到的常见错误，也是我尝试切换到浅渲染的主要原因。

Answer 1

看起来您正在尝试结合使用 Shallow 和 TestBed。 Shallow 是 TestBed 的替代品。好消息是这使得测试更容易编写。

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 的“应该创建”默认测试的忠实拥护者，因为它们实际上并不运行组件或验证它的任何行为。我绝对推荐测试组件行为而不是简单的创建测试。

如果您对测试链接的行为感兴趣，RouterModule 可能有点奇怪，您可能想要/需要使用 Angular 的 RouterTestingModule .如果你走那条路，我在官方 StackBlitz 上有一个示例规范你可以引用。阅读此问题后，我刚刚将其更新为使用 RouterLinkDirective。