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

feat(e2e): adds more tags (#260)

Browse Source 
Co-authored-by: Ben Kremer <ben@walletconnect.com>
This commit is contained in:
Jonathan Conn 2023-08-02 04:18:51 -04:00 committed by GitHub
parent 4557fe9a59
commit c2a55b3e8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 92 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,12 +68,16 @@ url: `/walletconnect`
| ----------- | ----------- |
| `uri-input` | Uri textbox |
| `uri-connect-button` | Uri connect button |
| `qrcode-button` | Use qrcode button |
### Sessions Page
url: `/session`
| Key | Description |
| ----------- | ----------- |
| `session-${topic}` | Session cards can be accessed by topic |
| `session-card` | Session cards can be accessed by topic |
| `session-icon` | Icon used on session card |
| `session-text` | Text listed on session card |
| `session-link` | Link listed on session card |
### Session Details Page
url: `/session?topic=`
@ -90,8 +94,11 @@ url: `/pairings`
| Key | Description |
| ----------- | ----------- |
| `pairing-${topic}` | Pairing cards can be accessed by topic |
| `pairing-text-${topic}` | Pairing card text in label |
| `pairing-url-${topic}` | Pairing card link in label|
| `pairing-delete-${topic}` | Delete pairing by topic |
### Accounts Page
url: `/`
| Key | Description |
@ -99,4 +106,34 @@ url: `/`
| `account-picker` | Account drop down selector|
| `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 |
| `chain-switch-button-${chain id}` | Chain copy button |
### Settings Page
url: `/settings`
| Key | Description |
| ----------- | ----------- |
| `settings-toggle-testnets` | Toggle testnet support on/off |
| `settings-region-select` | Select relayer region |
### Session Proposal View
| Key | Description |
| ----------- | ----------- |
| `session-approve-button` | Session approve button |
| `session-reject-button` | Session reject button |
| `session-info-card-text` | Session text info in header |
| `session-info-card-url` | Session info url in header |
| `session-info-card-verify` | Session info verify api in header |
| `session-proposal-card-req-{chain}` | Session card for each required chain |
| `session-proposal-card-opt-{chain}` | Session card for each optional chain |
| `account-select-card-${req/opt}-${index}` | Account selection checkbox by account index|
| `account-select-text-${req/opt}-${index}` | Account selection text by account index |
### Sign Request View
| Key | Description |
| ----------- | ----------- |
| `request-details-chain` | List of chains in the request |
| `request-details-relay-protocol` | Protocol used for request |
| `request-methods` | Methods requested |
| `request-button-reject` | Reject button |
| `request-button-approve` | Approve button |

12
wallets/react-wallet-v2/src/components/AccountSelectCard.tsx
View File

@ -9,12 +9,13 @@ interface IProps {
index: number
selected: boolean
onSelect: () => void
isRequired: boolean
}
/**
* Component
*/
export default function AccountSelectCard({ address, selected, index, onSelect }: IProps) {
export default function AccountSelectCard({ address, selected, index, onSelect, isRequired }: IProps) {
return (
<Card
onClick={onSelect}
@ -24,11 +25,14 @@ export default function AccountSelectCard({ address, selected, index, onSelect }
marginTop: '$5',
backgroundColor: selected ? 'rgba(23, 200, 100, 0.2)' : '$accents2'
}}
data-testid={`account-select-card-${isRequired ? 'req' : 'opt'}-${index + 1}`}
>
<Row justify="space-between" align="center">
<Checkbox size="lg" color="success" checked={selected} />
<Row justify="space-between" align="center">
<Checkbox size="lg" color="success" checked={selected}/>
<Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
<Text data-testid={`account-select-text-${index + 1}`}>
{`${truncate(address, 14)} - Account ${index + 1}`}
</Text>
</Row>
</Card>
)

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

@ -37,11 +37,13 @@ export default function PairingCard({ logo, name, url, topic, onDelete }: IProps
>
<Avatar src={logo} />
<div style={{ flex: 1 }}>
<Text h5 css={{ marginLeft: '$9' }}>
<Text h5 css={{ marginLeft: '$9' }} data-testid={'pairing-text-' + topic}>
{name}
</Text>
<Link href={url} css={{ marginLeft: '$9' }}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
<a data-testid={'pairing-text-' + topic}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</a>
</Link>
</div>
<Tooltip content="Delete" placement="left">

6
wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx
View File

@ -30,10 +30,10 @@ export default function ProjectInfoCard({ metadata }: IProps) {
<Avatar src={icons[0]} />
</Col>
<Col span={15}>
<Text h5>{name}</Text>
<Text h5 data-testid="session-info-card-text">{name}</Text>
<Row>
<Link href={url}>{url}</Link>
<Text style={{ marginLeft: '5px' }}>{validation}</Text>
<Link href={url} data-testid="session-info-card-url">{url}</Link>
<Text style={{ marginLeft: '5px' }} data-testid="session-info-card-verify">{validation}</Text>
</Row>
</Col>
</Row>

7
wallets/react-wallet-v2/src/components/ProposalSelectSection.tsx
View File

@ -9,6 +9,7 @@ interface IProps {
addresses: string[]
selectedAddresses: string[] | undefined
onSelect: (chain: string, address: string) => void
isRequired: boolean
}
/**
@ -18,7 +19,8 @@ export default function ProposalSelectSection({
addresses,
selectedAddresses,
chain,
onSelect
onSelect,
isRequired,
}: IProps) {
return (
<Row>
@ -30,7 +32,8 @@ export default function ProposalSelectSection({
address={address}
index={index}
onSelect={() => onSelect(chain, address)}
selected={selectedAddresses?.includes(address) ?? false}
selected={selectedAddresses?.includes(address) ?? false}
isRequired={isRequired}
/>
))}
</Col>

1
wallets/react-wallet-v2/src/components/QrReader.tsx
View File

@ -67,6 +67,7 @@ export default function QrReader({ onConnect }: IProps) {
color="gradient"
css={{ marginTop: '$10', width: '100%' }}
onClick={onShowScanner}
data-testid="qrcode-button"
>
Scan QR code
</Button>

1
wallets/react-wallet-v2/src/components/RelayRegionPicker.tsx
View File

@ -14,6 +14,7 @@ export default function AccountPicker() {
value={relayerRegionURL}
onChange={e => onSelect(e.currentTarget.value)}
aria-label="relayerRegions"
data-testid="setting-region-select"
>
{REGIONALIZED_RELAYER_ENDPOINTS.map((endpoint, index) => {
return (

4
wallets/react-wallet-v2/src/components/RequestDetalilsCard.tsx
View File

@ -25,7 +25,7 @@ export default function RequestDetailsCard({ chains, protocol }: IProps) {
<Row>
<Col>
<Text h5>Blockchain(s)</Text>
<Text color="$gray400">
<Text color="$gray400" data-testid="request-details-chain">
{chains
.map(
chain =>
@ -48,7 +48,7 @@ export default function RequestDetailsCard({ chains, protocol }: IProps) {
<Row>
<Col>
<Text h5>Relay Protocol</Text>
<Text color="$gray400">{protocol}</Text>
<Text color="$gray400" data-testid="request-detauls-realy-protocol">{protocol}</Text>
</Col>
</Row>
</Fragment>

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

@ -15,7 +15,7 @@ export default function RequestMethodCard({ methods }: IProps) {
<Row>
<Col>
<Text h5>Methods</Text>
<Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
<Text color="$gray400" data-testid="request-methods">{methods.map(method => method).join(', ')}</Text>
</Col>
</Row>
)

7
wallets/react-wallet-v2/src/components/SessionCard.tsx
View File

@ -28,6 +28,7 @@ export default function SessionCard({ logo, name, url, topic }: IProps) {
marginBottom: '$6',
minHeight: '70px'
}}
data-testid={`session-card`}
>
<Card.Body
css={{
@ -39,15 +40,17 @@ export default function SessionCard({ logo, name, url, topic }: IProps) {
>
<Avatar src={logo} />
<div style={{ flex: 1 }}>
<Text h5 css={{ marginLeft: '$9' }}>
<Text h5 css={{ marginLeft: '$9' }} data-testid={`session-text`}>
{name}
</Text>
<Link href={url} css={{ marginLeft: '$9' }}>
<a data-testid={`session-link`}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</a>
</Link>
</div>
<Image src={'/icons/arrow-right-icon.svg'} width={20} height={20} alt="session icon" />
<Image src={'/icons/arrow-right-icon.svg'} width={20} height={20} alt="session icon" data-testid={`session-icon`} />
</Card.Body>
</Card>
</NextLink>

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

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

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

@ -51,7 +51,7 @@ export default function SettingsPage() {
Testnets
</Text>
<Row justify="space-between" align="center">
<Switch checked={testNets} onChange={SettingsStore.toggleTestNets} />
<Switch checked={testNets} onChange={SettingsStore.toggleTestNets} data-testid="settings-toggle-testnets"/>
<Text>{testNets ? 'Enabled' : 'Disabled'}</Text>
</Row>

24
wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
View File

@ -130,7 +130,7 @@ export default function SessionProposalModal() {
}
// Render account selection checkboxes based on chain
function renderAccountSelection(chain: string) {
function renderAccountSelection(chain: string, required: boolean) {
if (isEIP155Chain(chain)) {
return (
<ProposalSelectSection
@ -138,6 +138,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isCosmosChain(chain)) {
@ -147,6 +148,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isSolanaChain(chain)) {
@ -156,6 +158,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isPolkadotChain(chain)) {
@ -165,6 +168,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isNearChain(chain)) {
@ -174,6 +178,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isMultiversxChain(chain)) {
@ -183,6 +188,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isTronChain(chain)) {
@ -192,6 +198,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isTezosChain(chain)) {
@ -201,6 +208,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
} else if (isKadenaChain(chain)) {
@ -210,6 +218,7 @@ export default function SessionProposalModal() {
selectedAddresses={selectedAccounts[chain]}
onSelect={onSelectAccount}
chain={chain}
isRequired={required}
/>
)
}
@ -218,7 +227,7 @@ export default function SessionProposalModal() {
return (
<Fragment>
<RequestModalContainer title="Session Proposal">
<ProjectInfoCard metadata={proposer.metadata} />
<ProjectInfoCard metadata={proposer.metadata}/>
<Divider y={2} />
{Object.keys(requiredNamespaces).length != 0 ? <Text h4>Required Namespaces</Text> : null}
@ -226,8 +235,8 @@ export default function SessionProposalModal() {
return (
<Fragment key={chain}>
<Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
<SessionProposalChainCard requiredNamespace={requiredNamespaces[chain]} />
{renderAccountSelection(`required:${chain}`)}
<SessionProposalChainCard requiredNamespace={requiredNamespaces[chain]} data-testid={`session-proposal-card-req-${chain}`}/>
{renderAccountSelection(`required:${chain}`, true)}
<Divider y={2} />
</Fragment>
)
@ -241,8 +250,8 @@ export default function SessionProposalModal() {
return (
<Fragment key={chain}>
<Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
<SessionProposalChainCard requiredNamespace={optionalNamespaces[chain]} />
{renderAccountSelection(`optional:${chain}`)}
<SessionProposalChainCard requiredNamespace={optionalNamespaces[chain]} data-testid={`session-proposal-card-opt-${chain}`}/>
{renderAccountSelection(`optional:${chain}`, false)}
<Divider y={2} />
</Fragment>
)
@ -250,7 +259,7 @@ export default function SessionProposalModal() {
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onPress={onReject}>
<Button auto flat color="error" onPress={onReject} data-testid="session-reject-button">
Reject
</Button>
@ -261,6 +270,7 @@ export default function SessionProposalModal() {
onPress={onApprove}
disabled={!hasSelected}
css={{ opacity: hasSelected ? 1 : 0.4 }}
data-testid="session-approve-button"
>
Approve
</Button>

6
wallets/react-wallet-v2/src/views/SessionSignModal.tsx
View File

@ -64,7 +64,7 @@ export default function SessionSignModal() {
<Row>
<Col>
<Text h5>Message</Text>
<Text color="$gray400">{message}</Text>
<Text color="$gray400" data-testid="request-message-text">{message}</Text>
</Col>
</Row>
@ -74,10 +74,10 @@ export default function SessionSignModal() {
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>
<Button auto flat color="error" onClick={onReject} data-testid="request-button-reject">
Reject
</Button>
<Button auto flat color="success" onClick={onApprove}>
<Button auto flat color="success" onClick={onApprove} data-testid="request-button-approve">
Approve
</Button>
</Modal.Footer>

4
wallets/react-wallet-v2/src/views/SessionSignTypedDataModal.tsx
View File

@ -70,10 +70,10 @@ export default function SessionSignTypedDataModal() {
</RequestModalContainer>
<Modal.Footer>
<Button auto flat color="error" onClick={onReject}>
<Button auto flat color="error" onClick={onReject} data-testid="request-button-reject">
Reject
</Button>
<Button auto flat color="success" onClick={onApprove}>
<Button auto flat color="success" onClick={onApprove} data-testid="request-button-approve">
Approve
</Button>
</Modal.Footer>