React: Drücken Sie mehr Tests über die öffentliche API aus

Ich kann mir das am Wochenende mal anschauen und schauen, ob ich das kurzfristig angehen kann.

Vielen Dank! Wenn Sie sich für einen bestimmten Test entscheiden, kommentieren Sie den Thread bitte mit dem Dateinamen, damit nicht jemand anderes an demselben Test arbeitet.

Ich bin auf jeden Fall sehr daran interessiert, dazu beizutragen. Ich werde dieses Wochenende durchsehen und eine Gelegenheit zum Refactoring finden!

Ich habe auch Interesse 👍

Ich habe im ersten Beitrag eine Liste mit Tests veröffentlicht. Teilen Sie mir einfach mit, welche Sie nehmen möchten, und ich weise sie Ihnen zu.

ReactDOMInput-test ist in Ordnung für mich :)

@SadPandaBear Du hast es!

Ich kann an ReactErrorUtils-test arbeiten. 😄

Ich werfe einen Blick auf setInnerHTML-test.js

Ich mache getEventCharCode-test.js . 😀

Ich kann an getEventKey-test.js arbeiten.

Ich kann escapeTextContentForBrowser-test.js nehmen.

Ich möchte ChangeEventPlugin-test.js eine Chance geben :)

Ich kann SyntheticEvent-test.js nehmen

Ich möchte an EnterLeaveEventPlugin-test.js arbeiten

Ich möchte an ReactDOMEventListener-test.js arbeiten

Ich möchte BeforeInputEventPlugin-test.js nehmen

Ich möchte SyntheticKeyboardEvent-test.js nehmen. Danke 👍

Lassen Sie mich inputValueTracking-test.js nehmen

Ich möchte an SyntheticWheelEvent-test.js arbeiten

Darf ich nehmen: ReactBrowserEventEmitter-test.js ?

Ich nehme SelectEventPlugin-test.js

Ich möchte an ReactDOMComponentTree-test.js arbeiten

Ich würde gerne an ReactTreeTraversal-test.js arbeiten

Hallo! 👋 Ich möchte an ReactCoroutine-test.js arbeiten

Ich kann SyntheticClipboardEvent-test.js nehmen

Ich möchte an validateDOMNesting-test.js arbeiten

Ich könnte EventPluginRegistry-test.js nehmen

Ich möchte ReactDOMComponent-test.js anprobieren

Hallo! Ich möchte quoteAttributeValueForBrowser-test.js anprobieren! :Muskel:

Hallo! Ich möchte ReactDOMServerIntegration-test.js anprobieren!

Ich nehme ReactIncrementalPerf-test.js

Ich mache getNodeForCharacterOffset-test.js

@burnsbeaver Welches ist es, FallbackCompisitionState-test oder getNodeForCharacterOffset-test ? Wir möchten mit einem Test pro Person beginnen.

getNodeForCharacter bitte. Ich habe den anderen Kommentar gelöscht, sorry für die Verwirrung!

Wir haben noch FallbackCompositionState-test.js und ReactFiberHostContext-test.js frei!

Ich nehme FallbackCommissionState!

Ich kann die ReactFiberHostContext-test.js ausprobieren

Update: Alle Tests werden jetzt durchgeführt. Abonnieren Sie diese Ausgabe! Sie könnten in Zukunft frei werden, wenn jemand keine Zeit hat, die Arbeit zu beenden. Wir werden kommentieren, wenn ein Test verfügbar wird, um es erneut zu versuchen.

An alle Personen, die an den Tests teilgenommen haben – vielen Dank! Ich möchte noch einmal betonen, dass die Lösung nicht immer klar ist, und in einigen Fällen ist es möglicherweise nicht einmal möglich, das Verhalten ohne einige Änderungen an der React-Quelle selbst vernünftig zu testen. Wenn Sie sich jemals festgefahren fühlen, kommentieren Sie hier, und wir werden versuchen, einen Plan auszuarbeiten.

