مقدمة

عندما يتعلق الأمر بالاختبار الشامل، فإن التحكم في التبعيات الخارجية يمكن أن يعزز بشكل كبير موثوقية وسرعة اختباراتك. يوفر Cypress، وهو إطار عمل حديث لاختبار الويب، إمكانات قوية للسخرية من طلبات HTTP وإيقافها، مما يسمح لك بمحاكاة سيناريوهات مختلفة دون الاعتماد على خدمات الواجهة الخلفية الفعلية. في هذا المنشور، سنستكشف كيفية الاستفادة من cy.intercept() الخاص بـ Cypress للسخرية من استدعاءات واجهة برمجة التطبيقات (API) وإيقافها لجعل اختباراتك أكثر قوة وكفاءة.

لماذا السخرية والطعن؟

يوفر الاستهزاء بطلبات HTTP وإيقافها في Cypress العديد من الفوائد:

1. العزل: اختبر الواجهة الأمامية بشكل مستقل عن الواجهة الخلفية، مما يضمن عدم تأثر اختباراتك بتغييرات الواجهة الخلفية أو انقطاع الخدمة.
2. السرعة: تقليل وقت تنفيذ الاختبار عن طريق تجنب مكالمات الشبكة الفعلية.
3. الموثوقية: إنشاء ظروف اختبار متسقة ويمكن التنبؤ بها من خلال محاكاة الاستجابات المختلفة وحالات الحافة.
4. المرونة: اختبر سيناريوهات مختلفة مثل الأخطاء والاستجابات البطيئة وحمولات البيانات المختلفة دون الحاجة إلى تغييرات في الواجهة الخلفية.

إعداد السرو

إذا لم تكن قد قمت بتثبيت Cypress بعد، فيمكنك إعداده باستخدام الأوامر التالية:

npm install cypress --save-dev
npx cypress open

تأكد من أن الهيكل الأساسي لمشروع Cypress جاهز قبل المتابعة.

باستخدام cy.intercept()

يسمح لك الأمر cy.intercept() في Cypress باعتراض وتعديل طلبات الشبكة واستجاباتها. فهو يحل محل الأمر cy.route() المهمل ويوفر المزيد من المرونة والقوة.

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

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

في هذا المثال، نعترض طلب GET إلى /api/todos ونقدم استجابة ساخرة. يقوم as('getTodos') بتعيين اسم مستعار للطلب الذي تم اعتراضه، مما يسهل الرجوع إليه في اختباراتك.

سيناريوهات السخرية المتقدمة

محاكاة الأخطاء
يمكنك محاكاة حالات خطأ HTTP المختلفة لاختبار كيفية تعامل تطبيقك معها:

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

تأخير الردود
لاختبار كيفية تعامل تطبيقك مع استجابات الشبكة البطيئة، يمكنك تقديم تأخير:

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

السخرية من سيناريوهات محددة

الاستهزاء المشروط
يمكنك السخرية من الاستجابات بشكل مشروط بناءً على نص الطلب أو رؤوسه:

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

أفضل الممارسات للسخرية والطعن

1. استخدام الأسماء المستعارة: قم دائمًا بتعيين أسماء مستعارة للطلبات التي تم اعتراضها باستخدام .as(). وهذا يجعل اختباراتك أكثر قابلية للقراءة وأسهل في تصحيح الأخطاء.
2. يُدمج مع التركيبات: قم بتخزين بيانات وهمية كبيرة في ملفات التركيبات لتحسين إمكانية الصيانة والقراءة. استخدم cy.fixture() لتحميل التركيبات.
3. تجنب الإفراط في السخرية: لا تسخر إلا مما هو ضروري للاختبار. يمكن أن يؤدي الإفراط في السخرية إلى اختبارات لا تعكس سيناريوهات العالم الحقيقي.
4. اختبار استدعاءات واجهة برمجة التطبيقات الحقيقية: اختبر بشكل دوري مقابل الواجهة الخلفية الحقيقية للتأكد من أن تطبيقك يعمل بشكل صحيح مع البيانات الفعلية.

خاتمة

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

اختبار سعيد!