تطوير إضافات Discourse - الجزء 6 - إضافة اختبارات القبول

الدرس السابق: Developing Discourse Plugins - Part 5 - Add an admin interface


هل تعلم أن Discourse يحتوي على مجموعتي اختبار كبيرتين لشيفرته البرمجية؟ من جانب الخادم (Server)، تمتلك شيفرتنا المكتوبة بلغة Ruby مجموعة اختبار تستخدم rspec. أما بالنسبة لتطبيق المتصفح، فلدينا مجموعة qunit التي تتضمن ember-testing.

بافتراض أن لديك بيئة تطوير جاهزة، إذا قمت بزيارة الرابط http://localhost:3000/tests فستبدأ بتشغيل مجموعة اختبارات JavaScript في متصفحك. ومن الجوانب الممتعة أنك يمكنك رؤية التطبيق وهو يتم اختباره في نافذة مصغرة في الزاوية اليمنى السفلية:

يتم بناء تطبيق Discourse باستخدام عدد كبير جداً من الاختبارات التي ستبدأ في التشغيل عند زيارة الرابط /tests. لذا، قد يكون من المفيد تصفية اختباراتك بناءً على البرنامج الإضافي (Plugin) الذي تعمل عليه. يمكنك فعل ذلك من خلال الواجهة بالنقر على القائمة المنسدلة Plugin واختيار البرنامج الإضافي الخاص بك:

إضافة اختبار قبول (Acceptance Test) في البرنامج الإضافي الخاص بك

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

في هذا المقال، سأقوم بكتابة اختبار قبول للبرنامج الإضافي 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 (التأكيد) على شيء ما. في اختبارنا، نريد إجراء بعض التأكيدات للتحقق مما إذا كانت الأخطبوط (Tentacle) مخفية في البداية ثم تظهر فقط بعد النقر على الزر.

نريد تعريف مجموعة من الإجراءات التي يجب اتخاذها قبل إجراء التأكيد. للقيام بذلك، نستخدم الكلمة المفتاحية await. من خلال استخدام هذه الكلمة، ننتظر انتهاء تنفيذ كل أداة مساعدة غير متزامنة (Asynchronous helper) أولاً.

إجراءنا الأول ذو الأهمية هو: 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");

ملاحظة جانبية: الإصدار السابق من البرنامج الإضافي 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: مخارج البرنامج الإضافي (Plugin Outlets)
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: واجهات الإدارة
الجزء 6: هذا الموضوع
الجزء 7: نشر البرنامج الإضافي الخاص بك


هذا الملف خاضع للتحكم في الإصدارات - اقترح التغييرات على github.

30 إعجابًا

OMG, have I put off writing tests for this long?!

A few things
I noticed you put an “id” into the template file that wasn’t there in the previous tutorial
I added 3 more tests to deal with the “Hide Tentacle” button I added
I needed to be logged in it is an Admin page
I needed to use port 4000 for my VirtualBox Vagrant set-up

Happily, quick success !

5 إعجابات

I’ve noticed a push to implement testing for plugins lately and I completely agree that this is important. I’ve been terrible at writing these in the past and want to get caught up.

I was considering the setup of Travis CI on a plugin repo as I noticed the ability to use Docker with Travis. But having never touched Travis before, is it possible to do this with a plugin? It would be nice to submit PRs to my own repo and have the tests run automatically.

5 إعجابات

how can I run single ember tests on the browser?

http://localhost:3000/qunit?module=Acceptance%3A%20Purple%20Tentacle

I mean, if I have another acceptance test called “another test”, how would I run it? Thank you!

If you click “rerun” beside a test, you’ll get a URL that is just for that particular test that you can refresh over and over.

You can also run by module by clicking in the “All Module” box and checking off just the modules you want to run.

إعجابَين (2)

This tutorial needs updating to replace ok(...) with assert.ok(...).

Have put the necessary changes in a PR - I’m happy to edit the OP if it’s made into a wiki :slight_smile:

https://github.com/eviltrout/purple-tentacle/pull/2

إعجابَين (2)

OK it is wikified! PM me if anything else needs this treatment any time.

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

A note after writing some basic acceptance tests for the Elections Plugin:

  • If you use the default loggedIn option, you’re logged in as eviltrout with the properties in this session fixture

  • You can login as a custom user (necessary if you’ve added custom user properties) by defining your own session fixture and setting it as the current user using the beforeEach hook. See here for an example.

@eviltrout is there a better way of using a custom user for acceptance tests?

5 إعجابات

What we should probably do is change the acceptance method in discourse to take an argument for the user to log in as. Then your test could say { loggedIn: true, logInAs: angus }

