اختبار مدخل المطور المستضاف ذاتيًا

ينطبق على: المطور | أساسي | الإصدار 2 الأساسي | قياسي | الإصدار 2 القياسي | Premium | Premium v2

توضح هذه المقالة كيفية إعداد اختبارات الوحدة والاختبارات الشاملة للمدخل المستضاف ذاتيًا.

إنشاء اختبارات الوحدة

اختبار الوحدة هو نهج للتحقق من صحة أجزاء صغيرة من الوظائف. يعمل اختبار الوحدة بشكل منفصل عن أجزاء التطبيق الأخرى.

سيناريو مثال

في هذا السيناريو، تقوم باختبار عنصر تحكم إدخال كلمة المرور. لا يقبل سوى كلمات المرور التي تحتوي على ما يلي على الأقل:

• حرف واحد
• رقم واحد
• حرف خاص واحد

الاختبار للتحقق من هذه المتطلبات يبدو كالتالي:

const passwordInput = new PasswordInput();

passwordInput.value = "";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "password";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "p@ssw0rd";
expect(passwordInput.isValid).to.equal(true);

بنية المشروع

من الشائع الاحتفاظ باختبار وحدة بجانب المكون الذي يتم التحقق منه.

component.ts
component.spec.ts

طلبات HTTP الوهمية

ثمة حالات تتوقع فيها من أحد المكونات أن يقوم بطلبات HTTP. يجب أن يتفاعل المكون بشكل صحيح مع أنواع مختلفة من الاستجابات. لمحاكاة استجابات HTTP معينة، استخدم MockHttpClient. فهو يقوم بتنفيذ واجهة HttpClient المستخدمة بواسطة العديد من المكونات الأخرى للمشروع.

const httpClient = new MockHttpClient();

httpClient.mock()
    .get("/users/jane")
    .reply(200, {
        firstName: "Jane",
        lastName: "Doe"
    });

إنشاء اختبارات شاملة من طرف إلى طرف

يشغل اختبار من الطرف إلى الطرف سيناريو مستخدم معين بخطوات دقيقة تتوقع من المستخدم القيام بها. في تطبيق ويب مثل بوابة تطوير إدارة واجهة برمجة التطبيقات في Azure، يقوم المستخدم بالتمرير عبر المحتوى ويختار الخيارات لتحقيق نتائج معينة.

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

سيناريو مثال

في هذا السيناريو، تحتاج إلى التحقق من صحة تدفق تسجيل دخول المستخدم. قد يتطلب هذا السيناريو الخطوات التالية:

1. افتح المتصفح وانتقل إلى صفحة تسجيل الدخول.
2. أدخل عنوان البريد الإلكتروني.
3. أدخِل كلمة المرور.
4. حددSign-in.
5. تحقق من إعادة توجيه هذا المستخدم إلى الصفحة الرئيسية.
6. تحقق من أن الصفحة تتضمن عنصر قائمة الملف الشخصي. إنه أحد المؤشرات المحتملة التي قمت بتسجيل الدخول إليها بنجاح.

لإجراء الاختبار تلقائيًا، قم بإنشاء برنامج نصي بنفس الخطوات بالضبط:

// 1. Open browser and navigate to the sign-in page.
const page = await browser.newPage();
await page.goto("https://contoso.com/signin");

// 2. Enter email.
await this.page.type("#email", "john.doe@contoso.com");

// 3. Enter password.
await this.page.type("#password", "p@s$w0rd");

// 4. Click Sign-in.
await this.page.click("#signin");

// 5. Verify that user got redirected to Home page.
expect(page.url()).to.equal("https://contoso.com");

// 6. Verify that the page includes the Profile menu item.
const profileMenuItem = await this.page.$("#profile");
expect(profileMenuItem).not.equals(null);

إشعار

السلاسل النصية مثل #email، #password، و #signin هي محددات شبيهة ب CSS تحدد عناصر HTML على الصفحة. لمزيد من المعلومات، راجع مواصفة W3C المستوى 3 للمقيمين.

خرائط مكونات واجهة المستخدم

غالبًا ما تمر تدفقات المستخدم عبر نفس الصفحات أو المكونات. مثال جيد هو القائمة الرئيسية للموقع الموجودة في كل صفحة.

قم بإنشاء مخطط مكون واجهة المستخدم لتجنب تكوين وتحديث نفس المحددات لكل اختبار. على سبيل المثال، يمكنك استبدال الخطوات من 2 إلى 6 في المثال السابق بخطوتين فقط:

const signInWidget = new SigninBasicWidget(page);
await signInWidget.signInWithBasic({ email: "...", password: "..." });

تكوين الاختبار

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

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

فيما يلي مثال على validate.config.jsonتم تخزينه في المجلدsrc الخاص بمشروعك.

{
    "environment": "validation",
    "urls": {
        "home": "https://contoso.com",
        "signin": "https://contoso.com/signin",
        "signup": "https://contoso.com/signup/"
    },
    "signin": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            },
            "aadB2C": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    },
    "signup": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    }
}

اختبارات بدون أجهزة ملحقة مقابل اختبارات عادية

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

عند تطوير برنامج نصي للاختبار، من المفيد أن ترى ما يحدث بالضبط في المتصفح. هذا هو الوقت المناسب لاستخدام الوضع العادي.

للتبديل بين الأوضاع، قم بتغيير خيار الخيار headless في ملف constants.ts. إنه في المجلد tests بمشروعك:

export const LaunchOptions = {
    headless: false
};

خيار مفيد آخر هو slowMo. يوقف تنفيذ الاختبار مؤقتًا بين كل إجراء:

export const LaunchOptions = {
    slowMo: 200 // milliseconds
};

تشغيل الاختبارات

هناك طريقتان مدمجتان لإجراء الاختبارات في هذا المشروع:

الأمر npm

npm run test

مستكشف الاختبار

استخدم إضافة مستكشف الاختبار لكود VS. على سبيل المثال، يحتوي مستكشف الاختبار في Mocha على واجهة مستخدم مريحة وخيار لتشغيل الاختبارات تلقائيا عند كل تغيير في الشيفرة المصدرية:

المحتوى ذو الصلة

تعرف على المزيد حول مدخل المطور:

• نظرة عامة على مدخل مطور Azure APIM
• الاستضافة الذاتية لمدخل المطورين