إتقان اختبار واجهة برمجة التطبيقات باستخدام React Mock API و Axios

هل وجدت نفسك يومًا في منتصف مشروع React، عالقًا في كيفية اختبار استدعاءات واجهة برمجة التطبيقات الخاصة بك بدون الاتصال بالخادم الحقيقي في كل مرة؟ إذا كانت الإجابة نعم، فأنت في المكان المناسب. اليوم، سنغوص عميقًا في عالم React mock API مع Axios. سواء كنت مطورًا خبيرًا أو بدأت للتو، سيوجهك هذا الدليل خلال كل ما تحتاج إلى معرفته.

ما هو اختبار واجهات برمجة التطبيقات؟

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

لماذا يعتبر اختبار واجهات برمجة التطبيقات مهمًا؟

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

فهم Axios في React

إذا كنت تعمل مع React، فقد سمعت على الأرجح عن Axios. إنه عميل HTTP يعتمد على الوعود لجافا سكريبت، مما يجعله سهلاً لإرسال طلبات HTTP غير متزامنة إلى نقاط النهاية REST.

الميزات الرئيسية لـ Axios:

• سهل الاستخدام: مع واجهة برمجة تطبيقات بسيطة وبديهية.
• يدعم الوعود: مما يجعله مثاليًا للتعامل مع الطلبات غير المتزامنة.
• المعترضات: تتيح لك تحويل الطلبات والاستجابات.
• الإلغاء: إلغاء الطلبات بسهولة.

لماذا تعتبر Mock APIs مهمة

واجهات برمجة التطبيقات الوهمية تلعب دورًا حيويًا في التطوير والاختبار. إنها تتيح لك محاكاة الاستجابات من واجهة برمجة التطبيقات الخاصة بك دون الاتصال بالخادم الحقيقي. هذا يعني أنك تستطيع تطوير واختبار الواجهة الأمامية بشكل مستقل عن الواجهة الخلفية.

فوائد واجهات برمجة التطبيقات الوهمية:

• السرعة: تقليل الوقت المستغرق في انتظار استجابات واجهات برمجة التطبيقات.
• العزل: اختبار منطق الواجهة الأمامية بدون اعتمادات للواجهة الخلفية.
• الاتساق: ضمان استجابات متسقة لاختبارات يمكن التنبؤ بها.

إعداد Axios في مشروع React

دعونا نقوم بتجربة عملية إعداد Axios في مشروع React. إذا لم يكن لديك مشروع React بعد، قم بإنشاء واحد باستخدام Create React App.

npx create-react-app my-app
cd my-app
npm install axios

الآن، دعنا ننشئ خدمة للتعامل مع استدعاءات واجهة برمجة التطبيقات الخاصة بنا. أنشئ ملفًا جديدًا apiService.js في دليل src:

import axios from 'axios';

const apiService = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default apiService;

إنشاء واجهة برمجة تطبيقات وهمية باستخدام Axios

محاكاة استجابات واجهة برمجة التطبيقات في Axios أمر سهل. سنستخدم axios-mock-adapter، وهي مكتبة بسيطة لمحاكاة طلبات Axios.

قم بتثبيت axios-mock-adapter:

npm install axios-mock-adapter

الآن، دعنا ننشئ واجهة برمجة التطبيقات الوهمية الخاصة بنا. في src، أنشئ ملفًا جديدًا mockApi.js:

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

// يقوم هذا بتعيين المحاكي على النسخة الافتراضية
const mock = new MockAdapter(axios);

// محاكاة أي طلب GET إلى /users
// الحجج للإجابة هي (status, data, headers)
mock.onGet('/users').reply(200, {
  users: [{ id: 1, name: 'جون سميث' }]
});

// محاكاة أي طلب POST إلى /login
// الحجج للإجابة هي (status, data, headers)
mock.onPost('/login').reply(200, {
  user: { id: 1, name: 'جون سميث' },
  token: 'abcd1234'
});

مع إعداد واجهة برمجة التطبيقات الوهمية، يمكنك الآن اختبار مكوناتك دون الاتصال بالخادم الحقيقي.

دمج Apidog لتحسين اختبار واجهات برمجة التطبيقات

Apidog هي أداة قوية تعزز قدرات اختبار واجهات برمجة التطبيقات الخاصة بك. تتيح لك تصميم واختبار ومحاكاة واجهات برمجة التطبيقات كلها في مكان واحد. إليك كيفية دمج Apidog مع مشروع React الخاص بك.

لاختبار واجهة برمجة التطبيقات الخاصة بك مع Apidog، يجب عليك اتباع الخطوات التالية:

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

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

الخطوة 3: انقر على زر الإرسال لترى نتيجة اختبارك. يجب أن ترى رمز الحالة، ووقت الاستجابة، وجسم الاستجابة لواجهة برمجة التطبيقات الخاصة بك. على سبيل المثال، يجب أن ترى شيئًا مثل هذا:

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

