استيراد نموذج أو مكون من مكون إضافي في مكون إضافي مخصص: فشل الاختبارات

[Marine (Marine Monnier-Baron)]

مرحباً،
نحن نستخدم Discourse الإصدار 3.5.0.
لدينا المكون الإضافي الخاص بنا والذي نعيد فيه كتابة عناصر discourse المختلفة ونضيف وظائفنا الخاصة.

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

• النموذج DiscoursePostEventEvent الموجود في plugins/discourse-calendar/assets/javascripts/discourse/models/discourse-post-event-event.js

• المكون PostEventBuilder الموجود في plugins/discourse-calendar/assets/javascripts/discourse/components/modal/post-event-builder.js

بالإضافة إلى ذلك، لقد كتبنا اختبارات تكامل لوظائفنا التي وضعناها في المكون الإضافي الخاص بنا تحت الدليل /test.

import { visit } from "@ember/test-helpers";
import { test } from "qunit";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";

acceptance("TOTO", function (needs) {
  test("coopaname integration - composer", async function (assert) {
    await visit("/");
    assert.equal(1, 1, "OK");
  });
});

نحن قادرون على فعل ما نريد، ولكن الاختبارات تفشل بغض النظر عن طريقة الاستيراد.

الاستيراد في بداية الملف

عندما نستورد النموذج والمكون الخاص بنا باستخدام طريقة import في بداية الملف:

import DiscoursePostEventEvent from "discourse/plugins/discourse-calendar/discourse/models/discourse-post-event-event";
import PostEventBuilder from "discourse/plugins/discourse-calendar/discourse/components/modal/post-event-builder";

كل شيء على ما يرام عند التنفيذ، ولكن عندما نقوم بتشغيل اختبارنا، فإنه لا يتم تنفيذه

Require في بداية الملف

عندما نستورد النموذج والمكون الخاص بنا باستخدام طريقة require في بداية الملف:

const DiscoursePostEventEvent = require("discourse/plugins/discourse-calendar/discourse/models/discourse-post-event-event").default;
const PostEventBuilder = require("discourse/plugins/discourse-calendar/discourse/components/modal/post-event-builder".default;

كل شيء على ما يرام عند التنفيذ، ولكن عندما نقوم بتشغيل اختبارنا، فإنه لا يتم تنفيذه

هذا ينتج نفس الشيء كما هو الحال مع import.

Require في جسم الملف

عندما نستورد النموذج والمكون الخاص بنا باستخدام طريقة require في جسم الدالة:

import { withPluginApi } from "discourse/lib/plugin-api";

function initializeEventBuilder(api) {
  const DiscoursePostEventEvent =
     require("discourse/plugins/discourse-calendar/discourse/models/discourse-post-event-event").default;
  const PostEventBuilder =
     require("discourse/plugins/discourse-calendar/discourse/components/modal/post-event-builder").default;

  ... بقية الكود
}

export default {
  name: "add-custom-create-event-button",
  initialize(container) {
    withPluginApi(initializeEventBuilder);
  },
};

كل شيء على ما يرام عند التنفيذ، ولكن عندما نقوم بتشغيل اختبارنا، فإنه يفشل.

لم يتم العثور على النموذج.

باختصار، نريد أن نعرف كيفية استيراد النماذج والمكونات وما إلى ذلك بشكل صحيح من المكونات الإضافية الأخرى حتى نتمكن من تشغيل اختبارات التكامل.
شكرا!

[manut (Manuel Tancoigne)]

مرحباً @Marine

يبدو أن المشكلة تكمن في استخدام إعدادات خاطئة في كتلة needs.settings في الكود الخاص بنا:

acceptance("Some tests", function (needs) {
  needs.settings({
    // This won't enable the right settings, so the calendar plugin won't be loaded, and the files we need won't be available
    // discourse_post_event_enabled: true, 
    // 
    // Enabling the calendar will solve the issue:
    calendar_enabled: true

    our_plugin_enabled: true
  });


  test("The test", async function (assert) {
    await visit("/");
    assert.equal(1, 1);
  });
});

[manut (Manuel Tancoigne)]

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

أي فكرة؟

[david (David Taylor)]

عند اختبار إضافة في qunit، نقوم بتحميل JS لتلك الإضافة المحددة فقط. هذا يساعد على تجنب المشكلات المفاجئة عندما تتفاعل الإضافات المتعددة مع بعضها البعض. كما أنه يساعد على ضمان عدم اعتماد إضافة ما بشكل غير متوقع على إضافة أخرى.

في حالتك، يبدو أن التفاعل متعمد، وتتوقع دائمًا أن يكون لدى المستخدمين discourse-calendar ممكّنًا. في هذه الحالة، يمكنك إضافة بعض الإعدادات إلى ملف about.json والذي سيجعل discourse-calendar JS متاحًا في اختبارات إضافتك الخاصة. إليك مثال:

about.json

^^ في هذه الحالة، يتم إضافة discourse-assign. في حالتك، ستكون discourse-calendar.

[manut (Manuel Tancoigne)]

شكراً! لم أكن أعرف عن about.json وقد حلّت المشكلة. الآن، يعود الأمر إلينا لإعادة إنشاء سياق وظيفي بالكامل

شكراً مرة أخرى!

[david (David Taylor)]

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

العيب هو أنها أبطأ بكثير. لذا من الأفضل الاحتفاظ بأي اختبارات وحدات/مكونات في qunit إن أمكن.

[manut (Manuel Tancoigne)]

شكرا على النصيحة!

أنا مرتاح أكثر لمواصفات النظام حيث أنني أستخدم عادةً RSpec أو Cucumber لاختبار تطبيقات Rails الخاصة بي

سأرى ما يستحق الاختبار باستخدام QUnit أو RSpec، اعتمادًا على حالة الاختبار.

في الوقت الحالي، تمكنت من إعادة إنتاج خطأ الواجهة الأمامية الذي أردنا إصلاحه، لذلك سأتعمق أكثر في اختبارات QUnit.