3

現在、html 内で別のコンポーネント タグを使用するコンポーネントの単体テストのセットを作成しようとしています。

<bm-panel [title]="title" [panelType]="panelType" [icon]="icon"
     class="bm-assignment-form-panel">
  <div *ngIf="isLoading" class="bm-loader"><img src="../../../assets/animal.gif"></div>
  <div class="container-fluid w-100 m-0 p-0">
      <!-- Content -->
  </div>
</bm-panel>

ただし、この他のコンポーネントをコンパイルできないようです。NO_ERROR_SCHEMA、1-3 beforeEach'es を使用していくつかのアプローチを試しました。機能した唯一のアプローチは次のようになります

import {...}

export function main() {
  describe( 'AssignmentFormComponent', () => {
    let comp: AssignmentFormComponent;
    let fixture: ComponentFixture<AssignmentFormComponent>;
    let de: DebugElement;
    let el: HTMLElement;

    beforeEach( () => {
      TestBed.configureTestingModule( {
        imports: [ AssignmentFormModule ]
      } );
    } );

    describe( 'should build with no problems', () => {
      it( 'should be defined', () => {
        TestBed.compileComponents().then( () => {
          fixture = TestBed.createComponent( AssignmentFormComponent );
          comp = fixture.componentInstance;
          expect( comp ).toBeDefined();
        } );

      } );
    } );
  } );
}

これはベスト プラクティスの方法とは思えず、各ブロックの前の目的をいくらか無効にします。モックする方法を調べてみましたが、overridecomponent 関数がどのように機能するか、または一般的にジャスミンでモックがどのように機能するかを説明するリソースを見つけることができません。

rangle.io のいくつかのビデオを見ると、彼らは beforeEach ブロックを次のように記述しています。

  beforeEach( async() => {
      TestBed.configureTestingModule( {
        imports: [ AssignmentFormModule ]
      } );
    } );

    beforeEach( async() => {
      TestBed.compileComponents();
    } );

    beforeEach( () => {
      fixture = TestBed.createComponent( AssignmentFormComponent );
      comp = fixture.componentInstance;
    } );
    it( 'should be defined', () => {
      expect( comp ).toBeDefined();
    } );

これにより、bm-panel コンポーネントの TemplateUrl をコンパイルできません。また、モジュールではなくコンポーネントを直接宣言しようとしましたが、効果がありません。

PanelContainerComponent (bm-panel) は AssignmentFormModule 内のモジュールを介してインポートされますが、これにより compileComponent はそれをコンパイルできなくなりますか?

overrideComponent が可能な解決策である場合、私がそれをどのように使用するかを誰かが説明してくれますか?

should display TestTitle
        Chrome 56.0.2924 (Windows 10 0.0.0)
      Error: This test module uses the component PanelContainerComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Plea
se call "TestBed.compileComponents" before your test.
          at TestBed._initIfNeeded (node_modules/@angular/core/bundles/core-testing.umd.js:774:31) [ProxyZone]
          at TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:853:18) [ProxyZone]
          at Function.TestBed.createComponent (node_modules/@angular/core/bundles/core-testing.umd.js:682:33) [ProxyZone]
          at Object.eval (dist/dev/app/bachelor-manager/panels/assignment-form/assignment-form.component.spec.js:62:41) [ProxyZone]
          at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:79:39) [ProxyZone]
          at Zone.run (node_modules/zone.js/dist/zone.js:126:43) [<root> => ProxyZone]
          at Object.<anonymous> (node_modules/zone.js/dist/jasmine-patch.js:102:34) [<root>]
          at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
          at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
          at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (node_modules/zone.js/dist/jasmine-patch.js:132:42) [<root>]
          at Zone.runTask (node_modules/zone.js/dist/zone.js:166:47) [<root> => <root>]
          at drainMicroTaskQueue (node_modules/zone.js/dist/zone.js:529:35) [<root>]
          at ZoneTask.invoke (node_modules/zone.js/dist/zone.js:420:25) [<root>]
          at data.args.(anonymous function) (node_modules/zone.js/dist/zone.js:1527:25) [<root>]
4

1 に答える 1