If you’ve got time for that PR we’d accept it!

4 إعجابات

q: how to run the ruby tests tests for a plugin?

i am trying to run the tests for discourse-github-linkback, but i have no idea how.

After some stackoverflow i tried this (and i got some errors):

~/discourse$ bundle exec rspec ./plugins/discourse-github-linkback/spec/lib/github_linkback_spec.rb 

An error occurred while loading ./plugins/discourse-github-linkback/spec/lib/github_linkback_spec.rb.
Failure/Error: CoreExt::ActiveSupport.without_bootsnap_cache { super }

NameError:
  uninitialized constant GithubLinkback
# ./plugins/discourse-github-linkback/spec/lib/github_linkback_spec.rb:3:in `<top (required)>'
# ------------------
# --- Caused by: ---
# NameError:
#   uninitialized constant GithubLinkback
#   ./plugins/discourse-github-linkback/spec/lib/github_linkback_spec.rb:3:in `<top (required)>'
No examples found.

Randomized with seed 60987


Finished in 0.02025 seconds (files took 3.36 seconds to load)
0 examples, 0 failures, 1 error occurred outside of examples

Randomized with seed 60987

Note that i see the plugin in the local discourse dev admin page, so i hope it is correctly installed (into ~discourse/plugins/

Simplest way, run bin/rake autospec, and save the file

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

From what i see, doing cd ~/discourse and then running

runs all the tests for discourse.

On my ubuntu 18.04 VM with i5 6500, this has been running for half an hour already.
It feels wrong to run the whole tests suite when i only want to run the tests in that one plugin.
(this is especially so when i probably will modify my tests again, at least a few times)

Did i do something wrong?

Let me guess, you are symlinking your plugin vs checking out directly to the path under plugins

no,

tbp@tbp-linux-dev:~$ cd ~/discourse/plugins/
git clone -b allow-all-user-repositories-wildcard https://github.com/TheBestPessimist/discourse-github-linkback
tbp@tbp-linux-dev:~/discourse/plugins$ ll
total 40
drwxr-xr-x 10 tbp tbp 4096 May 13 21:48 ./
drwxr-xr-x 20 tbp tbp 4096 May 13 21:18 ../
drwxr-xr-x  6 tbp tbp 4096 May 13 20:29 discourse-details/
drwxr-xr-x  6 tbp tbp 4096 May 13 21:48 discourse-github-linkback/
drwxr-xr-x  6 tbp tbp 4096 May 13 20:29 discourse-local-dates/
drwxr-xr-x  9 tbp tbp 4096 May 13 20:29 discourse-narrative-bot/
drwxr-xr-x  7 tbp tbp 4096 May 13 20:29 discourse-nginx-performance-report/
drwxr-xr-x  5 tbp tbp 4096 May 13 20:29 discourse-presence/
drwxr-xr-x  3 tbp tbp 4096 May 13 20:29 lazyYT/
drwxr-xr-x  9 tbp tbp 4096 May 13 20:29 poll/
tbp@tbp-linux-dev:~/discourse/plugins$ 

Can you confirm you tried saving the spec file once it was running, cause it is meant to interrupt stuff and start running the plugin spec?

since the initial bin/rake autospec is still running, there was/is no “save spec file” message yet.
also, by running bin/rake autospec --help, i saw no --save option.

I didn’t understand what save the file meant, so my full command was bin/rake autospec > spec.rb ← probably this is wrong

I meant in Vim or whatever you use, save the spec file, there is a watcher on it that will invoke the spec runner once it is saved.

Also see: How do I run only discourse/plugins/poll/spec? - #6 by tgxworld

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

Finally i did it :^).

With the help of that link, i ran the tests by using this command:
bundle exec rake plugin:spec["discourse-github-linkback"]
and, ofc, i was in ~/discourse when doing that.

Thanks for all your help @sam!

(1st PR for discourse-plugin babyyyyy :tada:)

8 إعجابات

My Qunit-Tests aren’t executed or at least they don’t show me any output.
They finish with the following:

No output has been received in the last 10m0s, this potentially indicates a stalled build or something wrong with the build itself.
Check the details on how to adjust your build configuration on: https://docs.travis-ci.com/user/common-build-problems/#Build-times-out-because-no-output-was-received

Travis.CI Result - Travis CI
Test-File - GitHub - kokoro-ko/discourse-humble-box: humble-bundle onebox · GitHub

I am not that skilled with CI yet and haven’t found my mistake by now.

Do your tests pass if you visit /qunit on your development environment? How about if you run rake plugin:qunit[discouse-humble-box]?

إعجابَين (2)