دليل خطوة بخطوة لإتقان واجهات برمجة التطبيقات الوهمية باستخدام Apidog

الخطوة 1. إنشاء مشروع جديد: تستخدم Apidog المشاريع لإدارة واجهات برمجة التطبيقات. يمكنك إنشاء واجهات برمجة تطبيقات متعددة تحت مشروع واحد. يجب أن تنتمي كل واجهة برمجة تطبيقات لمشروع. لإنشاء مشروع جديد، انقر على زر "مشروع جديد" على الجانب الأيمن من الصفحة الرئيسية لتطبيق Apidog.

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

• طريقة الطلب: GET.
• عنوان URL: api/user/{id}، حيث {id} هو المعامل الذي يمثل معرف المستخدم.
• نوع الاستجابة: json.
• محتوى الاستجابة:

{
id: number, // معرف المستخدم
name: string, // اسم المستخدم
gender: 1 | 2, // الجنس: 1 للذكور، 2 للإناث
phone: string, // رقم الهاتف
avatar: string, // عنوان صورة الأفاتار
}

لإنشاء واجهة جديدة، اذهب إلى الصفحة الرئيسية للمشروع الذي تم إنشاؤه سابقًا وانقر على زر "+" على الجانب الأيسر.

املأ المعلومات الخاصة بالواجهة المقابلة واحفظها.

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

دعونا نلقي نظرة على استجابة المحاكاة. انقر على زر "طلب" ثم انقر على "إرسال" في الصفحة التي تفتح.

الخطوة 3. تعيين قواعد مطابقة المحاكاة: هل لاحظت شيئًا سحريًا؟ تم تعيين حقل "name" إلى نوع السلسلة، ومع ذلك يعود بأسماء؛ تم تعيين حقل "phone" إلى نوع السلسلة، ومع ذلك يعود بأرقام الهاتف؛ تم تعيين حقل "avatar" إلى نوع السلسلة، ومع ذلك يعود بعناوين الصور.

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

يمكنك أيضًا تعيين قواعد محاكاة مخصصة لكل حقل. انقر على "محاكاة" بجوار الحقل:

قواعد مطابقة المحاكاة في Apidog هي كما يلي:

1. عندما يلبي حقل ما قاعدة مطابقة، ستعود الاستجابة بقيمة عشوائية تلبي قاعدة المحاكاة.
2. إذا لم يلتق حقلما بأي قاعدة مطابقة، ستعود الاستجابة بقيمة عشوائية تلبي نوع بيانات الحقل.

هناك ثلاثة أنواع من قواعد المطابقة:

1. البطاقات: * تطابق صفر أو أكثر من الأحرف، و؟ تطابق أي حرف واحد. على سبيل المثال، *name يمكن أن تطابق user name وname، وما إلى ذلك.
2. التعابير العادية.
3. المطابقة التامة.

قواعد المحاكاة متوافقة تمامًا مع Mock.js، وتم توسيع بعض الصيغ التي لا توجد في Mock.js (مثل أرقام الهواتف المحلية "@phone"). تشمل قواعد المحاكاة المستخدمة بشكل شائع:

1. @integer: عدد صحيح. @integer(min, max).
2. @string: سلسلة. @string(length): يحدد طول السلسلة.
3. @regexp(regexp): تعبير عادي.
4. @url: عنوان URL.

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

أفضل الممارسات لمحاكاة واجهات برمجة التطبيقات

محاكاة واجهات برمجة التطبيقات هي تقنية قوية، ولكن من الضروري اتباع أفضل الممارسات لضمان اختبار فعال.

1. حافظ على تحديث المحاكاة

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

2. استخدم بيانات واقعية

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

3. حد من استخدام المحاكاة

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

المزالق الشائعة وكيفية تجنبها

يمكن أن تقدم محاكاة واجهات برمجة التطبيقات تحديات إذا لم يتم القيام بذلك بشكل صحيح. إليك بعض المزالق الشائعة وكيفية تجنبها.

1. الإفراط في المحاكاة

قد يؤدي الاعتماد بشكل مفرط على المحاكاة إلى إحساس زائف بالأمان. يجب عليك موازنة اختبارات المحاكاة مع اختبارات التكامل باستخدام واجهات برمجة التطبيقات الحقيقية.

2. المحاكاة غير المتسقة

تأكد من اتساق البيانات المحاكية لتجنب الاختبارات غير المستقرة. استخدم أدوات مثل Apidog لتوليد بيانات محاكاة متسقة.

3. تجاهل الحالات الطرفية

لا تختبر فقط الطرق السعيدة. استخدم المحاكاة لمحاكاة الحالات الطرفية وتأكد من أن تطبيقك يتعامل مع الأخطاء بشكل مناسب.

الخاتمة

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

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