React: Ekspresikan lebih banyak tes melalui API publik

Dibuat pada 20 Okt 2017  ·  133Komentar  ·  Sumber: facebook/react

Ini adalah peluang kontribusi yang bagus.
Kami perlu menulis ulang lebih banyak pengujian unit dalam hal API publik.

Ini berarti bahwa mereka hanya dapat mengimpor titik masuk npm seperti react , react-dom , react-dom/test-utils , react-test-renderer , dll, tetapi tidak modul internal seperti SyntheticEvent atau ReactDOMComponentTree . Persyaratan "buruk" sudah ditandai dengan TODO dalam pengujian sehingga Anda tidak akan melewatkannya.

Untuk membantu dengan ini:

  1. Temukan // TODO: can we express this test with only public API? dalam file pengujian yang tidak diklaim di bawah ini.
  2. Beri komentar dalam masalah ini jika Anda ingin mengambil file pengujian unit tertentu, dengan namanya.
  3. Kirimkan PR yang menulis ulang pengujian untuk menggunakan API publik.

Langkah 3 membutuhkan beberapa pemikiran. Anda dapat menggunakan contoh sebelumnya di mana kami menulis ulang pengujian dengan API publik untuk mendapatkan inspirasi. Sebagai contoh:

Secara umum, Anda perlu memikirkan bagaimana perilaku yang Anda uji sebenarnya mereproduksi dalam aplikasi React, dan kemudian mengujinya. Dalam kasus yang jarang terjadi, ini mungkin melibatkan pengungkapan beberapa API sebagai publik yang perlu kita diskusikan secara terpisah, jadi jangan ragu untuk memulai diskusi! Jika Anda tidak tahu cara menulis ulang beberapa pengujian tertentu dengan API publik, beri komentar di sini dan kami dapat bertukar pikiran.

Berikut adalah daftar lengkap tes yang perlu diubah. Beberapa dari mereka mungkin merupakan perubahan satu baris sederhana, beberapa mungkin melibatkan sedikit penulisan ulang, beberapa mungkin memerlukan penulisan ulang dari awal. Beberapa bahkan mungkin mustahil, tetapi penelitian yang mengarah pada kesimpulan itu masih sangat berharga dan kami ingin mengetahuinya.

Cobalah dan beri tahu kami:

Pembaruan: semua tes diambil sekarang. Mereka mungkin bebas di masa depan jika seseorang tidak punya waktu untuk menyelesaikan pekerjaan.


Kontributor pertama kali?

Tidak jelas bagaimana cara memperbaiki tes tertentu?

Jika Anda menyerah pada beberapa tes, silakan posting temuan Anda di komentar sehingga kami dapat memutuskan apa yang harus dilakukan selanjutnya.


medium good first issue (taken)

Komentar yang paling membantu

Kami mendapat PR gabungan pertama!

Lihatlah itu: https://github.com/facebook/react/pull/11309

Jika Anda sedang mengerjakan sesuatu yang berhubungan dengan acara, saya sarankan Anda untuk membaca kedua diskusi di https://github.com/facebook/react/pull/11309 dan ulasan di:

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

Ada beberapa tema umum, dan mungkin bermanfaat untuk menggunakan diskusi tersebut untuk mengarahkan PR lain ke arah yang benar.

Semua 133 komentar

Saya bisa melihat ini selama akhir pekan dan melihat apakah saya bisa mengatasinya dalam jangka pendek.

Terima kasih banyak! Jika Anda memilih tes tertentu, harap beri komentar dengan nama file di utas sehingga orang lain tidak mulai mengerjakan tes yang sama.

Saya pasti sangat tertarik untuk berkontribusi dalam hal ini. Saya akan melihat melalui akhir pekan ini dan menemukan kesempatan untuk refactor!

saya juga tertarik

Saya menerbitkan daftar tes di posting pertama. Beri tahu saya yang mana yang ingin Anda ambil dan saya akan menetapkannya untuk Anda.

ReactDOMInput-test baik-baik saja dengan saya :)

@SadPandaBear Anda mengerti!

Saya dapat bekerja pada ReactErrorUtils-test . 😄.

Saya akan melihat setInnerHTML-test.js

Saya akan melakukan getEventCharCode-test.js . 😀.

Saya dapat bekerja pada getEventKey-test.js .

