React: التعبير عن المزيد من الاختبارات عبر API العامة

يمكنني إلقاء نظرة على هذا خلال عطلة نهاية الأسبوع ومعرفة ما إذا كان بإمكاني معالجته على المدى القصير.

عظيم شكرا! إذا اخترت أي اختبار معين ، فيرجى التعليق باسم الملف في سلسلة الرسائل حتى لا يبدأ شخص آخر في العمل على نفس الاختبار.

أنا بالتأكيد مهتم جدًا بالمساهمة في هذا. سأبحث خلال نهاية هذا الأسبوع وأجد فرصة لإعادة البناء!

أنا مهتم أيضًا 👍

لقد نشرت قائمة الاختبارات في أول مشاركة. فقط دعني أعرف أيها ترغب في أخذها وسأخصصها لك.

ReactDOMInput-test مناسب لي :)

تضمين التغريدة

يمكنني العمل على ReactErrorUtils-test . 😄

سوف ألقي نظرة على setInnerHTML-test.js

سأفعل getEventCharCode-test.js . 😀

يمكنني العمل على getEventKey-test.js .

يمكنني أخذ escapeTextContentForBrowser-test.js .

أود أن أعطي فرصة ChangeEventPlugin-test.js :)

يمكنني أخذ SyntheticEvent-test.js

أود العمل على EnterLeaveEventPlugin-test.js

أود العمل على ReactDOMEventListener-test.js

أود الحصول على BeforeInputEventPlugin-test.js

أود الحصول على SyntheticKeyboardEvent-test.js. شكرا 👍

اسمحوا لي أن آخذ inputValueTracking-test.js

أود العمل على SyntheticWheelEvent-test.js

هل يمكنني أخذ: ReactBrowserEventEmitter-test.js ؟

أنا آخذ SelectEventPlugin-test.js

أود العمل على ReactDOMComponentTree-test.js

أود العمل على ReactTreeTraversal-test.js

أهلا! 👋 أود العمل على ReactCoroutine-test.js

يمكنني أخذ SyntheticClipboardEvent-test.js

أود العمل على validateDOMNesting-test.js

يمكن أن آخذ EventPluginRegistry-test.js

أود تجربة ReactDOMComponent-test.js

أهلا! أود أن أجرب على quoteAttributeValueForBrowser-test.js ! :عضلة:

أهلا! أود أن أجرب على ReactDOMServerIntegration-test.js !

سآخذ ReactIncrementalPerf-test.js

سأفعل الأمر getNodeForCharacterOffset-test.js

burnsbeaver أيهما هو ، FallbackCompisitionState-test أم getNodeForCharacterOffset-test ؟ نود أن نبدأ باختبار واحد لكل شخص.

getNodeForCharacter من فضلك. لقد حذفت التعليق الآخر ، آسف على اللبس!

لا يزال لدينا FallbackCompositionState-test.js و ReactFiberHostContext-test.js مجانًا!

سآخذ FallbackCompisitionState!

يمكنني تجربة ReactFiberHostContext-test.js

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

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

adsonpleal آسف لإحباطك - لقد تحققت للتو ، وللأسف قمنا بالفعل بإصلاح ReactFiberHostContext-test . لم أدرك هذا في البداية ، لكن TODO عفا عليه الزمن. هذا هو الاختبار الوحيد الذي يمكنني رؤيته وتم إصلاحه بالفعل.

gaearon رائع ، إعادة هيكلة ReactDOMInput-test ستستغرق بعض الوقت لكني آمل أن أنهي كل شيء في نهاية هذا الأسبوع.

لدي شك بسيط:
هل من المقبول تكرار كل هذا السلوك من الوظيفة setUntrackedValue التي تستخدم inputValueTracking إلى شيء مثل ReactTestUtils.Simulate.? ؟

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

بالنسبة إلى inputValueTracking @ ، يجب أن يكون لدى jquense معظم السياق حول كيفية القيام بذلك بشكل أفضل. ولكن طالما أنك تعمل ، يمكننا مراجعة ومعرفة ما إذا كان النهج يعمل أم لا.

