การทดสอบ

การทดสอบหน่วยสำหรับเทมเพลตที่กำหนดเองของ Google Tag Manager ช่วยคุณตรวจสอบฟังก์ชันการทำงานของเทมเพลตได้ คุณสร้างชุดการทดสอบสำหรับแต่ละเทมเพลตได้ ที่จะเรียกใช้ได้โดยไม่ต้องใช้แท็ก ซึ่งจะช่วยให้คุณทำสิ่งต่อไปนี้ ทดสอบลักษณะการทำงานของเทมเพลตอย่างต่อเนื่องในระหว่างการพัฒนา การทดสอบแต่ละรายการสามารถ ให้ตัวอย่างค่าอินพุต จำลองการเรียกใช้ฟังก์ชัน และยืนยันการทำงานของโค้ด

ข้อจำกัด

  • การทดสอบหน่วยจะไม่ตรวจสอบกฎการตรวจสอบ แต่คุณสามารถตรวจสอบการตรวจสอบได้ด้วยตนเองโดยใช้ปุ่มเรียกใช้โค้ด
  • การตรวจสอบสิทธิ์จะไม่เกิดขึ้นใน API ที่เลียนแบบในการทดสอบหน่วย

คู่มือนี้จะแนะนำวิธีเขียนการทดสอบ 1 หน่วยสำหรับเทมเพลตที่กำหนดเอง ตัวอย่างนี้สร้างเทมเพลตตัวแปรที่ใช้สตริงอินพุตและส่งกลับ เวอร์ชันตัวพิมพ์ใหญ่ของสตริงนั้น

  1. สร้างเทมเพลตตัวแปรใหม่ คลิกเทมเพลตในการนำทางด้านซ้าย แล้วคลิกใหม่ในส่วนเทมเพลตตัวแปร

  2. คลิกช่อง

  3. คลิกเพิ่มช่องแล้วเลือกการป้อนข้อความ ตั้งชื่อช่อง text1 และตั้งชื่อที่แสดงเป็น "Text 1"

  4. ในแท็บโค้ด ให้แทนที่โค้ดเริ่มต้นด้วย JavaScript ที่ทำแซนด์บ็อกซ์นี้ ดังนี้

    let input = data.text1;
return input.toUpperCase();

  5. คลิกการทดสอบเพื่อเปิดแท็บการทดสอบ

  6. คลิกเพิ่มการทดสอบแล้วเปลี่ยนชื่อการทดสอบจาก "การทดสอบที่ไม่มีชื่อ 1" เป็น "จัดการสตริง"

  7. คลิกไอคอนขยาย () เพื่อแสดงเครื่องมือแก้ไข 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 จะแสดงผลออบเจ็กต์ที่ใช้ยืนยันค่าของวิชาได้อย่างคล่องแคล่ว

  8. คลิก ▶ ทำการทดสอบเพื่อทำการทดสอบ ผลลัพธ์ของการทดสอบจะปรากฏในคอนโซล

    ปุ่ม ▶ เรียกใช้การทดสอบจะเรียกใช้การทดสอบที่เปิดใช้ทั้งหมดในเทมเพลตตามลําดับที่แสดง หากต้องการเปลี่ยนลําดับ ให้ใช้ไอคอนลาก (⠿) คุณสามารถเปิดหรือปิดใช้การทดสอบชั่วคราวได้โดยคลิกวงกลมทางด้านซ้ายของชื่อการทดสอบ หากต้องการเรียกใช้การทดสอบเดียว ให้คลิกปุ่ม ▶ ที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปวางบนการทดสอบ

    คอนโซลควรพิมพ์จำนวนการทดสอบทั้งหมดที่ดำเนินการและจำนวนการทดสอบที่ไม่สำเร็จ (หากมี) ในกรณีนี้ มีการดำเนินการทดสอบเพียงครั้งเดียวซึ่งควรผ่าน

  9. คลิกเพิ่มการทดสอบอีกครั้งเพื่อเพิ่มการทดสอบที่ 2 เปลี่ยนชื่อการทดสอบจาก "การทดสอบที่ไม่มีชื่อ 2" เป็น "แฮนเดิลไม่ได้กำหนด"

  10. คลิกที่การทดสอบเพื่อขยายและแสดงตัวแก้ไข JavaScript ที่ทำแซนด์บ็อกซ์ ป้อน JavaScript ที่ทำแซนด์บ็อกซ์ในตัวแก้ไข:

    let variableResult = runCode({});
assertThat(variableResult).isEqualTo(undefined);

  11. คลิก ▶ ทำการทดสอบเพื่อทำการทดสอบทั้งหมดพร้อมกัน เอาต์พุตของการทดสอบจะปรากฏในคอนโซล

    การทดสอบแฮนเดิลที่ไม่ระบุควรล้มเหลว ยินดีด้วย คุณพบข้อบกพร่องแล้ว!

  12. คลิกโค้ดเพื่อย้อนกลับและแก้ไขโค้ด JavaScript ที่ทำแซนด์บ็อกซ์ของเทมเพลต อัปเดต JavaScript ที่ทำแซนด์บ็อกซ์ดังต่อไปนี้

    const getType = require('getType');

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

    โค้ดที่อัปเดตเป็นไปตามแนวทางปฏิบัติแนะนำคือตรวจสอบตัวแปร input ก่อนใช้งาน

  13. คลิกการทดสอบเพื่อกลับไปยังรายการกรอบการทดสอบ

  14. คลิก ▶ เรียกใช้การทดสอบ เพื่อเรียกใช้กรอบการทดสอบทั้งหมดอีกครั้ง ครั้งนี้การทดสอบแฮนเดิลที่ไม่ระบุควรผ่าน

  15. คลิกบันทึก แล้วปิดเครื่องมือแก้ไขเทมเพลต