Saya dapat mengambil escapeTextContentForBrowser-test.js .

Saya ingin mencoba ChangeEventPlugin-test.js :)

Saya dapat mengambil SyntheticEvent-test.js

Saya ingin mengerjakan EnterLeaveEventPlugin-test.js

Saya ingin mengerjakan ReactDOMEventListener-test.js

Saya ingin mengambil BeforeInputEventPlugin-test.js

Saya ingin mengambil SyntheticKeyboardEvent-test.js. Terima kasih 👍

Biarkan saya mengambil inputValueTracking-test.js

Saya ingin mengerjakan SyntheticWheelEvent-test.js

Bisakah saya mengambil: ReactBrowserEventEmitter-test.js ?

Saya mengambil SelectEventPlugin-test.js

Saya ingin mengerjakan ReactDOMComponentTree-test.js

Saya ingin bekerja di ReactTreeTraversal-test.js

Hai! Saya ingin mengerjakan ReactCoroutine-test.js

Saya dapat mengambil SyntheticClipboardEvent-test.js

Saya ingin mengerjakan validateDOMNesting-test.js

Saya bisa mengambil EventPluginRegistry-test.js

Saya ingin mencoba ReactDOMComponent-test.js

Halo! Saya ingin mencoba quoteAttributeValueForBrowser-test.js ! :otot:

Halo! Saya ingin mencoba ReactDOMServerIntegration-test.js !

Saya akan mengambil ReactIncrementalPerf-test.js

Saya akan melakukan getNodeForCharacterOffset-test.js

@burnsbeaver Yang mana, FallbackCompisitionState-test atau getNodeForCharacterOffset-test ? Kami ingin memulai dengan satu tes per orang.

getNodeForCharacter silahkan. Saya menghapus komentar yang lain, maaf atas kebingungan!

Kami masih memiliki FallbackCompositionState-test.js dan ReactFiberHostContext-test.js gratis!

Saya akan mengambil FallbackCompisitionState!

Saya dapat mencoba ReactFiberHostContext-test.js

Pembaruan: semua tes diambil sekarang. Berlangganan masalah ini! Mereka mungkin bebas di masa depan jika seseorang tidak punya waktu untuk menyelesaikan pekerjaan. Kami akan berkomentar jika beberapa tes tersedia untuk dicoba lagi.

Kepada semua orang yang mengikuti tes—terima kasih! Saya ingin menegaskan kembali solusinya tidak selalu jelas, dan dalam beberapa kasus bahkan mungkin tidak mungkin untuk menguji perilaku secara wajar tanpa beberapa perubahan pada sumber Bereaksi itu sendiri. Jika Anda merasa buntu, beri komentar di sini, dan kami akan mencoba mencari tahu rencana.

@adsonpleal Maaf mengecewakan Anda—Saya baru saja memeriksa, dan sayangnya kami secara tidak sengaja telah memperbaiki ReactFiberHostContext-test . Saya tidak menyadari ini pada awalnya, tetapi TODO sudah ketinggalan zaman. Ini adalah satu-satunya tes yang bisa saya lihat yang sudah diperbaiki.

@gaearon Wow, refactoring ReactDOMInput-test akan memakan waktu lama tapi saya harap saya menyelesaikan semuanya akhir pekan ini.

Saya memiliki sedikit keraguan:
Apakah boleh mengganti semua perilaku itu dari fungsi setUntrackedValue yang menggunakan inputValueTracking menjadi sesuatu seperti ReactTestUtils.Simulate.? ?

Omong-omong, Anda dapat memeriksa PR saya di sini untuk melihat apa yang saya lakukan untuk menghapus inputValueTracking . Saya tahu bahwa beberapa tes ini mungkin bergantung pada hal-hal yang sangat spesifik dari inputValueTracking , tetapi saya hanya ingin tahu apakah ReactTestUtils dapat digunakan secara efektif sebagai gantinya.

Untuk inputValueTracking @jquense harus memiliki konteks paling banyak tentang cara melakukan yang terbaik. Tetapi selama Anda berhasil, kami dapat meninjau dan melihat apakah pendekatan itu berhasil atau tidak.

Hanya untuk mengetahui siapa pun, saya memasang versi benang yang lebih lama (0.22) dan mencoba menjalankan tes secara lokal dan semuanya rusak. Memutakhirkan benang ke terbaru (1.2.1) memperbaiki masalah dan pengujian berjalan dengan baik sekarang.