مجرد تنبيه لأي شخص آخر ، كان لدي إصدار أقدم من الغزل مثبت (0.22) وكنت أحاول إجراء الاختبارات محليًا وكان كل شيء ينكسر. أدت ترقية الغزل إلى الإصدار الأحدث (1.2.1) إلى إصلاح المشكلة وتعمل الاختبارات بشكل جيد الآن.

sadpandabear لدي نفس الوحدة في ملف الاختبار الخاص بي ، لذا سأقوم بفحص التنفيذ قريبًا

gaearon بالنسبة لاختبارات setInnerHTML ، فإنهم يشعرون أنهم يعتمدون على وجود setInnerHTML لمجموعة الاختبار لتكون منطقية.

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

تحرير: ما لم أكن مخطئًا ... تحتوي SVGs على خاصية innerHTML . لست متأكدًا من أن الجزء الثاني من الاختبارات في هذا الملف ضروري.

silvestrijonathan أعتقد أن ما تحاول هذه الاختبارات التحقق منه حقًا هو أن dangerouslySetInnerHTML يعمل كما هو متوقع في React. لذلك إذا قمت بتعديل هذه الاختبارات لاستخدام ReactDOM وعرضت نفس المحتوى باستخدام dangerouslySetInnerHTML ، فيجب أن يكون ذلك كافيًا. لا بأس في إعادة تسمية الاختبار إلى dangerouslySetInnerHTML-test إذا شعرت أن ذلك سيكون أكثر ملاءمة.

بعد بضع ساعات من اللعب بملف الاختبار الخاص بي ، لدي اقتراح قوي للوافدين الجدد (مثلي): ابدأ اختباراتك ببيئة نظيفة (ملف).
كنت أقوم بتحرير الملف الحالي وسخر من بعض الوظائف الداخلية ، لذلك تم كسر بعض الوظائف ReactTestUtils !! استغرق الأمر مني بعض الوقت لأدرك سبب عدم عمل الأشياء على النحو المنشود ..

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

dphurley ، لقد لاحظت أنك تعمل على ReactIncrementalPerf-test . كنت أعمل أيضًا على مجموعة اختبار تستخدم ReactCoroutine ، لذلك أردت أن أقدم لك تنبيهًا بشأن PR: # 11338.
لست متأكدًا مما إذا كنت قد قدمت بالفعل PR ، ولكن إذا لم تقم بذلك ، فقد تكون فكرة جيدة أن تبنيها على # 11338 (إذا تم قبولها).

gaearon شكرا على نصيحتك. فكرت في استخدام React-DOM مع dangerouslySetInnerHTML للاختبارات ، لذلك سأقوم بذلك بهذه الطريقة!

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

لقد تم دمج العلاقات العامة لأول مرة!

ألق نظرة عليها: https://github.com/facebook/react/pull/11309

إذا كنت تعمل على أي شيء متعلق بالأحداث ، أقترح عليك قراءة كل من المناقشات في https://github.com/facebook/react/pull/11309 والمراجعات في:

https://github.com/facebook/react/pull/11316
https://github.com/facebook/react/pull/11317
https://github.com/facebook/react/pull/11327
https://github.com/facebook/react/pull/11332

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

قوافل كبيرة لمرجع الشكر!

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

ما زال يتعين عليّ النظر في الاختبار الذي اخترته. مشغول بأشياء أخرى. سأحاول رفع العلاقات العامة في غضون يومين آخرين ، هل يمكنني شراء بعض الوقت؟

يبدو جيدًا ، بالتأكيد!

كان لدي نفس المشكلة

اندمجت علاقات عامة أخرى! https://github.com/facebook/react/pull/11316

اثنان آخران لأسفل. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

كتبت تحليلاً صغيراً حول كيفية تعاملي مع أحد الاختبارات. https://github.com/facebook/react/pull/11385#issuecomment -341934588

