Skip to content

Commit 62bfcee

Browse files
ljagielaljagiela
authored
feat: [LW-11556] add tests for advanced mode receive screen (#1444)
* feat: [LW-11556] add tests for advanced mode receive screen * feat: [LW-11556] fixes after review * feat: [LW-11556] fixes after review
1 parent d64c6b5 commit 62bfcee

File tree

17 files changed

+574
-54
lines changed

17 files changed

+574
-54
lines changed

‎apps/browser-extension-wallet/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"@cardano-sdk/wallet": "0.44.3",
5151
"@cardano-sdk/web-extension": "0.34.2",
5252
"@emurgo/cip14-js": "~3.0.1",
53-
"@input-output-hk/lace-ui-toolkit": "1.19.0",
53+
"@input-output-hk/lace-ui-toolkit": "1.21.0",
5454
"@lace/cardano": "0.1.0",
5555
"@lace/common": "0.1.0",
5656
"@lace/core": "0.1.0",

‎apps/browser-extension-wallet/src/views/browser-view/components/QRInfoWalletDrawer/QRInfoWalletDrawer.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,9 @@ export const QRInfoWalletDrawer = (): React.ReactElement => {
278278
/>
279279
)}
280280
{isAdditionalAddressesVisible && (
281-
<Divider orientation="center">{translations.additionalAddressesTitle}</Divider>
281+
<Divider orientation="center" data-testid="additional-addresses-divider">
282+
{translations.additionalAddressesTitle}
283+
</Divider>
282284
)}
283285
{usedAddresses?.length > 1 && (
284286
<>
@@ -338,6 +340,7 @@ export const QRInfoWalletDrawer = (): React.ReactElement => {
338340
icon={<PlusCircleOutlined />}
339341
onClick={generateUnusedAddress}
340342
label={translations.addNewAddressBtn}
343+
data-testid="add-new-address-button"
341344
/>
342345
</Flex>
343346
)}

‎apps/browser-extension-wallet/src/views/browser-view/components/TransactionCTAsBox/TransactionCTAsBox.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const TransactionCTAsBox = (): React.ReactElement => {
5858
defaultChecked={isReceiveInAdvancedMode}
5959
label={t('qrInfo.advancedMode.toggle.label')}
6060
onCheckedChange={(isChecked) => setIsReceiveInAdvancedMode(isChecked)}
61+
testId="advanced-mode-"
6162
/>
6263
)}
6364
</Flex>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
"trim-off-newlines": "^1.0.3"
8686
},
8787
"dependencies": {
88-
"@input-output-hk/lace-ui-toolkit": "1.19.0",
88+
"@input-output-hk/lace-ui-toolkit": "1.21.0",
8989
"normalize.css": "^8.0.1"
9090
},
9191
"devDependencies": {

‎packages/core/src/ui/components/AddressCard/AddressCard.tsx

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const AddressCard = ({
102102

103103
const { handles } = metadata;
104104

105-
const adaHandleIcon = <AdaHandleIcon width={ICON_SIZE} height={ICON_SIZE} />;
105+
const adaHandleIcon = <AdaHandleIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-ada-handle-icon" />;
106106

107107
if (handles.length === 1) {
108108
return (
@@ -112,14 +112,15 @@ export const AddressCard = ({
112112
action="copy"
113113
tooltipLabel={t('core.addressCard.handle.copy.tooltip')}
114114
onCopy={doToast}
115+
testId="address-ada-handle"
115116
/>
116117
);
117118
}
118119

119120
const items: MenuProps['items'] = handles.map((item, idx) => ({
120121
label: (
121122
<Flex gap="$8" alignItems="center" justifyContent="space-between">
122-
<span>{item}</span>
123+
<span data-testid="adress-ada-handle-dropdown-item">{item}</span>
123124
<Tooltip title={t('core.addressCard.handle.copy.tooltip')}>
124125
<CopyToClipboard text={item}>
125126
<CopyIcon
@@ -137,7 +138,7 @@ export const AddressCard = ({
137138
icon: adaHandleIcon
138139
}));
139140

140-
return <AddressDisplayItem label={items.length} icon={adaHandleIcon} items={items} />;
141+
return <AddressDisplayItem label={items.length} icon={adaHandleIcon} items={items} testId="address-ada-handle" />;
141142
}, [metadata, doToast, t]);
142143

143144
const renderBalanceData = useMemo(() => {
@@ -146,7 +147,11 @@ export const AddressCard = ({
146147
}
147148

148149
return (
149-
<AddressDisplayItem label={metadata.balance} icon={<AdaSymbolIcon width={ICON_SIZE} height={ICON_SIZE} />} />
150+
<AddressDisplayItem
151+
label={metadata.balance}
152+
icon={<AdaSymbolIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-ada-icon" />}
153+
testId="address-ada"
154+
/>
150155
);
151156
}, [metadata]);
152157

@@ -155,12 +160,12 @@ export const AddressCard = ({
155160
{
156161
label: `${metadata.tokens.amount} ${t('core.addressCard.tokens.label')}`,
157162
key: 'tokens',
158-
icon: <TokensIcon width={ICON_SIZE} height={ICON_SIZE} />
163+
icon: <TokensIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-tokens-icon" />
159164
},
160165
{
161166
label: `${metadata.tokens.nfts || 0} ${t('core.addressCard.nfts.label')}`,
162167
key: 'nfts',
163-
icon: <NftsIcon width={ICON_SIZE} height={ICON_SIZE} />
168+
icon: <NftsIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-nfts-icon" />
164169
}
165170
],
166171
[metadata, t]
@@ -174,8 +179,10 @@ export const AddressCard = ({
174179
const items: MenuProps['items'] = getTokenMenuItems();
175180

176181
const customDropdownRender = (menu: React.ReactElement) => (
177-
<Box className={styles.customRender}>
178-
<Box py="$4">{t('core.addressCard.nativeTokens.label')}</Box>
182+
<Box className={styles.customRender} testId="address-tokens-dropdown">
183+
<Box py="$4" testId="address-tokens-dropdown-label">
184+
{t('core.addressCard.nativeTokens.label')}
185+
</Box>
179186
<Divider h="$1" className={styles.divider} />
180187
{React.cloneElement(menu)}
181188
</Box>
@@ -185,8 +192,9 @@ export const AddressCard = ({
185192
<AddressDisplayItem
186193
label={items.length}
187194
items={items}
188-
icon={<AssetsIcon width={ICON_SIZE} height={ICON_SIZE} />}
195+
icon={<AssetsIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-tokens-icon" />}
189196
dropdownRender={customDropdownRender}
197+
testId="address-tokens"
190198
/>
191199
);
192200
}, [metadata, isMetadataGrouped, getTokenMenuItems, t]);
@@ -207,7 +215,7 @@ export const AddressCard = ({
207215
return {
208216
label: metadata.stakePool,
209217
key: 'stake-pool',
210-
icon: <StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} />
218+
icon: <StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-stake-pool-icon" />
211219
};
212220
}
213221
});
@@ -216,7 +224,10 @@ export const AddressCard = ({
216224
<AddressDisplayItem
217225
label={t('core.addressCard.more.label')}
218226
items={items}
219-
icon={<MoreIcon className={styles.moreIcon} width={ICON_SIZE} height={ICON_SIZE} />}
227+
icon={
228+
<MoreIcon className={styles.moreIcon} width={ICON_SIZE} height={ICON_SIZE} data-testid="address-more-icon" />
229+
}
230+
testId="address-more"
220231
/>
221232
);
222233
}, [metadata, getTokenMenuItems, t]);
@@ -226,14 +237,14 @@ export const AddressCard = ({
226237
<div className={styles.qrCodeContainer} data-testid="address-card-qr-code-container">
227238
<QRCode data={address} options={useMemo(() => getQRCodeOptions?.(), [getQRCodeOptions])} />
228239
</div>
229-
<Flex className={styles.infoContainer} flexDirection="column" gap="$8">
240+
<Flex className={styles.infoContainer} flexDirection="column" gap="$8" testId="address-card-details">
230241
<Flex justifyContent="space-between" alignItems="center" w="$fill">
231242
{!name && tagWith && (
232-
<Flex alignItems="center" className={styles.tag}>
243+
<Flex alignItems="center" className={styles.tag} testId="address-card-title">
233244
{tagWith.label}
234245
{tagWith.tooltip && (
235246
<Tooltip title={tagWith.tooltip}>
236-
<InfoCircleOutlined />
247+
<InfoCircleOutlined data-testid="address-card-title-info-icon" />
237248
</Tooltip>
238249
)}
239250
</Flex>
@@ -258,11 +269,12 @@ export const AddressCard = ({
258269
<p className={styles.address} data-testid="address-card-address">
259270
{isPopupView ? addEllipsis(address, ADDRESS_HEAD_ELLIPSIS_LENGTH, ADDRESS_TAIL_ELLIPSIS_LENGTH) : address}
260271
</p>
261-
<Flex style={{ flexWrap: 'wrap' }}>
272+
<Flex style={{ flexWrap: 'wrap' }} testId="address-card-assets">
262273
{isUnused && (
263274
<AddressDisplayItem
264275
label={t('core.addressCard.unused.label')}
265-
icon={<CheckIcon width={ICON_SIZE} height={ICON_SIZE} />}
276+
icon={<CheckIcon width={ICON_SIZE} height={ICON_SIZE} data-testid="address-card-unused-address-icon" />}
277+
testId="address-card-unused-address"
266278
/>
267279
)}
268280
{metadata?.handles?.length > 0 && renderHandleData}
@@ -272,6 +284,7 @@ export const AddressCard = ({
272284
<AddressDisplayItem
273285
label={metadata.stakePool}
274286
icon={<StakePoolIcon width={ICON_SIZE} height={ICON_SIZE} />}
287+
testId="address-stake-pool"
275288
/>
276289
)}
277290
{isMetadataGrouped && renderAdditionalData}

‎packages/core/src/ui/components/AddressCard/AddressDisplayItem.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ type Props = {
1818
tooltipLabel?: string;
1919
dropdownRender?: (menus: ReactNode) => ReactNode;
2020
onCopy?: () => void;
21+
testId: string;
2122
};
2223

2324
export const AddressDisplayItem = ({
@@ -27,26 +28,31 @@ export const AddressDisplayItem = ({
2728
items,
2829
tooltipLabel,
2930
dropdownRender,
30-
onCopy
31+
onCopy,
32+
testId
3133
}: Props): JSX.Element => {
3234
const displayAsMenu = !!items;
3335

3436
const actionToIcon = useMemo(() => {
3537
if (displayAsMenu) {
36-
return <ChevronDownComponent />;
38+
return <ChevronDownComponent data-testid={`${testId}-chevron`} />;
3739
}
3840

3941
if (action === 'copy') {
40-
return <CopyToClipboard text={`${label}`}>{actionIconMap[action]}</CopyToClipboard>;
42+
return (
43+
<CopyToClipboard text={`${label}`} data-testid={`${testId}-copy-button`}>
44+
{actionIconMap[action]}
45+
</CopyToClipboard>
46+
);
4147
}
4248

4349
return actionIconMap[action];
44-
}, [action, displayAsMenu, label]);
50+
}, [action, displayAsMenu, label, testId]);
4551

4652
const content = (
47-
<Flex justifyContent="space-between" alignItems="center" gap="$8" className={styles.item}>
53+
<Flex justifyContent="space-between" alignItems="center" gap="$8" className={styles.item} testId={testId}>
4854
{icon}
49-
{label}
55+
<span data-testid={`${testId}-label`}>{label}</span>
5056
{tooltipLabel && !displayAsMenu ? (
5157
<Tooltip title={tooltipLabel}>
5258
<Box w="$20" h="$20" onClick={action === 'copy' && onCopy}>

0 commit comments

Comments
 (0)