@sadpandabear Saya memiliki modul yang sama di file pengujian saya, jadi saya akan segera memeriksa implementasi Anda

@gaearon Untuk setInnerHTML tes, mereka merasa seperti mereka bergantung pada keberadaan setInnerHTML untuk test suite masuk akal.

Saya dapat menulis beberapa tes untuk menggantikan fungsi yang ada, tetapi kemudian rangkaian pengujian lebih sesuai dengan pengaturan html dalam, vs. apa pun yang spesifik untuk setInnerHTML . Saya kira saya sedikit terpaku pada penamaan test suite.

EDIT: Kecuali saya salah ... SVG memiliki properti innerHTML . Tidak yakin bagian kedua dari tes dalam file ini bahkan diperlukan.

@silvestrijonathan Saya pikir apa yang sebenarnya coba diverifikasi oleh tes tersebut adalah bahwa dangerouslySetInnerHTML berfungsi seperti yang diharapkan di Bereaksi. Jadi, jika Anda memodifikasi tes tersebut untuk menggunakan ReactDOM dan merender konten yang sama dengan dangerouslySetInnerHTML , itu sudah cukup. Tidak apa-apa untuk mengganti nama tes menjadi dangerouslySetInnerHTML-test jika Anda merasa itu lebih tepat.

Setelah beberapa jam bermain dengan file pengujian saya, saya memiliki saran yang kuat untuk pendatang baru (seperti saya): mulai tes Anda dengan env bersih (file).
Saya sedang mengedit file yang ada dan itu mengejek beberapa fungsi internal sehingga beberapa fungsi ReactTestUtils rusak!! Butuh beberapa saat bagi saya untuk menyadari mengapa segala sesuatunya tidak berjalan sebagaimana mestinya..

@gaearon Saya pikir kita perlu mengklarifikasi bahwa ReactTestUtils , termasuk mensimulasikan acara, harus dianggap sebagai API pribadi. Itu secara tidak langsung menjangkau ke dalam API internal sehingga tidak memungkinkan kami menguji dengan benar cara kerjanya sebaliknya. Misalnya, ini akan menghambat kemampuan kami untuk menguji paket yang dikompilasi tanpa mengekspos kait tersebut dan tidak akan membiarkan kami menguji sistem kejadian non-sintetis yang baru.

@dphurley , saya perhatikan Anda sedang mengerjakan ReactIncrementalPerf-test . Saya juga sedang mengerjakan test suite yang menggunakan ReactCoroutine , jadi saya ingin memberi tahu Anda tentang PR ini: #11338.
Saya tidak yakin apakah Anda sudah mengirimkan PR, tetapi jika belum, mungkin ada baiknya untuk mendasarkannya pada #11338 (jika diterima).

@gaearon Terima kasih atas saran Anda. Saya berpikir untuk menggunakan React-DOM dengan dangerouslySetInnerHTML untuk pengujian, jadi saya akan melakukannya seperti itu!

Dan ya, saya mungkin akan mengganti nama tes menjadi itu dalam kasus itu. Cari PR saya di hari berikutnya atau lebih.

Kami mendapat PR gabungan pertama!

Lihatlah itu: https://github.com/facebook/react/pull/11309

Jika Anda sedang mengerjakan sesuatu yang berhubungan dengan acara, saya sarankan Anda untuk membaca kedua diskusi di https://github.com/facebook/react/pull/11309 dan ulasan di:

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

Ada beberapa tema umum, dan mungkin bermanfaat untuk menggunakan diskusi tersebut untuk mengarahkan PR lain ke arah yang benar.

Obrolan hebat untuk referensi-terima kasih!

Pekerjaan menjadi sedikit sibuk, tetapi saya pikir saya akan dapat membuka PR akhir pekan ini untuk ujian saya.

Saya belum melihat ke dalam tes yang saya ambil. Disibukkan dengan hal lain. Saya akan mencoba menaikkan PR dalam beberapa hari lagi, dapatkah saya mengulur waktu?

Kedengarannya bagus, tentu!

Saya memiliki masalah yang sama

Menulis analisis kecil tentang bagaimana saya mendekati salah satu tes. https://github.com/facebook/react/pull/11385#issuecomment -341934588

sejauh yang saya tahu semuanya diambil, silakan posting di sini jika ada yang gratis dan saya akan menonton