بقدر ما أستطيع أن أقول إنهم جميعًا مأخوذون ، يرجى النشر هنا إذا كان هناك أي شيء مجاني وسأشاهده

لقد قمت بدمج اثنين من العلاقات العامة الأخرى التي تتعامل بشكل خاص مع SyntheticEvent s. إذا أجريت أي اختبارات ذات صلة ، فيرجى التحقق منها ومحاولة التطابق في الأسلوب والنهج: https://github.com/facebook/react/pull/11365 و https://github.com/facebook/react/issues/ 11299

gaearon بالنسبة إلى EventPluginRegistry-test.js ، كيف يجب علينا إعادة كتابة الاختبار باستخدام واجهة برمجة التطبيقات العامة ، أرى أننا نقوم بحقن المكونات الإضافية الافتراضية في ReactDom.js -> ReactDOMClientInjection.js
{
SimpleEventPlugin ،
EnterLeaveEventPlugin ،
ChangeEventPlugin ،
اختر حدثا بلوجين ،
BeforeInputEventPlugin ،
}

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

require('react-dom').__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventPluginHub.injection.injectEventPluginsByName({ 'TapEventPlugin': require('./TapEventPlugin.js')(shouldRejectClick) });

أخشى أن أكون قد تجاوزت رأسي على ReactTreeTraversal-test.js
إذا أراد أي شخص آخر تصويرها ، فلا تتردد في القيام بذلك.

تضمين التغريدة

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

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

gdevincenzi يبدو جيدًا ، سأقوم بإزالة المهمة.

أيضًا ، سأكون بعيدًا هذا الأسبوع ، لكن من فضلك لا تدع هذا يمنعك من الاستمرار في هذا. آمل أن يتم دمج عدد قليل من العلاقات العامة المقدمة الأسبوع المقبل.

يمكنني أخذ ReactTreeTraversal-test.js - إنها واجهة برمجة تطبيقات غير مألوفة ولكنها تبدو فرصة جيدة لتعلمها. نرحب بالمشورة gdevincenzi

تهانينا لـ gordyd لإنهاء واحدة معقدة نوعًا ما: https://github.com/facebook/react/pull/11383.

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

لم نتلق PR حتى الآن من المستخدمين التالين:

تضمين التغريدة
تضمين التغريدة
تضمين التغريدة
تضمين التغريدة
@ sw-yx
@ king0120
@ aarboleda1
تضمين التغريدة
@ dms1lva
تضمين التغريدة
تضمين التغريدة
تضمين التغريدة
تضمين التغريدة

هل يمكنك تأكيد ما إذا كنت قد بدأت العمل على هذا؟ لدي المزيد من الأشخاص الذين يرغبون في المساعدة في قائمة الانتظار ، لذا إذا لم يكن لديك الوقت ، فسيكون من الرائع منح الآخرين فرصة للعمل على هذا الأمر.

andrevargas لاحظت للتو مناقشتك في https://github.com/facebook/react/pull/11331. أعتقد أنه من المنطقي إبقاء هذه التغييرات موحدة هناك.

الرجاء إضافتي إلى قائمة الانتظارgaearon

gaearon نعم ، أنت على حق. فقط للتأكيد ، تعمل jeremenichelli على quoteAttributeValueForBrowser-test.js في # 11331 ، وأنا على علم بذلك. أعتقد أنه يمكنك تحديث هذا الموضوع باسم المستخدم ورابط العلاقات العامة.

الرجاء أيضًا إضافتي إلى قائمة الانتظار gaearon

gaearon لقد بدأت العمل عليه. التخطيط إما لنشر نتائجي أو العلاقات العامة في وقت ما هذا الأسبوع.

gaearon لقد بدأت العمل على SyntheticKeyboardEvent.js. تخطط للحصول على العلاقات العامة حتى نهاية هذا الأسبوع.

gaearon يمكنني أيضًا إجراء أي من الاختبارات في حال لم يكن لدى الأشخاص الذين تم تعيينهم في الأصل الوقت اللازم للعمل عليها.

