用 jasmine 测试 Material Design Angular 组件答案

【问题标题】：Testing Material Design Angular components with jasmine用 jasmine 测试 Material Design Angular 组件
【发布时间】：2018-08-01 11:47:28
【问题描述】：

Edit2：更具体地说，使用 Material Button 之类的东西效果很好。但是，侧导航不适用于以下设置。

编辑：我进行了更多测试，发现这与 Angular Material 密切相关，因为没有它就不会发生这些错误。我仍然不确定如何解决它。

我正在尝试为一个新组件设置一些基本测试，但我一直在一个又一个错误中遇到错误。具体来说，在将@angular/material 添加到项目之后。当前的错误是：

Error: Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

这对我来说就像一个红鲱鱼。

这是规格：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { RouterTestingModule } from '@angular/router/testing';
import { MatSidenavModule } from '@angular/material/sidenav';

import { AngularNavigationComponent } from './angular-navigation.component';

describe('AngularNavigationComponent', () => {
    let component: AngularNavigationComponent;
    let fixture: ComponentFixture<AngularNavigationComponent>;

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                declarations: [AngularNavigationComponent],
                imports: [RouterTestingModule, MatSidenavModule]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(AngularNavigationComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

这是组件

import { Component, OnInit } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterLink } from '@angular/router';

@Component({
    selector: 'mysupercustomcat-navigation',
    templateUrl: './angular-navigation.component.html',
    styleUrls: ['./angular-navigation.component.scss']
})
export class AngularNavigationComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

谁能告诉我我做错了什么，或许还可以解释一下 Testbed 配置区域中的声明与导入？

编辑：如果重要的话，这是一个混合应用程序

【问题讨论】：

对我来说就像一条红鲱鱼？？重量？材料需要BrowserAnimationsModule 或NoopAnimationsModule。向应用程序添加一个并感到高兴。
我已经尝试过了，然后它在@angular/material 库中抛出了一个错误，这就是为什么我认为这是一个红鲱鱼。 TypeError：无法读取 MatSidenav.ngAfterContentInit 处未定义的属性“创建”......node_modules/@angular/material/esm2015/sidenav.js:327:1

标签： javascript angular testing material-design angular-material2

【解决方案1】：

我添加了两个关键部分以避免这样的错误：

import { NO_ERRORS_SCHEMA } from '@angular/core';

被添加到页面顶部并且：

schemas: [NO_ERRORS_SCHEMA],

添加在与声明相同的级别。

这是做什么的？这告诉 Angular 不要在未知元素或属性上出错。现在这适用于此用例，因为我对集成测试不是很感兴趣。我相信这可能会在这种情况下导致问题。

我对单元测试很感兴趣，我可以忽略模板属性。添加这个可以让我达到那个水平。

这个答案是我目前所能得到的最完整的答案。

【讨论】：