Saya menggabungkan dua PR lagi yang secara khusus menangani SyntheticEvent s. Jika Anda mengikuti tes terkait, silakan periksa dan coba cocokkan dalam gaya dan pendekatan: https://github.com/facebook/react/pull/11365 dan https://github.com/facebook/react/issues/ 11299

@gaearon Untuk EventPluginRegistry-test.js , bagaimana seharusnya kita menulis ulang tes menggunakan API publik, saya melihat bahwa kita menyuntikkan plugin default di ReactDom.js -> ReactDOMClientInjection.js
{
Plugin Acara sederhana,
MasukkanLeaveEventPlugin,
Ubah PluginAcara,
Pilih PluginAcara,
SebelumInputEventPlugin,
}

Jadi, bagaimana tepatnya kami dapat menyuntikkan plugin uji coba kami dan menguji fungsionalitas EventPluginRegistry
Saya mencari plugin khusus apa pun dan menemukan react-tap-event-plugin untuk memeriksa bagaimana tepatnya plugin khusus disuntikkan.
Apakah ini satu-satunya cara untuk menyuntikkan plugin?

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

Saya takut saya terlalu berlebihan dalam ReactTreeTraversal-test.js
Jika ada orang lain yang ingin mencobanya, jangan ragu untuk melakukannya.

@aqumus

EventPluginRegistry rumit. Saya kira langkah pertama adalah mencari tahu di mana itu sebenarnya digunakan. Anda benar bahwa plugin acara tap adalah satu-satunya yang kami tetap berkomitmen untuk mendukungnya. Mudahnya kami memilikinya tepat di repo. Jadi mungkin kita bisa menambahkan tes yang berfungsi secara khusus?

Kemungkinan juga RN menggunakan EventPluginRegistry . Apakah kami memiliki tes yang memverifikasi bahwa acara RN berfungsi? Saya tidak tahu. Ada baiknya mengomentari bagian yang berbeda dari EventPluginRegistry dan mencari apakah ada tes yang gagal. Kami dapat menghapus pengujian API pribadinya jika kode yang sama sudah dicakup oleh pengujian lain yang kebetulan menekankan jalur kode tersebut. Apakah ini masuk akal?

@gdevincenzi Kedengarannya bagus, saya akan menghapus tugas.

Juga, saya akan pergi minggu ini, tapi tolong jangan biarkan ini menghentikan Anda untuk melanjutkan ini. Berharap untuk mendapatkan lebih banyak PR yang dikirimkan digabung minggu depan.

saya dapat mengambil ReactTreeTraversal-test.js - ini adalah API yang tidak dikenal tetapi sepertinya merupakan peluang yang bagus untuk mempelajarinya. saran selamat datang @gdevincenzi

Selamat kepada @gordyd karena telah menyelesaikan yang agak rumit: https://github.com/facebook/react/pull/11383.

Ini adalah contoh bagus tentang betapa berbedanya tampilan kode sebelum dan sesudah saat menguji hal yang pada dasarnya sama. Dan bagaimana Anda dapat mengetahui apa yang seharusnya dilakukan oleh kode dengan mencari referensi, melihat riwayat git, dan mengomentari baris yang berbeda.

Kami belum menerima PR dari pengguna berikut:

@email2vimalraj
@andrevargas
@tranotheron
@minerado
@sw-yx
@king0120
@aarboleda1
@danilowoz
@dms1lva
@morajabi
@dphurley
@reznord
@aqumus

Bisakah Anda mengonfirmasi jika Anda mulai mengerjakan ini? Saya memiliki lebih banyak orang yang ingin membantu dalam antrian, jadi jika Anda tidak punya waktu, akan sangat bagus untuk memberi orang lain kesempatan untuk mengerjakan ini.

@andrevargas Baru perhatikan diskusi Anda di https://github.com/facebook/react/pull/11331. Saya kira masuk akal untuk menjaga agar perubahan itu tetap bersatu di sana.

Tolong tambahkan saya ke antrian itu @gaearon

@gaearon Ya, Anda benar. Hanya untuk mengonfirmasi, @jeremenichelli sedang mengerjakan quoteAttributeValueForBrowser-test.js di #11331, dan saya mengetahui hal ini. Saya pikir Anda dapat memperbarui utas ini dengan nama pengguna dan tautan PR-nya.