@adsonpleal Tut mir leid, Sie zu enttäuschen – ich habe gerade nachgesehen, und leider haben wir ReactFiberHostContext-test aus Versehen bereits repariert. Das war mir zunächst nicht klar, aber dass TODO veraltet ist. Dies ist der einzige Test, den ich sehen kann, der bereits behoben ist.

@gaearon Wow, das Refactoring ReactDOMInput-test wird einige Zeit dauern, aber ich hoffe, dass ich dieses Wochenende alles fertig habe.

Ich habe einen kleinen Zweifel:
Ist es in Ordnung, all dieses Verhalten von der Funktion setUntrackedValue , die inputValueTracking verwendet, durch etwas wie ReactTestUtils.Simulate.? zu ersetzen?

Übrigens können Sie meine PR hier überprüfen, um zu sehen, was ich getan habe, um die inputValueTracking zu entfernen. Ich weiß, dass einige dieser Tests möglicherweise auf sehr spezifischem Material von inputValueTracking beruhen, aber ich habe mich nur gefragt, ob stattdessen ReactTestUtils effektiv verwendet werden kann.

Für inputValueTracking sollte @jquense den meisten Kontext haben, wie man es am besten macht. Aber solange Sie es zum Laufen bringen, können wir überprüfen und sehen, ob der Ansatz funktioniert oder nicht.

Nur eine Warnung an alle anderen, ich hatte eine ältere Version von Garn installiert (0.22) und versuchte, die Tests lokal auszuführen, und alles brach zusammen. Das Aktualisieren von Garn auf die neueste Version (1.2.1) hat das Problem behoben und die Tests laufen jetzt einwandfrei.

@sadpandabear Ich habe das gleiche Modul in meiner Testdatei, also werde ich mir Ihre Implementierung bald ansehen

@gaearon Für die setInnerHTML -Tests haben sie das Gefühl, dass sie von der Existenz von setInnerHTML abhängig sind, damit die Testsuite Sinn macht.

Ich kann einige Tests schreiben, um die vorhandenen Funktionen zu ersetzen, aber dann ist die Testsuite eher so, dass inneres HTML festgelegt wird, im Gegensatz zu allem, was spezifisch für setInnerHTML ist. Ich nehme an, ich hänge ein wenig an der Benennung der Testsuite.

BEARBEITEN: Wenn ich mich nicht irre ... SVGs haben eine Eigenschaft innerHTML . Ich bin mir nicht sicher, ob der zweite Teil der Tests in dieser Datei überhaupt notwendig ist.

@silvestrijonathan Ich denke, was diese Tests wirklich zu überprüfen versuchen, ist, dass dangerouslySetInnerHTML in React wie erwartet funktioniert. Wenn Sie also diese Tests so ändern, dass sie ReactDOM verwenden und denselben Inhalt mit dangerouslySetInnerHTML rendern, sollte das ausreichen. Es ist in Ordnung, den Test in dangerouslySetInnerHTML-test umzubenennen, wenn Sie der Meinung sind, dass dies angemessener wäre.

Nachdem ich ein paar Stunden mit meiner Testdatei gespielt habe, habe ich einen starken Vorschlag für Neulinge (wie mich): Beginnen Sie Ihre Tests mit einer sauberen Umgebung (Datei).
Ich habe die vorhandene Datei bearbeitet und sie hat einige interne Funktionen verspottet, sodass einige ReactTestUtils -Funktionen kaputt waren!! Es dauerte eine Weile, bis ich begriff, warum die Dinge nicht wie beabsichtigt funktionierten.

@gaearon Ich denke, wir müssen klarstellen, dass ReactTestUtils , einschließlich der Simulation von Ereignissen, als private API betrachtet werden sollte. Das reicht indirekt in interne APIs, sodass wir nicht richtig testen können, wie es sonst funktionieren würde. ZB wird es unsere Fähigkeit behindern, kompilierte Pakete zu testen, ohne diese Hooks offenzulegen, und es wird uns nicht erlauben, ein neues nicht-synthetisches Ereignissystem zu testen.

@dphurley , ich habe bemerkt, dass du an ReactIncrementalPerf-test arbeitest. Ich habe auch an einer Testsuite gearbeitet, die ReactCoroutine verwendet, also wollte ich Sie über diese PR informieren: #11338.
Ich bin mir nicht sicher, ob Sie bereits eine PR eingereicht haben, aber wenn Sie dies nicht getan haben, ist es möglicherweise eine gute Idee, sie auf #11338 zu basieren (falls sie akzeptiert wird).

@gaearon Danke für deinen Rat. Ich habe darüber nachgedacht, React-DOM mit dangerouslySetInnerHTML für die Tests zu verwenden, also werde ich es so angehen!

Und ja, ich werde die Tests in diesem Fall wahrscheinlich so umbenennen. Suchen Sie am nächsten Tag oder so nach meiner PR.

Wir haben die erste zusammengeführte PR!

Schau es dir an: https://github.com/facebook/react/pull/11309

Wenn Sie an irgendetwas im Zusammenhang mit Veranstaltungen arbeiten, empfehle ich Ihnen, sowohl die Diskussionen auf https://github.com/facebook/react/pull/11309 als auch die Rezensionen zu lesen in:

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

Es gibt einige gemeinsame Themen, und es kann wertvoll sein, diese Diskussionen zu nutzen, um andere PRs in die richtige Richtung zu lenken.

Große Gespräche zu Referenz-danke!

Die Arbeit war etwas hektisch, aber ich denke, ich werde dieses Wochenende eine PR für meine Tests öffnen können.

Ich muss noch in den Test schauen, den ich abgeholt habe. Habe mich mit anderen Dingen beschäftigt. Ich werde versuchen, in ein paar Tagen eine PR zu erheben, kann ich etwas Zeit gewinnen?

Klingt gut, sicher!

Ich hatte das gleiche Problem

Ein weiterer PR fusioniert! https://github.com/facebook/react/pull/11316

Zwei weitere nach unten. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

Habe eine kleine Analyse darüber geschrieben, wie ich an einen der Tests herangegangen bin. https://github.com/facebook/react/pull/11385#issuecomment -341934588

Soweit ich das beurteilen kann, sind sie alle vergeben. Bitte posten Sie hier, wenn welche frei sind, und ich werde sie mir ansehen

Ich habe zwei weitere PRs zusammengeführt, die sich speziell mit SyntheticEvent s befassen. Wenn Sie ähnliche Tests gemacht haben, sehen Sie sich diese bitte an und versuchen Sie, sie in Stil und Ansatz zu vergleichen: https://github.com/facebook/react/pull/11365 und https://github.com/facebook/react/issues/ 11299

@gaearon Für EventPluginRegistry-test.js , wie sollen wir den Test mit der öffentlichen API umschreiben, sehe ich, dass wir Standard-Plugins in ReactDom.js -> ReactDOMClientInjection.js einfügen
{
SimpleEventPlugin,
EnterLeaveEventPlugin,
ChangeEventPlugin,
SelectEventPlugin,
BeforeInputEventPlugin,
}

Wie genau könnten wir also unser Test-mocked Plugin injizieren und die EventPluginRegistry -Funktionalität testen?
Ich habe nach einem benutzerdefinierten Plugin gesucht und das React-Tap-Event-Plugin gefunden, um zu überprüfen, wie genau benutzerdefinierte Plugins eingefügt werden.
Ist dies die einzige Möglichkeit, Plugins zu injizieren?

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

Ich fürchte, ich bin bei ReactTreeTraversal-test.js weit über meinem Kopf
Wenn es noch jemand ausprobieren möchte, kann er das gerne tun.

@aqumus

EventPluginRegistry ist schwierig. Ich denke, der erste Schritt wäre, herauszufinden, wo es tatsächlich verwendet wird. Sie haben Recht, dass das Tap-Event-Plugin das einzige ist, zu dessen Unterstützung wir uns irgendwie noch verpflichten. Praktischerweise haben wir es direkt im Repo. Vielleicht können wir also einen Test hinzufügen, dass es speziell funktioniert?

Es ist auch wahrscheinlich, dass RN EventPluginRegistry verwendet. Haben wir irgendwelche Tests, die bestätigen, dass RN-Ereignisse funktionieren? Ich weiß nicht. Es lohnt sich, verschiedene Teile von EventPluginRegistry und zu prüfen, ob irgendwelche Tests fehlschlagen. Wir können seine privaten API-Tests entfernen, wenn derselbe Code bereits von anderen Tests abgedeckt wird, die diese Codepfade belasten. Macht das Sinn?

@gdevincenzi Klingt gut, ich werde die Zuweisung entfernen.

Außerdem werde ich diese Woche weg sein, aber bitte lassen Sie sich dadurch nicht davon abhalten, weiterzumachen. Ich hoffe, dass nächste Woche ein paar mehr eingereichte PRs zusammengeführt werden.

Ich kann ReactTreeTraversal-test.js nehmen - es ist eine unbekannte API, scheint aber eine gute Möglichkeit zu sein, sie zu lernen. Beratung willkommen @gdevincenzi

Herzlichen Glückwunsch an @gordyd für die Fertigstellung eines ziemlich komplexen: https://github.com/facebook/react/pull/11383.

Dies ist ein gutes Beispiel dafür, wie unterschiedlich der Code vorher und nachher aussehen kann, während im Wesentlichen die gleichen Dinge getestet werden. Und wie Sie herausfinden können, was der Code tun soll, indem Sie nach Referenzen suchen, sich den Git-Verlauf ansehen und verschiedene Zeilen auskommentieren.

Wir haben noch keine PR von folgenden Benutzern erhalten:

@email2vimalraj
@Andrevargas
@tranotheron
@Minerado
@sw-yx
@king0120
@arboleda1
@danilowoz
@dms1lva
@morajabi
@dphurley
@reznord
@aqumus

Könnten Sie bitte bestätigen, ob Sie mit der Arbeit daran begonnen haben? Ich habe noch mehr Leute in der Warteschleife, die helfen wollen. Wenn Sie also keine Zeit haben, wäre es großartig, anderen die Möglichkeit zu geben, daran zu arbeiten.

@andrevargas Habe gerade deine Diskussion in https://github.com/facebook/react/pull/11331 bemerkt. Ich denke, es macht Sinn, diese Änderungen dort zu vereinheitlichen.

Bitte fügen Sie mich zu dieser Warteschlange hinzu @gaearon

@gaearon Ja, du hast recht. Nur zur Bestätigung, @jeremenichelli arbeitet an quoteAttributeValueForBrowser-test.js in #11331, und ich bin mir dessen bewusst. Ich denke, Sie können diesen Thread mit seinem Benutzernamen und dem PR-Link aktualisieren.

Bitte fügen Sie mich auch zur Warteschlange @gaearon hinzu

@gaearon Ich habe angefangen, daran zu arbeiten. Ich plane, irgendwann in dieser Woche meine Ergebnisse oder eine PR zu veröffentlichen.

@gaearon Ich habe begonnen, an SyntheticKeyboardEvent.js zu arbeiten. Planen, dieses Wochenende eine PR zu haben.

@gaearon Ich könnte auch jeden der Tests übernehmen, falls die ursprünglich zugewiesenen Personen nicht die erforderliche Zeit haben, um daran zu arbeiten.

@gaearon Entschuldigung für die lange Verzögerung, ich mache jetzt eine WIP-PR. Update: Kann jemand kurz erklären, was ich tun soll, um mich nicht auf private APIs zu verlassen? Außerdem weiß ich nichts über top<EventName> s. Danke.

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

@gaearon Sorry für die lange Verzögerung 😅. Ich werde heute daran arbeiten und Sie anpingen, wenn ich diesbezüglich Zweifel habe.

@morajabi ein möglicher Weg, dies anzugehen

• Sehen Sie sich SelectEventPlugin an und verstehen Sie, welche Funktionalität es dem Benutzer bietet
• Schreiben Sie Code, der diese Funktionalität nutzt
• Deaktivieren Sie das Laden SelectEventPlugin (kommentieren Sie es aus) und sehen Sie, was kaputt geht (stellen Sie sicher, dass etwas kaputt geht)
• Der von Ihnen geschriebene Code ist jetzt die erste Version Ihres Tests, sodass Sie ihn in einen Testfall einfügen können
• Aktivieren Sie das Laden SelectEventPlugin erneut und vergewissern Sie sich, dass der Test bestanden wird
• Optimieren Sie Ihren Code

@gaearon Entschuldigung für die Verzögerung
Basierend auf Ihrem Vorschlag habe ich versucht, einige Teile von EventPluginRegistry.js zu kommentieren, und festgestellt, dass viele Testfälle fehlgeschlagen sind ( SyntheticWheelEvent , ReactDOMComponentTree , SyntheticClipboardEvent , SyntheticWheelEvent , inputValueTracking , SimpleEventPlugin , ChangeEventPlugin , ReactDOMComponentTree usw.),
Ich denke hauptsächlich, weil ReactBrowserEventEmitter.js registrationNameDependencies verwendet, was in EventPluginRegistry.js definiert ist

Obwohl beim Auskommentieren

• Linie 208
• Zeile 38-41

keiner der Testfälle ist fehlgeschlagen (nur EventPluginRegistry Test fehlgeschlagen)
Basierend darauf schätze ich, dass EventPluginRegistry bereits von anderen Testsuiten abgedeckt werden.

Praktischerweise haben wir es direkt im Repo.

Ich habe nicht verstanden, was du damit meinst

Gibt es einen anderen Vorschlag, an dem ich arbeiten könnte, um EventPluginRegistry mithilfe der öffentlichen API neu zu schreiben?

Für andere (nicht sicher, ob dies schon einmal ausgestrahlt wurde) fand ich @kentcdodds Video-Podcast – Reaktionscode-Komplettlösung von Ben Alpert sehr nützlich.

Tut mir leid, @gaearon , ich habe es versucht, aber jetzt habe ich keine Zeit, es zu beenden
Wenn also noch jemand meine Probleme haben möchte, gerne :)

@danilowoz @gaearon Wenn es Ihnen nichts ausmacht, könnte ich BeforeInputEventPlugin-test.js nehmen.

@timjacobi Was ist der Ersatz für ReactDOMComponentTree.getInstanceFromNode ?

Und wo sollte ich es deaktivieren?

Deaktivieren Sie das Laden von SelectEventPlugin (kommentieren Sie es aus) und sehen Sie, was kaputt geht (stellen Sie sicher, dass etwas kaputt geht).

@morajabi Ich bin mir nicht sicher, ob Sie das auf der richtigen Ebene angehen. Könnten Sie mit dem, was Sie bisher haben, eine WIP-PR eröffnen? Ich möchte diesen Thread nicht zu sehr verschmutzen.

@timjacobi Ich kann nicht, wenn ich nichts Neues begangen habe. Es tut mir leid, dass ich in diesen Tagen ziemlich beschäftigt bin, wenn jemand SelectEventPlugin-test nehmen kann.

Es scheint, als würden wir ReactDOMServerIntegration-test (cc @minerado) nicht mehr brauchen, da ich es zusammen mit anderen Änderungen behandelt habe.

@aqumus Basierend auf Ihrer Analyse werde ich EventPluginRegistry-test.js aus dieser Liste entfernen. Ich denke, wir werden dies als Komponententest dieser speziellen Interna behalten, aber es ist gut zu wissen, dass die tatsächliche Logik von anderen Tests abgedeckt wird.

@king0120 Ich werde getEventCharCode-test @aarboleda1 neu zuweisen, da er an einem sehr verwandten Test in https://github.com/facebook/react/pull/11631 arbeitet und es möglicherweise einfacher ist, sie zusammen durchzuführen.

@morajabi @gaearon Ich könnte mir auch SelectEventPlugin-test.js ansehen.

@email2vimalraj FYI, ich habe inputValueTracking-test umgeschrieben.

Diese Tests haben derzeit keinen Eigentümer:

• [ ] getNodeForCharacterOffset-test.js (3/5) genommen von @accordeiro
• [ ] ReactBrowserEventEmitter-test.js (5/5) genommen von @madeinfree
• [ ] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (5/5, sollte kombiniert werden) genommen von @GordyD
• [x] SelectEventPlugin-test (2/5) genommen von @skiritsis
• [x] ReactTreeTraversal-test.js (4/5) aufgenommen von @timjacobi

Ich sortierte sie nach meiner Wahrnehmung ihrer Schwierigkeit.

Wir haben eine Warteschlange mit @timjacobi @kwnccc @skiritsis , also könnten Sie drei uns bitte mitteilen, ob Sie einen dieser Tests machen möchten (bitte geben Sie an, welchen). Sie können auch bestehen, und wir lassen es jemand anderen versuchen.

Beachten Sie, dass diese ziemlich kompliziert werden und daher nicht gerade anfängerfreundlich sind. Sie sind kein mechanischer Ersatz; Sie müssen verstehen, was der Test zu überprüfen versucht, und dann einen äquivalenten öffentlichen API-Test entwickeln (der möglicherweise ganz anders aussieht).

Um diese zu übernehmen, sollten Sie gerne selbst recherchieren, ähnlich wie es @GordyD in https://github.com/facebook/react/pull/11383 getan hat. Wenn @GordyD eines davon nehmen möchte, würde ich ihm gerne eines geben!

@skiritsis Da Sie interessiert waren, werde ich Ihnen SelectEventPlugin-test neu zuweisen.

Ich würde gerne an ReactBrowerEventEmitter-test.js arbeiten 💪

@gaearon : Danke dafür, tut mir leid, dass ich nicht rechtzeitig geantwortet habe. Beschäftigt mit anderen Arbeiten. Ich werde nachsehen, wie Sie für mein Verständnis umgeschrieben haben.

Ich kann einen Blick auf ReactTreeTraversal-test.internal.js werfen

@madeinfree Geben wir @kwnccc ein paar Tage Zeit, um zuerst zu antworten, da er sich bereits in der Warteschlange befindet. Wenn er kein Interesse hat, werde ich es dir später zuweisen.

@gaearon OK! verstanden, danke ~

@gaearon Ich werde mir die Kombination BeforeInputEventPlugin + FallbackCompositionState ansehen, wenn es keine anderen Abnehmer gibt.

Klingt gut, danke @GordyD!

Übrigens, hier sind ein paar weitere Ereignistests, die umgewandelt wurden, um Ihnen eine Vorstellung davon zu geben, wie dieser Code normalerweise endet: https://github.com/facebook/react/pull/11631 https://github. com/facebook/react/pull/11525

@gaearon Ich nehme auch gerne ReactBrowserEventEmitter-test.js , wenn es sonst niemand will.

@madeinfrei

Sind Sie immer noch an ReactBrowerEventEmitter interessiert? Wenn ja, nimm es bitte und halte uns auf dem Laufenden!

@gaearon OK! Ich würde es gerne nehmen.

Du hast es.

Will jemand die restlichen getNodeForCharacterOffset-test nehmen?

Ich kann dabei helfen ( getNodeForCharacterOffset-test ) :)

@gaearon Ich habe nicht die Zeit gefunden, in ReactIncrementalPerf-test.js einzutauchen, wie ich es mir vorgestellt hatte. Entschuldigung, dass ich so lange daran festgehalten habe, aber es ist zu haben, wenn jemand es haben möchte!

@accordeiro Du hast es!

@gaearon tut mir wirklich leid, wurde nicht benachrichtigt. Wenn noch einige Tests zu erledigen sind, lassen Sie es mich bitte wissen. Ich hoffe, es ist etwas Einfaches übrig geblieben, mit dem man beginnen kann.

@kwnccc Willst du einen Blick auf ReactIncrementalPerf-test.js werfen?

Kann ich in ReactIncrementalPerf-test.js nachsehen? Oder bei Bedarf kann ich @kwnccc dabei helfen, einen Test dafür zu schreiben
Ich sehe keine Datei mit dem Namen ReactIncrementalPerf.js , müssen wir also einen Test für ReactPortal.js schreiben?

Wenn ich das Problem in ReactIncrementalPerf-test.js auch nur ein wenig verstanden habe (korrigieren Sie mich, wenn ich falsch liege), bedeutet dies, dass ich von ReactPortal.createPortal(...) zu einer öffentlichen API wie ReactDOM mit ReactDOM wechseln muss .createPortal(...) ? @gaearon

@gaearon Ich würde wirklich gerne ReactIncrementalPerf-test.js ausprobieren. Seit @abiduzz420 angefangen hat, es auszuprobieren, könnten wir uns bei Bedarf sogar zusammenschließen.

Ja, sicher @kwnccc Ich freue mich, mit dir zu arbeiten. Du warst vor mir in der Schlange, also ganz deins!

@kwnccc Ich erhalte einen Testfehler in yarn test und einen Flow-Fehler, wenn ich yarn flow ausführe. Ich werde den Code in mein gegabeltes Repo schieben: https://github.com/abiduzz420/react , damit Sie auch daran arbeiten können

 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 Das Flow-Problem ist ein bekanntes Problem unter Windows. Es hat nichts damit zu tun (aber wir müssen herausfinden, warum es passiert). Siehe https://github.com/facebook/react/issues/11703.

@kwnccc Was ReactIncrementalPerf-test betrifft, ja, das erfordert einige Überlegungen. Ich denke, an diesem Punkt ist es vielleicht am besten, ReactPortal vorübergehend nach shared zu verschieben. Lassen Sie dann ReactNoop seine eigene Methode createPortal() #$ bereitstellen (wie es ReactDOM tut).

Noch eins runter! https://github.com/facebook/react/issues/11299

@gaearon Ich habe ReactPortal in das freigegebene Verzeichnis verschoben und alle Tests bestehen. Benötige ein wenig Hilfe bei der Implementierung meiner eigenen Methode createPortal() für ReactNoop . Inspiriert von der Schreibweise von createPortal() in ReactDOM werde ich ReactPortal.createPortal(children,container,null,key) zurückgeben.
Ich denke an diese Zeilen:

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

Bitte lassen Sie mich wissen, ob ich es richtig mache?

@gaearon Mein Code ist immer noch ein Wip. Aber ich wollte nochmal prüfen, ob ich auf dem richtigen Weg bin. Es würde mir wirklich helfen, wenn Sie einen kurzen Blick auf meinen Code werfen und einige Zweifel klären könnten:

1. Ist mein Vorgehen richtig?
2. Ich gehe davon aus, dass die Tests alle Tags und Szenarien abdecken müssen, die in den vorhandenen getestet werden
   Tests, um die Testabdeckung aufrechtzuerhalten. Ich bin mir nicht sicher, ob es eine Möglichkeit gibt, Komponenten mit diesen speziellen und formatierenden Tags dynamisch zu generieren. Können Sie mir einige Hinweise geben, wie dies effizient erreicht werden kann?
3. Ich bin mir nicht sicher, wie ich den „Kein Kontext“-Teil des „Any Tag No Context“-Tests mit der öffentlichen API testen soll, da die Methode isTagValidInContext() nirgendwo anders als in der Testdatei verwendet wird. Irgendwelche Ideen?

@abiduzz420 Ja, das klingt richtig

@anushreesubramani

Ist mein Vorgehen richtig?

Im Allgemeinen ja, aber wir wollen hier Doppelarbeit vermeiden. Idealerweise sollte es aus einer Reihe von drehen

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

zu einer Reihe von

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

wobei expectInvalidNestingWarning eine benutzerdefinierte Funktion ist, die die Komponente generiert und dann bestätigt, dass das Rendern eine Warnung erzeugt.

Ich bin mir nicht sicher, ob es eine Möglichkeit gibt, Komponenten mit diesen speziellen und formatierenden Tags dynamisch zu generieren. Können Sie mir einige Hinweise geben, wie dies effizient erreicht werden kann?

Ja, ich denke so etwas wie:

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
}

Wir gehen das Array durch, nehmen das letzte Element und packen das aktuelle Element in ein übergeordnetes Element mit dem entsprechenden Tag. So erhalten wir am Ende den entsprechenden Baum. Ich habe vielleicht etwas falsch geschrieben, aber das ist die allgemeine Idee.

Sie werden wahrscheinlich auch etwas wie setzen wollen

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

in dieser Funktion direkt vor dem Rendern, da sonst die Warnungen dedupliziert werden können und wir sie nicht zuverlässig testen können.

Ich bin mir nicht sicher, wie ich den „Kein Kontext“-Teil des „Any Tag No Context“-Tests mit der öffentlichen API testen soll, da die Methode isTagValidInContext() nirgendwo anders als in der Testdatei verwendet wird

Wenn man sich die Schuld ansieht, wurde sie in https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a hinzugefügt und zu diesem Zeitpunkt wurde sie auch außerhalb von Tests aufgerufen. Aber irgendwann in der Zukunft wurde es nicht mehr verwendet. Der Test erwähnt Server-Rendering:

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

aber diese Funktion wird auch beim Server-Rendering nicht mehr verwendet.

Aus diesem Kommentar entnehme ich, dass das Ziel darin besteht sicherzustellen, dass wir niemals warnen, wenn wir die Vorfahren nicht kennen . Ich kann jedoch keinen Codepfad finden, der null als ancestorInfo an validateDOMNesting übergeben würde. Daher kennen wir wahrscheinlich immer die Vorfahren in der aktuellen Version. Ich würde also sagen, dass es sicher ist, diesen Test insgesamt zu löschen.

@gaearon Ich habe die Methode für createPortal() in ReactNoop.js erstellt und zuvor hatte ich auch die Datei ReactPortal.js in das freigegebene Verzeichnis verschoben, wie Sie vorgeschlagen haben. Bitte gehen Sie meinen Code durch, und wenn ich Änderungen oder weitere Ergänzungen vornehmen muss, werde ich es tun.

Kannst du bitte eine PN schicken? Es ist einfacher, in einer Rezension zu diskutieren.

@abiduzz420 Du scheinst großartige Arbeit geleistet zu haben, tut mir leid, aber ich hatte vor heute keine Zeit, daran zu arbeiten! Schön, dass du den Test bestehen konntest! 👏👏
@gaearon Als nächstes werde ich sicherstellen, dass ich eine große Verfügbarkeit habe

@gaearon schnelles Update: Ich habe begonnen, BeforeInputEventPlugin + FallbackCompositionState Tests umzugestalten/kombinieren. Ich habe einen guten Überblick darüber, wie man die Implementierung über die öffentliche API testet. Ich arbeite jetzt an der Erstellung von Testfällen, um die verschiedenen Codepfade in Abhängigkeit von den verschiedenen Ausführungsumgebungen/Browser-Engines zu testen. Ich erwarte gegen Ende dieser Woche eine erste PR zu haben (am 10. Dezember - aktualisiert, ich brauche etwas mehr Zeit - mit Blick auf den 12. Dezember).

Schön, danke für das Update!

@gaearon kurzes Update meinerseits: Ich habe bereits damit begonnen, die Tests für getNodeForCharacterOffset-test neu zu schreiben und sollte in der Lage sein, eine PR bis Donnerstag zu verschieben – ist das in Ordnung?

Klingt gut

Noch eins runter! https://github.com/facebook/react/pull/11742

@reznord Wir haben noch nichts von dir gehört – hast du etwas angefangen? Wenn Sie zu beschäftigt sind, ist es vielleicht besser, jemand anderem die Chance zu geben, es zu versuchen.

Pingen Sie @reznord

Hallo @gaearon , kann ich ReactErrorUtils-test.js für meinen ersten Beitrag nehmen?

Hallo, @gaearon gibt es etwas, das ich in ReactErrorUtils-test.js tun kann

Hallo, kann mir jemand helfen, den ReactBrowserEventEmitter-test.js-Test fortzusetzen? Da ich mit meiner Arbeit jetzt keine Zeit habe, weiterzumachen, ist die PR https://github.com/facebook/react/pull/11713 , vielen Dank !!

Nochmals vielen Dank an alle! Es gibt noch ein paar ausstehende Tests, aber ich denke, wir können sie abschließen.

@gaearon : ReactErrorUtils-test.js Ich würde gerne daran arbeiten. Können Sie bestätigen, ob ich das abholen kann?