指令单元测试失败 [英] Directive unit testing fails

问题描述

我正在使用jest.js在我的角度应用程序中进行测试.这是我在html中使用的指令:

I am using jest.js for testing with my angular app. here is the directive I use in html:

<textarea errorHighlighter formControlName="Url" name="Url" cols="50" rows="5"
                                placeholder="Enter Page URL" (ngModelChange)="pageUrlChanges($event)"></textarea>

这是我的directive.ts文件:

here is my directive.ts file:

import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2 } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[errorHighlighter]'
})
export class ErrorHighlighterDirective {

  constructor(private el: ElementRef, private control: NgControl, private renderer: Renderer2) { }

  @HostListener('input') oninput() {
    if (this.el.nativeElement && this.control) {
      if (this.control.control.status === 'INVALID') {
        this.renderer.addClass(this.el.nativeElement, 'has-err');
      } else {
        this.renderer.removeClass(this.el.nativeElement, 'has-err');
      }
    }
  }

}

编写

以显示输入字段周围的错误边框.我正在尝试像这样测试相同的结果:

this is written to show the error border around the input field. I am trying to test the same like this:

import { ErrorHighlighterDirective } from './error-highlighter.directive';
import { Directive, ElementRef, SimpleChanges, HostListener, Renderer2, Component, DebugElement } from '@angular/core';
import { NgControl, FormGroup, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
import { TestBed, ComponentFixture } from '@angular/core/testing';

@Component({
    template: `<input errorHighlighter formControlName="Url" type="text">`
})
class TestHighlighterComponent { }



describe('ErrorHighlighterDirective', () => {

    let component: TestHighlighterComponent;
    let fixture: ComponentFixture<TestHighlighterComponent>;
    let inputEl: DebugElement;

    const fg: FormGroup = new FormGroup({
        'Url': new FormControl('')
    });

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestHighlighterComponent, ErrorHighlighterDirective],
            imports: [FormsModule, ReactiveFormsModule],
            providers: [
                { provide: NgControl, useValue: fg }
            ]
        });
        fixture = TestBed.createComponent(TestHighlighterComponent);
        component = fixture.componentInstance;
        inputEl = fixture.debugElement.query(By.css('input'));
    });


    it('should create an instance', () => {
        const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);
        expect(directive).toBeTruthy();
    });

});

但是测试没有成功.出现如下错误:

But the test not succeeds. getting error like below:

● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/app/directives/error-highlighter.directive.spec.ts:33:46 - error TS2304: Cannot find name 'By'.

    33         inputEl = fixture.debugElement.query(By.css('input'));
                                                    ~~
    src/app/directives/error-highlighter.directive.spec.ts:38:66 - error TS2345: Argument of type 'FormGroup' is not assignable to parameter of type 'NgControl'.
      Type 'FormGroup' is missing the following properties from type 'NgControl': name, valueAccessor, viewToModelUpdate, control, path

    38         const directive = new ErrorHighlighterDirective(inputEl, fg, Renderer2);

有人帮助我理解和解决这些问题吗?我对jest.js的角度测试都不是很熟悉.

Any one help me to understand and fix these issue? I am not much familiar with angular test either jest.js.

推荐答案

1. 您可以使用By.directive 例如

1. You can use By.directive e.g.

const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
expect(directiveEl).not.toBeNull();

1. 您需要从angular.platform-b​​rowser导入By

1. You need to import By from angular.platform-browser

从'@ angular/platform-b​​rowser

import { By } from '@angular/platform-browser

您可以在此处进一步阅读.

您可以使用可与CSS一起使用的任何选择器By.css.一个类的选择器就是.classname. 例如

You can use any selector By.css that you can use with css. And a selector for a class is simply .classname. e.g.

By.css(.classname)

或

By.css('input[type=radio]')

或

By.css('textarea')

这篇关于指令单元测试失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！