Question

我正在测试使用自定义指令的组件（类似于ngIf）。我嘲笑了子组件，但是出现以下错误：

"message": "An error was thrown in afterAll\nTypeError: Cannot read property 'workInProgressFlag' of undefined\nerror properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 16793601, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 1, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 4, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'div', attrs: [ Array ], template: null, componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null({  }), allProviders: null({  }), handleEvent: Function }), provider: null, text: null, query: null, ngContent: null }), Object({ nodeIndex: 1, parent: Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 1, chil ...\n    at <Jasmine>\n    at WorkInProgressFlagDirective.displayElement (webpack:///./src/app/shared/directives/work-in-progress-flag.directive.ts?:35:42)\n    at WorkInProgressFlagDirective.set [as flagName] (webpack:///./src/app/shared/directives/work-in-progress-flag.directive.ts?:24:22)\n    at updateProp (webpack:///./node_modules/@angular/core/fesm5/core.js?:10575:37)\n    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:10326:19)\n    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:11635:20)\n    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:11597:16)\n    at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:12234:38)\n

在debugCheckDirectivesFn（webpack：///./node_modules/@angular/core/fesm5/core.js？：12194：13）\ n在Object.eval [作为updateDirectives]（ng：/// DynamicTestModule / PageActionsComponent .ngfactory.js：20：5）\ n at Object.debugUpdateDirectives [作为updateDirectives]（webpack：///./node_modules/@angular/core/fesm5/core.js？：12186：21）“，

这是我的设置方式：

      TestBed.configureTestingModule({
        declarations: [
            PageActionsComponent,
            MockComponent({ selector: 'print', template: '<p>print</p>' }),
            WorkInProgressFlagDirective,
        ],
        providers: [
            { provide: ConfigService, useValue: getMockConfigService },
            { provide: TranslationService, useValue: getStubTranslationService({ 'print': 'printText' }) },
        ]
    }).compileComponents();
    fixture = TestBed.createComponent(PageActionsComponent);
    fixture.detectChanges();

被测组件如下：

<ul>
    <li>
        <print *workInProgressFlag="'print'"></print>
    </li>
</ul>

*workInProgressFlag指令与*ngIf

非常相似

印刷品和被测部件没有@input和@output。

我尝试模拟workInProgressFlag，但结果相同。

Angular 2如何在模拟的子组件上测试自定义指令

0 个答案: