Javascript 发布角度测试指令

这是我的指令规范文件。我用的是角度6

import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { KeyboardInputDirective } from './keyboard-input.directive';

@Component({
  selector: 'kiosk-app-test-component',
  template: `<input type="text" name="wu-input" class="wu-input" id="standard" [kioskAppKeyboardInput]="'true'">`
})
class TestStubComponent { }


describe('Directive: KeyboardInputDirective', () => {
  let component: TestStubComponent;
  let fixture: ComponentFixture<TestStubComponent>;
  let directiveEl: DebugElement;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [TestStubComponent, KeyboardInputDirective],
      schemas: [NO_ERRORS_SCHEMA]
    });

    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(TestStubComponent);
      component = fixture.componentInstance;
      directiveEl = fixture.debugElement.query(By.directive(KeyboardInputDirective));
    });

  }));

  fit('should create an instance', () => {
    fixture.detectChanges();
    expect(directiveEl).not.toBeNull();
  });
});

如果i console

fixture.debugElement

value，则它始终为空。 非常感谢您的帮助

package.json

{
  "name": "project-name-xyz",
  "private": true,
  "scripts": {
    "ng": "$(npm bin)/ng",
    "start:web": "$(npm bin)/ng serve web",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@angular/upgrade": "^6.0.4",
    "@ngrx/effects": "^7.2.0",
    "@ngrx/entity": "^7.2.0",
    "@ngrx/store": "^6.1.0",
    "@ngrx/store-devtools": "^7.2.0",
    "@ngx-translate/core": "^10.0.2",
    "@types/angular": "^1.6.45",
    "angular": "^1.6.9",
    "angular4-translate": "^1.3.5",
    "async": "^2.6.1",
    "child-process-promise": "^2.2.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "fetch-intercept": "^2.3.0",
    "fingerprintjs2": "1.1.0",
    "fs-extra": "^7.0.0",
    "google-libphonenumber": "3.2.6",
    "gulp": "^3.9.1",
    "gulp-remove-code": "^3.0.4",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "husky": "^3.0.5",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "ngrx-store-localstorage": "^5.1.0",
    "ngx-bootstrap": "^3.3.0",
    "ngx-cookie-service": "^1.0.10",
    "ngx-logger": "^3.3.12",
    "ngx-mask": "^6.1.3",
    "ngx-page-scroll-core": "^6.0.2",
    "ngx-popper": "^5.1.7",
    "popper.js": "^1.14.4",
    "protractor-axe-report-plugin": "^1.1.0",
    "run-sequence": "^2.2.1",
    "rxjs": "6.0.0",
    "rxjs-compat": "^6.2.2",
    "save": "^2.3.2",
    "systemjs": "^0.21.4",
    "systemjs-plugin-babel": "0.0.25",
    "virtual-keyboard": "^1.28.4",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.1",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^7.2.10",
    "@angular/language-service": "^6.0.3",
    "@ngrx/schematics": "^7.2.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.118",
    "@types/node": "~8.9.4",
    "chalk": "^2.4.2",
    "codelyzer": "~4.2.1",
    "fancy-log": "^1.3.3",
    "gulp-clean": "^0.4.0",
    "gulp-i18n-lint": "^0.1.1",
    "gulp-tap": "^1.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-typescript": "^4.0.0",
    "protractor": "^5.4.0",
    "sonarqube-scanner": "^2.4.1",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.1.1"
  }
}

---

可能需要移动fixture.detectChanges（）在中描述，如下所示

describe('Directive: KeyboardInputDirective', () => {
  let component: TestStubComponent;
  let fixture: ComponentFixture<TestStubComponent>;
  let directiveEl: DebugElement;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [TestStubComponent, KeyboardInputDirective],
      schemas: [NO_ERRORS_SCHEMA]
    });

    TestBed.compileComponents().then(() => {
      fixture = TestBed.createComponent(TestStubComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      directiveEl = fixture.debugElement.query(By.directive(KeyboardInputDirective));
    });

  }));

description（'指令：键盘输入指令'，（）=>{
let组件：TestStubComponent；
let夹具：组件夹具；
let directiveEl:DebugElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[TestStubComponent，KeyboardInputDirective]，
架构：[无错误\u架构]
});
TestBed.compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（TestStubComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
directiveEl=fixture.debugElement.query（By.directive（KeyboardInputDirective））；
});
}));

---

希望这有帮助，如果您面临问题，请仍然告诉我。

测试床。在这种情况下不需要compileComponents

，而是

fixture。在查询
HTML
元素之前需要调用detectChanges

。您可以寻址（查询）

直接输入

元素，并在测试中与之交互，以查看指令是否正确工作。由于不知道指令的真正功能，下面的测试显然需要进行调整以使其适合您

describe('Directive: KeyboardInputDirective', () => {

  let component: TestStubComponent;
  let fixture: ComponentFixture<TestStubComponent>;
  let inputElement: HTMLInputElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestStubComponent, KeyboardInputDirective]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    component = fixture.componentInstance;
    inputElement = <HTMLInputElement>fixture.debugElement.nativeElement.querySelector('INPUT');
  });

  ...

  it('#keydown should ...', fakeAsync(() => {

    // given
    spyOn(inputElement, 'setSelectionRange');
    inputElement.value = 'abc';
    const event = new KeyboardEvent('keydown', { key: '' });

    // when
    inputElement.dispatchEvent(event);
    tick();

    // then
    expect(inputElement.setSelectionRange).toHaveBeenCalledWith(0, 3);
  }));

description（'指令：键盘输入指令'，（）=>{
let组件：TestStubComponent；
let夹具：组件夹具；
let inputElement:HTMLInputElement；
在每个之前（（）=>{
TestBed.configureTestingModule({
声明：[TestStubComponent，KeyboardInputDirective]
});
fixture=TestBed.createComponent（TestComponent）；
fixture.detectChanges（）；
组件=fixture.componentInstance；
inputElement=fixture.debugElement.nativeElement.querySelector（'INPUT'）；
});
...
它（“#keydown should…”，fakeAsync（（）=>{
//给定
spyOn（inputElement，'setSelectionRange'）；
inputElement.value='abc'；
const event=newkeyboardevent（'keydown'，{key:'}）；
//什么时候
inputElement.dispatchEvent（事件）；
勾选（）；
//然后
期望（inputElement.setSelectionRange）.已被（0,3）调用；
}));

感谢您的帮助，但尝试了相同的错误。您是否可以添加pacakge.json内容，您的代码对于发布的原始问题来说运行良好。对我来说运行良好，您是否可以尝试在stackblitz上复制它？您可以参考此演示-感谢您的帮助，但遇到此错误：

TypeError:无法读取属性“nativ”“元素”为空

describe('Directive: KeyboardInputDirective', () => {

  let component: TestStubComponent;
  let fixture: ComponentFixture<TestStubComponent>;
  let inputElement: HTMLInputElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestStubComponent, KeyboardInputDirective]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    component = fixture.componentInstance;
    inputElement = <HTMLInputElement>fixture.debugElement.nativeElement.querySelector('INPUT');
  });

  ...

  it('#keydown should ...', fakeAsync(() => {

    // given
    spyOn(inputElement, 'setSelectionRange');
    inputElement.value = 'abc';
    const event = new KeyboardEvent('keydown', { key: '' });

    // when
    inputElement.dispatchEvent(event);
    tick();

    // then
    expect(inputElement.setSelectionRange).toHaveBeenCalledWith(0, 3);
  }));