摘要：任何彈珠字符串的首字符永遠都表示零幀。基本的彈珠語法時間幀的時間段。完成表示成功完成。錯誤終止的錯誤。它是此的零幀，在前的所有幀都將是無效的。

RxJS使用的越來越多，但發現很多開發者都是使用最基礎的部分用來處理http請求，其實RxJS可以做的事情不僅僅是在對網絡資源處理過程中替代Promise，但如果按照一些已有的網絡博客和分享來看，對二者在實踐上的差異確實體現的不明顯，所以想從測試的角度，和大家一起理解RxJS，發現它更大的威力。

另外其實本人實際上是在網絡上自己學習過一些RxJS的基本概念和使用，并在項目上小小嘗試過RxJS，只是覺得嘗試的不夠徹底，建議看這篇文章的時候最好還是對RxJS的基本概念有一個大的了解。

此文作為對RxJS有了大概了解后，從另一個觀察角度去了解RxJS的一個分享。

接觸過測試的人可能馬上會想知道，你說的是什么測試？在測試金字塔的哪一層？可以TDD嗎?和我們之前了解的測試有什么特別不一樣的？

我說的測試叫彈珠測試（Marble Tests），它屬于底層的單元測試級別，主要用于針對自定義操作符的測試，可以TDD，比較特別的算是它是基于DSL的，你必須了解它的DSL之后才能開始寫測試。

關于如何寫彈珠測試，在官方github上面也有一些文檔可以參考，但不是特別詳細，沒法像一個框架的quick start幫助大家起步。我會嘗試和大家一起動手來寫這些測試（從最基本的環境搭建開始），不會步步到位，但是關鍵步驟都有。

以下是官網隨便找的一個測試，一個簡單的map你可以記住你看完這個測試的感受。

  asDiagram("map(x => 10 * x)")("should map multiple values", function () {
        var a = cold("--1--2--3--|");
        var asubs = "^          !";
        var expected = "--x--y--z--|";
        var r = a.map(function (x) { return 10 * x; });
        expectObservable(r).toBe(expected, { x: 10, y: 20, z: 30 });
        expectSubscriptions(a.subscriptions).toBe(asubs);
    });

我并不知道你的感受，我第一眼是有點懵的反正，原因也很簡單為什么出現 | ^ - 這些字符，它們在這里是干什么的？ 這個時候要放出DSL這個大招了。

前面我們隨意找的一個測試，似乎并不符合測試語義化這一點，其實是因為我們沒有理解它所使用的DSL，此處的DSL可以理解為編寫彈珠測試的時候使用的一種特定的語言，是基于彈珠測試的上下文可以讓機器懂得你語義的一種語言。

我們需要簡單介紹下彈珠測試所使用的DSL中的一些基本知識（此部分信息摘自cn.rx.js.org）

首先彈珠語法是用字符串表示隨“時間”流逝而發生的事件。任何彈珠字符串的首字符永遠都表示“零幀”。“幀”是有點類似于虛擬毫秒的概念。

基本的彈珠語法

"-" 時間: 10“幀”的時間段。

"|" 完成: 表示 Observalbe 成功完成。這是 Observable 生產者所發出的 complete() 信號。

"#" 錯誤: 終止 Observable 的錯誤。 這是 Observable 生產者所發出的 error() 信號。

"a" 任意字符: 所有其他字符表示由 Observalbe 生產者所發出的 next() 信號的值。

