Cycle.jsでアクションのストリームをテストするためにmockDOMSourceを使用するには？

Question

サイクル/時間を使用する方が良い方法があるかもしれませんが、基本を理解しようとしています。どういうわけか、私の行動$ストリームは動いていないようです。私はxs.periodicを使って複数の模擬ドームを構築しようとしました。テストフレームワークはモカです。

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

それは非同期なので、テストが実行されていない主な理由はあるので、モカで、我々はdoneコールバックで取り、その後、私たちのテストが行​​われたときに、それを呼び出す必要があります。 @cycle/timeを使用せずに

が、これは私がこのテストを書くでしょうか：このテストは、比較のためにxs.periodic(1000).take(6)

を使用するより公正少し速くなる、11ms以下までに実行さ

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({}); 
    }); 
    }); 
}); 

、ここでどのように私はあります@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); 
    }); 
    }); 
}); 

最初のバージョンはサイクル@ /時間はアンクルあなたのためにやっている事実でありますフードは、これを書いているやや素敵な方法です。より良いエラーメッセージがあることもうれしいです。