Tolong juga tambahkan saya ke antrian @gaearon

@gaearon saya sudah mulai mengerjakannya. Berencana untuk memposting temuan saya atau PR minggu ini.

@gaearon Saya sudah mulai mengerjakan SyntheticKeyboardEvent.js. Rencananya ada PR akhir pekan ini.

@gaearon Saya juga bisa mengikuti salah satu tes jika orang-orang yang awalnya ditugaskan tidak memiliki waktu yang dibutuhkan untuk mengerjakannya.

@gaearon Maaf atas penundaan yang lama, saya sedang membuat PR WIP sekarang. Pembaruan: Dapatkah seseorang menjelaskan secara singkat apa yang harus saya lakukan untuk tidak bergantung pada API pribadi? Juga, saya tidak tahu tentang top<EventName> s. Terima kasih.

https://github.com/facebook/react/blob/92b7b172cce9958b846844f0b46fd7bbd8c5140d/packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js > fungsi extract

@gaearon Maaf atas penundaan yang lama . Saya akan mengerjakan ini hari ini dan akan melakukan ping kepada Anda jika saya ragu tentang itu.

@morajabi salah satu cara potensial untuk mengatasi ini

  • Lihat SelectEventPlugin dan pahami fungsi mana yang diberikannya kepada pengguna
  • Tulis kode yang menggunakan fungsi itu
  • Nonaktifkan pemuatan SelectEventPlugin (komentari) dan lihat apa yang rusak (pastikan ada yang rusak)
  • Kode yang Anda tulis sekarang adalah versi pertama dari pengujian Anda sehingga Anda dapat memasukkannya ke dalam kasus pengujian
  • Aktifkan memuat SelectEventPlugin lagi dan pastikan tes lulus
  • Optimalkan kode Anda

@gaearon mohon maaf atas keterlambatannya
berdasarkan saran Anda, saya mencoba mengomentari beberapa bagian dari EventPluginRegistry.js dan menemukan banyak kasus uji gagal ( SyntheticWheelEvent , ReactDOMComponentTree , SyntheticClipboardEvent , SyntheticWheelEvent , inputValueTracking , SimpleEventPlugin , ChangeEventPlugin , ReactDOMComponentTree dll),
Saya kira terutama karena ReactBrowserEventEmitter.js menggunakan registrationNameDependencies yang didefinisikan dalam EventPluginRegistry.js

Meskipun saat berkomentar

tidak ada kasus uji yang gagal (hanya pengujian EventPluginRegistry yang gagal)
Berdasarkan ini saya kira EventPluginRegistry sudah dicakup oleh suite uji lainnya.

Mudahnya kami memilikinya tepat di repo.

Saya tidak mengerti apa yang Anda maksud dengan ini

Apakah ada saran lain yang bisa saya kerjakan untuk menulis ulang EventPluginRegistry menggunakan API publik?

Untuk yang lain (tidak yakin apakah ini telah disiarkan sebelumnya) saya menemukan podcast video @kentcdodds - reaksi panduan kode acara oleh Ben Alpert sangat berguna.

Maaf @gaearon saya coba lakukan, tapi sekarang saya tidak punya waktu untuk menyelesaikannya
Jadi jika ada orang lain yang ingin mendapatkan masalah saya, silakan :)

@danilowoz @gaearon Jika Anda tidak keberatan, saya dapat mengambil BeforeInputEventPlugin-test.js.

@timjacobi Apa pengganti ReactDOMComponentTree.getInstanceFromNode ?

Juga, di mana saya harus menonaktifkannya?

Nonaktifkan pemuatan SelectEventPlugin (komentari) dan lihat apa yang rusak (pastikan ada yang rusak)

@morajabi Saya tidak yakin Anda menangani ini pada tingkat yang tepat. Bisakah Anda membuka PR WIP dengan apa yang Anda miliki sejauh ini? Saya tidak ingin terlalu mengotori utas ini.

@timjacobi Saya tidak bisa ketika saya belum melakukan sesuatu yang baru. Maaf saya cukup sibuk hari ini jika seseorang dapat mengambil SelectEventPlugin-test .

Sepertinya kita tidak lagi membutuhkan ReactDOMServerIntegration-test (cc @minerado) karena saya telah membahasnya bersama dengan perubahan lainnya.

