Error during instantiation of List! (ItemSliding -> List), Unit testing ionic2 components with TestComponentBuilder

I have a problem with unit testing <ion-item-sliding> ionic2 component. I have attached my Component , Test and Error below

The component

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;

}

The 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();
    });

});

This is the error I'm getting when the template includes <ion-item-sliding> , but I'm not getting any error with other ionic components.

    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

This is the console log I get, if I put <ion-item> instead of <ion-item-sliding>

<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>

Answers


From the ionic documentation To use a sliding item, add a <ion-item-sliding> component inside of a list. Next, add a component inside of the sliding item to contain the buttons.

kindly wrap the sliding item in list.

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

your template structure should be like this

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

Need Your Help

Extract image from img style="background:url('path') but not from src

c# html c#-4.0 html-parsing

How can i extract the background image given using style attribute in image tag.

What is keeping my simple if statement from working?

jquery if-statement document-ready

Does anyone see any issues or have any idea why it won't work?