gaearon آسف للتأخير الطويل ، أنا أقوم بعمل PR الآن. تحديث: هل يمكن لشخص ما أن يشرح بإيجاز ما الذي يجب علي فعله لعدم الاعتماد على واجهات برمجة التطبيقات الخاصة؟ أيضًا ، لا أعرف شيئًا عن top<EventName> s. شكرا.

https://github.com/facebook/react/blob/92b7b172cce9958b846844f0b46fd7b”c5140d/packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js> extract وظيفة

gaearon آسف للتأخير الطويل 😅. سأعمل على هذا اليوم وسأرسل إليك رسالة إذا كانت لدي بعض الشكوك بشأن ذلك.

morajabi إحدى الطرق المحتملة لمعالجة هذا الأمر

• انظر إلى SelectEventPlugin وافهم الوظيفة التي يوفرها للمستخدم
• اكتب الكود الذي يستخدم هذه الوظيفة
• قم بتعطيل تحميل SelectEventPlugin (قم بالتعليق عليه) وانظر أي عطل (تأكد من كسر شيء ما)
• الكود الذي كتبته هو الآن الإصدار الأول من اختبارك حتى تتمكن من وضعه في حالة اختبار
• قم بتمكين تحميل SelectEventPlugin مرة أخرى وتأكد من اجتياز الاختبار
• تحسين التعليمات البرمجية الخاصة بك

gaearon اعتذار عن التأخير
بناءً على اقتراحك ، حاولت التعليق على أجزاء قليلة من EventPluginRegistry.js ووجدت الكثير من حالات الاختبار التي أخفقت ( SyntheticWheelEvent ، ReactDOMComponentTree ، SyntheticClipboardEvent ، SyntheticWheelEvent ، inputValueTracking ، SimpleEventPlugin ، ChangeEventPlugin ، ReactDOMComponentTree إلخ) ،
أعتقد بشكل أساسي أن ReactBrowserEventEmitter.js يستخدم registrationNameDependencies وهو محدد بـ EventPluginRegistry.js

على الرغم من عند التعليق

• خط 208
• السطر 38-41

لم تفشل أي من حالات الاختبار (فشل الاختبار EventPluginRegistry فقط)
بناءً على ذلك ، أعتقد أن مجموعات الاختبار الأخرى EventPluginRegistry بالفعل في مجموعات الاختبار الأخرى.

مريح لدينا الحق في الريبو.

لم أفهم ما تعنيه بهذا

هل هناك أي اقتراح آخر يمكنني العمل عليه لإعادة كتابة EventPluginRegistry باستخدام واجهة برمجة التطبيقات العامة؟

بالنسبة للآخرين (لست متأكدًا مما إذا كان قد تم بث هذا من قبل) وجدت بودكاست فيديو kentcdodds - تجول رمز الحدث التفاعلي بواسطة Ben Alpert مفيد جدًا.

آسف gaearon حاولت أن أفعل ، لكن الآن ليس لدي وقت الفراغ لإنهائه
لذلك إذا أراد أي شخص آخر حل مشكلاتي ، فلا تتردد :)

danilowozgaearon إذا كنت لا تمانع يمكنني أخذ BeforeInputEventPlugin-test.js.

timjacobi ما هو استبدال ReactDOMComponentTree.getInstanceFromNode ؟

أيضا ، أين يجب أن أقوم بتعطيله؟

قم بتعطيل تحميل SelectEventPlugin (قم بالتعليق عليه) وانظر ما الذي يعطل (تأكد من تعطل شيء ما)

morajabi لست متأكدًا من أنك تتعامل مع هذا على المستوى الصحيح. هل يمكنك فتح العلاقات العامة الخاصة بشركة WIP بما لديك حتى الآن؟ لا أريد أن ألوث هذا الموضوع كثيرا.

timjacobi لا أستطيع عندما لم أرتكب أي شيء جديد. أنا آسف لأنني مشغول جدًا هذه الأيام إذا كان بإمكان أحدهم أن يأخذ SelectEventPlugin-test .

يبدو أننا لم نعد بحاجة إلى ReactDOMServerIntegration-test (ccminerado) لأنني قمت بتغطيته مع تغييرات أخرى.

aqumus بناءً على تحليلك ، سأزيل EventPluginRegistry-test.js من هذه القائمة. أعتقد أننا سنبقي هذا كاختبار وحدة لتلك الأجزاء الداخلية المعينة ، لكن من الجيد معرفة أن المنطق الفعلي مشمول باختبارات أخرى.

@ king0120 سأعيد تعيين getEventCharCode-test لـ @ aarboleda1 لأنه يعمل على اختبار وثيق الصلة جدًا في https://github.com/facebook/react/pull/11631 ، وقد يكون من الأسهل القيام بها معًا.

morajabigaearon يمكنني إلقاء نظرة على SelectEventPlugin-test.js أيضًا.

@ email2vimalraj لمعلوماتك ، لقد أعدت كتابة inputValueTracking-test .

لا يوجد مالك لهذه الاختبارات حاليًا:

• [] getNodeForCharacterOffset-test.js (3/5) مأخوذ من accordeiro
• [] ReactBrowserEventEmitter-test.js (5/5) مأخوذ منmadeinfree
• [] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (يجب دمج 5/5) بواسطةGordyD
• [x] SelectEventPlugin-test (2/5) مأخوذ منskiritsis
• [x] ReactTreeTraversal-test.js (4/5) تم التقاطها بواسطة timjacobi

لقد قمت بفرزهم حسب تصوري لصعوباتهم.

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

لاحظ أن هذه الأمور تزداد تعقيدًا ، لذا فهي ليست صديقة للمبتدئين تمامًا. إنها ليست بدائل ميكانيكية ؛ ستحتاج إلى فهم ما يحاول الاختبار التحقق منه ثم الخروج باختبار API عام مكافئ (والذي قد يبدو مختلفًا تمامًا).

لأخذ هذه الأشياء ، يجب أن تكون مرتاحًا في البحث عن الأشياء بنفسك ، على غرار ما فعلته GordyD في https://github.com/facebook/react/pull/11383. في الواقع ، إذا كان GordyD يود أن يأخذ أيًا من هؤلاء ، فسأكون سعيدًا لمنحه واحدة!

skiritsis نظرًا لأنك كنت مهتمًا ، فسأعيد تعيين SelectEventPlugin-test لك.

أرغب في العمل على ReactBrowerEventEmitter-test.js 💪

gaearon : شكرًا على ذلك ، آسف لعدم الرد في الوقت المحدد. مشغول بأعمال أخرى. سأبحث في كيفية إعادة كتابتك لفهمي.

يمكنني إلقاء نظرة على ReactTreeTraversal-test.internal.js

madeinfree لنمنحkwnccc بضعة أيام للرد أولاً لأنه موجود بالفعل في قائمة الانتظار. إذا لم يكن مهتمًا ، فسأخصصه لك لاحقًا.

gaearon موافق! حصلت عليه ، شكرا لك ~

gaearon سألقي نظرة على الجمع بين BeforeInputEventPlugin + FallbackCompositionState إذا لم يكن هناك محتجزون آخرون.

يبدو جيدًا ، شكرًا GordyD!

بالمناسبة ، إليك بعض اختبارات الأحداث الأخرى التي تم تحويلها ، لإعطائك فكرة عما ينتهي به هذا الرمز عادةً: https://github.com/facebook/react/pull/11631 https: // github. كوم / فيسبوك / رد فعل / سحب / 11525

gaearon يسعدني أن آخذ ReactBrowserEventEmitter-test.js أيضًا إذا لم يكن أحد يريد ذلك.

تضمين التغريدة

هل ما زلت مهتمًا بـ ReactBrowerEventEmitter ؟ إذا كان الأمر كذلك ، من فضلك خذها وابقنا على اطلاع!

gaearon موافق! أود أن آخذه.

لك ذالك.

أي شخص يريد أن يأخذ المتبقي getNodeForCharacterOffset-test ؟

يمكنني المساعدة في هذا ( getNodeForCharacterOffset-test ) :)

gaearon لم أجد الوقت للغوص في ReactIncrementalPerf-test.js كما اعتقدت. نعتذر عن التمسك بها لفترة طويلة ولكن الأمر متروك للإمساك به إذا أراد أي شخص ذلك!

accordeiro لقد فهمت!

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

kwnccc هل تريد البحث في ReactIncrementalPerf-test.js ؟

هل يمكنني البحث في ReactIncrementalPerf-test.js ؟ أو إذا لزم الأمر يمكنني مساعدة kwnccc في اختبار الكتابة لذلك
لا أرى أي ملف باسم ReactIncrementalPerf.js ، فهل علينا كتابة اختبار ReactPortal.js ؟

إذا كنت قد فهمت المشكلة قليلاً في ReactIncrementalPerf-test.js (صححني إذا كنت مخطئًا) ، فهذا يعني أنني بحاجة للتبديل من ReactPortal.createPortal (...) إلى واجهة برمجة تطبيقات عامة مثل رد فعل دوم مع ReactDOM .createPortal (...)؟ تضمين التغريدة

gaearon أود حقًا تجربة ReactIncrementalPerf-test.js . منذ أن بدأ @ abiduzz420 في التحقق من ذلك ، يمكننا حتى العمل كفريق إذا لزم الأمر.

نعم متأكد من kwnccc أنا سعيد للعمل معك. كنت في قائمة الانتظار أمامي ، لذلك كل ما لك!

kwnccc يظهر لي خطأ اختبار واحد في yarn test وخطأ تدفق عند تشغيل yarn flow . يجب أن أدفع الكود إلى الريبو المتشعب الخاص بي: https://github.com/abiduzz420/react حتى تتمكن من العمل أيضًا

 FAIL  packages\react-reconciler\src\__tests__\ReactIncrementalPerf-test.internal.js (11.191s)
  ● ReactDebugFiberPerf › supports portals

    Invariant Violation: Target container is not a DOM element.

      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at Object.createPortal (packages/react-dom/src/client/ReactDOM.js:1112:70)
      at Object.<anonymous> (packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js:510:116)

