Google タグ マネージャー カスタム テンプレートの「単体テスト」は、テンプレートの機能の検証に役立ちます。テストはタグをデプロイしなくても実行でき、テンプレートごとにテスト群を作成すれば、開発中のテンプレートの動作を継続的にテストできます。各テストでは、サンプル入力値の提供、関数の疑似呼び出し、コード動作の指定が可能です。
制限事項
- 単体テストは検証ルールのチェックは行いませんが、[コードを実行] ボタンを押せば手動で検証をチェック可能です。
- 単体テスト内の疑似 API では、権限チェックは行われません。
このガイドでは、カスタム テンプレートの単体テストの記述方法について説明します。この例では、受け取った文字列をすべて大文字に変換したものを返す変数テンプレートを作成します。
新しい変数テンプレートを作成します。左側のナビゲーションで [テンプレート] をクリックし、[変数テンプレート] セクションにある [新規] ボタンをクリックします。
[フィールド] をクリックします。
[フィールドを追加] をクリックし、[テキスト入力] を選択します。フィールド名を
text1
に、表示名を「テスト 1」に設定します。[コード] タブで、デフォルトのコードをこのサンドボックス化された JavaScript に置き換えます。
let input = data.text1; return input.toUpperCase();
[テスト] をクリックしてテストタブを開きます。
[テストの追加] をクリックし、テスト名を「Untitled 1」から「文字列の処理」に変更します。
展開アイコン(expand_more)をクリックして、テストのサンドボックス化された JavaScript エディタを表示します。コードをこのサンドボックス化された JavaScript に置き換えます。
// Call runCode to run the template's code with a lowercase string let variableResult = runCode({text1: 'this is a test'}); // Validate that the result of runCode is an uppercase string. assertThat(variableResult).isEqualTo('THIS IS A TEST');
このテストで文字列
'this is a test'
を変数に渡し、変数が期待値である'THIS IS A TEST'
を返すことを確認します。runCode
API を使用して、[コード] タブのテンプレート コードを実行します。runCode
の引数は、データ グローバルとして使用されるオブジェクトです。assertThat
API により、サブジェクトの値に関するアサーションをスムーズに行うために使用できるオブジェクトが返されます。[▶ テストを実行] をクリックしてテストを実行します。テストの出力がコンソールに表示されます。
[▶ テストを実行] ボタンを押すと、テンプレート内の有効なすべてのテストが、表示された順序で実行されます。順序を変更するには、ドラッグ アイコン(⠿)を使用します。テスト名の左側にある丸をクリックすると、テストを一時的に有効または無効にできます。単体テストを実行するには、マウスをテストの上に移動したときに表示される ▶ ボタンをクリックします。
コンソールに、実行したテストの合計数と、失敗したテストがある場合はその数が表示されます。この場合、テストが 1 つだけ実行され、合格しています。
[テストを追加] をもう一度クリックして、2 つ目のテストを追加します。テストの名前を「Untitled test 2」から「Handles undefined」に変更します。
テストをクリックして展開し、サンドボックス化された JavaScript エディタを表示します。エディタでサンドボックス化された JavaScript を入力します。
let variableResult = runCode({}); assertThat(variableResult).isEqualTo(undefined);
[▶ テストを実行] をクリックして、すべてのテストを一度に実行します。テストの出力がコンソールに表示されます。
「Handles undefined」テストは失敗します。これで、バグが見つかりました。
[コード] をクリックして、テンプレートのサンドボックス化された JavaScript コードに戻り、編集します。サンドボックス化された JavaScript を次のように更新します。
const getType = require('getType'); let input = data.text1; if (getType(input) !== 'string') { return input; } return input.toUpperCase();
更新されたコードは、
input
変数の検証のおすすめの方法を実施してから、使用します。[テスト] をクリックして、テストケースのリストに戻ります。
[▶ テストを実行] をクリックして、すべてのテストケースを再度実行します。今回は「Handles undefined」のテストは合格するはずです。
[保存] をクリックし、テンプレート エディタを閉じます。