@aqumus Berdasarkan analisis Anda, saya akan menghapus EventPluginRegistry-test.js dari daftar ini. Saya pikir kita akan menyimpan ini sebagai tes unit dari internal tertentu, tetapi ada baiknya untuk mengetahui logika sebenarnya dicakup oleh tes lain.

@ king0120 Saya akan menetapkan kembali getEventCharCode-test ke @aarboleda1 karena dia sedang mengerjakan tes yang sangat terkait di https://github.com/facebook/react/pull/11631 , dan mungkin lebih mudah untuk melakukannya bersama-sama.

@morajabi @gaearon Saya bisa melihat SelectEventPlugin-test.js juga.

@email2vimalraj FYI, saya menulis ulang inputValueTracking-test .

Tes ini saat ini tidak memiliki pemilik:

  • [ ] getNodeForCharacterOffset-test.js (3/5) diambil oleh @accordeiro
  • [ ] ReactBrowserEventEmitter-test.js (5/5) diambil oleh @madeinfree
  • [ ] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (5/5, harus digabungkan) diambil oleh @GordyD
  • [x] SelectEventPlugin-test (2/5) diambil oleh @skiritsis
  • [x] ReactTreeTraversal-test.js (4/5) diambil oleh @timjacobi

Saya mengurutkannya berdasarkan persepsi saya tentang kesulitan mereka.

Kami memiliki antrian dengan @timjacobi @kwnccc @skiritsis jadi tolong beri tahu kami bertiga jika Anda ingin mengikuti salah satu dari tes ini (sebutkan yang mana). Anda juga dapat lulus, dan kami akan membiarkan orang lain mencoba.

Perhatikan bahwa ini menjadi sangat rumit, jadi mereka tidak terlalu ramah bagi pemula. Mereka bukan pengganti mekanis; Anda harus memahami apa yang coba diverifikasi oleh tes dan kemudian membuat tes API publik yang setara (yang mungkin terlihat sangat berbeda).

Untuk mengambil ini, Anda harus nyaman meneliti berbagai hal sendiri, mirip dengan yang dilakukan @GordyD di https://github.com/facebook/react/pull/11383. Bahkan jika @GordyD ingin mengambil salah satu dari ini, saya akan dengan senang hati memberikannya!

@skiritsis Karena Anda tertarik, saya akan menetapkan kembali SelectEventPlugin-test kepada Anda.

Saya ingin bekerja di ReactBrowerEventEmitter-test.js

@gaearon : Terima kasih untuk itu, maaf tidak merespons tepat waktu. Disibukkan dengan pekerjaan lain. Saya akan melihat bagaimana Anda menulis ulang untuk pemahaman saya.

Saya dapat melihat ReactTreeTraversal-test.internal.js

@madeinfree Mari kita beri beberapa hari kepada @kwnccc untuk membalas dulu karena dia sudah dalam antrian. Jika dia tidak tertarik, saya akan memberikannya kepada Anda nanti.

@gaearon Oke! mengerti, terima kasih ~

@gaearon Saya akan melihat menggabungkan BeforeInputEventPlugin + FallbackCompositionState jika tidak ada pengambil lain.

Kedengarannya bagus, terima kasih @GordyD!

Omong-omong, berikut ini beberapa tes acara yang telah dikonversi, untuk memberi Anda gambaran tentang seperti apa kode ini biasanya: https://github.com/facebook/react/pull/11631 https://github. com/facebook/react/pull/11525

@gaearon Saya senang untuk mengambil ReactBrowserEventEmitter-test.js juga jika tidak ada orang lain yang menginginkannya.

@madeinfree

Apakah Anda masih tertarik dengan ReactBrowerEventEmitter ? Jika demikian, silakan ambil dan terus perbarui kami!

@gaearon Oke! Saya ingin mengambilnya.

Anda mendapatkannya.

Ada yang mau ambil sisa getNodeForCharacterOffset-test ?

Saya dapat membantu dengan yang ini ( getNodeForCharacterOffset-test ) :)

@gaearon Belum menemukan waktu untuk menyelami ReactIncrementalPerf-test.js seperti yang saya kira. Permintaan maaf untuk bertahan begitu lama tapi itu untuk diperebutkan jika ada yang menginginkannya!

@accordeiro Anda mengerti!

@gaearon sangat menyesal, tidak mendapat pemberitahuan. Jika masih ada beberapa tes yang harus diselesaikan, beri tahu saya. Saya harap ada sesuatu yang mudah untuk memulai.

@kwnccc Ingin melihat ke ReactIncrementalPerf-test.js ?

Dapatkah saya melihat ke ReactIncrementalPerf-test.js ? Atau jika perlu saya dapat membantu @kwnccc dalam tes tertulis untuk itu
Saya tidak melihat file bernama ReactIncrementalPerf.js , jadi apakah kita harus menulis tes untuk ReactPortal.js ?

Jika saya bahkan sedikit memahami masalah di ReactIncrementalPerf-test.js (koreksi saya jika saya salah), itu berarti saya perlu beralih dari ReactPortal.createPortal(...) ke API publik seperti react-dom dengan ReactDOM .createPortal(...) ? @gaearon

@gaearon Saya sangat ingin mencoba ReactIncrementalPerf-test.js . Karena @abiduzz420 sudah mulai memeriksanya, kami bahkan dapat bekerja sama jika diperlukan.

Ya tentu @kwnccc saya senang bekerja sama dengan Anda. Anda berada dalam antrian sebelum saya, jadi semua milik Anda!

@kwnccc Saya mendapatkan satu kesalahan pengujian di yarn test dan kesalahan Aliran ketika saya menjalankan yarn flow . saya akan mendorong kode ke repo bercabang saya: https://github.com/abiduzz420/react sehingga Anda juga dapat mengerjakannya

 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 Masalah aliran adalah masalah yang diketahui pada Windows. Ini tidak terkait (tapi kita harus mencari tahu mengapa itu terjadi). Lihat https://github.com/facebook/react/issues/11703.

@kwnccc Adapun ReactIncrementalPerf-test , ya ini akan membutuhkan beberapa pemikiran. Saya pikir mungkin saat ini yang terbaik adalah memindahkan sementara ReactPortal ke shared . Kemudian minta ReactNoop menyediakan metode createPortal() sendiri (seperti yang dilakukan ReactDOM ).

@gaearon Saya telah memindahkan ReactPortal ke direktori bersama, dan semua tes lulus. Butuh sedikit bantuan dalam menerapkan metode saya sendiri createPortal() untuk ReactNoop . Mengambil inspirasi dari bagaimana createPortal() ditulis dalam ReactDOM Saya akan mengembalikan ReactPortal.createPortal(children,container,null,key) .
Saya sedang memikirkan baris-baris ini:

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);
}

Tolong beri tahu saya jika saya melakukannya dengan benar?

@gaearon Kode saya masih wip. Tetapi saya ingin memeriksa ulang apakah saya berada di jalur yang benar. Akan sangat membantu saya jika Anda dapat melihat sekilas kode saya dan mengklarifikasi beberapa keraguan:

  1. Apakah pendekatan yang saya ambil sudah benar?
  2. Saya berasumsi tes harus mencakup semua tag dan skenario yang diuji di yang ada
    pengujian untuk mempertahankan cakupan pengujian. Saya tidak yakin apakah ada cara untuk menghasilkan komponen secara dinamis dengan tag khusus dan pemformatan ini. Bisakah Anda memberi saya beberapa petunjuk tentang cara yang efisien untuk mencapai ini?
  3. Saya tidak yakin bagaimana menguji bagian 'tanpa konteks' dari pengujian 'tag apa pun tanpa konteks' dengan API publik karena metode isTagValidInContext() tidak digunakan di tempat lain kecuali di file pengujian. Ada ide?

@abiduzz420 Ya ini terdengar benar

@anushreesubramani

Apakah pendekatan yang saya ambil sudah benar?

Secara umum, ya, tetapi kami ingin menghindari duplikasi di sana. Idealnya itu harus berubah dari serangkaian

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

ke serangkaian

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

di mana expectInvalidNestingWarning adalah fungsi kustom yang menghasilkan komponen dan kemudian menegaskan bahwa rendering itu menghasilkan peringatan.

Saya tidak yakin apakah ada cara untuk menghasilkan komponen secara dinamis dengan tag khusus dan pemformatan ini. Bisakah Anda memberi saya beberapa petunjuk tentang cara yang efisien untuk mencapai ini?

Ya, saya sedang memikirkan sesuatu seperti:

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
}

Kami menelusuri array, mengambil item terakhir, dan membungkus elemen saat ini menjadi induk dengan tag yang sesuai. Dengan cara ini pada akhirnya kita berakhir dengan pohon yang sesuai. Saya mungkin telah menulis sesuatu yang salah tapi itu ide umumnya.

Anda juga mungkin ingin meletakkan sesuatu seperti

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

dalam fungsi itu tepat sebelum rendering karena jika tidak, peringatan dapat dihapus duplikatnya dan kami tidak dapat mengujinya dengan andal.

Saya tidak yakin bagaimana menguji bagian 'tanpa konteks' dari pengujian 'tag apa pun tanpa konteks' dengan API publik karena metode isTagValidInContext() tidak digunakan di tempat lain kecuali di file pengujian

Melihat kesalahannya, itu ditambahkan di https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a dan pada saat itu juga dipanggil di luar tes. Tapi di beberapa titik di masa depan itu tidak lagi digunakan. Tes menyebutkan rendering server:

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

tetapi fungsi ini juga tidak lagi digunakan dengan rendering server.

Dari komentar ini saya menyimpulkan bahwa tujuannya adalah untuk memastikan kita tidak pernah memperingatkan ketika kita tidak mengenal leluhur . Namun, saya tidak dapat menemukan jalur kode yang akan meneruskan null sebagai ancestorInfo ke validateDOMNesting . Oleh karena itu kita mungkin selalu tahu nenek moyang di versi saat ini. Jadi menurut saya aman untuk menghapus tes ini sama sekali.

@gaearon Saya telah membuat metode untuk createPortal() di ReactNoop.js dan sebelumnya saya juga telah memindahkan file ReactPortal.js ke direktori bersama seperti yang Anda sarankan. Silakan baca kode saya, dan jika ada modifikasi atau penambahan lebih lanjut yang perlu saya lakukan, saya akan melakukannya.

Bisa tolong kirim PRnya? Lebih mudah untuk membahas dalam ulasan.

@abiduzz420 Anda tampaknya telah melakukan pekerjaan dengan baik, maaf, tetapi saya tidak punya waktu untuk mulai mengerjakannya sebelum hari ini! Sangat senang Anda dapat menyelesaikan tes! 👏👏.
@gaearon selanjutnya saya akan memastikan saya akan memiliki ketersediaan yang bagus

@gaearon pembaruan cepat: Saya sudah mulai refactoring/menggabungkan BeforeInputEventPlugin + FallbackCompositionState tes. Saya memiliki pegangan yang baik tentang cara menguji implementasi melalui API publik. Saya sekarang bekerja melalui pembuatan kasus uji untuk menggunakan jalur kode yang berbeda tergantung pada lingkungan eksekusi/mesin browser yang berbeda. Saya berharap untuk memiliki PR pertama menjelang akhir minggu ini (sebelum 10 Des - diperbarui saya perlu sedikit lebih banyak waktu - melihat 12 Des).

Bagus, terima kasih atas pembaruannya!

@gaearon pembaruan cepat di pihak saya: Saya sudah mulai mengerjakan menulis ulang tes untuk getNodeForCharacterOffset-test dan harus dapat mendorong PR hingga Kamis – apakah ini boleh?

Kedengarannya bagus

Satu lagi turun! https://github.com/facebook/react/pull/11742

@reznord Kami belum mendengar kabar dari Anda—apakah Anda memulai sesuatu? Jika Anda terlalu sibuk mungkin lebih baik memberi orang lain kesempatan untuk mencoba.

Ping @reznord

Hai @gaearon , Bisakah saya mengambil ReactErrorUtils-test.js untuk kontribusi pertama saya?

hai, @gaearon apakah ada yang bisa saya lakukan di ReactErrorUtils-test.js

Hai, Adakah yang bisa membantu saya melanjutkan tes ReactBrowserEventEmitter-test.js? Karena saya akan sibuk dengan pekerjaan saya sekarang tidak ada waktu untuk melanjutkan, PR adalah https://github.com/facebook/react/pull/11713 , terima kasih banyak!!

Terima kasih untuk semua orang lagi! Masih ada beberapa tes yang luar biasa tapi saya pikir kami bisa menutupnya.

@gaearon : ReactErrorUtils-test.js Saya ingin mengerjakannya. dapatkah Anda mengkonfirmasi jika saya dapat mengambilnya?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat