Files
react/packages/react-devtools-shared/src/devtools/views/Button.js
Brian Vaughn a4ead704ba Use ReactDOM Test Selector API in DevTools e2e tests (#22978)
Builds on top of the existing Playwright tests to plug in the test selector API: https://gist.github.com/bvaughn/d3c8b8842faf2ac2439bb11773a19cec

My goals in doing this are to...
1. Experiment with the new API to see what works and what doesn't.
2. Add some test selector attributes (and remove DOM-structure based selectors).
3. Focus the tests on DevTools itself (rather than the test app).

I also took this opportunity to add a few new test cases– like named hooks, editable props, component search, and profiling- just to play around more with the Playwright API.

Relates to issue #22646
2021-12-21 11:58:04 -05:00

47 lines
897 B
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import * as React from 'react';
import styles from './Button.css';
import Tooltip from './Components/reach-ui/tooltip';
type Props = {
children: React$Node,
className?: string,
testName?: ?string,
title: React$Node,
...
};
export default function Button({
children,
className = '',
testName,
title,
...rest
}: Props) {
let button = (
<button
className={`${styles.Button} ${className}`}
data-testname={testName}
{...rest}>
<span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
{children}
</span>
</button>
);
if (title) {
button = <Tooltip label={title}>{button}</Tooltip>;
}
return button;
}