"()" 同步分組: 當多個事件需要在同一幀中同步地發出，用圓括號來將這些事件聚集在一起。你可以以這種形式來聚合值、完成或錯誤。 起始 ( 的位置決定了值發出的時間。

"^" 訂閱時間點: (只適用于熱的 Observabe) 顯示測試 Observable 訂閱熱的 Observable 的點。它是此 Observable 的“零幀”，在 ^ 前的所有幀都將是無效的。

Subscription 的彈珠語法

"-" 時間: 10“幀”的時間段。

"^" 訂閱時間點: 顯示訂閱發生的時間點。

"!" 取消訂閱時間點: 顯示取消訂閱發生的時間點。

所以我們嘗試逐行理解下前面出現的測試

  asDiagram("map(x => 10 * x)")("should map multiple values", function () {
       ***
    });

asDiagram是指基于測試生成 PNG 彈珠圖，生成彈珠圖的原理是根據一些結構化的信息，加上一些如imagemagick的庫，就可以生成如下的圖了，更多的操作符對應的彈珠圖例子可以再rxmarbles.com找到。

 var a = cold("--1--2--3--|");
 var asubs = "^          !";
 var expected = "--x--y--z--|";
 var r = a.map(function (x) { return 10 * x; });
 expectObservable(r).toBe(expected, { x: 10, y: 20, z: 30 });
 expectSubscriptions(a.subscriptions).toBe(asubs);

這個測試的步驟是這樣的

創建一個 Observable a,a在第30幀傳入1，第60幀傳入2，第90幀傳入3，第120幀complete。

對a進行map操作的方法r，r將a中的每個值變為原來的10倍

期待對a的進行方法r的操作后，在第30幀收到10，第60幀收到20，第90幀收到30，第120幀結束

期待對a的訂閱在第10幀開始，在第120幀結束

剛剛是我們用官網的例子結合一些輔助網站的資料，對彈珠測試進行的簡單的了解，下面我們開始自己搭建一個可以自己寫彈珠測試、運行測試的環境。

我們先使用和官網一樣的第三方依賴創建環境，等我們慢慢熟悉這套之后，再換用其他第三方的依賴搭建環境。
ready go！

首先我們創建一個ts項目（最近ts寫多了),并使用yarn安裝基本的測試依賴。

  "dependencies": {
    "@types/chai": "^4.0.10",
    "@types/mocha": "^2.2.45",
    "chai": "^4.1.2",
    "mocha": "^4.0.1",
    "rxjs": "^5.5.6",
    "ts-node": "^4.1.0",
    "typescript": "^2.6.2"
  },
  "scripts": {
    "test": "TS_NODE_FAST=true mocha --compilers ts:ts-node/register --opts spec/support/coverage.opts "specs/**/*.spec.ts""
  }

然后我依樣畫瓢的把對TestScheduler的包裝方法copy了下，中間遇到一些寫法不一樣的部分稍作調整。

import { TestScheduler, Observable } from "rxjs";
import { SubscriptionLog } from "rxjs/src/testing/SubscriptionLog";
import { ColdObservable } from "rxjs/src/testing/ColdObservable";
import { HotObservable } from "rxjs/src/testing/HotObservable";
export type observableToBeFn = (marbles: string, values?: any, errorValue?: any) => void;
export type subscriptionLogsToBeFn = (marbles: string | string[]) => void;

const testScheduler =  new TestScheduler(null);
export function hot(marbles: string, values?: any, error?: any): HotObservable {
  return testScheduler.createHotObservable.apply(testScheduler, arguments);
}

export function cold(marbles: string, values?: any, error?: any): ColdObservable {
  return testScheduler.createColdObservable.apply(testScheduler, arguments);
}

export function expectObservable(observable: Observable,
                                 unsubscriptionMarbles: string = null): ({ toBe:observableToBeFn }) {
  return testScheduler.expectObservable.apply(testScheduler, arguments);
}

export function expectSubscriptions(actualSubscriptionLogs: SubscriptionLog[]): ({ toBe: subscriptionLogsToBeFn }) {
  return testScheduler.expectSubscriptions.apply(testScheduler, arguments);
}

export function time(marbles: string): number {
  return testScheduler.createTime.apply(testScheduler, arguments);
}

這樣基本的hot cold方法就可以使用啦！

彈珠測試之所以能稱之為彈珠測試，從字面意思上很容易猜測和彈珠圖相關。
我們已經有一個基本的測試了，下一篇我們開始把它變成彈珠圖吧。