Fehler bei der Instanziierung von List! (ItemSliding -> List), Komponententest ionic2 Komponenten mit TestComponentBuilder

Question

Ich habe ein Problem mit Unit-Test <ion-item-sliding> ionic2-Komponente. Ich habe meine Komponenten, Test und Fehler angebracht unten

Die Komponente

import {Component,Input} from 'angular2/core' 
import {IONIC_DIRECTIVES} from 'ionic-angular' 

@Component({ 
    selector: 'my-item', 
// template: `<ion-item>{{name}}</ion-item>`, //<ion-item> is working 
    template: `<ion-item-sliding>{{name}}</ion-item-sliding>`, //<ion-item-sliding> is not working and throws the error; 
    directives:[IONIC_DIRECTIVES] 
    }) 

export class MyIonic2Component { 

    public name:string; 

} 

Der Test

import {describe, it, expect, beforeEach,beforeEachProviders,inject,injectAsync,TestComponentBuilder,ComponentFixture} from 'angular2/testing'; 
import {provide} from 'angular2/core' 
import {MyIonic2Component} from '../../app/test' 

//Required for compiling ionic components 
import {Form, IonicApp, Config, ClickBlock, List, ItemSliding} from 'ionic-angular' 
import {ElementRef, NgZone} from 'angular2/core'; 

describe('basics', function(){ 

    let component:any; 

    beforeEachProviders(() => [ 
     provide(Config, {useValue: new Config()}), 
     Form, IonicApp, ClickBlock, ElementRef, 
     provide(NgZone, {useValue: new NgZone({enableLongStackTrace : false})}), 
     List, ItemSliding 
    ]); 

    beforeEach(injectAsync([TestComponentBuilder], tcb => { 

     return tcb.createAsync(MyIonic2Component) 
     .then(f => { 
     let myIonic2Component : MyIonic2Component = f.componentInstance; 
     myIonic2Component.name = 'Mark';   
     f.detectChanges(); 

     component = f.debugElement.nativeElement; 
     console.log(component); 
     }); 
    })); 

    it('should have a valid object as the component', function() { 
     expect(component).toBeDefined(); 
    }); 

}); 

Dies ist der Fehler, den ich immer bin, wenn die Vorlage <ion-item-sliding> enthält, aber ich bin kein Fehler mit anderen ionischen Komponenten.

Failed: EXCEPTION: Error during instantiation of List! (ItemSliding -> List) 
. 
    ORIGINAL EXCEPTION: unimplemented 
    ERROR CONTEXT: 
    [object Object] 
    _instantiate@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11742:87 <- 
webpack:///~/angular2/src/core/di/injector.js:841:0 
    _instantiateProvider@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:1161 
6:38 <- webpack:///~/angular2/src/core/di/injector.js:715:0 
    _new@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11605:42 <- webpack: 
///~/angular2/src/core/di/injector.js:704:0 
    getObjByKeyId@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11215:55 <- 
webpack:///~/angular2/src/core/di/injector.js:314:0 
    _getByKeyDefault@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11822:51 
<- webpack:///~/angular2/src/core/di/injector.js:921:0 
    _getByKey@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11768:42 <- web 
pack:///~/angular2/src/core/di/injector.js:867:0 
    _getByDependency@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11754:35 
<- webpack:///~/angular2/src/core/di/injector.js:853:0 
    _instantiate@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11644:53 <- 
webpack:///~/angular2/src/core/di/injector.js:743:0 
    _instantiateProvider@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:1161 
6:38 <- webpack:///~/angular2/src/core/di/injector.js:715:0 
    _new@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11605:42 <- webpack: 
///~/angular2/src/core/di/injector.js:704:0 
    instantiateProvider@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:11105 
:35 <- webpack:///~/angular2/src/core/di/injector.js:204:0 
    init@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:23955:44 <- webpack: 
///~/angular2/src/core/linker/element.js:558:0 
    AppElement@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:23632:33 <- we 
bpack:///~/angular2/src/core/linker/element.js:235:0 
    viewFactory_MyIonic2Component0 
    viewFactory_HostMyIonic2Component0 
    createRootHostView@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:25002: 
48 <- webpack:///~/angular2/src/core/linker/view_manager.js:93:0 
    C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:22960:69 <- webpack:///~/ 
angular2/src/core/linker/dynamic_component_loader.js:102:0 
    run@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:6777:30 <- webpack:// 
/~/zone.js/dist/zone-microtask.js:1217:0 
    zoneBoundFn@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:6754:30 <- we 
bpack:///~/zone.js/dist/zone-microtask.js:1194:0 
    lib$es6$promise$$internal$$tryCatch@C:/Users/MARK/ionic2project/test/spec/spec 
-bundle.js:6002:26 <- webpack:///~/zone.js/dist/zone-microtask.js:442:0 
    lib$es6$promise$$internal$$invokeCallback@C:/Users/MARK/ionic2project/test/spe 
c/spec-bundle.js:6014:54 <- webpack:///~/zone.js/dist/zone-microtask.js:454:0 
    lib$es6$promise$$internal$$publish@C:/Users/MARK/ionic2project/test/spec/spec- 
bundle.js:5985:54 <- webpack:///~/zone.js/dist/zone-microtask.js:425:0 
    C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:5657:13 <- webpack:///~/z 
one.js/dist/zone-microtask.js:97:0 
    run@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:6777:30 <- webpack:// 
/~/zone.js/dist/zone-microtask.js:1217:0 
    zoneBoundFn@C:/Users/MARK/ionic2project/test/spec/spec-bundle.js:6754:30 <- we 
bpack:///~/zone.js/dist/zone-microtask.js:1194:0 
    lib$es6$promise$asap$$flush@C:/Users/MARK/ionic2project/test/spec/spec-bundle. 
js:5796:19 <- webpack:///~/zone.js/dist/zone-microtask.js:236:0 

Dies ist das Konsolenprotokoll bekomme ich, wenn ich <ion-item>

<div id="root0"> 
<ion-item class="item"> 
<div class="item-inner"> 
<!--template bindings={}--> 
<ion-label>Mark</ion-label> 
</div> 
<ion-button-effect></ion-button-effect> 
</ion-item> 
</div> 

Answer 1

Aus der ionischen Dokumentation statt <ion-item-sliding> setzen einen Schiebe Artikel zu verwenden, fügen Sie eine <ion-item-sliding> Komponente innerhalb einer Liste. Fügen Sie als Nächstes eine Komponente innerhalb des verschiebbaren Elements hinzu, um die Schaltflächen zu enthalten.

freundlicherweise wickeln Sie die gleitenden Artikel in der Liste.

template: `<ion-list><ion-item-sliding>{{name}}</ion-item-sliding></ion-list>` 

Ihre Template-Struktur wie diese

<ion-list> 
    <ion-item-sliding> 
    <ion-item> 
    </ion-item> 
    <ion-item-options> 
    </ion-item-options> 
    </ion-item-sliding> 
</ion-list> 

sein sollte