给定一个用 CycleJs 构建的隔离组件(该组件工作正常):
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