4 نصائح لكتابة اختبارات الوحدات الزاوية، تعال وألقِ نظرة!

أفكار الاختبار:

• 1. إذا كان اختبار الوحدة ممكنًا، فحاول إعطاء الأولوية لاختبار الوحدة
• 2. إذا لم يكن اختبار الوحدة ممكنًا، فاختبره من خلال طبقة التغليف، على سبيل المثال، قم بتغليف الاختبار في مكون، ولكنه أضعف من ذلك اختبار التكامل
• 3. ​​اختبار التكامل
• 4. اختبار E2E

كما تزداد صعوبة الاختبار تدريجيًا، وكلما زاد الوقت الذي يستغرقه. إذا كنت ترغب في جعل الاختبار بسيطًا، فيجب عليك أثناء التطوير توضيح أفكارك بوعي وكتابة تعليمات برمجية بسيطة وفعالة ~.

مكدس تكنولوجيا الاختبار المستخدم في هذه المقالة: Angular12 + Jasmine على الرغم من اختلاف بناء جملة تقنيات الاختبار الأخرى، إلا أن الفكرة العامة متشابهة. [توصية برنامج تعليمي ذي صلة: "برنامج تعليمي زاوي"]

نصائح: تحديد حالة اختبار الياسمين، ما هي الطرق، يمكنك العثور عليها هنا، انقر فوق المكون في

اختبار الوحدة

، الافتراضي هو مثيل الكائن الذي سيتم اختباره بواسطة الزاوي باستخدام بناء الجملة التالي

beforeEach(() => { 
  تركيبات = TestBed.createComponent(BannerComponent); 
  المكون = Fixed.componentInstance; 
  Fixed.detectChanges(); 
});

اختبار الوظيفة

1. استدعاء الوظيفة بدون قيمة إرجاع

function test(index:number,fn:Function){
 إذا (الجبهة الوطنية) {
     الجبهة الوطنية (الفهرس)؛
 }
}

كيفية الاختبار؟

مثال مضاد: اختبار القيمة المرجعة مباشرة غير محددة

const res = Component.test(1,() => {}));
  توقع(res).tobeUnified();

الممارسة الموصى بها:

# استخدم الياسمين
 it('يجب الحصول على البيانات الصحيحة عند اختبار الاتصال',() =>{
     المعلمة الثابتة = {
       الجبهة الوطنية: () => {}
    }
   تجسس على (المعلمة، 'fn')
   Component.test(1,param.fn);
   توقع(param.fn).toHaveBeenCalled();
 })

تعليمات البنية تختبر HostListener

الكلمات الشائعة الاستخدام مثل الإخفاء والعرض والحلقات لعرض مثل هذه

الوظائف
 @Directive({ محدد: '[ImageURlError]' })
فئة التصدير ImageUrlErrorDirective تنفذ OnChanges {
  مُنشئ (خاص: ElementRef) {}
  
  @HostListener('خطأ')
  خطأ عام () { 
      this.el.nativeElement.style.display = 'none';
  } 
}

كيفية الاختبار؟

فكرة الاختبار:

• لا يتم تشغيل الصورة حتى يحدث خطأ في تحميل الصورة، ثم ابحث عن طريقة لتشغيل الخطأ،
• ويتم إرفاق الأمر بشكل عام بالمكون، ما عليك سوى استخدام errorEvent

#1 أضف مكونًا مخصصًا وأضف توجيهًا مخصصًا @Component({ .
  القالب: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
فئة TestHostComponent {

}

#2.إنشاء مثيل لعرض المكون المخصص وإرسال حدث الخطأ
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        تصريحات: [
            مكون اختبار المضيف,
            ImageURlError
        ]
    });
}));

قبل كل(() => { 
 تركيبات = TestBed.createComponent(TestHostComponent); 
 المكون = Fixed.componentInstance; 
 Fixed.detectChanges();
});
  
it('يجب أن يسمح بالأرقام فقط', () => {
    حدث const = new ErrorEvent('error', {} as Any);
    صورة ثابتة = Fixed.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); // فقط أرسل الحدث، وسيتم تنفيذ طريقة الخطأ () في هذا الوقت})؛

استفد من التعديلات العامة والخاصة والمحمية

في المواصفات الزاويّة يمكن الوصول إلى .ts؛ ولكن لا يُسمح بالتعديلات الخاصة والمحمية؛

إذا

• كنت تخطط لإجراء اختبار الوحدة واختبار كل طريقة، فيرجى استخدام العامة بشكل مناسب --- الصعوبة *
• إذا كنت لا تخطط لاختبار كل طريقة، ثم يمكنك اجتياز تنظيم البيانات، واستدعاء المدخل، واجتياز اختبار التكامل - صعوبة

اختبار

حدث النقر. يمكن أن يتضمن تشغيل حدث النقر استدعاء js المباشر للنقر، أو تقليد الماوس لتشغيل حدث النقر.

#xx.component.ts
@عنصر({
 selecotr: "قائمة أبطال لوحة المعلومات"
})
فئة داشبواردهيروكوبونينت {
    البطاقات العامة = [{
        انقر: () => {
            .....
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

كيف يتم الاختبار؟

فكرة الاختبار:

• اختبر المكون مباشرة، ولا تستخدم
• مجموعة الكائنات التي تحتوي على أحداث النقر التي يتم إرجاعها بواسطة المضيف، ثم انقر فوق الاتصال واحدًا تلو الآخر، بحيث يتم تحسين تغطية الكود

("يجب الحصول على البيانات الصحيحة عند النقر فوق الاتصال"، () => {
    بطاقات const=component.cards;
    بطاقات؟.forEach(card => {
        إذا (بطاقة.انقر){
            Card.click(new Event('click'));
        }
    });
    توقع(بطاقات؟.طول).toBe(1);
});

أفكار مرجعية أخرى للنقر:

الفكرة 1:

• استخدم TestHostComponent لتغليف المكون الذي يحتاج إلى الاختبار
• ثم استخدم Fix.nativeElement.querySelector('.card') للعثور على عنصر النقر المرتبط بالمكون
• في العنصر
؛
• قم بتشغيل SubmitEvent، هذا كل شيء.

الفكرة 2:

• اختبر المكون مباشرةً، دون استخدام المضيف

• ، ثم استخدم Fix.nativeElement.querySelector('.card') للعثور على عنصر النقر المنضم

• use TriggerEventHandler('click');