标签: angular-test

我在我测试的Component类上有一个静态方法,我的问题是如何在我的spec测试文件中访问该方法？

到目前为止,我可以访问一个组件实例:

  let fixture = TestBed.createComponent(MyComponent);
  let comp = fixture.componentInstance;

我想使用带有业力的 ChromeHeadless。我的配置是：

process.env.CHROME_BIN = require('puppeteer').executablePath();

module.exports = function( config ) {
  config.set({
    basePath                : '',
    frameworks              : ['jasmine', '@angular/cli'],
    plugins                 : [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('@angular/cli/plugins/karma')
    ],
    angularCli              : {
      environment: 'dev'
    },
    reporters               : ['progress'],
    autoWatch               : false,
    browsers: [
      'ChromeHeadless',
    ],
    singleRun               : true
  });
};

当我运行 ng test 时，我仍然需要打开浏览器。这是我从业力控制台得到的信息：

Karma v2.0.0 服务器启动于http://0.0.0.0:9876/

我有一个非常简单的函数 load()，我正在尝试使用 Jasmine 对其进行单元测试。this.service.loadObject() 返回一个 Promise。

如果 Promise 被拒绝，我如何测试 this.logService.error 是否会被调用？

load() {
    this.service.loadObject().then(x => {
       this.variable = x;
    }).catch(ex => this.logService.error(ex));
}

当测试 a 的 DOM 表示时@Component，您可以通过其固定装置查询其嵌套元素

fixture.debugElement.queryAll(By.css('.example'));

您还可以按以下条件过滤@Directive

fixture.debugElement.queryAll(By.directive(RouterLinkDirectiveStub));

现在，假设你有一个@Component NzButtonComponent像这样使用的内部

<button nz-button>Example</button>

怎样才能精确查询到呢？没有By.component(...)。

我正在尝试在组件测试中模拟结构指令，但出现错误。

以下测试失败并显示一条消息：

嵌入模板上的任何指令都未使用属性绑定 appSome。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。("[错误 ->] 测试

我嘲笑结构指令SomeDirective与SomeMockDirectiveapp.component.spec.ts中定义。测试失败。

如果我切换声明使其包含SomeDirective-测试通过。

我想知道为什么我不能让它与模拟版本一起工作。

模板：

<h1 *appSome="true">TEST</h1>

指令（生产种类:)）：

@Directive({
  selector: '[appSome]'
})
export class SomeDirective implements OnDestroy {
  show: boolean;
  ...
}

测试：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Directive, NO_ERRORS_SCHEMA } from '@angular/core';

@Directive({
  selector: '[appSome]'
})
export class SomeMockDirective {}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent, SomeMockDirective], // test is …

我有一个简单的服务方法，可以调用http post添加 todoList：

add(event: any): Observable<TodoList> {
    let todoListToAdd: TodoList = { name: event.target.value, listItems: []};
    return this.http.post<TodoList>("https://localhost:44305/todolist", todoListToAdd);
}

我想对这个方法进行单元测试并尝试如下：

