0Pricing
Micro Frontends Architecture with Module Federation · درس

اختبار العقود بين الواجهات الأمامية المصغّرة

تعلّم كيف يتحقق اختبار العقود من بقاء الواجهات التي تعرضها الواجهات الأمامية المصغّرة وتستهلكها متوافقة، ويكشف التغييرات المسببة للكسر قبل النشر.

اختبار العقود بين الواجهات الأمامية المصغّرة درس مجاني في Micro Frontends Architecture with Module Federation على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Micro Frontends Architecture with Module Federation، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Micro Frontends Architecture with Module Federation 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The Integration Gap

Unit tests check one MFE in isolation; E2E tests are slow and brittle. Contract testing fills the gap by verifying the agreements between MFEs without running everything together.

What Is a Contract?

A contract is the shape of an interaction between two parties — the exposed module signature, an event payload, or a shared state shape. Both sides must agree on it.

Consumer-Driven Contracts

In consumer-driven contract testing, the consumer defines what it expects from a provider. The provider then verifies it actually meets those expectations.

Contracts in Federation

For micro frontends, contracts commonly cover:

  • Exposed module props/signatures
  • Custom event names and payloads
  • Shared state structure
  • Shared API response shapes

A Props Contract Example

If a remote exposes a Widget, the consumer expects specific props. The contract records those expectations explicitly.

// consumer expects:
// <Widget productId: number, onAdd: function />

Writing a Consumer Expectation

The consumer writes a test describing the interface it relies on, generating a contract artifact the provider can check against.

expectInterface("cart/Widget", {
  props: { productId: "number", onAdd: "function" }
});

Verifying on the Provider Side

The provider runs a verification test confirming its exposed module still satisfies every consumer contract before it deploys.

verifyContracts("cart/Widget"); // fails if props changed

Event Contract Testing

For event-based communication, the contract pins the event name and payload schema, so renaming an event or dropping a field is caught immediately.

{ event: "cart:add", detail: { productId: "number" } }

Where Contracts Live

Store contracts in a shared location (a broker or repo) both teams can access. Tools like Pact provide a broker; a shared schema package is a simpler alternative.

Fitting into CI

Run provider contract verification in CI on every change. A broken contract fails the build before the incompatible MFE can reach production.

Benefits of Contract Testing

Contract tests give you:

  • Fast feedback without full integration
  • Confidence to deploy independently
  • Early detection of breaking interface changes
  • Clear, documented interfaces between teams

Quick Check

Test your contract-testing knowledge.

Recap

You learned contract testing for MFEs:

  • Contracts capture agreements on props, events, and state
  • Consumers define expectations; providers verify them
  • Store contracts in a broker or shared schema
  • Run verification in CI to block breaking changes
  • Enables confident independent deployment

Contract tests are the fast middle layer of the MFE testing pyramid.

الأسئلة الشائعة

هل درس «اختبار العقود بين الواجهات الأمامية المصغّرة» مجاني؟

نعم — نص درس «اختبار العقود بين الواجهات الأمامية المصغّرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Micro Frontends Architecture with Module Federation، انتقل إلى CoddyKit PRO. تتضمن دورة Micro Frontends Architecture with Module Federation 4 دروس في المجموع.

ماذا ستتعلم في «اختبار العقود بين الواجهات الأمامية المصغّرة»؟

تعلّم كيف يتحقق اختبار العقود من بقاء الواجهات التي تعرضها الواجهات الأمامية المصغّرة وتستهلكها متوافقة، ويكشف التغييرات المسببة للكسر قبل النشر. تتمرن على Micro Frontends Architecture with Module Federation مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Micro Frontends Architecture with Module Federation؟

لا تُشترط خبرة سابقة. Micro Frontends Architecture with Module Federation على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «اختبار العقود بين الواجهات الأمامية المصغّرة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Micro Frontends Architecture with Module Federation هذا؟

نعم. كل درس في Micro Frontends Architecture with Module Federation يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. اختبار الوحدات للمكوّنات federated
  2. استراتيجيات اختبار التكامل
  3. اختبار شامل بين التطبيقات
  4. اختبار العقود بين الواجهات الأمامية المصغّرة
← العودة إلى Micro Frontends Architecture with Module Federation