deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Jonathan Conn 2023-07-13 23:10:06 -04:00 committed by GitHub
parent 9ae6acdf8e
commit a48d4b6aa9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
wallets/react-wallet-v2/README.md
View File

@ -48,3 +48,54 @@ Your `.env.local` now contains the following environment variables:
## Preview of wallet and dapp examples in action ## Preview of wallet and dapp examples in action
https://user-images.githubusercontent.com/3154053/156764521-3492c232-7a93-47ba-88bd-2cee3f8366d4.mp4 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 |

2
wallets/react-wallet-v2/src/components/AccountCard.tsx
View File

@ -48,6 +48,7 @@ export default function AccountCard({ name, logo, rgb, address, chainId }: Props
<Button <Button
size="sm" size="sm"
css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }} css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
data-testid={'chain-copy-button' + chainId}
onClick={onCopy} onClick={onCopy}
> >
<Image <Image
@ -65,6 +66,7 @@ export default function AccountCard({ name, logo, rgb, address, chainId }: Props
backgroundColor: "rgba(255, 255, 255, 0.15)", backgroundColor: "rgba(255, 255, 255, 0.15)",
marginLeft: "$5", marginLeft: "$5",
}} }}
data-testid={'chain-switch-button' + chainId}
onPress={() => { onPress={() => {
onChainChanged(chainId, address); onChainChanged(chainId, address);
}} }}

10
wallets/react-wallet-v2/src/components/Navigation.tsx
View File