import { TestBed, getTestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { TodolistService } from './todolist.service';
import { TodoList } from './todolist';
import { HttpResponse } from '@angular/common/http';

describe('TodolistService', () => {
  let injector: TestBed;
  let service: TodolistService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [ TodolistService ] …

我正在学习有关角度测试的课程，并且尝试为具有服务的组件设置测试，并且该服务具有 httpClias 作为依赖项，但当我尝试运行它时出现此错误

NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:\n          NullInjectorError: No provider for HttpClient!\n        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MedicoService', 'HttpClient', 'HttpClient' ] })\n        NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:\n          NullInjectorError: No provider for HttpClient!\n            at NullInjector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10756:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)\n            at injectInjectorOnly (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2290:1)\n            at \xc9\xb5\xc9\xb5inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2294:1)\n            at Object.MedicoService_Factory [as factory] (ng:///MedicoService/\xc9\xb5fac.js:5:41)\n            at R3Injector.hydrate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11091:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10912:1)\n            at NgModuleRef$1.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24988:1)\n            at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1943:1)\n        Error: Expected undefined to be truthy.\n            at <Jasmine>\n            at UserContext.<anonymous> …

我正在监视inemit的方法EventEmitterAngular

spyOn(answerComponent.answerEmitter, 'emit');

我想检查是否emit带有参数调用A，但我不想检查与A. 我想检查是否emit使用值调用A.a, A.b并忽略 的值A.c。

可以这样做吗？

当使用提供的模拟存储时，我的功能/选择器函数仅将状态视为未定义。

因此，我只能模拟选择器，因此无法执行更全面的集成测试。

当模拟商店提供状态时，选择器是否不应该看到状态，或者这应该起作用吗？

创建模拟商店

     TestBed.configureTestingModule({
        providers: [
            AuthGuardGuard,
            provideMockStore({
                initialState: { ...initialState },
            }),
        ],
    });

然后记录选择器应该看到的状态，这是未定义的。

export const currentUser = createSelector(
    authRootFeature,
    (state: fromAuthRoot.State) => {
        console.log(state); // Undefined
        return state.auth.currentUser;
    }
);

我有一个用 Angular 制作的 Sidenav 菜单。该组件如下所示：

模板：

 <mat-toolbar color="primary" [fxLayoutAlign]="(settings.menuType != 'mini') ? 'space-between center' : 'center center'" class="sidenav-header">
    <a mat-raised-button color="accent" routerLink="/" (click)="closeSubMenus()" class="small-logo">Menu</a>
    <a *ngIf="settings.menuType == 'default'" class="logo" routerLink="/" (click)="closeSubMenus()">mEMS</a> 
</mat-toolbar>

<div fxLayout="column" fxLayoutAlign="center center" class="user-block transition-2" [class.show]="settings.sidenavUserBlock"> 
    <div [fxLayout]="(settings.menuType != 'default') ? 'column' : 'row'" 
         [fxLayoutAlign]="(settings.menuType != 'default') ? 'center center' : 'space-around center'" class="user-info-wrapper">
        <div class="user-info">
            <p class="name"> {{currentUser}}</p>
            <p *ngIf="settings.menuType == 'default'" class="position">Rocket Scientist<br> </p>
        </div>
    </div>
    <div *ngIf="settings.menuType != 'mini'" fxLayout="row" fxLayoutAlign="space-around center" class="w-100 muted-text"> …

我有一个嵌入 Angular MaterialMatSelect元素的组件。

在我正在编写的测试中，我需要模拟某个选项的选择，并确保selectionChange与该MatSelect元素关联的Observable实际触发。

到目前为止我的代码是

const mySelect: MatSelect = fixture.nativeElement.querySelector('#mySelect');
mySelect.value = 'new value';

但不幸的是mySelect.selectionChange，这并没有发出通知，因此我的测试工作。非常欢迎有关如何执行此操作的任何想法。

我的一项测试随机失败。我想设置一些调试顺序，因为默认情况下测试使用种子随机运行。我试图在karma.conf.js或设置种子数，random: false但没有效果。我使用默认测试配置并使用ng test. 我的变化karma.conf.js：

client: {
   ...
   random: false,
   //or
   seed: '71384' 
   ...
}

我在为我编写的 Angular 属性指令创建单元测试时遇到问题。该指令称为TrackClickDirective，我正在尝试测试以下内容。

• 当单击附加了此指令的元素时，它应该调用该指令的特定方法。

我怀疑这是我的单元测试配置有问题。

请参阅我在 StackBlitz 上的实现，您可以在其中看到测试正在运行：

StackBlitz： https ://stackblitz.com/edit/angular-test-click-on-attribute-directive-with-hostlistener

这是我的单元测试代码 - track-click.directive.spec.ts：

import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";
import { TrackClickDirective } from './track-click.directive';
import { Analytics} from './analytics.service';

class MockAnalytics {
  eventTrack() {}
};
class MockElementRef {
}

@Component({
  template: '<button appTrackClick>Test</button>'
})
export class TestButtonWithoutNameComponent { }

describe('TrackClickDirective', () => {

  let component: TestButtonWithoutNameComponent;
  let fixture: ComponentFixture<TestButtonWithoutNameComponent>;
  let …