Skip to content

Commit 21e9f79

Browse files
bslabiakbslabiak
authored
test(extension): LW-10167 add from/to section dapp tx and new ui elem… (#1011)
* test(extension): lw-10167 add from/to section dapp tx and new ui elements for test automation * test(extension): remove additional div * test(extension): remove additional div from second expander * test(extension): fix after comments * test(extension): extract methods to utils file * test(extension): fix parsing method * test(extension): fix test after translation changes
1 parent 87baba8 commit 21e9f79

File tree

13 files changed

+260
-113
lines changed

13 files changed

+260
-113
lines changed

‎packages/core/src/ui/components/ActivityDetail/Collateral.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export interface Props {
1717
displayFiat?: boolean;
1818
className?: string;
1919
status?: CollateralStatus;
20+
testId?: string;
2021
}
2122

2223
export const Collateral = ({
@@ -25,6 +26,7 @@ export const Collateral = ({
2526
coinSymbol,
2627
displayFiat,
2728
className,
29+
testId,
2830
status = CollateralStatus.REVIEW
2931
}: Props): React.ReactElement => {
3032
const { t } = useTranslate();
@@ -50,6 +52,7 @@ export const Collateral = ({
5052
tooltip={getTooltipText()}
5153
displayFiat={displayFiat}
5254
className={className}
55+
data-testid={testId ?? 'collateral'}
5356
/>
5457
{status === CollateralStatus.ERROR && (
5558
<Box mt="$32">

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

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ const getAssetTokenName = (assetWithAmount: AssetInfoWithAmount) => {
4949
const charBeforeEllName = 9;
5050
const charAfterEllName = 0;
5151

52-
const displayGroupedNFTs = (nfts: AssetInfoWithAmount[]) =>
52+
const displayGroupedNFTs = (nfts: AssetInfoWithAmount[], testId?: string) =>
5353
nfts.map((nft: AssetInfoWithAmount) => {
5454
const imageSrc = nft.assetInfo.tokenMetadata?.icon ?? nft.assetInfo.nftMetadata?.image ?? undefined;
5555
return (
5656
<TransactionAssets
57-
testId="dapp-transaction-nfts-container"
57+
testId={testId}
5858
key={nft.assetInfo.fingerprint}
5959
imageSrc={imageSrc}
6060
balance={Wallet.util.calculateAssetBalance(nft.amount, nft.assetInfo)}
@@ -64,13 +64,13 @@ const displayGroupedNFTs = (nfts: AssetInfoWithAmount[]) =>
6464
);
6565
});
6666

67-
const displayGroupedTokens = (tokens: AssetInfoWithAmount[]) =>
67+
const displayGroupedTokens = (tokens: AssetInfoWithAmount[], testId?: string) =>
6868
tokens.map((token: AssetInfoWithAmount) => {
6969
const imageSrc = token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined;
7070

7171
return (
7272
<TransactionAssets
73-
testId="dapp-transaction-token-container"
73+
testId={testId}
7474
key={token.assetInfo.fingerprint}
7575
imageSrc={token.assetInfo.tokenMetadata?.icon ?? token.assetInfo.nftMetadata?.image ?? undefined}
7676
balance={Wallet.util.calculateAssetBalance(token.amount, token.assetInfo)}
@@ -109,80 +109,93 @@ export const DappAddressSections = ({
109109

110110
return (
111111
<>
112-
<SummaryExpander title={t('core.dappTransaction.fromAddress')} disabled={!isFromAddressesEnabled}>
112+
<SummaryExpander
113+
title={t('core.dappTransaction.fromAddress')}
114+
disabled={!isFromAddressesEnabled}
115+
testId="dapp-transaction-from-section-expander"
116+
>
113117
<div className={styles.summaryContent}>
114118
{[...groupedFromAddresses.entries()].map(([address, addressData]) => (
115119
<>
116-
<div key={address} className={styles.address}>
117-
<Text className={styles.label} data-testid="dapp-transaction-from-address-title">
120+
<div key={address} className={styles.address} data-testid="dapp-transaction-from-row">
121+
<Text className={styles.label} data-testid="dapp-transaction-address-title">
118122
{t('core.dappTransaction.address')}
119123
</Text>
120-
<Text className={styles.value} data-testid="dapp-transaction-from-address-address">
124+
<Text className={styles.value} data-testid="dapp-transaction-address">
121125
<Tooltip label={address}>
122126
<span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
123127
</Tooltip>
124128
</Text>
125129
</div>
126130
{(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
127131
<>
128-
<div className={styles.tokenCount}>
132+
<div className={styles.tokenCount} data-testid="dapp-transaction-from-row">
129133
<Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
130134
{t('core.dappTransaction.tokens')}
131135
</Title>
132-
<Title level={5} className={styles.value}>
136+
<Title level={5} className={styles.value} data-testid="dapp-transaction-tokens-value">
133137
-{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
134138
</Title>
135139
</div>
136140
{addressData.coins.map((coin) => (
137141
<DappTransactionSummary
142+
testId="dapp-transaction-from-row"
138143
key={`${address}${coin}`}
139144
cardanoSymbol={coinSymbol}
140145
transactionAmount={getStringFromLovelace(coin)}
141146
/>
142147
))}
143-
{displayGroupedTokens(addressData.tokens)}
148+
{displayGroupedTokens(addressData.tokens, 'dapp-transaction-from-row')}
144149
</>
145150
)}
146151

147152
{addressData.nfts.length > 0 && (
148153
<>
149-
<div className={styles.tokenCount}>
154+
<div className={styles.tokenCount} data-testid="dapp-transaction-from-row">
150155
<Title level={5} data-testid="dapp-transaction-nfts-title">
151156
{t('core.dappTransaction.nfts')}
152157
</Title>
153-
<Title level={5}>
158+
<Title level={5} data-testid="dapp-transaction-nfts-amount-value">
154159
-{addressData.nfts.length} {itemsCountCopy}
155160
</Title>
156161
</div>
157-
{displayGroupedNFTs(addressData.nfts)}
162+
{displayGroupedNFTs(addressData.nfts, 'dapp-transaction-from-row')}
158163
</>
159164
)}
160165
</>
161166
))}
162167
</div>
163168
</SummaryExpander>
164169

165-
<SummaryExpander title={t('core.dappTransaction.toAddress')} disabled={!isToAddressesEnabled}>
170+
<SummaryExpander
171+
title={t('core.dappTransaction.toAddress')}
172+
disabled={!isToAddressesEnabled}
173+
testId="dapp-transaction-to-section-expander"
174+
>
166175
<div>
167176
{[...groupedToAddresses.entries()].map(([address, addressData]) => (
168177
<>
169-
<div key={address} className={styles.address}>
170-
<Text className={styles.label} data-testid="dapp-transaction-to-address-title">
178+
<div key={address} className={styles.address} data-testid="dapp-transaction-to-row">
179+
<Text className={styles.label} data-testid="dapp-transaction-address-title">
171180
{t('core.dappTransaction.address')}
172181
</Text>
173-
<Text className={styles.value} data-testid="dapp-transaction-to-address">
182+
<Text className={styles.value} data-testid="dapp-transaction-address">
174183
<Tooltip label={address}>
175184
<span>{addEllipsis(address, charBeforeEllipsisName, charAfterEllipsisName)}</span>
176185
</Tooltip>
177186
</Text>
178187
</div>
179188
{(addressData.tokens.length > 0 || addressData.coins.length > 0) && (
180189
<>
181-
<div className={styles.tokenCount}>
190+
<div className={styles.tokenCount} data-testid="dapp-transaction-to-row">
182191
<Title level={5} className={styles.label} data-testid="dapp-transaction-tokens-title">
183192
{t('core.dappTransaction.tokens')}
184193
</Title>
185-
<Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
194+
<Title
195+
level={5}
196+
className={classNames(styles.value, styles.positiveAmount)}
197+
data-testid="dapp-transaction-tokens-value"
198+
>
186199
{getTokenQuantity(addressData.tokens, addressData.coins)} {itemsCountCopy}
187200
</Title>
188201
</div>
@@ -191,23 +204,28 @@ export const DappAddressSections = ({
191204
key={`${address}${coin}`}
192205
cardanoSymbol={coinSymbol}
193206
transactionAmount={getStringFromLovelace(coin)}
207+
testId="dapp-transaction-to-row"
194208
/>
195209
))}
196-
{displayGroupedTokens(addressData.tokens)}
210+
{displayGroupedTokens(addressData.tokens, 'dapp-transaction-to-row')}
197211
</>
198212
)}
199213

200214
{addressData.nfts.length > 0 && (
201215
<>
202-
<div className={styles.tokenCount}>
216+
<div className={styles.tokenCount} data-testid="dapp-transaction-to-row">
203217
<Title level={5} className={styles.label} data-testid="dapp-transaction-nfts-title">
204218
{t('core.dappTransaction.nfts')}
205219
</Title>
206-
<Title level={5} className={classNames(styles.value, styles.positiveAmount)}>
220+
<Title
221+
level={5}
222+
className={classNames(styles.value, styles.positiveAmount)}
223+
data-testid="dapp-transaction-nfts-amount-value"
224+
>
207225
{addressData.nfts.length} {itemsCountCopy}
208226
</Title>
209227
</div>
210-
{displayGroupedNFTs(addressData.nfts)}
228+
{displayGroupedNFTs(addressData.nfts, 'dapp-transaction-to-row')}
211229
</>
212230
)}
213231
</>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export const DappTransaction = ({
126126
<div data-testid="dapp-transaction-container" className={styles.details}>
127127
<DappTransactionHeader transactionType={getTxType(coins)} name={dappInfo.name} />
128128
<DappTransactionSummary
129+
testId="dapp-transaction-summary-row"
129130
title={t('core.dappTransaction.transactionSummary')}
130131
cardanoSymbol={coinSymbol}
131132
transactionAmount={Wallet.util.lovelacesToAdaString(coins.toString())}
@@ -138,7 +139,7 @@ export const DappTransaction = ({
138139
undefined;
139140
return (
140141
<TransactionAssets
141-
testId="dapp-transaction-amount-value"
142+
testId="dapp-transaction-summary-row"
142143
key={key}
143144
imageSrc={imageSrc}
144145
balance={Wallet.util.calculateAssetBalance(assetWithAmount.amount, assetWithAmount.assetInfo)}
@@ -151,6 +152,7 @@ export const DappTransaction = ({
151152

152153
{collateral !== undefined && collateral !== BigInt(0) && (
153154
<Collateral
155+
testId="collateral"
154156
collateral={Wallet.util.lovelacesToAdaString(collateral.toString())}
155157
amountTransformer={amountTransformer({
156158
price: fiatCurrencyPrice,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const DappTransactionHeader = ({ transactionType, name }: DappTransaction
3131
return (
3232
<div data-testid="transaction-type-container">
3333
<TransactionType label={t('core.dappTransaction.transaction')} transactionType={transactionType} />
34-
<SummaryExpander title={t('core.dappTransaction.origin')}>
34+
<SummaryExpander title={t('core.dappTransaction.origin')} testId="dapp-transaction-origin-expander">
3535
<Card.Outlined className={styles.dappInfoContainer}>
3636
<Text className={styles.dappInfo}>
3737
<span data-testid="dapp-transaction-origin">{name}</span>

‎packages/e2e-tests/src/assert/dAppConnectorAssert.ts

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ import { getTestWallet, TestWalletName } from '../support/walletConfiguration';
1919
import { browser } from '@wdio/globals';
2020
import InsufficientFundsDAppPage from '../elements/dappConnector/insufficientFundsDAppPage';
2121
import ErrorDAppModal from '../elements/dappConnector/errorDAppModal';
22+
import { getTextFromElementArray } from '../utils/getTextFromArray';
23+
import DAppConnectorPageObject from '../pageobject/dAppConnectorPageObject';
24+
import { parseDappCucumberAssetList } from '../utils/dappConnectorUtils';
2225

2326
export type ExpectedDAppDetails = {
2427
hasLogo: boolean;
@@ -28,9 +31,7 @@ export type ExpectedDAppDetails = {
2831

2932
export type ExpectedTransactionData = {
3033
typeOfTransaction: string;
31-
amountADA: number;
32-
amountAsset?: string;
33-
recipientAddress: string;
34+
assetsDetails: string[];
3435
};
3536

3637
class DAppConnectorAssert {
@@ -41,14 +42,27 @@ class DAppConnectorAssert {
4142
expect(await commonDappPageElements.betaPill.getText()).to.equal(await t('core.dapp.beta'));
4243
}
4344

44-
async assertSeeAuthorizeDAppPage() {
45+
async assertSeeTitleAndDappDetails(expectedTitleKey: string, expectedDappDetails: ExpectedDAppDetails) {
46+
const currentDAppUrl = new URL(expectedDappDetails.url);
47+
const commonDappPageElements = new CommonDappPageElements();
48+
await commonDappPageElements.pageTitle.waitForDisplayed();
49+
expect(await commonDappPageElements.pageTitle.getText()).to.equal(await t(expectedTitleKey));
50+
await commonDappPageElements.dAppLogo.waitForDisplayed({ reverse: !expectedDappDetails.hasLogo });
51+
await commonDappPageElements.dAppName.waitForDisplayed();
52+
expect(await commonDappPageElements.dAppName.getText()).to.equal(expectedDappDetails.name);
53+
await commonDappPageElements.dAppUrl.waitForDisplayed();
54+
const expectedUrl = `${currentDAppUrl.protocol}//${currentDAppUrl.host}`;
55+
expect(await commonDappPageElements.dAppUrl.getText()).to.equal(expectedUrl);
56+
}
57+
58+
async assertSeeAuthorizeDAppPage(expectedDappDetails: ExpectedDAppDetails) {
4559
await this.assertSeeHeader();
60+
await this.assertSeeTitleAndDappDetails('dapp.connect.header', expectedDappDetails);
4661
await AuthorizeDAppPage.banner.container.waitForDisplayed();
4762
await AuthorizeDAppPage.banner.icon.waitForDisplayed();
4863
await AuthorizeDAppPage.banner.description.waitForDisplayed();
4964
expect(await AuthorizeDAppPage.banner.description.getText()).to.equal(await t('core.authorizeDapp.warning'));
5065
await this.assertSeeAuthorizePagePermissions();
51-
5266
await AuthorizeDAppPage.authorizeButton.waitForDisplayed();
5367
expect(await AuthorizeDAppPage.authorizeButton.getText()).to.equal(await t('dapp.connect.btn.accept'));
5468
await AuthorizeDAppPage.cancelButton.waitForDisplayed();
@@ -259,25 +273,41 @@ class DAppConnectorAssert {
259273
}
260274
}
261275

262-
async assertSeeConfirmTransactionPage(expectedTransactionData: ExpectedTransactionData) {
276+
async assertSeeConfirmTransactionPage({ assetsDetails, typeOfTransaction }: ExpectedTransactionData) {
263277
await this.assertSeeHeader();
264278
await ConfirmTransactionPage.transactionTypeTitle.waitForDisplayed();
265279
expect(await ConfirmTransactionPage.transactionTypeTitle.getText()).to.equal(
266-
await t('core.dappTransaction.transaction')
280+
await t('core.dappTransaction.transaction', 'core')
267281
);
268282
await ConfirmTransactionPage.transactionType.waitForDisplayed();
269-
expect(await ConfirmTransactionPage.transactionType.getText()).to.equal(expectedTransactionData.typeOfTransaction);
283+
expect(await ConfirmTransactionPage.transactionType.getText()).to.equal(typeOfTransaction);
270284

285+
await ConfirmTransactionPage.transactionOriginSectionExpanderButton.waitForDisplayed();
286+
await ConfirmTransactionPage.transactionOriginLabel.waitForDisplayed();
287+
expect(await ConfirmTransactionPage.transactionOriginLabel.getText()).to.equal(
288+
await t('core.dappTransaction.origin', 'core')
289+
);
290+
await ConfirmTransactionPage.expandSectionInDappTransactionWindow('Origin');
291+
expect(await ConfirmTransactionPage.transactionOrigin.getText()).to.equal(DAppConnectorPageObject.TEST_DAPP_NAME);
271292
await ConfirmTransactionPage.transactionFeeTitle.waitForDisplayed();
272293
expect(await ConfirmTransactionPage.transactionFeeTitle.getText()).to.equal(
273294
await t('core.activityDetails.transactionFee', 'core')
274295
);
275296
await ConfirmTransactionPage.transactionFeeValueAda.waitForDisplayed();
276-
const fee = Number((await ConfirmTransactionPage.transactionFeeValueAda.getText()).split(' ')[0]);
277297

278-
await ConfirmTransactionPage.transactionAmountValue.waitForDisplayed();
279-
const totalAdaAmount = (expectedTransactionData.amountADA - fee).toFixed(2);
280-
expect(await ConfirmTransactionPage.transactionAmountValue.getText()).to.equal(`${totalAdaAmount} tADA`);
298+
const parsedAssetsList = await parseDappCucumberAssetList(assetsDetails);
299+
expect(await getTextFromElementArray(await ConfirmTransactionPage.transactionSummaryAssetsRows)).to.deep.equal(
300+
parsedAssetsList
301+
);
302+
303+
await ConfirmTransactionPage.transactionFromSectionExpanderButton.waitForDisplayed();
304+
expect(await ConfirmTransactionPage.transactionFromSectionExpanderLabel.getText()).to.equal(
305+
await t('core.dappTransaction.fromAddress', 'core')
306+
);
307+
await ConfirmTransactionPage.transactionToSectionExpanderButton.waitForDisplayed();
308+
expect(await ConfirmTransactionPage.transactionToSectionExpanderLabel.getText()).to.equal(
309+
await t('core.dappTransaction.toAddress', 'core')
310+
);
281311

282312
await ConfirmTransactionPage.confirmButton.waitForDisplayed();
283313
expect(await ConfirmTransactionPage.confirmButton.getText()).to.equal(await t('dapp.confirm.btn.confirm'));
@@ -286,6 +316,15 @@ class DAppConnectorAssert {
286316
expect(await ConfirmTransactionPage.cancelButton.getText()).to.equal(await t('dapp.confirm.btn.cancel'));
287317
}
288318

319+
async assertSeeConfirmFromAddressTransactionPage(section: 'To address' | 'From address', assets: string[]) {
320+
const adjustedAssetsList = await parseDappCucumberAssetList(assets);
321+
const expectedAssets =
322+
section === 'To address'
323+
? await ConfirmTransactionPage.getAssetsToAddressSection()
324+
: await ConfirmTransactionPage.getAssetsFromAddressSection();
325+
expect(expectedAssets).to.deep.equal(adjustedAssetsList);
326+
}
327+
289328
async assertSeeSignTransactionPage() {
290329
await this.assertSeeHeader();
291330
await SignTransactionPage.passwordInput.container.waitForDisplayed();

0 commit comments

Comments
 (0)