茉莉花进行离子单元测试:茉莉花无法读取离子行和离子col

时间:2018-11-08 22:13:34

标签: angular ionic-framework jasmine ionic3 karma-jasmine

我正在尝试测试组件内部的ng含量,但茉莉花在离子行内部看不到任何东西。在配置测试平台时,我已经导入了ionicmodule,但是仍然看不到它。

myComponent:

<ion-item>
    <div class="bold" text-wrap>
        <ion-row>
          <ion-col style="margin-left: 0.9375rem;">
            <ng-content></ng-content>
          </ion-col>
        </ion-row>
    </div>
</ion-item>

我的规格文件:

@Component({
    template: `<my-component>hey</my-component>`
})

class MockMyComponent{

}

describe('Component: MyComponent',()=>{

    let fixture;
    let component;
    let element;

    let mockFixture;
    let mockComponent;
    let mockElement;

    beforeEach(()=>{
        TestBed.configureTestingModule({
            declarations:[MockMyComponent,MyComponent],
            imports:[IonicModule.forRoot(this)]
        });

        fixture = TestBed.createComponent(AccordionHeaderComponent);
        component = fixture.componentInstance;
        element = fixture.nativeElement;

        mockFixture = TestBed.createComponent(MockMyComponent);
        mockComponent = mockFixture.componentInstance;
        mockElement = mockFixture.nativeElement;

        console.log(mockElement);

    });
    it("Mock Component: should say 'hello'",()=>{
        expect(mockElement.innerText).toBe('hllo');
    })
});

当我记录变量嘲笑元素时,我得到了:

<div id="root8" ng-version="5.2.11">
    <my-component>
     <ion-item class="item item-block item-md"><div class="item-inner"> 
        <div class="input-wrapper">
            <!---->
        </div>
     </ion-item>
    </my-component>
</div>

0 个答案:

没有答案