اختبار wp.data باستخدام Jest في إضافة البلوك

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

مقدمة حول Jest واختبار الإضافات

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

فهم دالة initPageLink

لنبدأ بتحليل الدالة initPageLink، التي تُستخدم لجلب رابط صفحة بناءً على ما إذا كان يجب استخدام الرابط القصير أم لا. تعتمد هذه الدالة على استدعاءات تكنولوجيتين رئيسيتين: apiFetch لجلب البيانات من واجهة برمجة التطبيقات، و wp.data للوصول إلى بيانات المحرر.

تبدأ الدالة بتحقق من وجود معرف المشاركة الحالية عبر استدعاء wp.data.select('core/editor').getCurrentPostId(). إذا لم يكن هناك معرف، يتم إلقاء خطأ. بعد ذلك، تعتمد على معلمة useShortlink لتحديد كيفية جلب الرابط، إما عبر استخدام apiFetch للحصول على معلومات من واجهة برمجة التطبيقات، أو ببساطة إرجاع رابط المشاركة.

كيفية محاكاة apiFetch واستدعاءات wp.data

عند كتابة اختبارات لهذه الدالة باستخدام Jest، تحتاج إلى محاكاة الاستدعاءات إلى wp.data و apiFetch لضمان أنها ستعيد القيم الصحيحة أثناء الاختبار.

إليك مثال على كيفية إعداد اختبار Jest للمحاكاة:

import { initPageLink } from './path/to/your/file';
import apiFetch from '@wordpress/api-fetch';
// محاكاة استدعاءات wp.data
const mockGetCurrentPostId = jest.fn();
jest.mock('@wordpress/data', () => ({
    select: jest.fn(() => ({
        getCurrentPostId: mockGetCurrentPostId,
    })),
}));
describe('اختبار دالة initPageLink', () => {
    beforeEach(() => {
        jest.clearAllMocks();
    });
    it('يجب أن يلقي خطأ إذا لم يكن هناك معرف مشاركة', async () => {
        mockGetCurrentPostId.mockReturnValueOnce(null);
        await expect(initPageLink(true)).rejects.toThrow('No post ID available.');
    });
    it('يجب العودة بالرابط القصير عند استخدام useShortlink', async () => {
        const mockPost = { id: 1, link: 'http://example.com/?p=1' };
        mockGetCurrentPostId.mockReturnValueOnce(1);
        apiFetch.mockResolvedValueOnce(mockPost); // محاكاة apiFetch
        const result = await initPageLink(true);
        expect(result).toEqual('http://example.com/?p=1');
    });
    it('يجب العودة بالرابط العادي عند عدم استخدام useShortlink', async () => {
        const mockPost = { link: 'http://example.com/?p=1' };
        mockGetCurrentPostId.mockReturnValueOnce(1);
        apiFetch.mockResolvedValueOnce(mockPost); // محاكاة apiFetch
        const result = await initPageLink(false);
        expect(result).toEqual('http://example.com/?p=1');
    });
});

في هذا المثال، يتم محاكاة wp.data واستخدام Jest للتحكم في نتيجة استدعاء getCurrentPostId، بينما يتم محاكاة apiFetch للحصول على النتائج المناسبة لمشاركة معينة.

أهمية اختبار الإضافات في ووردبريس

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

في الختام، يُعتبر اختبار wp.data باستخدام Jest جزءًا أساسيًا من تطوير الإضافات في ووردبريس لتحقيق الأداء والتأكد من عمل الكود بشكل سليم. يستعرض هذا المقال كيفية إعداد اختبار لدالة تستخدم wp.data وكيفية التعامل مع البيانات بشكل فعال.

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