Как написать Angular Jasmine простой «должен создать» контрольный пример с использованием shallow-render вместо NO_ERRORS_SCHEMA

Question

У меня есть несколько угловых (v6) компонентов, шаблон которых содержит ссылку на RouterLink. Эти компоненты имеют сгенерированный по умолчанию контрольный пример под названием «следует создать», что приводит к ошибке:

Невозможно связать с routerLink, поскольку оно не является известным свойством a. ( "12">

Я могу это исправить, используя NO_ERRORS_SCHEMA, например:

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

Но проблема с использованием этого метода заключается в том, что он слишком груб и скрывает все ошибки с шаблоном (как я обнаружил, читая этот вопрос: Проблемы с NO_ERRORS_SCHEMA Angular? )

Этот вопрос содержит различные решения, 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() {
  }
}

Компонент SPEC:

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

Я пытаюсь сделать все правильно, и жестокое сокрытие ошибок шаблона с использованием NO_ERRORS_SCHEMA кажется неправильным, поэтому мне просто нужно выяснить, как избавиться от этой ошибки в простом тесте с использованием творческого теста, используя мелкой визуализации.

PS: в https://github.com/getsaf/shallow-render/wiki/Examples было бы неплохо увидеть пример под названием «компонент с RouterLink», так как это распространенная ошибка, с которой сталкиваются другие разработчики, и это главная причина, по которой я пытаюсь переключиться на мелкий визуализации.

Answer 1

Похоже, вы пытаетесь использовать комбинацию Shallow и TestBed. Мелкий замена для 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's RouterTestingModule. Если вы пойдете по этому пути, у меня есть пример спецификации на официальном StackBlitz , на который вы можете ссылаться. Я только что обновил его, чтобы использовать RouterLinkDirective после прочтения этого вопроса.