mockDOMSource를 사용하여 Cycle.js에서 작업 스트림을 테스트하는 방법?

Question

아마도 사이클/시간을 사용하는 것이 더 나은 방법이라는 것을 알고 있습니다.하지만 저는 기본을 이해하려고 노력하고 있습니다. 어쨌든 내 동작 $ 스트림이 실행중인 것 같지 않습니다. 난 xs.periodic을 사용하여 여러 모의 국장을 만들려고했습니다. 테스트 프레임 워크는 모카입니다. 모카에 우리가 done 콜백에 걸릴하고 우리의 테스트가 완료 될 때 호출 할 필요 그래서, 비동기이기 때문에 테스트가 실행되고 있지

import 'mocha'; 
import {expect} from 'chai'; 
import xs from 'xstream'; 
import Stream from 'xstream'; 
import {mockDOMSource, DOMSource} from '@cycle/dom'; 
import {HTTPSource} from '@cycle/http'; 
import XStreamAdapter from '@cycle/xstream-adapter'; 

export interface Props { 
    displayAbs: boolean 
} 

export interface ISources { 
    DOM: DOMSource; 
    http: HTTPSource; 
} 

function testIntent(sources: ISources):Stream<Props> { 
    return xs.merge<Props>(
     sources.DOM 
      .select('.absShow').events('click') 
      .mapTo({ displayAbs: true }), 
     sources.DOM 
      .select('.absHide').events('click') 
      .mapTo({ displayAbs: false }) 
).startWith({displayAbs: false }); 
} 

describe('Test',()=>{ 

    describe('intent()',()=>{ 

    it('should change on click to shows and hides',() => { 
     let listenerGotEnd = false; 

     const mDOM$: Stream<DOMSource> = xs.periodic(1000).take(6).map(ii => { 
     if (ii % 2 == 0) { 
      return mockDOMSource(XStreamAdapter, { 
      '.absShow': {'click': xs.of({target: {}})} 
      }) 
     } 
     else { 
      return mockDOMSource(XStreamAdapter, { 
      '.absHide': {'click': xs.of({target: {}})} 
      }) 
     } 
     }); 

     const action$ = mDOM$.map(mDOM => testIntent({ 
     DOM: mDOM, 
     http: {} as HTTPSource, 
     })).flatten(); 


     action$.addListener({ 
     next: (x) => { 
      console.log("x is " + x.displayAbs); 
     }, 
     error: (err) => { 
      console.log("error is:" + err); 
      throw err; 
     }, 
     complete:() => { listenerGotEnd = true; } 
     }); 
     expect(listenerGotEnd).to.equal(true); 
    }); 

    });/* end of describe intent */ 

}); 

Answer 1

주된 이유입니다. @cycle/time를 사용하지 않고

이

, 이것이 내가이 시험에 다음과 같이 쓸 수있다 :

import 'mocha'; 
import {expect} from 'chai'; 
import xs, {Stream} from 'xstream'; 
import {mockDOMSource, DOMSource} from '@cycle/dom'; 
import XStreamAdapter from '@cycle/xstream-adapter'; 

export interface Props { 
    displayAbs: boolean 
} 

export interface ISources { 
    DOM: DOMSource; 
} 

function testIntent(sources: ISources):Stream<Props> { 
    return xs.merge<Props>(
     sources.DOM 
      .select('.absShow').events('click') 
      .mapTo({ displayAbs: true }), 
     sources.DOM 
      .select('.absHide').events('click') 
      .mapTo({ displayAbs: false }) 
).startWith({displayAbs: false }); 
} 

describe('Test',() => { 
    describe('intent()',() => { 
    it('should change on click to shows and hides', (done) => { 
     const show$ = xs.create(); 
     const hide$ = xs.create(); 

     const DOM = mockDOMSource(XStreamAdapter, { 
     '.absShow': { 
      'click': show$ 
     }, 

     '.absHide': { 
      'click': hide$ 
     } 
     }); 

     const intent$ = testIntent({DOM}); 

     const expectedValues = [ 
     {displayAbs: false}, 
     {displayAbs: true}, 
     {displayAbs: false}, 
     ] 

     intent$.take(expectedValues.length).addListener({ 
     next: (x) => { 
      expect(x).to.deep.equal(expectedValues.shift()); 
     }, 
     error: done, 
     complete: done 
     }); 

     show$.shamefullySendNext({}); 
     hide$.shamefullySendNext({}); 
    }); 
    }); 
}); 

이 테스트에서 11ms에서 실행, 공정한 조금 빠른 비교를 위해 xs.periodic(1000).take(6)

을 사용하는 것보다, 여기에 내가 얼마나입니다 @cycle/time 함께 작성합니다

import {mockTimeSource} from '@cycle/time' 

describe('Test',() => { 
    describe('intent()',() => { 
    it('should change on click to shows and hides', (done) => { 
     const Time = mockTimeSource(); 

     const show$  = Time.diagram('---x-----'); 
     const hide$  = Time.diagram('------x--'); 
     const expected$ = Time.diagram('f--t--f--', {f: false, t: true}); 

     const DOM = mockDOMSource({ 
     '.absShow': { 
      'click': show$ 
     }, 

     '.absHide': { 
      'click': hide$ 
     } 
     }); 

     const intent$ = testIntent({DOM}).map(intent => intent.displayAbs); 

     Time.assertEqual(intent$, expected$); 

     Time.run(done); 
    }); 
    }); 
}); 

첫 번째 버전은 사이클 @/시간 운데 당신을 위해 무엇을하고 있는지 효과적이다 두건, 이것은 그것을 작성하는 단지 약간 좋은 방법입니다. 더 나은 오류 메시지를 갖는 것도 좋습니다.