data-testid hit targets for automated tests (#1833)

* add data-testid to three components - chain modal button - asset menu button - connect wallet button * more test ids for bridging view * add final testids
wormhole-foundation · Apr 1, 2024 · f232766 · f232766
1 parent 5e87522
commit f232766
Show file tree

Hide file tree

Showing 21 changed files with 92 additions and 17 deletions.
diff --git a/wormhole-connect/src/components/AlertBanner.tsx b/wormhole-connect/src/components/AlertBanner.tsx
@@ -29,6 +29,7 @@ type Props = {
  warning?: boolean;
  error?: boolean;
  margin?: string;
+ testId?: string;
 };
 
 function AlertBanner(props: Props) {
@@ -43,6 +44,7 @@ function AlertBanner(props: Props) {
  !!props.error && classes.error,
  ])}
  style={{ margin: props.margin || 0 }}
+ data-testid={props.testId}
  >
  <AlertIcon />
  {props.content}

diff --git a/wormhole-connect/src/components/Button.tsx b/wormhole-connect/src/components/Button.tsx
@@ -40,6 +40,7 @@ type Props = {
  disabled?: boolean;
  children: React.ReactNode;
  onClick?: MouseEventHandler<HTMLDivElement>;
+ testId?: string;
 };
 
 function Button(props: Props) {
@@ -59,6 +60,7 @@ function Button(props: Props) {
  !!props.disabled && classes.disabled,
  ])}
  onClick={click}
+ data-testid={props.testId}
  >
  {props.children}
  </div>

diff --git a/wormhole-connect/src/components/ConnectWallet.tsx b/wormhole-connect/src/components/ConnectWallet.tsx
@@ -16,6 +16,7 @@ import WalletIcons from 'icons/WalletIcons';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 import Popover from '@mui/material/Popover';
 import config from 'config';
+import { TransferSide } from 'config/types';
 import { ExplorerConfig } from 'config/types';
 
 type StyleProps = { disabled?: boolean };
@@ -57,6 +58,7 @@ const useStyles = makeStyles<StyleProps>()((theme: any, { disabled }) => ({
 }));
 
 type Props = {
+ side: TransferSide;
  type: TransferWallet;
  disabled?: boolean;
 };
