الدرس السابق: Developing Discourse Plugins - Part 5 - Add an admin interface
هل كنت تعلم أن Discourse يحتوي على مجموعتي اختبار كبيرتين لقاعدة الكود الخاصة به؟ على جانب الخادم، يحتوي كود Ruby الخاص بنا على مجموعة اختبار تستخدم rspec. لتطبيق المتصفح، لدينا مجموعة qunit تتضمن ember-testing.
بافتراض أن لديك بيئة تطوير مُعدّة، إذا قمت بزيارة عنوان URL http://localhost:3000/tests فستبدأ بتشغيل مجموعة اختبار JavaScript في متصفحك. أحد الجوانب الممتعة هو أنه يمكنك رؤيتها تختبر التطبيق في نافذة مصغرة في الزاوية اليمنى السفلية:
تم بناء تطبيق Discourse بـ كثير من الاختبارات التي ستبدأ التشغيل عند زيارة عنوان URL /tests. لذا قد يكون من المفيد تصفية اختباراتك حسب الإضافة التي تعمل عليها. يمكنك القيام بذلك في الواجهة عن طريق النقر على القائمة المنسدلة Plugin (الإضافة) واختيار إضافتك:
إضافة اختبار قبول في إضافتك
أولاً، تأكد من أن لديك أحدث إصدار من Discourse مُخفَّضًا (checked out). إن القدرة على تشغيل اختبارات القبول من الإضافات هي ميزة جديدة نسبيًا، وإذا لم تخفّض أحدث إصدار فلن تظهر اختباراتك.
في هذه المقالة، سأقوم بكتابة اختبار قبول لإضافة purple-tentacle التي كتبناها في الجزء 5 من هذه السلسلة.
إضافة اختبار قبول هي عملية سهلة مثل إضافة ملف واحد إلى إضافتك. أنشئ ما يلي:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
حاولت كتابة الاختبار بطريقة واضحة، لكنه قد يكون مربكًا قليلاً إذا لم تكن قد كتبت اختبار قبول من قبل. أوصي بقوة بأن تقرأ وثائق Ember حول اختبار القبول لأنها تحتوي على الكثير من المعلومات الرائعة.
في كل اختبار نكتبه، نحتاج إلى assert (التحقق) من شيء ما. في اختبارنا، نريد إجراء بعض التحققات للتحقق مما إذا كان الحبار مخفيًا في البداية ثم يظهر فقط بعد النقر على الزر.
نريد تحديد مجموعة من الإجراءات التي يجب اتخاذها قبل إجراء التحقق. للقيام بذلك نستخدم الكلمة المفتاحية await.通过使用这个词，我们等待每个异步辅助函数的执行首先完成。
إجراءنا الأول المهم هو: await visit("/admin/plugins/purple-tentacle");. يخبر هذا اختبارنا بالتنقل إلى عنوان URL هذا في تطبيقنا. كان هذا العنوان هو الذي يعرض الحبار.
بعد زيارة الصفحة التي يظهر فيها زر الحبار الأرجواني، نريد التحقق مما إذا كان يمكننا رؤية الزر على الصفحة موجودًا وأن صورة الحبار غير موجودة بعد.
يتم ذلك من خلال التحريات التالية:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
ملاحظة. الإصدار السابق من إضافة purple-tentacle لم يكن يحتوي على معرف العنصر #show-tentacle في قالب handlebars. تحقق من أحدث الإصدارات للمتابعة!
بمجرد اجتياز هذه الاختبارات، حان وقت اختبار التفاعل.
الأمر التالي هو await click('#show-tentacle'); والذي يخبر إطار عمل الاختبار الخاص بنا أننا نريد النقر على الزر وإظهار الحبار.
بعد محاكاة النقر على الزر، يمكننا التحقق مما إذا كان الحبار يظهر من خلال التحقق:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
ليس سيئًا جدًا أليس كذلك؟ يمكنك تجربة الاختبار بنفسك عن طريق زيارة http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 على جهاز التطوير الخاص بك. يجب أن ترى بسرعة الحبار الأرجواني يظهر وجميع الاختبارات ستنجح.
إذا كنت تريد تشغيل اختبارات qunit للإضافة من سطر الأوامر باستخدام PhantomJS، يمكنك تشغيل
rake plugin:qunit['purple-tentacle']
(حيث purple-tentacle هو اسم مجلد إضافتك)
تصحيح أخطاء اختباراتك
بينما تكتب إضافاتك، يمكن أن تساعدك اختباراتك في تحديد المشكلات في إضافتك. أثناء تطوير اختباراتك أو إذا قمت بإجراء تغييرات على كود إضافتك، قد تفشل الاختبارات. للمساعدة في فهم السبب، يحتوي Ember على بعض المساعدات اللطيفة: pauseTest() و resumeTest().
لاستخدامها، أضف await pauseTest() داخل كود الاختبار الخاص بك حيث تريد إيقاف الاختبار مؤقتًا. الآن، عند تشغيل اختبارك في المتصفح، سيتوقف الاختبار تلقائيًا عند النقطة التي أضفت فيها pauseTest(). سيمنحك ذلك فرصة لفحص الصفحة أو عرض أي أخطاء للمساعدة في تصحيح المشكلات.
إلى أين نذهب من هنا
أكره أن أبدو مثل سجل مكسور ولكن وثائق Ember حول الاختبار ممتازة. قد ترغب أيضًا في رؤية كيفية اختبار Discourse لوظائف مختلفة عن طريق تصفح الاختبارات في مجلد اختبارات JavaScript لدينا. لدينا العديد من الأمثلة هناك يمكنك التعلم منها.
اختبار سعيد!
المزيد في السلسلة
الجزء 1: أساسيات الإضافات
الجزء 2: مخارج الإضافات
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: واجهات المسؤول
الجزء 6: هذا الموضوع
الجزء 7: نشر إضافتك
هذا المستند مُتحكَّم في الإصدارات - اقترح التغييرات على github.
it is an Admin page
)