اختبار النظام الشامل للسمات ومكونات السمات

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

يُعد كتابة اختبارات آلية للسمات جزءًا مهمًا من عملية تطوير السمة، حيث يمكن أن يساعد في ضمان استمرار عمل الميزات التي تقدمها السمة بشكل جيد مع ميزات Discourse الأساسية بمرور الوقت.

حاليًا، يدعم Discourse طريقتين لكتابة اختبارات الانحدار (regression tests) للسمات. تتبع الطريقة الأولى بشكل أساسي طريقة EmberJS وتتضمن فقط اختبار الكود من جانب العميل (client side code). الطريقة الثانية هي كتابة اختبارات نظام Rails التي تسمح لك باختبار الكود من جانب الخادم (server side code) والكود من جانب العميل في نفس الوقت. ستركز هذه الوثيقة على كتابة اختبارات نظام Rails للسمات، وهو ما نوصي مؤلفي السمات بالتركيز عليه عند كتابة اختبارات لسماتهم أيضًا.

اختبارات نظام Rails للسمات

في جوهرها، يستخدم Discourse أطر عمل الاختبار RSpec و Capybara لتشغيل اختبارات نظام Rails. المعرفة الأساسية بـ RSpec و Capybara مطلوبة للبدء، ونوصي بقراءة الروابط التالية أولاً قبل البدء:

إرشادات ونصائح لكتابة اختبارات نظام السمة

فيما يلي بعض الإرشادات التي يجب اتباعها عند كتابة اختبارات النظام:

  • من المتوقع أن توجد اختبارات النظام في الدليل spec/system داخل دليل السمة.

  • من المتوقع أن يتبع كل ملف في الدليل spec/system التنسيق صيغة_وصف_اختبار_النظام_spec.rb.

  • يجب أن يحتوي كتلة RSpec describe ذات المستوى الأعلى على البيانات الوصفية system: true. مثال:

    RSpec.describe "اختبار سمة أو مكون سمة", system: true do
  it "يعرض المكون" do
    ...
  end
end

  • تتوفر طرق مساعدة هي upload_theme و upload_theme_component ويجب استدعاؤها قبل تشغيل الاختبارات. مثال:

    RSpec.describe "اختبار سمة أو مكون سمة", system: true do
  let!(:theme) do
    upload_theme
  end

  # أو `upload_theme_component` إذا كانت السمة الخاصة بك مكونًا
  #
  # let!(:theme_component) do
  #   upload_theme_component
  # end

  it "يعرض المكون" do
    ...
  end
end

  • يمكن تغيير إعدادات السمة في اختبار النظام عن طريق استدعاء الطريقة update_setting على الكائن theme ثم حفظ السمة.

    مثال:

    RSpec.describe "اختبار سمة", system: true do
  let!(:theme) do
    upload_theme
  end

  it "لا يعرض السمة عندما تكون قيمة إعداد السمة `should_render` هي false" do
    theme.update_setting(:should_render, false)
    theme.save!

    expect(page).not_to have_css("#some-identifier")
  end
end

  • يستخدم Discourse جوهرة التصنيع (fabrication gem) التي تسمح لنا بإعداد بيانات الاختبار التي نحتاجها لكل اختبار بسهولة. يمكن استخدام القائمة الكاملة للمصنعين (fabricators) المتوفرة في نواة Discourse في اختبار نظام السمة أيضًا.

    مثال:

    RSpec.describe "اختبار سمة", system: true do
  let!(:theme) do
    upload_theme
  end

  it "يعرض السمة" do
    user = Fabricate(:user)
    category = Fabricate(:category)
    topic = Fabricate(:topic)
    topic_2 = Fabricate(:topic, title: "هذا هو الموضوع رقم 2")

    ...
  end
end

  • استخدم الطريقة المساعدة sign_in للاختبار مقابل ملفات تعريف مستخدمين مختلفة.

    مثال:

    RSpec.describe "اختبار سمة", system: true do
  let!(:theme) do
    upload_theme
  end

  it "لا يعرض السمة لمستخدم عادي" do
    user = Fabricate(:user)
    sign_in(user)

    ...
  end

  it "يعرض السمة لمستخدم إداري" do
    admin = Fabricate(:admin)
    sign_in(admin)

    ...
  end
