feat: added selector tags for e2e testing (#240)

* feat: added selector tags for e2e testing * Update wallets/react-wallet-v2/README.md Co-authored-by: Ben Kremer <ben@walletconnect.com> * Update wallets/react-wallet-v2/README.md Co-authored-by: Ben Kremer <ben@walletconnect.com> * Update wallets/react-wallet-v2/src/components/Navigation.tsx Co-authored-by: Ben Kremer <ben@walletconnect.com> --------- Co-authored-by: Ben Kremer <ben@walletconnect.com>
2023-07-13 23:10:06 -04:00 · 2023-07-13 23:10:06 -04:00 · a48d4b6aa9
commit a48d4b6aa9
parent 9ae6acdf8e
9 changed files with 86 additions and 27 deletions
--- a/wallets/react-wallet-v2/README.md
+++ b/wallets/react-wallet-v2/README.md
@ -48,3 +48,54 @@ Your `.env.local` now contains the following environment variables:
 ## Preview of wallet and dapp examples in action

 https://user-images.githubusercontent.com/3154053/156764521-3492c232-7a93-47ba-88bd-2cee3f8366d4.mp4
+
+## DOM Tags
+This section is a key of the DOM elements used for internal E2E testing
+Accessible with `data-testid`
+
+### Navbar
+| Key | Description |
+| ----------- | ----------- |
+|  `accounts` | Accounts page |
+| `sessions` | Sessions page |
+| `wc-connect` |  WC Connect page |
+| `pairings` | Pairings page |
+| `settings` | Settings Page |
+
+### WC Connect Page
+url: `/walletconnect`
+| Key | Description |
+| ----------- | ----------- |
+| `uri-input` | Uri textbox |
+| `uri-connect-button` | Uri connect button |
+
+### Sessions Page
+url: `/session`
+| Key | Description |
+| ----------- | ----------- |
+| `session-${topic}` | Session cards can be accessed by topic |
+
+### Session Details Page
+url: `/session?topic=`
+| Key | Description |
+| ----------- | ----------- |
+| `session-card-${chain}` | Session chain info card |
+| `session-delete-button` | Session delete button |
+| `session-ping-button` | Session ping button |
+| `session-emit-button` | Session emit button |
+| `session-update-button` | Session update button |
+
+### Pairing Page
+url: `/pairings`
+| Key | Description |
+| ----------- | ----------- |
+| `pairing-${topic}` | Pairing cards can be accessed by topic |
+| `pairing-delete-${topic}` | Delete pairing by topic |
+
+### Accounts Page
+url: `/`
+| Key | Description |
+| ----------- | ----------- |
+| `chain-card-${chain id}` | Chain card by chain id |
+| `chain-switch-button-${chain id}` | Chain switch button |
+| `chain-switch-button-${chain id}` | Chain copy button |
--- a/wallets/react-wallet-v2/src/components/AccountCard.tsx
+++ b/wallets/react-wallet-v2/src/components/AccountCard.tsx
@ -48,6 +48,7 @@ export default function AccountCard({ name, logo, rgb, address, chainId }: Props
        <Button
          size="sm"
          css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
+          data-testid={'chain-copy-button' + chainId}
          onClick={onCopy}
        >
          <Image
@ -65,6 +66,7 @@ export default function AccountCard({ name, logo, rgb, address, chainId }: Props
          backgroundColor: "rgba(255, 255, 255, 0.15)",
          marginLeft: "$5",
        }}
+        data-testid={'chain-switch-button' + chainId}
        onPress={() => {
          onChainChanged(chainId, address);
        }}
--- a/wallets/react-wallet-v2/src/components/Navigation.tsx
+++ b/wallets/react-wallet-v2/src/components/Navigation.tsx
@ -5,19 +5,19 @@ import Link from 'next/link'
 export default function Navigation() {
  return (
    <Row justify="space-between" align="center">
-      <Link href="/" passHref>
+      <Link href="/" passHref data-testid="accounts">
        <a className="navLink">
          <Image alt="accounts icon" src="/icons/accounts-icon.svg" width={27} height={27} />
        </a>
      </Link>

-      <Link href="/sessions" passHref>
+      <Link href="/sessions" passHref data-testid="sessions">
        <a className="navLink">
          <Image alt="sessions icon" src="/icons/sessions-icon.svg" width={27} height={27} />
        </a>
      </Link>

-      <Link href="/walletconnect" passHref>
+      <Link href="/walletconnect" passHref data-testid="wc-connect">
        <a className="navLink">
          <Avatar
            size="lg"
@ -35,13 +35,13 @@ export default function Navigation() {
        </a>
      </Link>

-      <Link href="/pairings" passHref>
+      <Link href="/pairings" passHref data-testid="pairings">
        <a className="navLink">
          <Image alt="pairings icon" src="/icons/pairings-icon.svg" width={25} height={25} />
        </a>
      </Link>

-      <Link href="/settings" passHref>
+      <Link href="/settings" passHref data-testid="settings">
        <a className="navLink">
          <Image alt="settings icon" src="/icons/settings-icon.svg" width={27} height={27} />
        </a>
--- a/wallets/react-wallet-v2/src/components/PairingCard.tsx
+++ b/wallets/react-wallet-v2/src/components/PairingCard.tsx
@ -9,13 +9,14 @@ interface IProps {
  logo?: string
  name?: string
  url?: string
+  topic?: string
  onDelete: () => Promise<void>
 }

 /**
 * Component
 */
-export default function PairingCard({ logo, name, url, onDelete }: IProps) {
+export default function PairingCard({ logo, name, url, topic, onDelete }: IProps) {
  return (
    <Card
      bordered
@ -44,7 +45,7 @@ export default function PairingCard({ logo, name, url, onDelete }: IProps) {
          </Link>
        </div>
        <Tooltip content="Delete" placement="left">
-          <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}>
+          <Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }} data-testid={'pairing-delete-' + topic}>
            <Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
          </Button>
        </Tooltip>
--- a/wallets/react-wallet-v2/src/pages/index.tsx
+++ b/wallets/react-wallet-v2/src/pages/index.tsx
@ -30,31 +30,31 @@ export default function HomePage() {
  return (
    <Fragment>
      <PageHeader title="Accounts">
-        <AccountPicker />
+        <AccountPicker data-testid='account-picker' />
      </PageHeader>
      <Text h4 css={{ marginBottom: '$5' }}>
        Mainnets
      </Text>
      {Object.entries(EIP155_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} chainId={caip10.toString()}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} chainId={caip10.toString()} data-testid={'chain-card-' + caip10.toString()} />
      ))}
      {Object.entries(COSMOS_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={cosmosAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={cosmosAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}
      {Object.entries(SOLANA_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}
      {Object.entries(POLKADOT_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}
      {Object.entries(MULTIVERSX_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={multiversxAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={multiversxAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}
      {Object.entries(TRON_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tronAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tronAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}
      {Object.entries(TEZOS_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tezosAddress} chainId={caip10}/>
+        <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tezosAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
      ))}

      {testNets ? (
@ -63,25 +63,25 @@ export default function HomePage() {
            Testnets
          </Text>
          {Object.entries(EIP155_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} chainId={caip10.toString()}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={eip155Address} chainId={caip10.toString()} data-testid={'chain-card-' + caip10.toString()}/>
          ))}
          {Object.entries(SOLANA_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={solanaAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}
          {Object.entries(POLKADOT_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={polkadotAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}
          {Object.entries(NEAR_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={nearAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={nearAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}
          {Object.entries(MULTIVERSX_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={multiversxAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={multiversxAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}        
          {Object.entries(TRON_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tronAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tronAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}
          {Object.entries(TEZOS_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => (
-            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tezosAddress} chainId={caip10}/>
+            <AccountCard key={name} name={name} logo={logo} rgb={rgb} address={tezosAddress} chainId={caip10} data-testid={'chain-card-' + caip10}/>
          ))}
        </Fragment>
      ) : null}
--- a/wallets/react-wallet-v2/src/pages/pairings.tsx
+++ b/wallets/react-wallet-v2/src/pages/pairings.tsx
@ -27,7 +27,9 @@ export default function PairingsPage() {
              logo={peerMetadata?.icons[0]}
              url={peerMetadata?.url}
              name={peerMetadata?.name}
+              topic={pairing.topic}
              onDelete={() => onDelete(pairing.topic)}
+              data-testid={'pairing-' + pairing.topic}
            />
          )
        })
--- a/wallets/react-wallet-v2/src/pages/session.tsx
+++ b/wallets/react-wallet-v2/src/pages/session.tsx
@ -128,7 +128,7 @@ export default function SessionPage() {
        return (
          <Fragment key={chain}>
            <Text h4 css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
-            <SessionChainCard namespace={namespaces[chain]} />
+            <SessionChainCard namespace={namespaces[chain]} data-testid={'session-card' + namespaces[chain]} />
            {/* {renderAccountSelection(chain)} */}
            <Divider y={2} />
          </Fragment>
@ -146,25 +146,25 @@ export default function SessionPage() {
      </Row>

      <Row css={{ marginTop: '$10' }}>
-        <Button flat css={{ width: '100%' }} color="error" onClick={onDeleteSession}>
+        <Button flat css={{ width: '100%' }} color="error" onClick={onDeleteSession} data-testid='session-delete-button'>
          {loading ? <Loading size="sm" color="error" /> : 'Delete'}
        </Button>
      </Row>

      <Row css={{ marginTop: '$10' }}>
-        <Button flat css={{ width: '100%' }} color="primary" onClick={onSessionPing}>
+        <Button flat css={{ width: '100%' }} color="primary" onClick={onSessionPing} data-testid='session-ping-button'>
          {loading ? <Loading size="sm" color="primary" /> : 'Ping'}
        </Button>
      </Row>

      <Row css={{ marginTop: '$10' }}>
-        <Button flat css={{ width: '100%' }} color="secondary" onClick={onSessionEmit}>
+        <Button flat css={{ width: '100%' }} color="secondary" onClick={onSessionEmit} data-testid='session-emit-button'>
          {loading ? <Loading size="sm" color="secondary" /> : 'Emit'}
        </Button>
      </Row>

      <Row css={{ marginTop: '$10' }}>
-        <Button flat css={{ width: '100%' }} color="warning" onClick={onSessionUpdate}>
+        <Button flat css={{ width: '100%' }} color="warning" onClick={onSessionUpdate} data-testid='session-update-button'>
          {loading ? <Loading size="sm" color="warning" /> : 'Update'}
        </Button>
      </Row>
--- a/wallets/react-wallet-v2/src/pages/sessions.tsx
+++ b/wallets/react-wallet-v2/src/pages/sessions.tsx
@ -30,6 +30,7 @@ export default function SessionsPage() {
                name={name}
                logo={icons[0]}
                url={url}
+                data-testid={'session-' + session.topic}
              />
            )
          })
--- a/wallets/react-wallet-v2/src/pages/walletconnect.tsx
+++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx
@ -38,6 +38,7 @@ export default function WalletConnectPage() {
        placeholder="e.g. wc:a281567bb3e4..."
        onChange={e => setUri(e.target.value)}
        value={uri}
+        data-testid="uri-input"
        contentRight={
          <Button
            size="xs"
@ -45,6 +46,7 @@ export default function WalletConnectPage() {
            css={{ marginLeft: -60 }}
            onClick={() => onConnect(uri)}
            color="gradient"
+            data-testid="uri-connect-button"
          >
            {loading ? <Loading size="sm" /> : 'Connect'}
          </Button>