Невозможно транслировать события в фиктивном источнике DOM в тесте CycleJs - PullRequest
Новая
       12

Невозможно транслировать события в фиктивном источнике DOM в тесте CycleJs

0 голосов
/ 11 декабря 2018

С учетом изолированного компонента, созданного с помощью CycleJ (компонент работает нормально): 

import isolate from '@cycle/isolate';
import { div, ul, li, a } from '@cycle/dom';

function intent(domSource){
    const changeString$ =  domSource
        .select('.string').events('click')
        .map( ev => ev.target.dataset.position);

    return { changeString$ };
}

function model(actions, props$){

    const { changeString$ } = actions;

    return props$.map( props => {

        return changeString$
            .startWith(props.initialString)
            .map( activePosition => ({ activePosition, preset : props.preset }));

    }).flatten().remember();
}

function view(state$){
    return state$.map( state => (
        div(
            ul(
                state.preset.map( (string, position) => (
                    li(
                        a({
                            attrs : {
                                href : '#',
                                'data-pitch' : string.pitch,
                                'data-frequency' : string.frequency,
                                'data-position' : position,
                                class : ['string', parseInt(state.activePosition, 10) === position ? 'active' : ''].join(' ')
                            }
                        },
                        string.name)
                    )
                ))
            )
        )
    ));
}

function stringSelector(sources){
    const actions = intent(sources.DOM);
    const state$  = model(actions, sources.props);
    const vdom$   = view(state$);

    return {
        DOM: vdom$,
        value: state$
    };
}

export default isolate(stringSelector, '.string-selector');

У меня есть Пытался проверить поведение, используя @cycle/time: 

import test from 'tape';
import xs   from 'xstream';
import { mockDOMSource } from '@cycle/dom';
import { mockTimeSource } from '@cycle/time';
import stringSelector from '../../../src/js/component/stringSelector/index.js';

test('string selector', t => {

    t.plan(1);

    const Time = mockTimeSource();

    const e2Click$       = Time.diagram('-------x-------|');
    const a2Click$       = Time.diagram('---x------x----|');
    const expectedState$ = Time.diagram('0--1---0--1----|');

    const DOM = mockDOMSource({
        '.string[data-picth=e2]': {
            click: e2Click$
        },
        '.string[data-picth=a2]': {
            click: a2Click$
        },
    });

    const selector = stringSelector({
        DOM,
        props: xs.of({
            preset: {
                strings: [{
                    name: 'E',
                    pitch: 'e2',
                    frequency: 82.41
                }, {
                    name: 'A',
                    pitch: 'a2',
                    frequency: 110.0
                }]
            },
            initialString: 0
        })
    });

    const activePosition$ = selector.value.map( state => state.activePosition );

    Time.assertEqual(activePosition$, expectedState$);

    Time.run(t.end.bind(t));
});

Но поток activePosition$ заканчивается напрямую.Я не знаю, происходит ли это из-за того, что DOM поддразнивается (события, кажется, не инициированы) или из-за того, как я строю поток activePosition$?

При выполнении тестаследующее сообщение: 

Expected

0--1---0--1----|

Got

(0|)

Failed because:

 * Length of actual and expected differs
 * Expected type next at time 0 but got complete
 * Expected stream to complete at 60 but completed at 0

1 Ответ

0 голосов
/ 11 декабря 2018

Мне кажется, я заметил проблему.

Дело в том, что с помощью смоделированного драйвера DOM вам нужно создать событие для того же селектора, который использовался в DOM.select('...').events.

В вашем случае вы выбираете .string, но вы имитируете событие на .string[data-pitch=..], которое затем не будет совпадать на стороне приложения.

Имейте в виду, что в этом не задействован настоящий DOMна стороне тестирования.В вашем случае, когда вы имитируете щелчок по селектору .string, независимо от того, что визуализирует ваш компонент, он будет генерировать только одно событие.

Я думаю, что вы хотите достичь здесь, чтобы подделать данные, которые есть в событии.

Вы, вероятно, можете сделать что-то вроде этого: 

const clicks = Time.diagram('---0---1----0---|').map(position => {
    // this will create a fake DOM event that contains the properties you are reading
    return {target: {dataset: {position: position }}}
})

const DOM = mockDOMSource({
    '.string': {
        click: clicks
    }
});
...