end

  • في بعض الأحيان، قد ترغب في تسهيل الاستعلام عن أجزاء من الصفحة وفحصها وإعادة استخدامها لاختبارات النظام الخاصة بك. للقيام بذلك، يمكنك استخدام مفهوم PageObjects (كائنات الصفحة)، والذي ستراه مُنفذًا بشكل متكرر في النواة.

    مثال:

    # frozen_string_literal: true

module PageObjects
  module Components
    class MyCustomComponent < PageObjects::Components::Base
      COMPONENT_SELECTOR = ".my-custom-component"

      def click_action_button
        find("#{COMPONENT_SELECTOR} .action-button").click
      end

      def has_content?(content)
        has_css?("#{COMPONENT_SELECTOR} .content", text: content)
      end
    end
  end
end

    ويمكنك بعد ذلك استخدامه عن طريق استيراده باستخدام require_relative المدمج في Ruby في الجزء العلوي من ملف اختبار النظام الخاص بك.

    require_relative "page_objects/components/my_custom_component"

تشغيل اختبارات نظام السمة

يمكن تشغيل اختبارات نظام السمة باستخدام جوهرة سطر الأوامر discourse_theme (rubygem) ويمكن تثبيتها باستخدام هذه التعليمات.

بمجرد تثبيت سطر الأوامر discourse_theme، يمكنك تشغيل جميع اختبارات النظام في دليل السمة الخاص بك عن طريق تشغيل الأمر التالي:

discourse_theme rspec .

في أول مرة يتم فيها تشغيل الأمر rspec لسمة جديدة، سيُطلب منك ما إذا كنت ترغب في تشغيل اختبارات النظام باستخدام بيئة تطوير Discourse محلية أو حاوية Docker ستقوم بإعداد بيئة التطوير لك. ما لم تكن مطور إضافات أو سمات Discourse متمرسًا، نوصي باختيار n وتشغيل الاختبارات باستخدام حاوية Docker لأن كل شيء سيعمل مباشرة دون الحاجة إلى إعدادات إضافية.

يدعم الأمر discourse_theme rspec أيضًا تشغيل دليل اختبار واحد، أو ملف، أو ملف مع أرقام أسطر محددة.

discourse_theme rspec /path/to/theme/spec/system
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb
discourse_theme rspec /path/to/theme/spec/system/my_system_spec.rb:12

الوضع المرئي (Headful mode)

بشكل افتراضي، يتم تشغيل اختبارات نظام السمة باستخدام متصفح Google Chrome في الوضع غير المرئي (headless mode). هذا وضع لا يقوم فيه المتصفح بعرض أي شيء على الشاشة مما يسمح بإنهاء تشغيل الاختبارات بشكل أسرع. ومع ذلك، غالبًا ما يكون من المفيد أن تكون قادرًا على رؤية ما يفعله اختبار النظام الذي كتبته عن طريق استخدام Google Chrome في الوضع المرئي (headful mode). يمكنك تمكين هذا الوضع عن طريق تمرير الخيار --headful إلى الأمر discourse_theme rspec.

discourse_theme rspec . --headful

سيقوم الأمر أعلاه بتشغيل اختبارات النظام في الوضع المرئي حيث يمكن رؤية تشغيل الاختبارات بصريًا.

يمكنك أيضًا إيقاف تنفيذ الاختبار مؤقتًا في حالة الاختبار الخاصة بك عن طريق استخدام الطريقة المساعدة pause_test، مما يسمح لك بفحص الحالة الحالية للتطبيق في المتصفح.

مثال:

RSpec.describe "اختبار سمة", system: true do
  let!(:theme) do
    upload_theme
  end

  it "يعرض السمة" do
    visit("/")
    click("#some-button")
    pause_test
    # ...
  end
end

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

18 إعجابًا
6

لاحظت أنه في اختبارات المكونات عادةً، يتم استخدام let!(:theme) بدلاً من let!(:theme_component). على سبيل المثال، في هذا الاختبار:

ومع ذلك، يقترح الدليل استخدام let!(:theme_component) لمكونات الثيم:

هل هناك سبب لاستخدام theme_component كما هو موضح في هذا الدليل؟

إعجابَين (2)