Setting values programmatically with Angular 2

3 posts, 0 answers
  1. Prashant
    Prashant avatar
    2 posts
    Member since:
    Oct 2017

    Posted 12 Oct 2017 Link to this post

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

  2.
  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    820 posts

    Posted 16 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Prashant
    Prashant avatar
    2 posts
    Member since:
    Oct 2017

    Posted 16 Oct 2017 in reply to Dimiter Topalov Link to this post

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