These are chat archives for canjs/canjs

30th
Jan 2019
RanjanSubbiah-tc
@RanjanSubbiah-tc
Jan 30 17:27

Trying to test that when something is entered in this element, it makes the appropriate DOM changes.

<input type="text" 
    id="channelSearch" 
    class="maxLength:10" 
    placeholder="{{l10n 'Search in channels' }}" 
    on:keyup:value:to="./searchInput"
/>

And this is what I have so far:

describe('channels carousel', () => {
    let componentFragment;
    let componentVM;
    let componentElement;

    const beforeSetup = (vmData) => {
        // get fragment
        componentFragment = stache('<util-tv-channel-search />')(vmData);
        document.body.appendChild(componentFragment);
        componentElement = document.body.querySelector('util-tv-channel-search');
        // create a viewmodel for the element
        componentVM = canViewModel(componentElement);
    };

    before(() => {
        beforeSetup({});
    });

    after(() => {
        document.body.removeChild(componentElement);
    });

    it('should display three icons if search for cartoon', () => {
        // setup
        componentVM.channels = CHANNELS;
        let searchBar = componentElement.querySelector('.searchbar input[type=text]');
        searchBar.value = 'cartoon';
         };

I am trying to trigger the keyup event but unsuccessfully. I tried $('.searchbar input[type=text]').keyup().

Chasen Le Hara
@chasenlehara
Jan 30 18:11
@RanjanSubbiah-tc I think using can-dom-events is what you want, something like domEvents.dispatch(searchBar, 'keyup');
RanjanSubbiah-tc
@RanjanSubbiah-tc
Jan 30 18:30
great - thank you