كتابة اختبارات القبول واختبارات المكونات لكوود Ember في Discourse

توثيق أدلة المطور
, , ,
1

الاختبارات الآلية طريقة رائعة لحماية كودك من الأخطاء المستقبلية. يعرف الكثيرون كيفية القيام بذلك في قاعدة الكود الخاصة بنا باستخدام rspec في إطار عمل Rails، لكن الجانب المتعلق بلغة جافاسكريبت قد يبدو لغزًا لبعض الأشخاص.

لحسن الحظ، أصبح من السهل نسبيًا هذه الأيام إضافة اختبارات أساسية إلى كود Ember الخاص بك!

اختبارات المكونات

في الدليل التعليمي السابق في هذه السلسلة، أضفنا مكوّنًا باسم fancy-snack لعرض وجبتنا الخفيفة مع خلفية باهتة. دعنا نكتب اختبارًا له. أنشئ الملف التالي:

test/javascripts/components/snack-test.js

import componentTest from "helpers/component-test";

moduleForComponent("fancy-snack", { integration: true });

componentTest("test the rendering", {
  template: "{{fancy-snack snack=testSnack}}",

  setup() {
    this.set("testSnack", {
      name: "Potato Chips",
      description: "Now with extra trans fat!",
    });
  },

  test(assert) {
    assert.equal(this.$(".fancy-snack-title h1").text(), "Potato Chips");
    assert.equal(
      this.$(".fancy-snack-description p").text(),
      "Now with extra trans fat!"
    );
  },
});

لتنفيذ الاختبار، افتح متصفحك على خادم التطوير الخاص بك وانتقل إلى /qunit?module=component%3Afancy-snack. سيقوم متصفحك بعد ذلك بتنفيذ اختبارات المكوّن وإخراج شيء ما يشبه «2 من أصل 2 من المطالبات نجحت، 0 فشلت».

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

دعنا نتفقد الاختبار خطوة بخطوة لفهم كيف يعمل.

يسطر template يخبر Ember كيف نود إدراج مكوّننا. إنها نفس العلامات (Markup) تمامًا التي كنت ستستخدمها لوضع المكوّن في قالب Handlebars، لذا يجب أن تكون مألوفة:

template: '{{fancy-snack snack=testSnack}}’,

لاحظ أنه يمرر testSnack كمرجع لخاصية snack. يتم تعريف ذلك في طريقة setup():

setup() {
  this.set('testSnack', {
    name: 'Potato Chips',
    description: 'Now with extra trans fat!'
  });
},

لقد أدخلت بعض البيانات الوهمية فقط. هذا كل ما نحتاج إلى فعله لجعل Ember يعرض المكوّن. أخيرًا، لدينا بعض المطالبات (Assertions) في طريقة test():

test(assert) {
  assert.equal(this.$('.fancy-snack-title h1').text(), 'Potato Chips');
  assert.equal(this.$('.fancy-snack-description p').text(), 'Now with extra trans fat!');
}

إذا استخدمت this.$() فستحصل على وصول إلى مُختار jQuery في قالبك. تستخدم المطالبات هنا ذلك المُختار لجلب قيمة عنوان الوجبة الخفيفة ووصفها ومقارنتهما بما نتوقعه. إذا تطابقت القيم، فستنجح المطالبات وسيكون اختبارنا يعمل بشكل صحيح.

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

اختبارات القبول

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

إليك كيفية كتابة اختبار قبول سيزور مسار /admin/snack لدينا ويتأكد من أن الوجبة الخفيفة قد عُرضت:

test/javascripts/acceptance/snack-test.js

import { acceptance } from "helpers/qunit-helpers";
acceptance("Snack");

test("Visit Page", function (assert) {
  visit("/admin/snack");
  andThen(() => {
    assert.ok(exists(".fancy-snack-title"), "the snack title is present");
  });
});

في هذه الحالة، تكاد طريقة test() تكون مقروءة كأنها الإنجليزية! الأمر الأول يقول بزيارة عنوان URL الخاص بـ /admin/snack. بعد ذلك، توجد طريقة andThen(). هذه الطريقة ضرورية للتأكد من أن كل العمل الخلفي قد اكتمل قبل أن تستمر الاختبارات. نظرًا لأن كود جافاسكريبت وEmber غير متزامن (Asynchronous)، نحتاج إلى التأكد من أن Ember قد انتهى من كل ما يحتاج إلى القيام به قبل تنفيذ مطالباتنا. أخيرًا، يختبر وجود عنصر .fancy-snack-title.

ومع ذلك، إذا قمت بتنفيذ هذا الاختبار عن طريق زيارة /qunit?module=Acceptance%3A%20Snack فستجد أن الاختبار سيفشل بسبب خطأ في طلب AJAX.

إذا كنت تتذكر، يتضمن كودنا كلا من جانب Rails وجانب جافاسكريبت الذي قام بطلب AJAX لجلب بياناته. نفّذ اختبار القبول جانب جافاسكريبت، لكنه لم يكن يعرف ماذا يفعل لجلب بياناته من Rails.

لإصلاح هذا، نحتاج إلى إضافة استجابة وهمية، باستخدام مكتبة pretender الرائعة. افتح ملف test/javascripts/helpers/create-pretender.js وابحث عن السطر الذي يقول:

this.get("/admin/plugins", () => response({ plugins: [] }));

مباشرة تحته، أضف سطرًا لإرجاع كائن وجبة خفيفة وهمي ليعمل عليه اختبار القبول:

this.get("/admin/snack.json", () => {
  return response({ name: "snack name", description: "snack description" });
});

يمكنك قراءة الكود أعلاه على النحو التالي: «لأي طلب إلى /admin/snack.json، استجب بالـ response التالي».

إذا قمت بتحديث عنوان URL /qunit?module=Acceptance%3A%20Snack فيجب أن يجلب اختبار القبول بياناته عبر pretender ويجب أن تنجح الاختبارات.

إلى أين نذهب من هنا

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

هذا المستند مُدار بالإصدارات - اقترح التغييرات على github.

15 إعجابًا
Setup Continuous Integration using GitHub Actions
2

My prior experience in writing qunit tests was based on the other howto

i.e. “acceptance” was simply

acceptance("Purple Tentacle", { loggedIn: true });

I have seen in other plugins where the test code contained “fake” JSON to test against. I wasn’t sure if that would be as good as testing against “real” data, so I wanted to avoid doing it that way.

The six tests passed, but I got a couple of rather angry looking “unhandled request” errors.

After finding an example of some “setup” code, I tried it and it solved the errors.

It works, but I’m not really sure why, nor why it’s needed for some but not for the majority of plugins I’ve seen that have qunit tests.

3 إعجابات
3

For a long time we weren’t great with testing plugins, so not many people followed our example and added tests.

You are right to add a response using pretender to handle AJAX calls.

4 إعجابات
4

ملاحظة فقط بأن المسار /qunit لم يعد مستخدماً. إنه /tests الآن. استغرق الأمر مني بعض الوقت لفهم ذلك :slight_smile:

إعجاب واحد (1)