Angular2測試。 Promise從未解決TestBed.compileComponents

我目前正在爲我的Angular2組件使用templateUrl屬性編寫一個模塊的測試模塊，因此需要在測試之前編譯TestBed.compileComponents異步調用。Angular2測試。 Promise從未解決TestBed.compileComponents

我遇到的問題是，承諾回調（然後）函數中的任何內容都不會運行...就好像承諾沒有解決。

這是我的代碼。

模塊：

import { Component } from "@angular/core"; 

@Component({ 
    selector: 'categories-component', 
    templateUrl: '/app/views/catalog/categories/categories-dashboard.html', 
    moduleId: module.id 
}) 

export class CategoriesComponent { 
    title: 'Categories; 
}

HTML模板：

<h1>{{ title }}</h1>

且測試模塊：

import {TestBed, ComponentFixture, ComponentFixtureAutoDetect, async} from "@angular/core/testing"; 
import { By} from "@angular/platform-browser"; 
import { CategoriesComponent } from "../../../../components/catalog/categories/CategoriesComponent"; 
import { DebugElement } from "@angular/core"; 

let comp: CategoriesComponent; 
let fixture: ComponentFixture<CategoriesComponent>; 
let de:  DebugElement; 
let el:  HTMLElement; 

describe('CategoriesComponent',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ CategoriesComponent ], 
      providers: [ 
       { provide: ComponentFixtureAutoDetect, useValue: true } 
      ] 
     }); 
    }); 

    it('should display original title',() => { 
     TestBed.compileComponents() 
      .then(() => { 
       fixture = TestBed.createComponent(CategoriesComponent); 

       comp = fixture.componentInstance; // BannerComponent test instance 

       // query for the title <h1> by CSS element selector 
       de = fixture.debugElement.query(By.css('h1')); 
       el = de.nativeElement; 

       expect(el.textContent).toContain(comp.title); 
      }); 

});

}）;

如您所見，在我的測試中，我調用compileComponents異步編譯測試模塊，然後在回調中創建測試組件的fixture和實例。這一切都沒有得到運行，我添加了這個永遠不會觸發的斷點。

任何人都可以指出我在做什麼錯在這裏？

謝謝！

來源

2016-12-07 devoncrazylegs

這是因爲測試是同步

it('...',() => { 
})

回調這裏執行和測試完成後的回調函數執行之後。

但問題是，你有你的代碼在異步回調

it('...',() => { 
    TestBed.compileComponents().then(() => { 
    // asynchronous 
    // code not executed 
    }) 
})

所以在測試完成之前異步代碼永遠不會被執行。

這可以通過幾種方法處理。您可以使用本機茉莉done回調

it('...', (done) => { 
    TestBed.compileComponents().then(() => { 
    /// do stuff 

    done(); 
    }) 
})

在這裏，茉莉花通過你的回調函數。當你完成所有的異步工作時，你可以調用它。

另一種方式，就是使用Angular async。

import { async } from '@anguar/core/testing'; 

it('...', async(() => { 
    TestBed.compileComponents().then(() => { 

    }) 
}))

這樣做是在測試區，其跟蹤的所有異步任務包的測試，並完成測試畢竟異步任務有完全的。在茉莉花環境中，在異步任務完成之後，測試區域實際上將調用茉莉花done回調。

來源

2016-12-07 11:26:07

嗨，謝謝你的回答。我確實認爲是這種情況，但是當我使用這些解決方案時，出現以下錯誤。錯誤：超時 - 異步回調未在由jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超時內調用。 – devoncrazylegs

我不知道。我幾次看到這個錯誤。我不記得問題是什麼。你是否使用了錯誤（與Angular 2和業力有關）？ –

嘗試並將模板移至'@ Component.template'並擺脫'templateUrl'並且不要調用'compileComponents'。看看它是否有效。如果它有效，那麼這是'compileComponents'的問題。不知道什麼會導致它。至少如果你把問題縮小到這個範圍，它會縮小搜索範圍。 –

Angular2測試。 Promise從未解決TestBed.compileComponents

回答

相關問題