Angular Academy · บทเรียน

TestBed และฟิกซ์เจอร์คอมโพเนนต์

กำหนดค่าและสร้างคอมโพเนนต์ในการทดสอบ

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

เหตุผลที่มี TestBed

component ของ Angular ต้องพึ่งพาเฟรมเวิร์ก เช่น การฉีดการพึ่งพา การตรวจจับการเปลี่ยนแปลง และคอมไพเลอร์ของเทมเพลต หากต้องการทดสอบ component เหล่านี้แบบแยกจากส่วนอื่น คุณจำเป็นต้องมีสภาพแวดล้อม Angular ขนาดเล็ก TestBed คือเครื่องมือหลักสำหรับการทดสอบของ Angular ที่สร้างสภาพแวดล้อมนี้ให้กับแต่ละการทดสอบ

เครื่องมือนี้กำหนดค่า NgModule ชั่วคราว คอมไพล์ component และมอบตัวอ้างอิงสำหรับโต้ตอบกับ component ให้คุณ

configureTestingModule

TestBed.configureTestingModule() ประกาศสิ่งที่การทดสอบต้องใช้ ได้แก่ component ที่กำลังทดสอบ ผู้ให้บริการ และการนำเข้าใด ๆ สำหรับ component แบบสแตนด์อโลน ให้นำตัว component เองไปไว้ใน imports

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

การสร้าง Component Fixture

TestBed.createComponent(CounterComponent) จะคืนค่า ComponentFixture fixture เปรียบเสมือนรีโมตคอนโทรลของคุณ เพราะเป็นตัวห่อหุ้มอินสแตนซ์ของ component องค์ประกอบ DOM ดั้งเดิม และระบบตรวจจับการเปลี่ยนแปลง

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

การเข้าถึงอินสแตนซ์ของ Component

fixture.componentInstance คืออินสแตนซ์จริงของ class คุณสามารถเรียกใช้เมธอดและอ่านคุณสมบัติของมันได้โดยตรง เช่นเดียวกับ TypeScript ทั่วไป

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

detectChanges เรียกใช้การเรนเดอร์

fixture ที่เพิ่งสร้างจะยังไม่ได้เรนเดอร์ เรียก fixture.detectChanges() เพื่อให้ระบบตรวจจับการเปลี่ยนแปลงและ ngOnInit ของ component ทำงาน พร้อมผูกข้อมูลเข้ากับ DOM

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement เทียบกับ debugElement

fixture.nativeElement คือโหนด DOM ดิบ (เป็น HTMLElement) ส่วน fixture.debugElement คือ wrapper ที่มีความสามารถมากกว่าของ Angular ซึ่งช่วยให้คุณ query ตาม directive อ่านบริการที่ฉีดเข้ามา และตรวจสอบ binding ได้

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

ผู้ให้บริการในโมดูลการทดสอบ

หาก component ฉีดบริการเข้ามา ให้จัดเตรียมบริการเหล่านั้นผ่าน providers คุณสามารถใช้บริการจริงหรือออบเจ็กต์ทดแทนสำหรับการทดสอบก็ได้ ในที่นี้เราจัดเตรียมบริการจริงสำหรับกรณีง่าย ๆ

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

compileComponents สำหรับเทมเพลตภายนอก

เมื่อใช้ templateUrl/styleUrls ที่ไม่ใช่แบบ inline โดยไม่มีการตั้งค่าการทดสอบของ Angular CLI เทมเพลตจะต้องคอมไพล์แบบอะซิงโครนัส ให้เรียก await TestBed.compileComponents() เมื่อใช้ CLI โดยทั่วไปขั้นตอนนี้จะทำโดยอัตโนมัติ

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

การทดสอบแบบสมบูรณ์ที่มีขนาดเล็กที่สุด

เมื่อนำทุกอย่างมารวมกัน: กำหนดค่า สร้าง ตรวจจับ และตรวจสอบ นี่คือโครงสร้างมาตรฐานของการทดสอบ component ของ Angular เกือบทุกครั้ง

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

TestBed.inject สำหรับบริการ

หากต้องการดึงผู้ให้บริการที่กำหนดค่าไว้ ให้ใช้ TestBed.inject(Token) ซึ่งเป็นวิธีสมัยใหม่ที่ใช้แทน TestBed.get() ที่เลิกแนะนำแล้ว

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

การรีเซ็ตระหว่างการทดสอบ

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

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

ทดสอบสิ่งที่จะเกิดขึ้นทันทีหลังจาก createComponent

สรุปทบทวน

คุณได้เรียนรู้แก่นสำคัญของการทดสอบ: TestBed.configureTestingModule() สร้างสภาพแวดล้อม createComponent() คืนค่า ComponentFixture และ detectChanges() ทำการเรนเดอร์ ใช้ componentInstance สำหรับ class ใช้ nativeElement/debugElement สำหรับ DOM และใช้ TestBed.inject() สำหรับบริการ

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

บทเรียน “TestBed และฟิกซ์เจอร์คอมโพเนนต์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “TestBed และฟิกซ์เจอร์คอมโพเนนต์”

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

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

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

บทเรียน “TestBed และฟิกซ์เจอร์คอมโพเนนต์” ใช้เวลานานแค่ไหน

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

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

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

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

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