@ -5,19 +5,19 @@ import Link from 'next/link'
export default function Navigation() { export default function Navigation() {
return ( return (
<Row justify="space-between" align="center"> <Row justify="space-between" align="center">
<Link href="/" passHref> <Link href="/" passHref data-testid="accounts">
<a className="navLink"> <a className="navLink">
<Image alt="accounts icon" src="/icons/accounts-icon.svg" width={27} height={27} /> <Image alt="accounts icon" src="/icons/accounts-icon.svg" width={27} height={27} />
</a> </a>
</Link> </Link>
<Link href="/sessions" passHref> <Link href="/sessions" passHref data-testid="sessions">
<a className="navLink"> <a className="navLink">
<Image alt="sessions icon" src="/icons/sessions-icon.svg" width={27} height={27} /> <Image alt="sessions icon" src="/icons/sessions-icon.svg" width={27} height={27} />
</a> </a>
</Link> </Link>
<Link href="/walletconnect" passHref> <Link href="/walletconnect" passHref data-testid="wc-connect">
<a className="navLink"> <a className="navLink">
<Avatar <Avatar
size="lg" size="lg"
@ -35,13 +35,13 @@ export default function Navigation() {
</a> </a>
</Link> </Link>
<Link href="/pairings" passHref> <Link href="/pairings" passHref data-testid="pairings">
<a className="navLink"> <a className="navLink">
<Image alt="pairings icon" src="/icons/pairings-icon.svg" width={25} height={25} /> <Image alt="pairings icon" src="/icons/pairings-icon.svg" width={25} height={25} />
</a> </a>
</Link> </Link>
<Link href="/settings" passHref> <Link href="/settings" passHref data-testid="settings">
<a className="navLink"> <a className="navLink">
<Image alt="settings icon" src="/icons/settings-icon.svg" width={27} height={27} /> <Image alt="settings icon" src="/icons/settings-icon.svg" width={27} height={27} />
</a> </a>

5
wallets/react-wallet-v2/src/components/PairingCard.tsx
View File

@ -9,13 +9,14 @@ interface IProps {
logo?: string logo?: string
name?: string name?: string
url?: string url?: string
topic?: string
onDelete: () => Promise<void> onDelete: () => Promise<void>
} }
/** /**
* Component * Component
*/ */
export default function PairingCard({ logo, name, url, onDelete }: IProps) { export default function PairingCard({ logo, name, url, topic, onDelete }: IProps) {
return ( return (
<Card <Card
bordered bordered
@ -44,7 +45,7 @@ export default function PairingCard({ logo, name, url, onDelete }: IProps) {
</Link> </Link>
</div> </div>
<Tooltip content="Delete" placement="left"> <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" /> <Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" />
</Button> </Button>
</Tooltip> </Tooltip>

30
wallets/react-wallet-v2/src/pages/index.tsx
View File

@ -30,31 +30,31 @@ export default function HomePage() {
return ( return (
<Fragment> <Fragment>
<PageHeader title="Accounts"> <PageHeader title="Accounts">
<AccountPicker /> <AccountPicker data-testid='account-picker' />
</PageHeader> </PageHeader>
<Text h4 css={{ marginBottom: '$5' }}> <Text h4 css={{ marginBottom: '$5' }}>
Mainnets Mainnets
</Text> </Text>
{Object.entries(EIP155_MAINNET_CHAINS).map(([caip10, {name, logo, rgb}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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 ? ( {testNets ? (
@ -63,25 +63,25 @@ export default function HomePage() {
Testnets Testnets
</Text> </Text>
{Object.entries(EIP155_TEST_CHAINS).map(([caip10, {name, logo, rgb}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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}]) => ( {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> </Fragment>
) : null} ) : null}

2
wallets/react-wallet-v2/src/pages/pairings.tsx
View File

@ -27,7 +27,9 @@ export default function PairingsPage() {
logo={peerMetadata?.icons[0]} logo={peerMetadata?.icons[0]}
url={peerMetadata?.url} url={peerMetadata?.url}
name={peerMetadata?.name} name={peerMetadata?.name}
topic={pairing.topic}
onDelete={() => onDelete(pairing.topic)} onDelete={() => onDelete(pairing.topic)}
data-testid={'pairing-' + pairing.topic}
/> />
) )
}) })

10
wallets/react-wallet-v2/src/pages/session.tsx
View File

@ -128,7 +128,7 @@ export default function SessionPage() {
return ( return (
<Fragment key={chain}> <Fragment key={chain}>
<Text h4 css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text> <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)} */} {/* {renderAccountSelection(chain)} */}
<Divider y={2} /> <Divider y={2} />
</Fragment> </Fragment>
@ -146,25 +146,25 @@ export default function SessionPage() {
</Row> </Row>
<Row css={{ marginTop: '$10' }}> <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'} {loading ? <Loading size="sm" color="error" /> : 'Delete'}
</Button> </Button>
</Row> </Row>
<Row css={{ marginTop: '$10' }}> <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'} {loading ? <Loading size="sm" color="primary" /> : 'Ping'}
</Button> </Button>
</Row> </Row>
<Row css={{ marginTop: '$10' }}> <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'} {loading ? <Loading size="sm" color="secondary" /> : 'Emit'}
</Button> </Button>
</Row> </Row>
<Row css={{ marginTop: '$10' }}> <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'} {loading ? <Loading size="sm" color="warning" /> : 'Update'}
</Button> </Button>
</Row> </Row>

1
wallets/react-wallet-v2/src/pages/sessions.tsx
View File

@ -30,6 +30,7 @@ export default function SessionsPage() {
name={name} name={name}
logo={icons[0]} logo={icons[0]}
url={url} url={url}
data-testid={'session-' + session.topic}
/> />
) )
}) })

2
wallets/react-wallet-v2/src/pages/walletconnect.tsx
View File

@ -38,6 +38,7 @@ export default function WalletConnectPage() {
placeholder="e.g. wc:a281567bb3e4..." placeholder="e.g. wc:a281567bb3e4..."
onChange={e => setUri(e.target.value)} onChange={e => setUri(e.target.value)}
value={uri} value={uri}
data-testid="uri-input"
contentRight={ contentRight={
<Button <Button
size="xs" size="xs"
@ -45,6 +46,7 @@ export default function WalletConnectPage() {
css={{ marginLeft: -60 }} css={{ marginLeft: -60 }}
onClick={() => onConnect(uri)} onClick={() => onConnect(uri)}
color="gradient" color="gradient"
data-testid="uri-connect-button"
> >
{loading ? <Loading size="sm" /> : 'Connect'} {loading ? <Loading size="sm" /> : 'Connect'}
</Button> </Button>