การทดสอบ

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

ข้อจำกัด

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

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

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

2. คลิกช่อง

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

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

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

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

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

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

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. คลิกบันทึก แล้วปิดเครื่องมือแก้ไขเทมเพลต