การทดสอบอินพุต เอาต์พุต และ DOM
ตรวจสอบเอาต์พุตที่เรนเดอร์และเหตุการณ์
การทดสอบอินพุต เอาต์พุต และ DOM เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทดสอบสัญญาของ Component
component สื่อสารผ่าน inputs (ข้อมูลขาเข้า) outputs (เหตุการณ์ขาออก) และ rendered DOM การทดสอบ component ที่ดีควบคุมพื้นผิวทั้งสามนี้และตรวจสอบผลลัพธ์ที่มองเห็นได้ ไม่ใช่รายละเอียดการทำงานภายใน
การกำหนด Input
กำหนดค่าให้คุณสมบัติ input ของอินสแตนซ์ component จากนั้นเรียก detectChanges() เพื่อเรนเดอร์ใหม่ สำหรับ signal inputs ให้กำหนดค่าผ่าน fixture.componentRef.setInput()
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();การอ่าน DOM ด้วย querySelector
ใช้ fixture.nativeElement.querySelector() เพื่อค้นหาองค์ประกอบที่เรนเดอร์แล้ว และตรวจสอบข้อความหรือแอตทริบิวต์ขององค์ประกอบเหล่านั้น
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement และ By.css
fixture.debugElement.query(By.css(...)) จะคืนค่า wrapper DebugElement โดย .nativeElement ของมันคือโหนด DOM และคุณจะได้การ query ที่มีความสามารถมากขึ้นและทำงานได้ในหลายแพลตฟอร์ม
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');queryAll สำหรับรายการ
สำหรับองค์ประกอบที่เกิดซ้ำ (เช่นลูป @for) ให้ใช้ queryAll เพื่อรับผลลัพธ์ที่ตรงกันทั้งหมดและตรวจสอบจำนวน
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');การจำลองการคลิก
เรียกใช้เหตุการณ์ DOM เพื่อทดสอบการโต้ตอบ ใช้ triggerEventHandler กับ DebugElement หรือเรียก native .click() จากนั้นเรียก detectChanges()
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);การทดสอบเหตุการณ์ Output
สมัครรับ output ของ component (EventEmitter หรือ output signal) ก่อนเรียกใช้การกระทำที่ควรส่งเหตุการณ์นั้นออกมา
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');การตรวจสอบแอตทริบิวต์และคลาส
คุณสามารถตรวจสอบคลาสและแอตทริบิวต์แบบมีเงื่อนไขที่ขึ้นอยู่กับ input ได้
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);การอัปเดต Input ของฟอร์ม
หากต้องการทดสอบช่องข้อความ ให้กำหนดค่าของ input แล้วส่งเหตุการณ์ input เพื่อให้ binding ของ Angular อัปเดต
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');เหตุผลที่ต้องเรียก detectChanges หลังการเปลี่ยนแปลงทุกครั้ง
การทดสอบทั้งแบบอิง Zone และแบบไร้ Zone ต้องเรียก detectChanges() อย่างชัดเจนหลังจากเปลี่ยนสถานะ เพราะการทดสอบทำงานอยู่นอก tick อัตโนมัติของ Angular การลืมเรียกใช้เป็นสาเหตุอันดับหนึ่งที่ทำให้ "การตรวจสอบของฉันเห็น DOM ที่ยังไม่อัปเดต"
ทดสอบพฤติกรรม ไม่ใช่รายละเอียดภายใน
ควรตรวจสอบผลลัพธ์ที่เรนเดอร์และเหตุการณ์ที่ส่งออกมา แทนการตรวจสอบฟิลด์ส่วนตัว วิธีนี้ทำให้การทดสอบทนทานต่อการเปลี่ยนแปลง เพราะการปรับโครงสร้างภายในไม่ควรทำให้การทดสอบที่ยังคงให้พฤติกรรมซึ่งผู้ใช้มองเห็นเหมือนเดิมล้มเหลว
ตรวจสอบอย่างรวดเร็ว
API ใดจะมอบ DebugElement ให้คุณ
สรุปทบทวน
คุณควบคุม inputs ผ่าน setInput อ่าน DOM ด้วย querySelector และ By.css ดักรับ outputs ด้วยการสมัครรับข้อมูล และจำลองเหตุการณ์คลิกและ input โปรดเรียก detectChanges() หลังการเปลี่ยนแปลงทุกครั้ง และตรวจสอบพฤติกรรมที่ผู้ใช้มองเห็น
คำถามที่พบบ่อย
บทเรียน “การทดสอบอินพุต เอาต์พุต และ DOM” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทดสอบอินพุต เอาต์พุต และ DOM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบอินพุต เอาต์พุต และ DOM”
ตรวจสอบเอาต์พุตที่เรนเดอร์และเหตุการณ์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การทดสอบอินพุต เอาต์พุต และ DOM” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- TestBed และฟิกซ์เจอร์คอมโพเนนต์
- การทดสอบอินพุต เอาต์พุต และ DOM
- การจำลองบริการและสิ่งที่ต้องพึ่งพา
- การทดสอบ Signals และโค้ดอะซิงโครนัส