การทดสอบ

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

ข้อจำกัด

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

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

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

2. คลิกช่อง

3. คลิกเพิ่มช่องแล้วเลือกการป้อนข้อความ ตั้งชื่อช่อง text1 และตั้งชื่อที่แสดงเป็น "ข้อความ 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. คลิก ♪ ทําการทดสอบ เพื่อทําการทดสอบ เอาต์พุตของการทดสอบจะปรากฏในคอนโซล

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

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

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

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

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

    หมายเหตุ: runCode ถูกเรียกโดยมีออบเจ็กต์ว่างเปล่า ซึ่งหมายความว่าค่าในช่อง text1 จะเป็น undefined ในกรอบการทดสอบนี้

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

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

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

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

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

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

14. คลิกเพลย์ลิสต์ ทดสอบ เพื่อทํากรอบการทดสอบทั้งหมดอีกครั้ง ซึ่งควรผ่านการทดสอบแฮนเดิลที่ไม่ได้กําหนด

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