Skip to content

Commit

Permalink
Add test selectors to experimental build (#22760)
Browse files Browse the repository at this point in the history
This change adds a new "react-dom/unstable_testing" entry point but I believe its contents will exactly match "react-dom/index" for the stable build. (The experimental build will have the added new selector APIs.)
  • Loading branch information
Brian Vaughn authored Nov 16, 2021
1 parent 520ffc7 commit aa19d56
Show file tree
Hide file tree
Showing 9 changed files with 66 additions and 47 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"scripts": {
"build": "node ./scripts/rollup/build.js",
"build-combined": "node ./scripts/rollup/build-all-release-channels.js",
"build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
"build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
"build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
"build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
"linc": "node ./scripts/tasks/linc.js",
Expand Down
18 changes: 12 additions & 6 deletions packages/react-devtools-inline/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ const babelOptions = {
),
};

const builtModulesDir = resolve(
__dirname,
'..',
'..',
'build',
'oss-experimental',
);

module.exports = {
mode: __DEV__ ? 'development' : 'production',
devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
Expand All @@ -49,12 +57,10 @@ module.exports = {
libraryTarget: 'commonjs2',
},
externals: {
react: 'react',
// TODO: Once this package is published, remove the external
// 'react-debug-tools': 'react-debug-tools',
'react-dom': 'react-dom',
'react-is': 'react-is',
scheduler: 'scheduler',
react: resolve(builtModulesDir, 'react'),
'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
'react-is': resolve(builtModulesDir, 'react-is'),
scheduler: resolve(builtModulesDir, 'scheduler'),
},
node: {
// source-maps package has a dependency on 'fs'
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shell/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const config = {
react: resolve(builtModulesDir, 'react'),
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
'react-devtools-feature-flags': resolveFeatureFlags('shell'),
'react-dom': resolve(builtModulesDir, 'react-dom'),
'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
'react-is': resolve(builtModulesDir, 'react-is'),
scheduler: resolve(builtModulesDir, 'scheduler'),
},
Expand Down
File renamed without changes.
1 change: 1 addition & 0 deletions packages/react-dom/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"server.browser.js",
"server.node.js",
"test-utils.js",
"unstable_testing.js",
"cjs/",
"umd/"
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ describe('ReactDOMTestSelectors', () => {
});

describe('findAllNodes', () => {
// @gate www
// @gate www || experimental
it('should support searching from the document root', () => {
function Example() {
return (
Expand All @@ -76,7 +76,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support searching from the container', () => {
function Example() {
return (
Expand All @@ -96,7 +96,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support searching from a previous match if the match had a data-testname', () => {
function Outer() {
return (
Expand Down Expand Up @@ -127,7 +127,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('inner');
});

// @gate www
// @gate www || experimental
it('should not support searching from a previous match if the match did not have a data-testname', () => {
function Outer() {
return (
Expand Down Expand Up @@ -157,7 +157,7 @@ describe('ReactDOMTestSelectors', () => {
);
});

// @gate www
// @gate www || experimental
it('should support an multiple component types in the selector array', () => {
function Outer() {
return (
Expand Down Expand Up @@ -211,7 +211,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match3');
});

// @gate www
// @gate www || experimental
it('should find multiple matches', () => {
function Example1() {
return (
Expand Down Expand Up @@ -249,7 +249,7 @@ describe('ReactDOMTestSelectors', () => {
]);
});

// @gate www
// @gate www || experimental
it('should ignore nested matches', () => {
function Example() {
return (
Expand All @@ -269,7 +269,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toEqual('match1');
});

// @gate www
// @gate www || experimental
it('should enforce the specific order of selectors', () => {
function Outer() {
return (
Expand All @@ -294,7 +294,7 @@ describe('ReactDOMTestSelectors', () => {
).toHaveLength(0);
});

// @gate www
// @gate www || experimental
it('should not search within hidden subtrees', () => {
const ref1 = React.createRef(null);
const ref2 = React.createRef(null);
Expand Down Expand Up @@ -324,7 +324,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0]).toBe(ref2.current);
});

// @gate www
// @gate www || experimental
it('should support filtering by display text', () => {
function Example() {
return (
Expand All @@ -347,7 +347,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support filtering by explicit accessibiliy role', () => {
function Example() {
return (
Expand All @@ -372,7 +372,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support filtering by explicit secondary accessibiliy role', () => {
const ref = React.createRef();

Expand All @@ -397,7 +397,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0]).toBe(ref.current);
});

// @gate www
// @gate www || experimental
it('should support filtering by implicit accessibiliy role', () => {
function Example() {
return (
Expand All @@ -420,7 +420,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support filtering by implicit accessibiliy role with attributes qualifications', () => {
function Example() {
return (
Expand All @@ -443,7 +443,7 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should support searching ahead with the has() selector', () => {
function Example() {
return (
Expand Down Expand Up @@ -479,14 +479,14 @@ describe('ReactDOMTestSelectors', () => {
expect(matches[0].id).toBe('match');
});

// @gate www
// @gate www || experimental
it('should throw if no container can be found', () => {
expect(() => findAllNodes(document.body, [])).toThrow(
'Could not find React container within specified host subtree.',
);
});

// @gate www
// @gate www || experimental
it('should throw if an invalid host root is specified', () => {
const ref = React.createRef();
function Example() {
Expand All @@ -502,7 +502,7 @@ describe('ReactDOMTestSelectors', () => {
});

describe('getFindAllNodesFailureDescription', () => {
// @gate www
// @gate www || experimental
it('should describe findAllNodes failures caused by the component type selector', () => {
function Outer() {
return <Middle />;
Expand Down Expand Up @@ -532,7 +532,7 @@ No matching component was found for:
);
});

// @gate www
// @gate www || experimental
it('should return null if findAllNodes was able to find a match', () => {
function Example() {
return (
Expand Down Expand Up @@ -568,7 +568,7 @@ No matching component was found for:
};
}

// @gate www
// @gate www || experimental
it('should return a single rect for a component that returns a single root host element', () => {
const ref = React.createRef();

Expand Down Expand Up @@ -602,7 +602,7 @@ No matching component was found for:
});
});

// @gate www
// @gate www || experimental
it('should return a multiple rects for multiple matches', () => {
const outerRef = React.createRef();
const innerRef = React.createRef();
Expand Down Expand Up @@ -652,7 +652,7 @@ No matching component was found for:
});
});

// @gate www
// @gate www || experimental
it('should return a multiple rects for single match that returns a fragment', () => {
const refA = React.createRef();
const refB = React.createRef();
Expand Down Expand Up @@ -702,7 +702,7 @@ No matching component was found for:
});
});

// @gate www
// @gate www || experimental
it('should merge overlapping rects', () => {
const refA = React.createRef();
const refB = React.createRef();
Expand Down Expand Up @@ -757,7 +757,7 @@ No matching component was found for:
});
});

// @gate www
// @gate www || experimental
it('should merge some types of adjacent rects (if they are the same in one dimension)', () => {
const refA = React.createRef();
const refB = React.createRef();
Expand Down Expand Up @@ -857,7 +857,7 @@ No matching component was found for:
});
});

// @gate www
// @gate www || experimental
it('should not search within hidden subtrees', () => {
const refA = React.createRef();
const refB = React.createRef();
Expand Down Expand Up @@ -914,7 +914,7 @@ No matching component was found for:
});

describe('focusWithin', () => {
// @gate www
// @gate www || experimental
it('should return false if the specified component path has no matches', () => {
function Example() {
return <Child />;
Expand All @@ -935,7 +935,7 @@ No matching component was found for:
expect(didFocus).toBe(false);
});

// @gate www
// @gate www || experimental
it('should return false if there are no focusable elements within the matched subtree', () => {
function Example() {
return <Child />;
Expand All @@ -953,7 +953,7 @@ No matching component was found for:
expect(didFocus).toBe(false);
});

// @gate www
// @gate www || experimental
it('should return false if the only focusable elements are disabled', () => {
function Example() {
return (
Expand All @@ -971,7 +971,7 @@ No matching component was found for:
expect(didFocus).toBe(false);
});

// @gate www
// @gate www || experimental
it('should return false if the only focusable elements are hidden', () => {
function Example() {
return <button hidden={true}>not clickable</button>;
Expand All @@ -985,7 +985,7 @@ No matching component was found for:
expect(didFocus).toBe(false);
});

// @gate www
// @gate www || experimental
it('should successfully focus the first focusable element within the tree', () => {
const secondRef = React.createRef(null);

Expand Down Expand Up @@ -1040,7 +1040,7 @@ No matching component was found for:
expect(handleThirdFocus).not.toHaveBeenCalled();
});

// @gate www
// @gate www || experimental
it('should successfully focus the first focusable element even if application logic interferes', () => {
const ref = React.createRef(null);

Expand Down Expand Up @@ -1070,7 +1070,7 @@ No matching component was found for:
expect(handleFocus).toHaveBeenCalledTimes(1);
});

// @gate www
// @gate www || experimental
it('should not focus within hidden subtrees', () => {
const secondRef = React.createRef(null);

Expand Down Expand Up @@ -1194,7 +1194,7 @@ No matching component was found for:
window.IntersectionObserver = IntersectionObserver;
});

// @gate www
// @gate www || experimental
it('should notify a listener when the underlying instance intersection changes', () => {
const ref = React.createRef(null);

Expand Down Expand Up @@ -1231,7 +1231,7 @@ No matching component was found for:
expect(handleVisibilityChange).toHaveBeenCalledWith([{rect, ratio: 0.5}]);
});

// @gate www
// @gate www || experimental
it('should notify a listener of multiple targets when the underlying instance intersection changes', () => {
const ref1 = React.createRef(null);
const ref2 = React.createRef(null);
Expand Down Expand Up @@ -1308,7 +1308,7 @@ No matching component was found for:
]);
});

// @gate www
// @gate www || experimental
it('should stop listening when its disconnected', () => {
const ref = React.createRef(null);

Expand Down Expand Up @@ -1343,7 +1343,7 @@ No matching component was found for:
});

// This test reuires gating because it relies on the __DEV__ only commit hook to work.
// @gate www && __DEV__
// @gate www || experimental && __DEV__
it('should update which targets its listening to after a commit', () => {
const ref1 = React.createRef(null);
const ref2 = React.createRef(null);
Expand Down Expand Up @@ -1422,7 +1422,7 @@ No matching component was found for:
]);
});

// @gate www
// @gate www || experimental
it('should not observe components within hidden subtrees', () => {
const ref1 = React.createRef(null);
const ref2 = React.createRef(null);
Expand Down
Loading

0 comments on commit aa19d56

Please sign in to comment.