4 เคล็ดลับในการเขียน Angular Unit Tests มาดูสิ!

แนวคิดในการทดสอบ:

• 1. หากการทดสอบหน่วยเป็นไปได้ ให้พยายามให้ความสำคัญกับการทดสอบหน่วยก่อน
• 2. หากการทดสอบหน่วยไม่สามารถทำได้ ให้ทดสอบผ่านบรรจุภัณฑ์หลายชั้น เช่น การห่อหุ้มการทดสอบลงในส่วนประกอบ แต่จะอ่อนแอกว่า การทดสอบบูรณาการ
• 3. การทดสอบบูรณาการ
• 4. การทดสอบ E2E

ความยากของการทดสอบก็ค่อยๆ เพิ่มขึ้น และยิ่งต้องใช้เวลามากขึ้น หากคุณต้องการทำให้การทดสอบเป็นเรื่องง่าย ในระหว่างการพัฒนา คุณควรชี้แจงแนวคิดของคุณอย่างมีสติและเขียนโค้ดที่เรียบง่ายและมีประสิทธิภาพ~

สแต็กเทคโนโลยีการทดสอบที่ใช้ในบทความนี้: Angular12 + Jasmine แม้ว่าไวยากรณ์ของเทคโนโลยีการทดสอบอื่นๆ จะแตกต่างกัน แต่แนวคิดโดยรวมก็คล้ายกัน [คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

เคล็ดลับ: การกำหนดกรณีทดสอบของจัสมิน มีวิธีใดบ้าง คุณสามารถดูได้ที่นี่ คลิกที่ส่วนประกอบใน

การทดสอบหน่วย

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

beforeEach(() => { 
  ฟิกซ์เจอร์ = TestBed.createComponent (แบนเนอร์ส่วนประกอบ); 
  ส่วนประกอบ = ฟิกซ์เจอร์.componentInstance; 
  ฟิกซ์เจอร์.detectChanges(); 
});

การทดสอบฟังก์ชัน

1. การเรียกใช้ฟังก์ชันโดยไม่มี

การทดสอบฟังก์ชันค่าส่งคืน(index:number,fn:Function){
 ถ้า(fn){
     fn(ดัชนี);
 -
}

จะทดสอบอย่างไร?

ตัวอย่างตัวนับ: การทดสอบค่าที่ส่งคืนโดยตรง unknown

const res = component.test(1,() => {}));
  คาดหวัง(res).tobeUnknown();

แนวทางปฏิบัติที่แนะนำ:

# ใช้ Jasmine
 it('ควรได้รับข้อมูลที่ถูกต้องเมื่อทดสอบการโทร',() =>{
     พารามิเตอร์ const = {
       FN: () => {}
    -
   spyOn (พารามิเตอร์ 'fn')
   ส่วนประกอบ.ทดสอบ(1,param.fn);
   คาดหวัง (param.fn).toHaveBeenCalled();
 })

คำสั่งโครงสร้าง HostListener ทดสอบ

คำสั่งโครงสร้าง คำที่ใช้กันทั่วไปกำลังซ่อน แสดง และสำหรับลูปเพื่อแสดงฟังก์ชันดัง

กล่าว
 @Directive({ ตัวเลือก: '[ImageURlError]' })
คลาสส่งออก ImageUrlErrorDirective ใช้ OnChanges {
  ตัวสร้าง (ส่วนตัว el: ElementRef) {}
  
  @HostListener('ข้อผิดพลาด')
  ข้อผิดพลาดสาธารณะ () { 
      this.el.nativeElement.style.display = 'ไม่มี';
  - 
}

จะทดสอบอย่างไร?

แนวคิดในการทดสอบ:

• รูปภาพจะไม่ถูกทริกเกอร์จนกว่าจะมีข้อผิดพลาดในการโหลดรูปภาพ จากนั้นให้ค้นหาวิธีที่จะทำให้เกิดข้อ
• ผิด

พลาด เพิ่มองค์ประกอบที่กำหนดเองและเพิ่มคำสั่งที่กำหนดเอง @Component({
  แม่แบบ: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
-
คลาส TestHostComponent {

-

#2 สร้างอินสแตนซ์มุมมององค์ประกอบที่กำหนดเองและส่ง errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        ประกาศ: [
            ทดสอบโฮสต์ส่วนประกอบ
            ImageURlข้อผิดพลาด
        -
    -
-

beforeEach(() => { 
 ฟิกซ์เจอร์ = TestBed.createComponent (TestHostComponent); 
 ส่วนประกอบ = ฟิกซ์เจอร์.componentInstance; 
 ฟิกซ์เจอร์.detectChanges();
-
  
it('ควรอนุญาตเฉพาะตัวเลขเท่านั้น', () => {
    เหตุการณ์ const = errorEvent ใหม่ ('ข้อผิดพลาด', {} เป็นค่าใดก็ได้);
    const image =fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //เพียงส่งเหตุการณ์และเมธอด error() จะถูกดำเนินการในขณะนี้});

ใช้ประโยชน์จากการแก้ไขแบบสาธารณะ ส่วนตัว และแบบ

สาธารณะ .ts สามารถเข้าถึงได้ แต่ไม่อนุญาตให้มีการแก้ไขแบบส่วนตัว

บนกระดานดำ

• หากคุณวางแผนที่จะทำการทดสอบหน่วยและทดสอบแต่ละวิธี โปรดใช้สาธารณะอย่างเหมาะสม --- ความยาก *
• หากคุณไม่ได้วางแผนที่จะทดสอบแต่ละวิธี จากนั้นคุณสามารถผ่านการจัดระเบียบข้อมูล เรียกทางเข้า และผ่านการทดสอบการคลิกทดสอบความยาก

ของ

การทริกเกอร์เหตุการณ์การคลิกอาจรวมถึงการคลิกการเรียก js โดยตรง หรือเลียนแบบเมาส์เพื่อทริกเกอร์เหตุการณ์การคลิก

#xx.component.ts
@ส่วนประกอบ({
 selecotr: 'แดชบอร์ด-ฮีโร่-รายการ'
-
คลาส DashBoardHeroComponent {
    บัตรสาธารณะ = [{
        คลิก: () => {
            -
        -
    -
-
#html
<dashboard-hero-list [การ์ด]="การ์ด" class="การ์ด">
</dashboard-hero-list>`

จะทดสอบอย่างไร?

แนวคิดการทดสอบ:

• ทดสอบส่วนประกอบโดยตรง อย่าใช้
• คอลเลกชันของออบเจ็กต์ที่มีเหตุการณ์การคลิกที่ส่งคืนโดยโฮสต์ และโทรคลิกทีละรายการ เพื่อให้การครอบคลุมโค้ดได้รับการปรับปรุง

('ควรได้รับข้อมูลที่ถูกต้องเมื่อโทรคลิก', () => {
    การ์ด const = องค์ประกอบ การ์ด;
    การ์ด?.forEach(การ์ด => {
        ถ้า(card.click){
            card.click(กิจกรรมใหม่('คลิก'));
        -
    -
    คาดหวัง(การ์ด?.ความยาว).toBe(1);
});

แนวคิดอ้างอิงการคลิกอื่นๆ:

แนวคิดที่ 1:

• ใช้ TestHostComponent เพื่อรวมส่วนประกอบที่ต้องทดสอบ
• จากนั้นใช้ Fixture.nativeElement.querySelector('.card') เพื่อค้นหาองค์ประกอบการคลิกที่เชื่อมโยงกับ
• องค์ประกอบ แค่นั้นแหละ.

แนวคิดที่ 2:

• ทดสอบส่วนประกอบโดยตรงโดยไม่ต้องใช้ Host

• จากนั้นใช้ Fixture.nativeElement.querySelector('.card') เพื่อค้นหาองค์ประกอบการคลิกที่ถูกผูกไว้

• ;