Pengujian

Pengujian unit untuk template kustom Google Tag Manager membantu Anda memvalidasi fungsi template. Anda dapat membuat serangkaian pengujian untuk setiap template yang dapat dijalankan tanpa perlu men-deploy tag, yang memungkinkan Anda terus menguji perilaku template selama pengembangan. Setiap pengujian dapat memberikan contoh nilai input, menirukan panggilan fungsi, dan menegaskan perilaku kode.

Batasan

  • Pengujian unit tidak memeriksa aturan validasi, tetapi Anda dapat memeriksa validasi secara manual menggunakan tombol Jalankan Kode button.
  • Pemeriksaan izin tidak terjadi di API tiruan dalam pengujian unit.

Panduan ini akan menjelaskan kepada Anda cara menulis pengujian unit untuk template kustom. Contoh ini membuat template variabel yang mengambil string input dan menampilkan versi huruf besar dari string tersebut.

  1. Buat template variabel baru. Klik Template di navigasi sebelah kiri, lalu klik Baru di bagian Template Variabel.

  2. Klik Kolom.

  3. Klik Tambahkan Kolom, lalu pilih Input teks. Beri nama kolom text1, lalu tetapkan nama tampilan ke "Text 1".

  4. Di tab Kode, ganti kode default dengan JavaScript yang dilengkapi sandbox ini:

    let input = data.text1;
    return input.toUpperCase();
    
  5. Klik Pengujian untuk membuka tab pengujian.

  6. Klik Tambahkan Pengujian dan ubah nama pengujian dari "Untitled test 1" menjadi "Handles strings".

  7. Klik ikon luaskan () untuk menampilkan editor JavaScript dengan sandbox di pengujian. Ganti kode menggunakan JavaScript dengan sandbox ini:

    // 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');
    

    Pengujian ini meneruskan string 'this is a test' ke variabel dan memverifikasi bahwa variabel menampilkan nilai 'THIS IS A TEST' yang diharapkan. API runCode digunakan untuk menjalankan kode template di tab Kode. Argumen ke runCode adalah objek yang digunakan sebagai data global. API assertThat menampilkan objek yang dapat digunakan untuk membuat pernyataan secara lancar tentang nilai subjek.

  8. Klik ▶ Jalankan Pengujian untuk menjalankan pengujian. Output pengujian akan muncul di Konsol.

    Tombol ▶ Jalankan Pengujian menjalankan semua pengujian yang diaktifkan di template, dalam urutan yang ditampilkan. Untuk mengubah urutan, gunakan ikon tarik (⠿). Pengujian dapat diaktifkan atau dinonaktifkan untuk sementara dengan mengklik lingkaran di sebelah kiri nama pengujian. Untuk menjalankan pengujian tunggal, klik tombol ▶ yang muncul saat Anda menggerakkan mouse ke pengujian.

    Konsol akan mencetak jumlah total pengujian yang dijalankan dan jumlah pengujian yang gagal, jika ada. Dalam contoh kasus ini, hanya satu pengujian yang dijalankan dan seharusnya berhasil.

  9. Klik Tambahkan Pengujian lagi untuk menambahkan pengujian kedua. Ubah nama pengujian dari "Untitled test 2" menjadi "Handles undefined".

  10. Klik pengujian untuk meluaskannya dan menampilkan editor JavaScript dengan sandbox. Masukkan JavaScript dengan sandbox di editor:

    let variableResult = runCode({});
    assertThat(variableResult).isEqualTo(undefined);
    
  11. Klik ▶ Jalankan Pengujian untuk menjalankan semua pengujian sekaligus. Output pengujian akan muncul di konsol.

    Pengujian Handles undefined akan gagal. Selamat, Anda menemukan bug.

  12. Klik Kode untuk kembali dan mengedit kode JavaScript dengan sandbox di template. Perbarui JavaScript dengan sandbox sebagai berikut:

    const getType = require('getType');
    
    let input = data.text1;
    if (getType(input) !== 'string') {
      return input;
    }
    return input.toUpperCase();
    

    Kode yang diperbarui ini mengikuti praktik terbaik untuk memvalidasi variabel input sebelum menggunakannya.

  13. Klik Pengujian untuk kembali ke daftar kasus pengujian.

  14. Klik ▶ Jalankan Pengujian untuk menjalankan semua kasus pengujian lagi. Kali ini pengujian Handles undefined seharusnya berhasil.

  15. Klik Simpan, lalu tutup Editor Template.