Angular 2, как протестировать пользовательскую директиву на mocked дочернем компоненте - PullRequest
Новая
       5

Angular 2, как протестировать пользовательскую директиву на mocked дочернем компоненте

0 голосов
/ 08 октября 2018

Я тестирую компонент, который использует пользовательскую директиву (похожую на 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 в Object.debugUpdateDirectives [as updateDirectives] (веб-пакет: ///./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, но результат тот же.

...