diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx index de53bf25259..4f95ae2f18f 100644 --- a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx +++ b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx @@ -30,6 +30,7 @@ const BadgeWrapper = styled.div` interface AssetItemProps extends AssetOptionBaseProps { handleClick: (selectedAsset: AssetOptionBaseProps) => void; + 'data-testid'?: string; } export const AssetItem = ({ @@ -41,6 +42,7 @@ export const AssetItem = ({ shouldTryToFetch, contractAddress, handleClick, + 'data-testid': dataTestId, }: AssetItemProps) => { const getCoinLogo = () => isCoinSymbol(symbol) ? : null; @@ -58,7 +60,7 @@ export const AssetItem = ({ }) } > - + {coingeckoId ? ( void; networkCount: number; + 'data-testid'?: string; } -export const NetworkTabs = ({ tabs, activeTab, setActiveTab, networkCount }: NetworkTabsProps) => { +export const NetworkTabs = ({ + tabs, + activeTab, + setActiveTab, + networkCount, + 'data-testid': dataTestId, +}: NetworkTabsProps) => { const { elevation } = useElevation(); // TODO: FormattedMessage - resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325} @@ -47,6 +54,7 @@ export const NetworkTabs = ({ tabs, activeTab, setActiveTab, networkCount }: Net { @@ -71,6 +79,7 @@ export const NetworkTabs = ({ tabs, activeTab, setActiveTab, networkCount }: Net {tabs.map(network => ( void; + 'data-testid'?: string; } -export const SearchAsset = ({ searchPlaceholder, search, setSearch }: SearchAssetProps) => ( +export const SearchAsset = ({ + searchPlaceholder, + search, + setSearch, + 'data-testid': dataTestId, +}: SearchAssetProps) => ( setSearch(event.target.value)} diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx index 131b1c58edf..920074e563e 100644 --- a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx +++ b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx @@ -33,6 +33,7 @@ export interface SelectAssetModalProps { searchInput?: ReactNode; filterTabs?: ReactNode; noItemsAvailablePlaceholder: { heading: ReactNode; body?: ReactNode }; + 'data-testid'?: string; } export const SelectAssetModal = ({ @@ -42,6 +43,7 @@ export const SelectAssetModal = ({ filterTabs, searchInput, noItemsAvailablePlaceholder, + 'data-testid': dataTestId, }: SelectAssetModalProps) => { const intl = useIntl(); @@ -90,6 +92,7 @@ export const SelectAssetModal = ({ shouldTryToFetch, }: AssetProps) => ( { return labelWithFlag.substring(labelWithFlag.indexOf(' ') + 1); }; +type paymentMethods = + | 'googlePay' + | 'applePay' + | 'creditCard' + | 'paypal' + | 'bankTransfer' + | 'revolutPay'; + export class MarketActions { readonly offerSpinner: Locator; readonly section: Locator; readonly form: Locator; readonly bestOfferProvider: Locator; - readonly bestOfferYouGet: Locator; + readonly bestOfferSection: Locator; readonly bestOfferAmount: Locator; readonly buyBestOfferButton: Locator; readonly youPayInput: Locator; readonly youPayCurrencyDropdown: Locator; readonly youPayCurrencyOption = (currency: FiatCurrencyCode) => this.page.getByTestId(`@coinmarket/form/fiat-currency-select/option/${currency}`); + readonly youPayFiatCryptoSwitchButton: Locator; + readonly youPayFractionButton = (amount: '10%' | '25%' | '50%' | 'Max') => + this.page.getByRole('button', { name: amount }); + readonly feeButton = (fee: 'economy' | 'normal' | 'high' | 'custom') => + this.page.getByTestId(`select-bar/${fee}`); + readonly customFeeInput: Locator; readonly countryOfResidenceDropdown: Locator; readonly countryOfResidenceOption = (countryCode: string) => this.page.getByTestId(`@coinmarket/form/country-select/option/${countryCode}`); + readonly accountDropdown: Locator; + readonly accountSearchInput: Locator; + readonly accountTabFilter = (tab: 'all-networks' | 'eth' | 'pol' | 'bsc' | 'sol') => + this.page.getByTestId(`@coinmarket/form/select-crypto/network-tab/${tab}`); + readonly accountOption = (cryptoName: string, symbol: NetworkSymbol) => + this.page.getByTestId(`@coinmarket/form/select-crypto/option/${cryptoName}-${symbol}`); + readonly paymentMethodDropdown: Locator; + readonly paymentMethodOption = (method: paymentMethods) => + this.page.getByTestId(`@coinmarket/form/payment-method-select/option/${method}`); readonly buyOffersPage: Locator; readonly compareButton: Locator; readonly quotes: Locator; @@ -37,6 +61,7 @@ export class MarketActions { this.page.getByTestId(`@coinmarket/offers/quote-${provider}`); readonly quoteProvider: Locator; readonly quoteAmount: Locator; + readonly refreshTime: Locator; readonly selectThisQuoteButton: Locator; readonly modal: Locator; readonly buyTermsConfirmButton: Locator; @@ -53,21 +78,33 @@ export class MarketActions { this.section = this.page.getByTestId('@coinmarket'); this.form = this.page.getByTestId('@coinmarket/form'); this.bestOfferProvider = this.page.getByTestId('@coinmarket/offers/quote/provider'); - this.bestOfferYouGet = this.page.getByTestId('@coinmarket/best-offer/amount'); - this.bestOfferAmount = this.page.getByTestId('@coinmarket/form/offer/crypto-amount'); + this.bestOfferSection = this.page.getByTestId('@coinmarket/best-offer'); + this.bestOfferAmount = this.page.getByTestId('@coinmarket/best-offer/amount'); this.buyBestOfferButton = this.page.getByTestId('@coinmarket/form/buy-button'); this.youPayInput = this.page.getByTestId('@coinmarket/form/fiat-input'); this.youPayCurrencyDropdown = this.page.getByTestId( '@coinmarket/form/fiat-currency-select/input', ); + this.youPayFiatCryptoSwitchButton = this.page.getByTestId( + '@coinmarket/form/switch-crypto-fiat', + ); + this.customFeeInput = this.page.getByTestId('feePerUnit'); this.countryOfResidenceDropdown = this.page.getByTestId( '@coinmarket/form/country-select/input', ); + this.accountDropdown = this.page.getByTestId('@coinmarket/form/select-crypto/input'); + this.accountSearchInput = this.page.getByTestId( + '@coinmarket/form/select-crypto/search-input', + ); + this.paymentMethodDropdown = this.page.getByTestId( + '@coinmarket/form/payment-method-select/input', + ); this.buyOffersPage = this.page.getByTestId('@coinmarket/buy-offers'); this.compareButton = this.page.getByTestId('@coinmarket/form/compare-button'); this.quotes = this.page.getByTestId('@coinmarket/offers/quote'); this.quoteProvider = this.page.getByTestId('@coinmarket/offers/quote/provider'); this.quoteAmount = this.page.getByTestId('@coinmarket/offers/quote/crypto-amount'); + this.refreshTime = this.page.getByTestId('@coinmarket/refresh-time'); this.selectThisQuoteButton = this.page.getByTestId( '@coinmarket/offers/get-this-deal-button', ); @@ -120,6 +157,19 @@ export class MarketActions { await this.youPayCurrencyOption(currencyCode).click(); } + @step() + async selectAccount(cryptoName: string, symbol: NetworkSymbol) { + await this.accountDropdown.click(); + await this.accountSearchInput.fill(cryptoName); + await this.accountOption(cryptoName, symbol).click(); + } + + @step() + async selectPaymentMethod(method: paymentMethods) { + await this.paymentMethodDropdown.click(); + await this.paymentMethodOption(method).click(); + } + @step() async setYouPayAmount( amount: string, diff --git a/packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts b/packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts index 77c6a892061..2c300223f95 100644 --- a/packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts +++ b/packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts @@ -14,7 +14,7 @@ test.describe('Coin market buy', { tag: ['@group=other'] }, () => { await test.step('Fill input amount and opens offer comparison', async () => { await marketPage.setYouPayAmount('1234'); await expect(marketPage.section).toHaveScreenshot('buy-coins-layout.png', { - mask: [marketPage.bestOfferYouGet, marketPage.bestOfferProvider], + mask: [marketPage.bestOfferSection, marketPage.bestOfferProvider], }); await marketPage.compareButton.click(); }); diff --git a/packages/suite-desktop-core/e2e/tests/coin-market/exchange-coins.test.ts b/packages/suite-desktop-core/e2e/tests/coin-market/exchange-coins.test.ts index bc277635864..b70ebf9f97e 100644 --- a/packages/suite-desktop-core/e2e/tests/coin-market/exchange-coins.test.ts +++ b/packages/suite-desktop-core/e2e/tests/coin-market/exchange-coins.test.ts @@ -33,10 +33,10 @@ test.describe('Coinmarket Exchange', { tag: ['@group=other'] }, () => { }); await page - .getByTestId('@coinmarket/form/select-account/input') + .getByTestId('@coinmarket/form/select-crypto/input') .getByRole('combobox') .fill('ETH'); - await page.getByTestId('@coinmarket/form/select-account/option/ethereum').first().click(); + await page.getByTestId('@coinmarket/form/select-crypto/option/ethereum').first().click(); await page.getByTestId('@coinmarket/form/crypto-input').fill('0.005'); await expect(page.getByText('Not enough funds')).toBeVisible(); diff --git a/packages/suite-desktop-core/eslint.config.mjs b/packages/suite-desktop-core/eslint.config.mjs index 716b17d4eec..9a1b13fefeb 100644 --- a/packages/suite-desktop-core/eslint.config.mjs +++ b/packages/suite-desktop-core/eslint.config.mjs @@ -18,6 +18,6 @@ export default [ }, }, { - ignores: ['**/playwright-report/'], + ignores: ['**/playwright-report/', '**/test-results/'], }, ]; diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputAccount.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputAccount.tsx index 5e8ba0a1aa6..5c956c5c446 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputAccount.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputAccount.tsx @@ -87,7 +87,7 @@ export const CoinmarketFormInputAccount = < isSelected={context === 'value'} /> )} - data-testid="@coinmarket/form/select-account" + data-testid="@coinmarket/form/select-crypto" isClearable={false} isSearchable bottomText={ diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx index 0a2168c45ee..48865b02003 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx @@ -201,11 +201,13 @@ export const CoinmarketFormInputCryptoSelect = < <> {isModalActive && ( setIsModalActive(false)} searchInput={ ( { toggleAmountInCrypto(); diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffer.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffer.tsx index 745774d7dfd..9b0b7439647 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffer.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOffer.tsx @@ -79,7 +79,7 @@ export const CoinmarketFormOffer = () => { return ( - + {shouldDisplayFiatAmount ? ( diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOfferFiatAmount.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOfferFiatAmount.tsx index 46dbffe3704..ce384bb7479 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOfferFiatAmount.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormOfferFiatAmount.tsx @@ -15,7 +15,11 @@ export const CoinmarketFormOfferFiatAmount = ({ amount }: CoinmarketFormOfferFia return ( - + {formattedAmount} diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketRefreshTime.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketRefreshTime.tsx index 8ba3df3f2c5..df1c4eb2a28 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketRefreshTime.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketRefreshTime.tsx @@ -63,7 +63,7 @@ export const CoinmarketRefreshTime = ({ - + {label} {`0:${remaining < 10 ? '0' : ''}${remaining}`} diff --git a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketSelectedOffer/CoinmarketVerify/CoinmarketVerifyOptions.tsx b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketSelectedOffer/CoinmarketVerify/CoinmarketVerifyOptions.tsx index 50a9f6e5e86..c5ee6355eff 100644 --- a/packages/suite/src/views/wallet/coinmarket/common/CoinmarketSelectedOffer/CoinmarketVerify/CoinmarketVerifyOptions.tsx +++ b/packages/suite/src/views/wallet/coinmarket/common/CoinmarketSelectedOffer/CoinmarketVerify/CoinmarketVerifyOptions.tsx @@ -28,6 +28,7 @@ export const CoinmarketVerifyOptions = ({ return (