操作方法: 単体テストおよびテストカバレッジを QUnit.js と Blanket.js オフィスを構成します。 365 SharePoint アプリ

イントロ

単体テストを模索してきたし、オフィスでオンラインの SharePoint の新しい SharePoint アプリの作業を行う JavaScript のテストカバレッジ 365 スイートです。明白な研究のパスに私を導いた Qunit.js 右の後, 宛先 Blanket.js.

QUnit では、単体テストを設定し、モジュールにグループ化しましょう。モジュールはちょうど関連テストを整理する簡単な方法です。. (私は意図したとおりに使っていますかわからない, しかし、私がこれまでに定義されたテスト一連の小規模でこれまで私の仕事は).

Qunit と Blanket.js の統合し、それ私があった- ともっと重要なは-実際に実行されなかった、テストの実行の過程で JavaScript の実際のラインが表示されます。これは「カバレッジ」-他はないテストによって実行される行がカバー.

良いテスト _ ケースを設定すると、カバレッジの表示, 我々は我々のコードの欠陥を隠しているリスクを減らすことができます。良い回.

Qunit

セットアッププロジェクトを Visual Studio があると仮定すると, パッケージの java スクリプトの設定をダウンロードして起動します。 http://qunitjs.com. JavaScript と対応する CSS をソリューションに追加します。このような鉱山:

図 1

ご覧のとおり, 私が使っていた 1.13.0 このブログを書いた時点で投稿します。. ダウンロードし、CSS ファイルを追加することを忘れないでください。.

その方法のうち, 次のステップは、テストハーネスのいくつかの種類を作成し、Qunit ビットを参照します。 "QuizUtil_test.html"のようにと呼ばれる HTML ページを作成するので"QuizUtil.js"と呼ばれるスクリプトファイルで機能の束をテストしています:

図 2

ここでは、コードです。:

