1 月 | 2014 | ポール Galvin SharePoint スペース

[TL;DR のバージョン: 非同期呼び出しの結果を格納するクッキーを使用します。; 過去の非同期呼び出しの結果を直ちに表示し、ページの読み込み後にそれらを検証します。]

私は取り組んできたイントラネットの SharePoint サイト、クライアントの機能, 他のものの間で, 様式化された 2 番目のナビゲーションメニューオプションは、正規の古いカスタムリストを介して管理されます。アイデアは、クライアントに影響を与えるまたはそれが出すグローバルナビゲーションによって影響されることがなく「自分」のサイトのメニューを制御するを取得します。.

(別のポストには根本的にサイトの挙動についてのほぼすべてを変更するいくつかの CSS と js ファイルを読み込みます HTML ファイルを指す CEWP を追加する方法について信じられないほど破壊的な何かがあります。)

この非常に単純なコード:

ページの読み込みが完了し、残りの部分または lists.asmx または何を使用してリストからメニュー項目をロードするを呼び出す非同期に待機します。
JQuery を使ってください。, 場合束を動的に読み込みます <李>親内の <ul> (キリスト教ピンダーここを参照してください、簡単に割り切っているこのペアマイクロホンの説明)
すべての書式設定に CSS を使用します。
利益!

咽頭痛スポットここでは、誰も 1 つのサイトのページをヒットするたびに, そのユーザーの web ブラウザーは、リストから項目を取得に達しています。安定し、完全な開発が完了し、テストすることが証明されています, この呼び出しは必要以上 99% まれ、メニューから時間を変更します。ハイパー ajaxy web サイトのこの勇敢な新しい世界で共通である奇妙な UI に影響しています – ページがレンダリングされ、だけにしては、メニューのレンダリングします。神経質であり、私の見解で気が散る。神経質. だから, キャッシュ。

Thusly、ロジックを変更:

最後に読んだようにメニューを含む、ブラウザーで cookie を探します

場合が見つかりました, すぐにレンダリングされます。ページの読み込みが完了するを待ってはいけない。 (あなたの HTML は、ここで戦略的に配置を確認する必要があります。, 行うは難しいではないです。).

ページの読み込みが完了し、残りの部分または lists.asmx または何を使用してリストからメニュー項目をロードするを呼び出す非同期に待機します。
私はクッキーに対して得た比較します。

それと一致する場合, 停止
それ以外の場合, jQuery を使ってください。, 場合束を動的に読み込みます <李>では <ul>

すべての書式設定に CSS を使用します。
利益!

あなたのいくつかと言うとしています。, "ねえ! とにかく、メニューを読んでいるのでここに実際キャッシュことはできません。 ひとつひとつの時間.” あなたは正しい – を与えていないよ、サーバー任意区切りの種類。しかし、HTML ペイロードを完全にレンダリングの呼び出し非同期は、ページの初期後に起こる, それは「感じ」より、ユーザーに対応します。メニューレンダリングはかなり限り、ページを描画します。変更する場合は、メニュー, ユーザーがメニューの神経質な再描画を受ける, その 1 つの時間だけが.

このキャッシュをより効果的し、同時に、サーバーを手助けするいくつかの方法があります。:

「Cookie のキャッシュ」は最小の有効な規則に含める 24 時間またはいくつか他の時間枠. 有効期限が切れた cookie がない限り、, クッキーのメニューのスナップショットを使用して、サーバーをヒットしません。.

それはすべて今気になることも. :).

誰もがここの巧妙なアイデアを持っている場合私はそれらを知っているみたい.

そして最後に-この手法は他のもの使用ことができます。このクライアントのページのさまざまなページにデータ駆動型のものの数, それらの多くは比較的稀に変更します。 (週に一度あるいは月に一度のような). 特定の機能領域を対象する場合, ローカル cookie ストアからコンテンツを引っ張ってくるとすぐにレンダリングして、応答性の高い UI を与えることができます。ない任意のサイクル、サーバーを保存している場合でも、それユーザーに速く感じる。あなた ことができます。 このローカル cookie のキャッシュを無効にするいくつかの条件とトリガーの決定によって、サーバ・サイクルを保存します。それはすべての状況と芸術的なものと最も本当に楽しい :).

</終了>

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

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

イントロ

単体テストを模索してきたし、オフィスでオンラインの 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 スペース

月別アーカイブ: 1 月 2014

JavaScript で貧乏人をキャッシュします。

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

イントロ

Qunit

Blanket.js とカバレッジ

概要 (TL; 博士)