Angular Academy · บทเรียน

การทดสอบ Signals และโค้ดอะซิงโครนัส

ทดสอบพฤติกรรมแบบรีแอกทีฟและแบบอะซิงโครนัส

การทดสอบ Signals และโค้ดอะซิงโครนัส เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

งานแบบอะซิงโครนัสคือส่วนที่ยากของการทดสอบ

คอมโพเนนต์จริงทำงานแบบอะซิงโครนัส เช่น ตัวจับเวลา พรอมิส อินพุต HTTP และอินพุตที่หน่วงเวลา การทดสอบต้องควบคุมเวลาเพื่อให้การตรวจสอบทำงานหลังงานอะซิงโครนัสเสร็จสิ้น Angular มี fakeAsync, tick และ flush สำหรับควบคุมเวลาอย่างกำหนดผลลัพธ์ได้แน่นอน

การทดสอบสัญญาณ

สัญญาณ จะถูกอ่านเหมือนฟังก์ชัน การทดสอบจึงทำได้ตรงไปตรงมา คือเรียกสัญญาณแล้วตรวจสอบค่า จากนั้นอัปเดตค่าและตรวจสอบอีกครั้ง

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

สัญญาณที่คำนวณได้อัปเดตโดยอัตโนมัติ

computed จะคำนวณใหม่เมื่อสิ่งที่ต้องพึ่งพาเปลี่ยนแปลง ในการทดสอบ ให้เปลี่ยนสัญญาณต้นทางแล้วอ่านค่าที่คำนวณได้ ไม่จำเป็นต้องคำนวณใหม่ด้วยตนเอง

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

สัญญาณและ DOM

หากต้องการเห็นการเปลี่ยนแปลงของสัญญาณสะท้อนในเทมเพลต ให้เรียก detectChanges() หลังอัปเดตสัญญาณ เช่นเดียวกับสถานะอื่น ๆ

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

ทำความรู้จักกับ fakeAsync

ห่อการทดสอบด้วย fakeAsync เพื่อเข้าสู่เขตเวลาจำลอง ตัวจับเวลาและงานขนาดเล็กจะถูกจัดคิวแทนที่จะทำงานทันที และคุณจะเลื่อนเวลาเหล่านั้นด้วยตนเอง วิธีนี้ทำให้การทดสอบแบบอะซิงโครนัสทำงานเหมือนแบบซิงโครนัสและมีความน่าเชื่อถือ

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

เลื่อนเวลาด้วย tick

tick(ms) จะเลื่อนนาฬิกาเสมือนไปข้างหน้า และเรียกใช้ตัวจับเวลาที่กำหนดให้ทำงานภายในช่วงเวลานั้น

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

flush สำหรับตัวจับเวลาที่รออยู่ทั้งหมด

เมื่อคุณไม่ทราบเวลาหน่วงที่แน่นอน flush() จะระบายงานขนาดใหญ่ที่รออยู่ทั้งหมดจนกว่าคิวจะว่าง

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

การทดสอบพรอมิสด้วย fakeAsync

พรอมิสจะเสร็จสิ้นในฐานะงานขนาดเล็ก ภายใน fakeAsync ให้เรียก flushMicrotasks() (หรือ tick()) เพื่อทำให้พรอมิสเสร็จสิ้นก่อนตรวจสอบผล

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

ตัวช่วย async / waitForAsync

สำหรับการทดสอบที่ต้องรอการทำงานแบบอะซิงโครนัสจริงโดยไม่ควบคุมเวลา ให้ห่อเนื้อหาด้วย waitForAsync และใช้ fixture.whenStable()

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

การทดสอบ effect()

effect จะทำงานแบบอะซิงโครนัสหลังจากสัญญาณที่มันอ่านมีการเปลี่ยนแปลง หากต้องการสังเกตผลลัพธ์ ให้เรียกการตรวจจับการเปลี่ยนแปลง (หรือ flush) เพื่อให้ effect ทำงาน แล้วจึงตรวจสอบผลข้างเคียง

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

ข้อผิดพลาดที่พบบ่อย: ตัวจับเวลาที่ตกค้าง

หากการทดสอบ fakeAsync จบลงทั้งที่ยังมีตัวจับเวลาค้างอยู่ Angular จะส่งข้อผิดพลาด ให้เรียก tick/flush กับตัวจับเวลาเหล่านั้นเสมอ หรือล้างช่วงเวลาใน ngOnDestroy เพื่อให้นาฬิกาเสมือนว่างเมื่อการทดสอบเสร็จสิ้น

ตรวจสอบอย่างรวดเร็ว

เลือกเครื่องมือที่เหมาะสมสำหรับเวลาหน่วงที่ทราบแน่ชัด

สรุปทบทวน

ทดสอบสัญญาณเหมือนฟังก์ชันทั่วไป (เรียกเพื่ออ่านค่า ใช้ set เพื่ออัปเดต และใช้ detectChanges สำหรับ DOM) สำหรับงานแบบอะซิงโครนัส fakeAsync จะมอบนาฬิกาเสมือนที่คุณเลื่อนด้วย tick ระบายด้วย flush และทำให้พรอมิสเสร็จสิ้นด้วย flushMicrotasks อย่าปล่อยให้มีตัวจับเวลาค้างอยู่

คำถามที่พบบ่อย

บทเรียน “การทดสอบ Signals และโค้ดอะซิงโครนัส” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบ Signals และโค้ดอะซิงโครนัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบ Signals และโค้ดอะซิงโครนัส”

ทดสอบพฤติกรรมแบบรีแอกทีฟและแบบอะซิงโครนัส คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การทดสอบ Signals และโค้ดอะซิงโครนัส” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy