React: Express more tests via public API

I can take a look at this over the weekend and see if I can tackle it in the short term.

Great, thanks! If you pick any particular test, please comment with the filename in the thread so that someone else doesn’t start working on the same test.

I am definitely very interested in contributing to this. I will look through this weekend and find an opportunity to refactor!

I am interested as well 👍

I published a list of tests in the first post. Just let me know which ones you’d like to take and I’ll assign them to you.

ReactDOMInput-test is fine with me :)

@SadPandaBear You got it!

I can work on ReactErrorUtils-test. 😄

I will take a look at setInnerHTML-test.js

I'll do getEventCharCode-test.js. 😀

I can work on getEventKey-test.js.

I can take escapeTextContentForBrowser-test.js.

I'd like to give ChangeEventPlugin-test.js a shot :)

I can take SyntheticEvent-test.js

I'd like to work on EnterLeaveEventPlugin-test.js

I'd like to work on ReactDOMEventListener-test.js

I would like to take BeforeInputEventPlugin-test.js

I'd like to take SyntheticKeyboardEvent-test.js. Thanks 👍

Let me take inputValueTracking-test.js

I'd like to work on SyntheticWheelEvent-test.js

Can I take: ReactBrowserEventEmitter-test.js ?

I'm taking SelectEventPlugin-test.js

I'd like to work on ReactDOMComponentTree-test.js

I'd like to work on ReactTreeTraversal-test.js

hi! 👋 I'd like to work on ReactCoroutine-test.js

I can take SyntheticClipboardEvent-test.js

I'd like to work on validateDOMNesting-test.js

I could take EventPluginRegistry-test.js

I'd like to try on ReactDOMComponent-test.js

Hello! I'd like to try on quoteAttributeValueForBrowser-test.js! :muscle:

Hello! I'd like to try on ReactDOMServerIntegration-test.js !

I'll take ReactIncrementalPerf-test.js

I'll do getNodeForCharacterOffset-test.js

@burnsbeaver Which one is it, FallbackCompisitionState-test or getNodeForCharacterOffset-test? We'd like to start with one test per person.

getNodeForCharacter please. I deleted the other comment, sorry for the confusion!

We still have FallbackCompositionState-test.js and ReactFiberHostContext-test.js free!

I'll take FallbackCompisitionState!

I can try the ReactFiberHostContext-test.js

Update: all tests are taken now. Subscribe to this issue! They might free up in the future if somebody doesn’t have the time to finish the work. We’ll comment if some test becomes available to try again.

To all the people who took the tests—thank you! I want to reiterate the solution is not always clear, and in some cases it might not even be possible to reasonably test the behavior without some changes to the React source itself. If you ever feel stuck, comment here, and we’ll try to figure out a plan.

@adsonpleal Sorry to disappoint you—I just checked, and unfortunately we accidentally already fixed ReactFiberHostContext-test. I didn’t realize this at first, but that TODO is outdated. This is the only test I can see that is already fixed.

@gaearon Wow, refactoring ReactDOMInput-test is gonna take me some time but I hope I finish everything this weekend.

I have a small doubt:
Is it ok to repace all that behavior from the function setUntrackedValue which uses inputValueTracking to something like ReactTestUtils.Simulate.? ?

By the way you can check my PR here to see what I did to remove the inputValueTracking. I know that some of these tests may rely on very specific stuff from inputValueTracking, but I was just wondering if ReactTestUtils can effectively be used instead.

For inputValueTracking @jquense should have the most context on how to do it best. But as long as you get it working, we can review and see if the approach works or not.

Just a heads up to anyone else, I had an older version of yarn installed (0.22) and was trying to run the tests locally and everything was breaking. Upgrading yarn to latest (1.2.1) fixed the issue and tests are running fine now.

@sadpandabear I have the same module in my test file so I'm going to check out your implementation soon

@gaearon For the setInnerHTML tests, they feel like they are dependent upon the existence of setInnerHTML for the test suite to make sense.

I can write some tests to replace the existing functions, but then the test suite is more along the lines of setting inner html, vs. anything specific to setInnerHTML. I suppose I'm getting a little hung up on the naming of the test suite.

EDIT: Unless I'm mistaken...SVGs have an innerHTML property. Not sure the second chunk of tests in this file are even necessary.

@silvestrijonathan I think what those tests really are trying to verify is that dangerouslySetInnerHTML works as expected in React. So if you modify those tests to use ReactDOM and render the same content with dangerouslySetInnerHTML, that should be enough. It's fine to rename the test to dangerouslySetInnerHTML-test if you feel that would be more appropriate.

After a couple hours playing with my test file I have a strong suggestion for newcomers (like me): start your tests with a clean env (file).
I was editing the existing file and it mocked some internal functions so a few ReactTestUtils functions were broken!! It took me awhile to realize why things weren't working as intended..

@gaearon I think we need to clarify that ReactTestUtils, including simulating events, should be considered a private API. That indirectly reaches into internal APIs so it doesn't let us properly test how it would work otherwise. E.g. it'll hamper our ability to test compiled packages without exposing those hooks and it won't let us test a new non-synthetic event system.

@dphurley, I noticed you're working on ReactIncrementalPerf-test. I was also working on a test suite that uses ReactCoroutine, so I wanted to give you a heads up about this PR: #11338.
I'm not sure if you've already submitted a PR, but if you haven't, then it might be a good idea to base it off of #11338 (if it's accepted).

@gaearon Thanks for your advice. I thought about utilizing React-DOM with dangerouslySetInnerHTML for the tests, so I will go about it that way!

And yes, I will probably rename the tests to that in that case. Look for my PR in the next day or so.

We’ve got first merged PR!

Take a look at it: https://github.com/facebook/react/pull/11309

If you're working on anything related to events, I suggest you to read both the discussions in https://github.com/facebook/react/pull/11309 and reviews 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

There are a few common themes, and it may be valuable to use those discussions to steer other PRs in the right direction.

Great convos to reference-thanks!

Work got a little busy, but I think I'll be able to get a PR opened up this weekend for my tests.

I'm yet to look into the test that I've picked up. Got busy with other things. I'll try raising a PR in another couple of days, can I buy some time?

Sounds fine, sure!

I had same problem

Another PR merged! https://github.com/facebook/react/pull/11316

Two more down. https://github.com/facebook/react/pull/11317 https://github.com/facebook/react/pull/11385

Wrote a small analysis about how I approached one of the tests. https://github.com/facebook/react/pull/11385#issuecomment-341934588

as far as i can tell they are all taken, please post here if any free up and i'll watch

I merged two more PRs that deal specifically with SyntheticEvents. If you took any related tests, please check them out and try to match in style and approach: https://github.com/facebook/react/pull/11365 and https://github.com/facebook/react/issues/11299

@gaearon For EventPluginRegistry-test.js, how should we rewrite test using public API, I see that we are injecting default plugins in ReactDom.js -> ReactDOMClientInjection.js
{
SimpleEventPlugin,
EnterLeaveEventPlugin,
ChangeEventPlugin,
SelectEventPlugin,
BeforeInputEventPlugin,
}

So how exactly we could inject our test-mocked plugin and test the EventPluginRegistry functionality
I searched for any custom plugin and found react-tap-event-plugin to check how exactly custom plugins are injected.
Is this the only way to inject plugins

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

I fear I'm way over my head on ReactTreeTraversal-test.js
If anyone else wants to give it a shot, feel free to do so.

@aqumus

EventPluginRegistry is tricky. I guess the first step would be to figure out where it is actually being used. You're right that the tap event plugin is the only one we sort of still commit to supporting. Conveniently we have it right in the repo. So maybe we can add a test that it specifically works?

It is also likely that RN uses EventPluginRegistry. Do we have any tests verifying RN events work? I don't know. It's worth commenting out different parts of EventPluginRegistry and looking if any tests fail. We can remove its private API tests if the same code is already covered by other tests that happen to stress those code paths. Does this make sense?

@gdevincenzi Sounds good, I'll remove the assignment.

Also, I'm going to be away this week, but please don't let this stop you from continuing on this. Hope to get a few more submitted PRs merged next week.

i can take ReactTreeTraversal-test.js - its an unfamiliar API but seems like a good opp to learn it. advice welcome @gdevincenzi

Congratulations to @gordyd for finishing a rather complex one: https://github.com/facebook/react/pull/11383.

This is a good example of how different the code can look before and after while testing essentially the same things. And how you can figure out what the code is supposed to be doing by searching for references, looking at git history, and commenting out different lines.

We have not received a PR yet from the following users:

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

Could you please confirm if you started work on this? I have more people who want to help in the queue, so if you don’t have the time, it would be great to give others an opportunity to work on this.

@andrevargas Just noticed your discussion in https://github.com/facebook/react/pull/11331. I guess it makes sense to keep those changes unified there.

Please add me to that queue @gaearon

@gaearon Yes, you're right. Just to confirm, @jeremenichelli is working on quoteAttributeValueForBrowser-test.js in #11331, and I'm aware of this. I think you can update this thread with his username and PR's link.

Please also add me to the queue @gaearon

@gaearon I have started working on it. Planning on either posting my findings or a PR sometime this week.

@gaearon I have begun working on SyntheticKeyboardEvent.js. Planning to have a PR up this weekend.

@gaearon I could also take up any of the tests in case the people that were originally assigned don't have the time required to work on them.

@gaearon Sorry for the long delay, I'm making a WIP PR now. Update: Can someone briefly explain what should I do to not rely on private APIs? Also, I don't know about top<EventName>s. Thanks.

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

@gaearon Sorry for the long delay 😅. I will be working on this today and will ping you if I have some doubts regarding that.

@morajabi one potential way to tackle this

• Look at SelectEventPlugin and understand which functionality it provides to the user
• Write code that makes use of that functionality
• Disable loading SelectEventPlugin (comment it out) and see what breaks (make sure something breaks)
• The code you've written is now the first version of your test so you can put it in a test case
• Enable loading SelectEventPlugin again and make sure the test passes
• Optimise your code

@gaearon apology for delay
based on your suggestion, I did tried commenting few parts of EventPluginRegistry.js and found alot of test cases failing (SyntheticWheelEvent, ReactDOMComponentTree, SyntheticClipboardEvent, SyntheticWheelEvent, inputValueTracking, SimpleEventPlugin, ChangeEventPlugin, ReactDOMComponentTree etc),
I guess mainly because ReactBrowserEventEmitter.js uses registrationNameDependencies which is defined in EventPluginRegistry.js

Although when commenting out

• line 208
• line 38-41

none of the test cases failed (only EventPluginRegistry test failed)
Based on this I guess EventPluginRegistry is already covered by other test suites.

Conveniently we have it right in the repo. So maybe we can add a test that it specifically works?

I didn't understood what you meant by this

Is there any other suggestion I could work on to rewrite EventPluginRegistry using public API?

For others (not sure if this had been broadcasted before) I found @kentcdodds video podcast- react event code walkthrough by Ben Alpert very useful.

Sorry @gaearon I tried to do, but now I don't free time to finish it
So if anyone else wants to get my issues, feel free :)

@danilowoz @gaearon If you do not mind I could take BeforeInputEventPlugin-test.js.

@timjacobi What is the replacement for ReactDOMComponentTree.getInstanceFromNode?

Also, where should I disable it?

Disable loading SelectEventPlugin (comment it out) and see what breaks (make sure something breaks)

@morajabi I'm not sure you're tackling this at the right level. Could you open a WIP PR with what you have so far? I don't want to pollute this thread too much.

@timjacobi I can't when I haven't committed anything new. I'm sorry I'm pretty busy these days if someone can take SelectEventPlugin-test.

It seems like we no longer need ReactDOMServerIntegration-test (cc @minerado) as I have covered it together with other changes.

@aqumus Based on your analysis I'll remove EventPluginRegistry-test.js from this list. I think we'll keep this as a unit test of those particular internals, but it's good to know actual logic is covered by other tests.

@king0120 I'll reassign getEventCharCode-test to @aarboleda1 because he's working on a very related test in https://github.com/facebook/react/pull/11631, and it might be easier to do them together.

@morajabi @gaearon I could take a look at SelectEventPlugin-test.js as well.

@email2vimalraj FYI, I rewrote inputValueTracking-test.

These tests don't currently have an owner:

• [ ] getNodeForCharacterOffset-test.js (3/5) taken by @accordeiro
• [ ] ReactBrowserEventEmitter-test.js (5/5) taken by @madeinfree
• [ ] BeforeInputEventPlugin-test.js + FallbackCompositionState-test.js (5/5, should be combined) taken by @GordyD
• [x] SelectEventPlugin-test (2/5) taken by @skiritsis
• [x] ReactTreeTraversal-test.js (4/5) taken by @timjacobi

I sorted them by my perception of their difficulty.

We have a queue with @timjacobi @kwnccc @skiritsis so please could the three of you let us know if you'd like to take any of these tests (please specify which one). You can also pass, and we'll let somebody else try.

Note that these are getting pretty complicated, so they're not exactly beginner-friendly. They're not mechanical replacements; you'll need to understand what the test is trying to verify and then come up with an equivalent public API test (which might look very different).

To take these, you should be comfortable researching things on your own, similar to how @GordyD did in https://github.com/facebook/react/pull/11383. In fact if @GordyD would like to take any of these I'd be happy to give him one!

@skiritsis Since you were interested I'll reassign SelectEventPlugin-test to you.

I'd like to work on ReactBrowerEventEmitter-test.js 💪

@gaearon: Thanks for that, sorry for not responding on time. Got busy with other work. I'll look into how you rewrote for my understanding.

I can take a look at ReactTreeTraversal-test.internal.js

@madeinfree Let's give a few days to @kwnccc to reply first since he's already in the queue. If he's not interested, I'll assign it to you later.

@gaearon OK! got it, thank you ~

@gaearon I'll take a look at combining BeforeInputEventPlugin + FallbackCompositionState if there are no other takers.

Sounds good, thanks @GordyD!

By the way, here's a few more event tests that got converted, to give you an idea of what this code usually ends up being like: https://github.com/facebook/react/pull/11631 https://github.com/facebook/react/pull/11525

@gaearon I'm happy to take ReactBrowserEventEmitter-test.js as well if no one else wants it.

@madeinfree

Are you still interested in ReactBrowerEventEmitter? If so, please take it and keep us updated!

@gaearon OK! I would like to take it.

You got it.

Anybody want to take the remaining getNodeForCharacterOffset-test?

I can help with this one (getNodeForCharacterOffset-test) :)

@gaearon Haven't found the time to dive into ReactIncrementalPerf-test.js like I thought I would. Apologies for hanging on to it for so long but it's up for grabs if anyone wants it!

@accordeiro You got it!

@gaearon really sorry, didn't get notified. If there are still some tests to take care of please let me know. I hope there has been left something easy to start with.

@kwnccc Wanna look into ReactIncrementalPerf-test.js?

Can I look into ReactIncrementalPerf-test.js ? Or if needed I can help @kwnccc out in writing test for it
I do not see any file named ReactIncrementalPerf.js , so do we have to write test for ReactPortal.js?

If I have even slightly understood the issue in ReactIncrementalPerf-test.js (correct me if I'm wrong), it means I need to switch from ReactPortal.createPortal(...) to a public API like react-dom with ReactDOM.createPortal(...) ? @gaearon

@gaearon I'd really like to try ReactIncrementalPerf-test.js. Since @abiduzz420 has started checking it out we could even team up if needed.

Yeah sure @kwnccc I'm happy to work with you. You were in queue before me, so all yours!

@kwnccc I'm getting one test error in yarn test and Flow error when I run yarn flow. i shall push the code to my forked repo : https://github.com/abiduzz420/react so that you can as well work on

 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 The flow issue is a known problem on Windows. It's unrelated (but we'll need to figure out why it happens). See https://github.com/facebook/react/issues/11703.

@kwnccc As for ReactIncrementalPerf-test, yes this will require some thought. I think maybe at this point it's best to temporarily move ReactPortal to shared. Then have ReactNoop provide its own createPortal() method (like ReactDOM does).

One more down! https://github.com/facebook/react/issues/11299

@gaearon I have moved ReactPortal to shared directory, and all the tests pass. Need a bit of assistance in implementing my own method createPortal() for ReactNoop. Taking inspiration from how createPortal() is written in ReactDOM I shall return ReactPortal.createPortal(children,container,null,key).
I'm thinking on these lines:

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

Please let me know if I'm doing it right ?

@gaearon My code is still a wip. But I wanted to double check if I am on the right track. It would really help me if you could take a quick look at my code and clarify few doubts:

1. Is the approach I have taken correct?
2. I assume the tests need to cover all the tags and scenarios that are tested in the existing
   tests in order to maintain test coverage. I am not sure if there is a way to generate components dynamically with these special and formatting tags. Can you give me some pointers on an efficient way to achieve this?
3. I am not sure how to test the 'no context' part of the 'any tag no context' test with public API because the method isTagValidInContext() is not used in anywhere else except in the test file. Any ideas?

@abiduzz420 Yes this sounds right

@anushreesubramani

Is the approach I have taken correct?

In general, yes, but we'll want to avoid duplication there. Ideally it should turn from a series of

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

to a series of

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

where expectInvalidNestingWarning is a custom function that generates the component and then asserts that rendering it produces a warning.

I am not sure if there is a way to generate components dynamically with these special and formatting tags. Can you give me some pointers on an efficient way to achieve this?

Yes, I'm thinking something like:

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
}

We go through the array, take the last item, and wrap the current element into a parent with the corresponding tag. This way by the end we end up with the corresponding tree. I may have written something wrong but that's the general idea.

You'll also probably want to put something like

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

in that function right before rendering because otherwise the warnings can be deduplicated and we can't reliably test them.

I am not sure how to test the 'no context' part of the 'any tag no context' test with public API because the method isTagValidInContext() is not used in anywhere else except in the test file

Looking at the blame, it was added in https://github.com/facebook/react/commit/76bb96ef21b7c665e1b51b6bb90e64ec40c0f16a and at that point it was called outside of tests too. But at some point in the future it was no longer used. The test mentions sever rendering:

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

but this function is no longer used with server rendering either.

From this comment I gather that the goal is to ensure we never warn when we don't know the ancestors. However, I can't find a code path that would pass null as ancestorInfo to validateDOMNesting. Therefore we probably always know the ancestors in the current version. So I'd say it's safe to delete this test altogether.

@gaearon I have created the method for createPortal() in ReactNoop.js and prior to that I had also shifted ReactPortal.js file to shared directory as you suggested. Please go through my code, and if there are any modifications or further additions I need to make, I shall do it.

Can you send a PR please? It's easier to discuss in a review.

@abiduzz420 You seem to have done a great job, sorry but I didn't have the time to start working on that before today! Really glad you were able to complete the test! 👏👏
@gaearon next I'll make sure I'll have a great availability

@gaearon quick update: I've begun refactoring/combining BeforeInputEventPlugin + FallbackCompositionState tests. I've got a good handle on how to test the implementation through the public API. I'm now working through creating test cases to exercise the different code paths dependent upon the different execution environments/browser engines. I expect to have a first PR up towards the end of this week (by 10th Dec - updated I need a bit more time - looking at 12th Dec).

Nice, thanks for the update!

@gaearon quick update on my end: I've already started working on rewriting the tests for getNodeForCharacterOffset-test and should be able to push a PR until Thursday – is this ok?

Sounds good

One more down! https://github.com/facebook/react/pull/11742

@reznord We haven't heard from you yet—did you start anything? If you're too busy maybe it's better to give someone else a chance to try.

Ping @reznord

Hi @gaearon, Can I take ReactErrorUtils-test.js for my first contribution?

hi, @gaearon is there something that I can do in ReactErrorUtils-test.js

Hi, Does anyone can help me to continue the ReactBrowserEventEmitter-test.js test ? Because I'll busy on my working now no time to keep going, the PR is https://github.com/facebook/react/pull/11713, thank you so much !!

Thanks to everyone again! There are still a few outstanding tests but I think we can close it.

@gaearon : ReactErrorUtils-test.js I would like to work on it. can you confirm if I can pick that up?