Setting values programmatically with Angular 2

[Prashant]

Hi,

 

Am using multiselect with Angular2. As part of our automation suite, am trying to set values programmatically. I can't find any documentation around testing it with '@angular/core/testing'. Are there any events/attributes which will make it set the values (with debugElement/nativeElement)? 

[Dimiter Topalov]

Hello Prashant,

The value of the MultiSelect component can be set either via the value property or via ngModel binding:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/

You can obtain our source code and check out all tests, written for the MultiSelect component (available in the /test folder of the kendo-angular-dropdowns package):

https://www.telerik.com/kendo-angular-ui/components/installation/source-code/

Here are some sample tests that verify the component's value that can point you in the right direction:

describe('kendo-multiselect', () => {

    @Component({

        template: ''

    })

    class TestComponent {

        @ViewChild('container', { read: ViewContainerRef })

        public container: ViewContainerRef;

 

        public get viewContainerSettings(): PopupSettings {

            return {

                appendTo: this.container

            };

        }

        public valuePrimitive: boolean;

        public spy: any = jasmine.createSpy("globalSpy");

        public primitiveData: any[] = ["Item 1", "Item 2", "Item 3"];

        public singlePrimitiveValue: any = ['Item 2'];

        public multiplePrimitiveValue: any = ['Item 2', 'Item 3'];

        public customPrimitiveValue: any = ['Custom'];

        public invalidPrimitiveValue: any = [42];

        public selected: any = [1];

        public complexData: any[] = [

            { text: "Item 1", value: 1 },

            { text: "Item 2", value: 2 },

            { text: "Item 3", value: 3 },

            { text: "Item 4", value: 4 }

        ];

        public complexData2: any[] = [

            { text: "Item 0", value: 0 },

            { text: "Item 1", value: 1 }

        ];

        public selectedObject: any = [{ text: "Item 1", value: 1 }];

        public selectedObjects: any = [{ text: "Item 1", value: 1 }, { text: "Item 2", value: 2 }];

        public nonExistentComplexValue: any = [{ text: "Item 7", value: 7 }];

 

        public complexValueChange(e: any): void {

            this.selectedObjects = e;

        }

    }

 

    let rtl: boolean = false;

 

    beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [TestComponent],

            imports: [MultiSelectModule, FormsModule],

            providers: [

                { provide: RTL, useFactory: () => rtl },

                {

                    provide: POPUP_CONTAINER,

                    useFactory: () => ({ nativeElement: document.body } as ElementRef)

                }

            ]

        });

    }));
...

describe('rendering', () => {
...
it('pressing clear button should clear value', () => {

            const fixture: any = createFixture(`

                <kendo-multiselect

                    [data]="complexData"

                    [textField]="'text'"

                    [value]="selected"

                    [valuePrimitive]="true"

                    [valueField]="'value'">

                </kendo-multiselect>

            `);

            fixture.detectChanges();

            let multiselect: any = fixture.debugElement.query(By.css('kendo-multiselect')).componentInstance;

 

            multiselect.clearAll({

                stopImmediatePropagation: () => {/*tslint metadata*/ }

            });

            expect(multiselect.value).toEqual([]);

        });
...

...
it('static complex data w/ existing initial primitive value & valuePrimitive true', () => {

            const fixture: any = createFixture(`

                <kendo-multiselect

                    [data]="complexData"

                    [textField]="'text'"

                    [valueField]="'value'"

                    [valuePrimitive]="true"

                    [value]="selected"

                >

                </kendo-multiselect>

            `);

 

            fixture.detectChanges();

            let multiselect: any = fixture.debugElement.query(By.css('kendo-multiselect')).componentInstance;

            expect(multiselect.tags).toEqual([{ text: "Item 1", value: 1 }]);

            expect(multiselect.value).toEqual([1]);

        });
...

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Prashant]

Thanks Dimiter. This definitely helps. Getting the component instance/tag is the key I missed. Thanks for pointing to source, that helps as well.