<!DOCTYPE html>
<html xmlns「http =://www.w3.org/1999/xhtml">
<ヘッド>
    <タイトル>Qunit と QuizUtil テスト</タイトル>
    <リンク rel="スタイル シート" href="../CSS/qunit-1.13.0.css" />
    <スクリプト タイプ"テキスト/java スクリプトの設定を =" src="QuizUtil.js" データ カバー></スクリプト>
    <スクリプトの型 ="テキスト/javascript" src ="qunit 1.13.0.js"></スクリプト>
    <スクリプトの型 ="テキスト/javascript" src ="blanket.min.js"></スクリプト>

    <スクリプト>
        モジュール("getIDFromLookup");
        テスト("QuizUtil getIDFromLookupField", 関数 () {
            var ストックホルム = "1;#ポール Galvin";

            等しい(getIDFromLookupField(ストックホルム) + 1, 2), "の ID [" + ストックホルム + "] + 1 2 をする必要があります。";
            等しい(getIDFromLookupField(未定義), 未定義, 「未定義の入力引数が未定義結果を返す必要があります。");
            等しい(getIDFromLookupField(""), 未定義, "空の入力引数が未定義の値を返す必要があります。");
            等しい(getIDFromLookupField("gobbledigood3-thq;dkvn アダ;skfja sdjfbvubvqrubqer0873407t534piutheqw;（ヴァイオリン）"), 未定義,「返す必要があります常に結果のコンバーチブルを整数");
            等しい(getIDFromLookupField("2;#いくつか他の人"), "2", "チェック [2;#いくつか他の人].");
            等しい(getIDFromLookupField("9834524;#long 型の値"), "9834524", 「大きな値のテスト。");
            等号否定(getIDFromLookupField("5;#誰もが", 6), 6, "テスト、等号否定 (5 等しくないです。 6 このサンプルについて: [5;#誰もが]");

        });

        モジュール("htmlEscape");
        テスト("QuizUtil htmlEscape()", 関数 () {
            等しい(htmlEscape("<"), "&lt;", "エスケープ演算子よりも少ない ('<')");
            等しい(htmlEscape("<div クラス = "someclass">いくつかのテキスト</div>"), "&lt;div クラス =&quot;someclass&quot;&gt;いくつかのテキスト&lt;/div&gt;", 」より複雑なテスト文字列です。");
        });

        モジュール("getDateAsCaml");
        テスト("QuizUtil getDateAsCaml()", 関数 () {
            等しい(getDateAsCaml(新機能 日付(「2013/12/31")), "2013年 12 31T:00:00:00", 「テストのハード コーディングされた日付: [12/31/2013]");
            等しい(getDateAsCaml(新機能 日付("01/05/2014")), 「2014年-01-05T:00:00:00", 「テストのハード コーディングされた日付: [01/05/2014]");
            等しい(getDateAsCaml(新機能 日付("01/31/2014")), 「2014年 01 31T:00:00:00", 「テストのハード コーディングされた日付: [01/31/2014]");
            等しい(getTodayAsCaml(), getDateAsCaml(新機能 日付()), "getTodayAsCaml() getDateAsCaml を等しく必要があります。(新しい日付())");
            等しい(getDateAsCaml("ナンセンス値"), 未定義, "ナンセンス値の日付を取得しようとしてください。");
            等しい(getDateAsCaml(未定義), 未定義, "の日付を取得しようとすると、 [未定義] 日付。");
        });

        モジュール("getParameterByName");
        テスト("QuizUtil getParameterByName (クエリ文字列から)", 関数 () {
            等しい(getParameterByName(未定義), 未定義, "を取得しようとすると、未定義のパラメーターは未定義を返す必要があります。");
            等しい(getParameterByName("は存在しません"), 未定義, "我々 は知っている、パラメーターが存在しないときにパラメーター値を取得しようとしてください。");

        });

        モジュール("クッキー");
        テスト(「QuizUtil 様々 な cookie 機能。", 関数 () {
            等しい(setCookie("テスト", "1", -1), getCookieValue("テスト"), "Get 設定私はクッキーが動作するはずです。");
            等しい(setCookie("anycookie", "1", -1), true, "有効な調理返す必要があります 'true'。");
            等しい(setCookie("クレイジー クッキー名 !@#$%"%\^&*(()?/><.,", "1", -1), true, ' 悪い cookie 名を設定する必要があります false を返す ''。");
            等しい(setCookie(未定義, "1", -1), 未定義, 渡すことは、クッキー名として定義されていません。");
            等しい(getCookieValue("は存在しません"), "", "クッキーはテストは存在しません。");
        });

    </スクリプト>
</ヘッド>
<体>
    <div id"qunit ="></div>
    <div id「qunit フィクスチャを ="></div>

</体>
</html>

ここで起こっているいくつかのものがあります。:

私のコードを参照します。 (QuizUtil.js)
Qunity.js を参照します。
いくつかのモジュールを定義します。 (getIDFromLookup, クッキー, その他)
配置する、 <div> ID が"qunit".

[, 私はちょうどこのページを引き出すし、このような何かを得る:

図 3

場合は、上部に見て, いくつかのオプションがあります。, 2 つは面白い:

非表示のテストに合格しました。: かなり明らか。ちょうど問題の領域と多くの散乱を見るあなたの目を助けることができます。.
モジュール: (ドロップ・ダウン): これはちょうどそれらのテストのグループまでテストをフィルター処理します。.

彼ら自身で – いくつかのコメントテストに関して:

それが最初の場所でテスト可能なコードを記述する必要があること言うまでもなく行きます。その規律の強化を助けることができるツールを使用. 例えば, "GetTodayAsCaml と呼ばれる機能を持っていた()”. 入力引数をとらないので、これは非常にテストし、等しいかどうかをテストするには, 我々は常に現在の日付を反映するようにテストコードを更新する必要があります。データの入力パラメーターを追加し、CAML 形式で今日の日付の場合、現在の日付を渡すことによってそれをリファクタリング.
Qunit フレームワークドキュメント独自にテストし、かなり堅牢なようです。等価性テストのような単純なものを行うことができ、ajax スタイルの呼び出しをサポートしています (使用してあなたのお気に入りの曲以上の「本物の」またはモック).
「未定義」で何が起こる-エッジケースを通して考える強制的プロセスを経てもまたは関数に null が渡されます。それはうちこれらのシナリオをテストする死者は簡単です。良いもの.

Blanket.js とカバレッジ

Blanket.js はあなたのテストの実行中に実行されるコードの実際のラインを追跡することによって Qunit を補完します。それはこれにもかかわらずそれは全体の別々のアプリ Qunit に権利を統合します。, それは素敵なを果たしている-実際に 1 つのシームレスなアプリケーションのように見えます.

これはアクションで blanket.js:

図 4

図 5

(実際に上部の「カバレッジを有効にする」チェックボックスをオンをクリックする必要があります。 [図を参照してください。 3] これをできるようにします。)

図で強調表示された行 5 私のテストのいずれかが実行されていません。, それらを引き起こす完全なカバレッジをする場合に実行するテストを考案する必要がありますので.

次の手順で作業 blanket.js を取得します。:

それをダウンロードします。 http://blanketjs.org/.
プロジェクトに追加します。
テストハーネスページを更新します。 (私の場合 QuizUtil_test.html) 次のように:
1. 参照コード
2. 飾るあなた <スクリプト> このような参照します。:

    <スクリプト タイプ"テキスト/java スクリプトの設定を =" src="QuizUtil.js" データ カバー></スクリプト>

Blanket.js は、データ-カバー」属性をピックアップし、その魔法が。それは Qunit にフックします。, 「カバレッジを有効にする」オプションを追加する UI を更新し、出来上がり!

概要 (TL; 博士)

Qunit を使用して、テスト _ ケースを作成.

それをダウンロードします。
プロジェクトに追加します。
テストハーネスページを書く
テストを作成します。
- いくつかは、テストコードをリファクタリングします。
- 創造的であります。! クレイジーだと思う, 不可能なシナリオとそれらをとにかくテスト.

カバレッジを確保するのに blanket.js を使用します。

Qunit が動作を確認してください。
Blanket.js をダウンロードし、プロジェクトに追加
テストハーネスページを追加します。:
- Blanket.js への参照を追加します。
- 「データカバー」属性を追加して <スクリプト> タグ
Qunit テストを実行します。.

私は決してこれを前にいずれかを行なったし、時間のほんの一握りで働いていくつかの初歩的なものを持っていた。

ハッピーテスト!

</終了>

私のブログを購読します。.

私は Twitter の上に従ってください。 http://www.twitter.com/pagalvin

ポール Galvin SharePoint スペース

操作方法: 単体テストおよびテストカバレッジを QUnit.js と Blanket.js オフィスを構成します。 365 SharePoint アプリ

イントロ

Qunit

Blanket.js とカバレッジ

概要 (TL; 博士)

メッセージを残してください返信をキャンセル

イントロ

Qunit

Blanket.js とカバレッジ

概要 (TL; 博士)

メッセージを残してください 返信をキャンセル

メッセージを残してください返信をキャンセル