@@ -181,7 +183,11 @@ function ConnectWallet(props: Props) {
  );
  } else {
  const button = (
- <div className={classes.connectWallet} onClick={() => connect()}>
+ <div
+ className={classes.connectWallet}
+ onClick={() => connect()}
+ data-testid={`${props.side}-section-connect-wallet-button`}
+ >
  <WalletIcon />
  <div>{mobile ? 'Connect' : 'Connect wallet'}</div>
  </div>

diff --git a/wormhole-connect/src/components/Header.tsx b/wormhole-connect/src/components/Header.tsx
@@ -22,6 +22,7 @@ type Props = {
  text: string;
  align?: Alignment;
  size?: number;
+ testId?: string;
 };
 
 function Header(props: Props) {
@@ -30,7 +31,11 @@ function Header(props: Props) {
  fontSize: props.size || 42,
  };
  const { classes } = useStyles(styleProps);
- return <div className={classes.title}>{props.text}</div>;
+ return (
+ <div className={classes.title} data-test-id={props.testId}>
+ {props.text}
+ </div>
+ );
 }
 
 export default Header;
diff --git a/wormhole-connect/src/components/InputTransparent.tsx b/wormhole-connect/src/components/InputTransparent.tsx
@@ -39,6 +39,7 @@ type Props = {
  onEnter?: React.KeyboardEventHandler;
  disabled?: boolean;
  value?: string | number;
+ testId?: string;
 };
 
 const NUMBER_FORMAT_REGEX = /^\d*\.?\d*$/;
@@ -76,6 +77,7 @@ function InputTransparent(props: Props) {
  onKeyDown={handleKeyDown}
  readOnly={props.disabled}
  value={props.value}
+ data-testid={props.testId}
  />
  );
 }

diff --git a/wormhole-connect/src/components/PageHeader.tsx b/wormhole-connect/src/components/PageHeader.tsx
@@ -52,6 +52,7 @@ type PageHeaderProps = {
  description?: string;
  back?: boolean;
  showHamburgerMenu?: boolean;
+ testId?: string;
 };
 
 function PageHeader({
@@ -60,6 +61,7 @@ function PageHeader({
  align = 'left',
  description,
  showHamburgerMenu = true,
+ testId,
 }: PageHeaderProps) {
  const { classes } = useStyles({ showHamburgerMenu, align });
  const dispatch = useDispatch();
@@ -78,7 +80,7 @@ function PageHeader({
  onClick={goBack}
  />
  )}
- <Header text={title} align={align} />
+ <Header text={title} align={align} testId={testId} />
  </div>
  {showHamburgerMenu ? <MenuFull /> : null}
  </div>

diff --git a/wormhole-connect/src/config/types.ts b/wormhole-connect/src/config/types.ts
@@ -55,6 +55,9 @@ export enum Route {
  wstETHBridge = 'wstETHBridge',
 }
 
+// Used in bridging components
+export type TransferSide = 'source' | 'destination';
+
 export type SupportedRoutes = keyof typeof Route;
 
 export type Network = 'mainnet' | 'testnet' | 'devnet';

diff --git a/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx b/wormhole-connect/src/views/Bridge/Inputs/AmountInput.tsx
@@ -10,12 +10,14 @@ import Input from './Input';
 import config from 'config';
 import Price from 'components/Price';
 import { getTokenPrice, getUSDFormat } from 'utils';
+import { TransferSide } from 'config/types';
 
 type Props = {
  handleAmountChange: (value: number | string) => void;
  value: string;
  disabled?: boolean;
  label?: string;
+ side: TransferSide;
 };
 function AmountInput(props: Props) {
  const amountEl = useRef(null);
@@ -77,6 +79,7 @@ function AmountInput(props: Props) {
  onChange={handleAmountChange}
  disabled={isTransactionInProgress || props.disabled}
  value={props.value}
+ testId={props.side + '-section-amount-input'}
  />
  {price && <Price>{price}</Price>}
  </>

diff --git a/wormhole-connect/src/views/Bridge/Inputs/From.tsx b/wormhole-connect/src/views/Bridge/Inputs/From.tsx
@@ -81,6 +81,7 @@ function FromInputs() {
  const tokenInput = (
  <Select
  label="Asset"
+ testId="source-section-select-asset-button"
  selected={selectedToken}
  error={!!(showErrors && validations.token)}
  onClick={() => setShowTokensModal(true)}
@@ -148,7 +149,11 @@ function FromInputs() {
  computeReceiveAmount(amount);
  }, [route, amount, computeReceiveAmount]);
  const amountInput = (
- <AmountInput handleAmountChange={handleAmountChange} value={amount} />
+ <AmountInput
+ handleAmountChange={handleAmountChange}
+ value={amount}
+ side="source"
+ />
  );
 
  const handleExtraNetwork = (
@@ -165,7 +170,7 @@ function FromInputs() {
  return (
  <>
  <Inputs
- title="From"
+ side="source"
  wallet={TransferWallet.SENDING}
  walletValidations={[validations.sendingWallet]}
  walletError={wallet.error}
@@ -193,7 +198,9 @@ function FromInputs() {
  <ChainsModal
  open={showChainsModal}
  title="Sending from"
- chains={config.chainsArr.filter((c) => c.key !== toChain && !c.disabledAsSource)}
+ chains={config.chainsArr.filter(
+ (c) => c.key !== toChain && !c.disabledAsSource,
+ )}
  onSelect={selectChain}
  onClose={() => setShowChainsModal(false)}
  onMoreNetworkSelect={(href, chainName, target) =>

diff --git a/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx b/wormhole-connect/src/views/Bridge/Inputs/Inputs.tsx
@@ -6,6 +6,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { ChainName } from '@wormhole-foundation/wormhole-connect-sdk';
 
 import config from 'config';
+import { TransferSide } from 'config/types';
 import { RootState } from 'store';
 import { ValidationErr } from 'store/transferInput';
 import { NO_INPUT } from 'utils/style';
@@ -107,7 +108,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 type Props = {
- title: string;
+ side: TransferSide;
  wallet: TransferWallet;
  walletError: string;
  walletValidations: string[];
@@ -145,13 +146,21 @@ function Inputs(props: Props) {
  return '';
  }, [props.tokenPrice, props.balance]);
 
+ const title = {
+ source: 'From',
+ destination: 'To',
+ }[props.side];
+
+ const chainTestId = props.side + '-section-select-network-button';
+
  return (
  <div className={classes.container}>
  <div className={classes.errorContainer}>
  <div className={classes.header}>
- <div className={classes.headerTitle}>{props.title}</div>
+ <div className={classes.headerTitle}>{title}</div>
  {/* connect wallet button */}
  <ConnectWallet
+ side={props.side}
  type={props.wallet}
  disabled={isTransactionInProgress || !selectedChain}
  />
@@ -178,7 +187,7 @@ function Inputs(props: Props) {
  <div className={classes.content}>
  {/* chain tile */}
  {!mobile && (
- <div className={classes.chain}>
+ <div className={classes.chain} data-testid={chainTestId}>
  <ChainTile
  chain={chainConfig}
  error={!!(showErrors && props.chainValidation)}
@@ -212,7 +221,10 @@ function Inputs(props: Props) {
  <div className={classes.amount}>{props.amountInput}</div>
 
  {/* balance */}
- <div className={classes.balance}>
+ <div
+ className={classes.balance}
+ data-testid={`${props.side}-section-balance-text`}
+ >
  <Input label="Balance" disabled>
  <div>
  {props.balance ? (

diff --git a/wormhole-connect/src/views/Bridge/Inputs/Select.tsx b/wormhole-connect/src/views/Bridge/Inputs/Select.tsx
@@ -29,6 +29,7 @@ type Selected = {
 
 type Props = {
  label: string;
+ testId?: string;
  selected: Selected | undefined;
  error?: boolean;
  editable?: boolean;
@@ -54,7 +55,7 @@ function Select(props: Props) {
  onClick={handleClick}
  >
  {selected ? (
- <div className={classes.select}>
+ <div className={classes.select} data-testid={props.testId}>
  <TokenIcon icon={selected.icon} height={24} />
  {selected.text}
  {selected.secondaryText && (
@@ -66,7 +67,7 @@ function Select(props: Props) {
  ) : props.disabled ? (
  NO_INPUT
  ) : (
- <div className={classes.select}>
+ <div className={classes.select} data-testid={props.testId}>
  <TokenIcon height={24} />
  Select
  </div>

diff --git a/wormhole-connect/src/views/Bridge/Inputs/To.tsx b/wormhole-connect/src/views/Bridge/Inputs/To.tsx
@@ -74,6 +74,7 @@ function ToInputs() {
  const tokenInput = (
  <Select
  label="Asset"
+ testId="destination-section-select-asset-button"
  selected={selectedToken}
  error={!!(showErrors && validations.token)}
  onClick={() => setShowTokensModal(true)}
@@ -122,6 +123,7 @@ function ToInputs() {
  value={receiveAmount.data || ''}
  disabled
  label={label}
+ side="destination"
  />
  );
 
@@ -139,7 +141,7 @@ function ToInputs() {
  return (
  <>
  <Inputs
- title="To"
+ side="destination"
  wallet={TransferWallet.RECEIVING}
  walletValidations={[validations.receivingWallet]}
  walletError={receiving.error}
@@ -169,7 +171,9 @@ function ToInputs() {
  <ChainsModal
  open={showChainsModal}
  title="Sending to"
- chains={config.chainsArr.filter((c) => c.key !== fromChain && !c.disabledAsDestination)}
+ chains={config.chainsArr.filter(
+ (c) => c.key !== fromChain && !c.disabledAsDestination,
+ )}
  onSelect={selectChain}
  onClose={() => setShowChainsModal(false)}
  onMoreNetworkSelect={(href, chainName, target) =>

diff --git a/wormhole-connect/src/views/Bridge/RouteOptions.tsx b/wormhole-connect/src/views/Bridge/RouteOptions.tsx
@@ -291,6 +291,7 @@ function RouteOption(props: { route: RouteData; disabled: boolean }) {
  className={`${classes.route} ${
  props.disabled ? classes.disabled : ''
  }`}
+ data-testid={`route-option-${props.route.route}`}
  >
  <div className={classes.routeLeft}>
  <div className={classes.routeTitle}>

diff --git a/wormhole-connect/src/views/Bridge/Send.tsx b/wormhole-connect/src/views/Bridge/Send.tsx
@@ -245,6 +245,7 @@ function Send(props: { valid: boolean }) {
  content={sendError}
  error
  margin="0 0 16px 0"
+ testId="send-error-message"
  />
  {props.valid && !isConnected ? (
  <Button disabled elevated>
@@ -266,6 +267,7 @@ function Send(props: { valid: boolean }) {
  onClick={send}
  action={props.valid}
  disabled={disabled}
+ testId="approve-button"
  elevated
  >
  {isTransactionInProgress ? (

diff --git a/wormhole-connect/src/views/Redeem/AddToWallet.tsx b/wormhole-connect/src/views/Redeem/AddToWallet.tsx
@@ -110,6 +110,7 @@ function AddToSolanaWallet({ token, address }: AddTokenProps) {
  chain={'solana'}
  type={'address'}
  address={address}
+ side="destination"
  />
  </Typography>
  );
@@ -130,6 +131,7 @@ function AddToSuiWallet({ token, address }: AddTokenProps) {
  chain={'sui'}
  type={'object'}
  object={address}
+ side="destination"
  />
  </Typography>
  );
@@ -150,6 +152,7 @@ function AddToAptosWallet({ token, address }: AddTokenProps) {
  chain={'aptos'}
  type={'address'}
  address={tokenAccount}
+ side="destination"
  />
  </Typography>
  );

diff --git a/wormhole-connect/src/views/Redeem/BridgeComplete.tsx b/wormhole-connect/src/views/Redeem/BridgeComplete.tsx
@@ -30,7 +30,11 @@ function BridgeComplete() {
  };
 
  let containerBg: string | undefined = undefined;
- let component: React.JSX.Element = <div>The bridge is now complete.</div>;
+ let component: React.JSX.Element = (
+ <div data-testid="transaction-complete-message">
+ The bridge is now complete.
+ </div>
+ );
  if (
  isPorticoTransferDestInfo(transferDestInfo) &&
  transferDestInfo.destTxInfo.swapFailed