在Angular 2中进行测试时,何时在TestBed中使用异步函数？

你什么时候用的？

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

你何时使用它？

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

任何人都可以启发我吗？

我有一个@Input()在实例变量上使用注释的组件,我正在尝试为该openProductPage()方法编写单元测试,但是我在设置单元测试方面有点迷失.我可以将该实例变量公之于众,但我认为我不应该诉诸于此.

如何设置我的Jasmine测试以便注入模拟产品(提供？)并且我可以测试该openProductPage()方法？

我的组件:

import {Component, Input} from "angular2/core";
import {Router} from "angular2/router";

import {Product} from "../models/Product";

@Component({
    selector: "product-thumbnail",
    templateUrl: "app/components/product-thumbnail/product-thumbnail.html"
})

export class ProductThumbnail {
    @Input() private product: Product;


    constructor(private router: Router) {
    }

    public openProductPage() {
        let id: string = this.product.id;
        this.router.navigate([“ProductPage”, {id: id}]);
    }
}

我有一个管道,如下所示:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'sanitiseHtml'
})

export class SanitiseHtmlPipe implements PipeTransform {

constructor(private _sanitizer: DomSanitizer) {}

    transform(value: any): any {
      return this._sanitizer.bypassSecurityTrustHtml(value);
    }

}

我想测试它如下:

describe('Pipe: Sanatiser', () => {
    let pipe: SanitiseHtmlPipe;

    beforeEach(() => {
        pipe = new SanitiseHtmlPipe(new DomSanitizer());
    });

    it('create an instance', () => {
        expect(pipe).toBeTruthy();
    }); 
});

DomSanatizer是一个抽象类,通过将其传递给构造函数由typescript自动装配:

constructor(private _sanitizer: DomSanitizer) {}

目前我得到的是打字稿errror:

无法创建抽象类'DomSanitizer'的实例.

当实例化传递给Angular中的构造函数的依赖项时,有没有人知道什么是typescript？或者测试这样的东西的方法是什么？

我试图在Angular 6中为我的测试关闭源图.我知道源图交换机已被删除,例如ng test --sourcemaps=false.我试过修改我的tsconfig文件:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
  ...
  "sourceMap": false
},

由angular.json test->配置块引用:

"test": {
  ...
  "options": {
    ...
    "tsConfig": "src/tsconfig.spec.json",

源地图仍在生成.

First example

I have got the following test:

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

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

@Component({
    template: '<ul><li *ngFor="let state of values | async">{{state}}</li></ul>'
})
export class TestComponent {
    values: Promise<string[]>;
}

describe('TestComponent', () => {
    let component: TestComponent;
    let fixture: ComponentFixture<TestComponent>;
    let element: HTMLElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        element = (<HTMLElement>fixture.nativeElement);
    });

    it('this test fails', async() => …

从文档中我们可以阅读：

waitForAsync(fn: Function): (done: any) => any

将测试功能包装在异步测试区中。当该区域内的所有异步调用完成后，测试将自动完成。可用于包装注入调用。

我不明白，什么时候使用waitForAsync函数？什么之间的区别waitForAsyncVS（async或fakeAsync）？

我有一个Angular 6应用程序,并编写一些单元测试,试图确定一个元素是否可见,仅仅基于*ngIf指令的布尔结果.

标记:

<div class="header" *ngIf="show">
    <div>...</div>
</div>

规范文件:

it('should hide contents if show is false', () => {
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});

我似乎无法hidden从div中获取属性.angular是否使用另一种方法使用*ngIf指令从DOM中隐藏元素？我需要从另一个房产nativeElement？

谢谢!

在我的 Angular 9 应用程序中，我有一个抽象类：

export abstract class MyAbstractComponent {
  constructor(
    protected readonly cd: ChangeDetectorRef,
  ) {
    super();
  }

  // ...
}

和一个扩展它的组件：

@Component({
  // ...
})
export class MyConcreteComponent extends MyAbstractComponent {
  // ...
}

一切正常，除了测试，我收到以下错误：

错误：此构造函数与 Angular 依赖注入不兼容，因为它在参数列表索引 0 处的依赖项无效。如果依赖类型是像字符串这样的原始类型，或者此类的祖先缺少 Angular 装饰器，就会发生这种情况。

请检查 1) 索引 0 处参数的类型是否正确，以及 2) 是否为此类及其祖先定义了正确的 Angular 装饰器。

我最近将我的 Angular 应用程序中的 Karma 升级到了 v6.3.2。我正在运行 Angular v11。

当我开始测试时，我不断收到消息

new Server(config, done)不推荐将原始 CLI 选项传递给。使用parseConfig(configFilePath, cliOptions, {promiseConfig: true, throwErrors: true})准备一个加工Config实例，并传递作为config参数来代替。

测试运行成功

下面是我的业力配置

// Karma.conf.js
const plugins = [
  require( 'karma-jasmine' ),
  require( 'karma-chrome-launcher' ),
  require( 'karma-jasmine-html-reporter' ),
  require( 'karma-coverage-istanbul-reporter' ),
  require( '@angular-devkit/build-angular/plugins/karma' ),
  require( 'karma-verbose-reporter')
];
const ChromeHeadlessNoSandbox = {
  base: 'ChromeHeadless',
  flags: [ '--no-sandbox' ]
};
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({ …

我检查了很多文章和答案，但我似乎没有找到模拟HTTP Requests我的方法的正确方法。我想frontend独立于backend. 这是我拥有的方法类型：

 private getProfile() {
    this.http
      .get('go/profile/get', {withCredentials: true})
      .subscribe((profile: Profile) => {
        this.user.profile = profile;
        this.updateLineMsgs();
      });
  }

有什么建议 ？