$ yarn flow
yarn run v1.3.2
$ node ./scripts/tasks/flow.js
Error: packages/react-reconciler/src/ReactFiberHostContext.js:87
 87:     const nextContext = getChildHostContext(context, fiber.type, rootInstance);
                                                 ^^^^^^^ NoContextT. This type is incompatible with the expected param type of
                    v---------------------------------------------
 31: export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 32:   config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
 33: ): HostContext<C, CX> {
     --------------------^ some incompatible instantiation of `CX`

Error: packages/react-reconciler/src/ReactFiberHostContext.js:87
 87:     const nextContext = getChildHostContext(context, fiber.type, rootInstance);
                                                                      ^^^^^^^^^^^^ NoContextT. This type is incompatible with the expected param type of
                    v---------------------------------------------
 31: export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
 32:   config: HostConfig<T, P, I, TI, HI, PI, C, CC, CX, PL>,
 33: ): HostContext<C, CX> {
     --------------------^ some incompatible instantiation of `C`
Found 2 errors
Flow failed
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@ abiduzz420 مشكلة التدفق مشكلة معروفة في Windows. إنه غير مرتبط (لكننا سنحتاج إلى معرفة سبب حدوثه). راجع https://github.com/facebook/react/issues/11703.

kwnccc بالنسبة إلى ReactIncrementalPerf-test ، نعم سيتطلب هذا بعض التفكير. أعتقد أنه من الأفضل في هذه المرحلة نقل ReactPortal مؤقتًا إلى shared . ثم اطلب من ReactNoop تقديم طريقة createPortal() الخاصة به (مثل ReactDOM يفعل).

مرة أخرى أسفل! https://github.com/facebook/react/issues/11299

gaearon لقد قمت بنقل ReactPortal إلى الدليل المشترك ، وجميع الاختبارات اجتازت. أحتاج إلى القليل من المساعدة في تنفيذ الطريقة الخاصة بي createPortal() مقابل ReactNoop . أخذ الإلهام من كيفية كتابة createPortal() في ReactDOM سأعيد ReactPortal.createPortal(children,container,null,key) .
أفكر في هذه السطور:

function createPortal( children: ReactNodeList, container: Container, key: ?string = null) {
invariant( 
// TODO: Need to figure out this part of the code
);
return ReactPortal.createPortal(children, container, null, key);
}

واسمحوا لي أن أعرف إذا كنت أفعل ذلك بشكل صحيح؟

gaearon بلدي رمز لا يزال مسح. لكنني أردت التحقق مرة أخرى مما إذا كنت على المسار الصحيح. سيساعدني حقًا إذا كان بإمكانك إلقاء نظرة سريعة على الكود الخاص بي وتوضيح بعض الشكوك:

1. هل النهج الذي اتبعته صحيح؟
2. أفترض أن الاختبارات تحتاج إلى تغطية جميع العلامات والسيناريوهات التي تم اختبارها في القائمة
   الاختبارات من أجل الحفاظ على تغطية الاختبار. لست متأكدًا مما إذا كانت هناك طريقة لإنشاء مكونات ديناميكيًا باستخدام هذه العلامات الخاصة والتنسيقية. هل يمكنك أن تعطيني بعض المؤشرات حول طريقة فعالة لتحقيق ذلك؟
3. لست متأكدًا من كيفية اختبار الجزء "بدون سياق" من اختبار "أي علامة بلا سياق" باستخدام واجهة برمجة التطبيقات العامة لأن الطريقة isTagValidInContext () لا تُستخدم في أي مكان آخر باستثناء ملف الاختبار. أيه أفكار؟

@ abiduzz420 نعم هذا يبدو صحيحًا

تضمين التغريدة

هل النهج الذي اتبعته صحيح؟

بشكل عام ، نعم ، لكننا نريد تجنب الازدواجية هناك. من الناحية المثالية يجب أن تتحول من سلسلة

expect(isTagStackValid(['a', 'a'])).toBe(false);

إلى سلسلة من

expectInvalidNestingWarning(true, ['a', 'a']);

حيث expectInvalidNestingWarning هي وظيفة مخصصة تنشئ المكون ثم تؤكد أن عرضه ينتج تحذيرًا.

لست متأكدًا مما إذا كانت هناك طريقة لإنشاء مكونات ديناميكيًا باستخدام هذه العلامات الخاصة والتنسيقية. هل يمكنك أن تعطيني بعض المؤشرات حول طريقة فعالة لتحقيق ذلك؟

نعم ، أفكر في شيء مثل:

function expectInvalidNestingWarning(shouldWarn, tags) {
  let element = null;
  tags = [...tags];
  while (tags.length) {
    element = React.createElement(tags.pop(), null, element);
  }
  const container = document.createElement('div');
  ReactDOM.render(element, container);
  // assert either a warning or lack of one based on shouldWarn
}

نمر عبر المصفوفة ، ونأخذ العنصر الأخير ، ونلف العنصر الحالي في أحد الوالدين بالعلامة المقابلة. بهذه الطريقة في النهاية ننتهي مع الشجرة المقابلة. ربما كتبت شيئًا خاطئًا ولكن هذه هي الفكرة العامة.

قد ترغب أيضًا في وضع شيء مثل

jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');

في هذه الوظيفة مباشرة قبل العرض لأنه بخلاف ذلك يمكن إلغاء تكرار التحذيرات ولا يمكننا اختبارها بشكل موثوق.

لست متأكدًا من كيفية اختبار الجزء "بلا سياق" من اختبار "أي علامة بلا سياق" باستخدام واجهة برمجة التطبيقات العامة لأن الطريقة isTagValidInContext () لا تُستخدم في أي مكان آخر باستثناء ملف الاختبار

بالنظر إلى اللوم ، تمت إضافته في https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a وفي تلك المرحلة تم استدعاؤه خارج الاختبارات أيضًا. ولكن في وقت ما في المستقبل لم يعد يُستخدم. يشير الاختبار إلى عرض قطع:

https://github.com/facebook/react/blob/8cbc16f0faedafe4f7424b286af52dafd7a79587/packages/react-dom/src/__tests__/validateDOMNesting-test.internal.js#L144 -L145

لكن هذه الوظيفة لم تعد تُستخدم مع عرض الخادم أيضًا.

أجمع من هذا التعليق أن الهدف هو ضمان عدم التحذير أبدًا عندما لا نعرف الأجداد . ومع ذلك ، لا يمكنني العثور على مسار رمز يمكنه تمرير null كـ ancestorInfo إلى validateDOMNesting . لذلك ربما نعرف دائمًا الأجداد في الإصدار الحالي. لذلك أقول أنه من الآمن حذف هذا الاختبار تمامًا.

gaearon لقد أنشأت طريقة createPortal() في ReactNoop.js وقبل ذلك قمت أيضًا بتحويل ملف ReactPortal.js إلى الدليل المشترك كما اقترحت. يرجى مراجعة الكود الخاص بي ، وإذا كان هناك أي تعديلات أو إضافات أخرى أحتاج إلى إجرائها ، فسأفعل ذلك.

هل يمكنك إرسال العلاقات العامة من فضلك؟ من الأسهل مناقشتها في المراجعة.

@ abiduzz420 يبدو أنك قمت بعمل رائع ، آسف ولكن لم يكن لدي الوقت لبدء العمل على ذلك قبل اليوم! سعيد حقًا لأنك تمكنت من إكمال الاختبار! 👏👏
gaearon بعد ذلك ، سأحرص على توفير إمكانية رائعة

تحديث سريع لـgaearon : لقد بدأت في إعادة بناء / دمج اختبارات BeforeInputEventPlugin + FallbackCompositionState . لدي معرفة جيدة بكيفية اختبار التنفيذ من خلال واجهة برمجة التطبيقات العامة. أنا الآن أعمل من خلال إنشاء حالات اختبار لممارسة مسارات التعليمات البرمجية المختلفة التي تعتمد على بيئات التنفيذ / محركات المتصفح المختلفة. أتوقع الحصول على أول علاقات عامة مع نهاية هذا الأسبوع (بحلول 10 ديسمبر - تم التحديث ، أحتاج إلى مزيد من الوقت - بالنظر إلى 12 ديسمبر).

جميل ، شكرا على التحديث!

تحديث سريع لـgaearon من نهايتي: لقد بدأت بالفعل في إعادة كتابة الاختبارات لـ getNodeForCharacterOffset-test ويجب أن أكون قادرًا على دفع العلاقات العامة حتى يوم الخميس - هل هذا جيد؟

يبدو ذلك جيدا

مرة أخرى أسفل! https://github.com/facebook/react/pull/11742

reznord لم نسمع منك بعد - هل بدأت أي شيء؟ إذا كنت مشغولاً للغاية ، فربما يكون من الأفضل منح شخص آخر فرصة للمحاولة.

بينغ reznord

مرحبًا gaearon ، هل يمكنني الحصول على ReactErrorUtils-test.js مقابل مساهمتي الأولى؟

مرحبًا ، gaearon هل هناك شيء يمكنني القيام به في ReactErrorUtils-test.js

مرحبًا ، هل يمكن لأي شخص مساعدتي في متابعة اختبار ReactBrowserEventEmitter-test.js؟ لأنني مشغول بعملي الآن ولا يوجد وقت لأستمر فيه ، العلاقات العامة هي https://github.com/facebook/react/pull/11713 ، شكرًا جزيلاً لك !!

شكرا للجميع مرة أخرى! لا تزال هناك بعض الاختبارات المعلقة ولكن أعتقد أنه يمكننا إغلاقها.

gaearon : ReactErrorUtils-test.js أود العمل عليه. هل يمكنك تأكيد ما إذا كان بإمكاني استلام ذلك؟