fix(e2e): Adjust redirect of buy-coin to work on CI

adjust imports
improve logging of shouldHavePayload

packages/suite-desktop-core/e2e/fixtures/invity/buy/trade.json

@@ -4,7 +4,7 @@
         "paymentId": "5e895ff7-c444-4371-a41f-c1735edca46c",
         "status": "SUBMITTED",
         "originalPaymentId": "e17a2bed-86c6-4974-9d87-9fc926b16614",
-        "partnerData": "/coinmarket-redirect#detail/btc/normal/0/5e895ff7-c444-4371-a41f-c1735edca46c",
+        "partnerData": "",
         "exchange": "topper",
         "fiatCurrency": "CZK",
         "receiveCurrency": "bitcoin",
@@ -26,7 +26,7 @@
     "tradeForm": {
         "form": {
             "formMethod": "GET",
-            "formAction": "/coinmarket-redirect#detail/btc/normal/0/5e895ff7-c444-4371-a41f-c1735edca46c",
+            "formAction": "",
             "fields": {}
         }
     }

packages/suite-desktop-core/e2e/fixtures/invity/index.ts

@@ -1,3 +1,5 @@
+import { cloneDeep } from 'lodash';
+
 import exchangeCoins from './exchange/coins.json';
 import exchangeList from './exchange/list.json';
 import exchangeQuotes from './exchange/quotes.json';
@@ -35,7 +37,30 @@ export const invityResponses = {
     [invityEndpoint.info]: info,
     [invityEndpoint.buyList]: buyList,
     [invityEndpoint.buyQuotes]: buyQuotes,
-    [invityEndpoint.buyTrade]: buyTrade,
     [invityEndpoint.buyWatch]: buyWatch,
     [invityEndpoint.sellList]: sellList,
 };
+
+// This modification allows us to skip the provider's part of the flow and go directly to the transaction detail.
+export const createRedirectedTradeResponse = (url: string) => {
+    const redirectToDetail = `${url}coinmarket-redirect#detail/btc/normal/0/${buyTrade.trade.paymentId}`;
+    const modifiedTrade = cloneDeep(buyTrade);
+    modifiedTrade.trade.partnerData = redirectToDetail;
+    modifiedTrade.tradeForm.form.formAction = redirectToDetail;
+
+    return modifiedTrade;
+};
+
+export {
+    exchangeCoins,
+    exchangeList,
+    exchangeQuotes,
+    exchangeTrade,
+    exchangeWatch,
+    info,
+    buyList,
+    buyQuotes,
+    buyTrade,
+    buyWatch,
+    sellList,
+};

packages/suite-desktop-core/e2e/support/common.ts

@@ -165,5 +165,5 @@ const TrezorUserEnvLinkProxy = new Proxy(TrezorUserEnvLink, {
 
 export { TrezorUserEnvLinkProxy };
 
-export const isEqualWithMask = (param: { object1: any; object2: any; mask: string[] }) =>
+export const isEqualWithOmit = (param: { object1: any; object2: any; mask: string[] }) =>
     isEqual(omit(param.object1, param.mask), omit(param.object2, param.mask));

packages/suite-desktop-core/e2e/support/customMatchers.ts

@@ -1,6 +1,7 @@
 import { Locator, Request, expect as baseExpect } from '@playwright/test';
+import { diff } from 'jest-diff';
 
-import { isEqualWithMask } from './common';
+import { isEqualWithOmit } from './common';
 
 const compareTextAndNumber = async (
     locator: Locator,
@@ -54,19 +55,20 @@ export const expect = baseExpect.extend({
     async toHavePayload(
         requestPromise: Promise<Request>,
         expectedPayload: any,
-        options?: { mask: string[] },
+        options?: { omit: string[] },
     ) {
         const requestPayload = (await requestPromise).postDataJSON();
-        const isRequestPayloadMatching = isEqualWithMask({
+        const isRequestPayloadMatching = isEqualWithOmit({
             object1: requestPayload,
             object2: expectedPayload,
-            mask: options?.mask ?? [],
+            mask: options?.omit ?? [],
         });
 
         return {
             pass: isRequestPayloadMatching,
             message: () =>
                 `Request payload differs from expected.
+                \nDiff: ${diff(requestPayload, expectedPayload)}
                 \nActual: ${JSON.stringify(requestPayload)}
                 \nExpected: ${JSON.stringify(expectedPayload)}`,
         };

packages/suite-desktop-core/e2e/support/fixtures.ts

@@ -183,8 +183,8 @@ const test = base.extend<Fixtures>({
         const recoveryPage = new RecoveryActions(page);
         await use(recoveryPage);
     },
-    marketPage: async ({ page }, use) => {
-        const marketPage = new MarketActions(page);
+    marketPage: async ({ page, url }, use) => {
+        const marketPage = new MarketActions(page, url);
         await use(marketPage);
     },
     assetsPage: async ({ page }, use) => {

packages/suite-desktop-core/e2e/support/pageActions/marketActions.ts

@@ -7,8 +7,12 @@ import { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { expect } from '../customMatchers';
 import { step } from '../common';
-import { invityEndpoint, invityResponses } from '../../fixtures/invity/index';
-import buyQuotes from '../../fixtures/invity/buy/quotes.json';
+import {
+    createRedirectedTradeResponse,
+    invityEndpoint,
+    invityResponses,
+    buyQuotes,
+} from '../../fixtures/invity';
 import expectedTradeRequestPayload from '../../fixtures/invity/buy/trade-request.json';
 
 const quoteProviderLocator = '@coinmarket/offers/quote/provider';
@@ -101,7 +105,10 @@ export class MarketActions {
     readonly transactionDetail: Locator;
     readonly transactionWatchPeriod = '00:30';
 
-    constructor(private page: Page) {
+    constructor(
+        private page: Page,
+        private url: string,
+    ) {
         this.offerSpinner = this.page.getByTestId('@coinmarket/offers/loading-spinner');
         this.section = this.page.getByTestId('@coinmarket');
         this.form = this.page.getByTestId('@coinmarket/form');
@@ -240,7 +247,7 @@ export class MarketActions {
         const tradeRequestPromise = this.page.waitForRequest(invityEndpoint.buyTrade);
         await this.confirmTradeButton.click();
         await expect(tradeRequestPromise).toHavePayload(expectedTradeRequestPayload, {
-            mask: ['returnUrl', 'trade.orderId', 'trade.paymentId'],
+            omit: ['returnUrl', 'trade.orderId', 'trade.paymentId'],
         });
     }
 
@@ -251,6 +258,11 @@ export class MarketActions {
                 await route.fulfill({ json: response });
             });
         }
+
+        const redirecteTradeResponse = createRedirectedTradeResponse(this.url);
+        await this.page.route(invityEndpoint.buyTrade, async route => {
+            await route.fulfill({ json: redirecteTradeResponse });
+        });
     }
 
     @step()

packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts

@@ -1,7 +1,6 @@
 import { test, expect } from '../../support/fixtures';
-import buyQuotes from '../../fixtures/invity/buy/quotes.json';
 import expectedWatchRequestPayload from '../../fixtures/invity/buy/watch-request.json';
-import { invityEndpoint } from '../../fixtures/invity';
+import { invityEndpoint, buyQuotes } from '../../fixtures/invity';
 
 const mockedInputAmount = buyQuotes[0].fiatStringAmount; // 1234, The mocked quotes are for a fixed input amount
 
@@ -50,7 +49,9 @@ test.describe('Coin market buy', { tag: ['@group=other', '@snapshot', '@webOnly'
         // But our mocked response redirects us to transaction detail where our flow continues.
         await test.step('Confirm the trade and get redirected to transaction detail', async () => {
             await marketPage.finishMockedTrade();
-            await expect(watchRequestPromise).toHavePayload(expectedWatchRequestPayload);
+            await expect(watchRequestPromise).toHavePayload(expectedWatchRequestPayload, {
+                omit: ['partnerData'],
+            });
             await expect(marketPage.transactionDetailStatus).toHaveText(
                 'Waiting for your payment...',
             );
@@ -60,7 +61,9 @@ test.describe('Coin market buy', { tag: ['@group=other', '@snapshot', '@webOnly'
         await test.step('Wait 30s for watch refresh and change of status to Approved', async () => {
             await marketPage.changeTransactionWatchResponseTo('SUCCESS');
             await page.clock.fastForward(marketPage.transactionWatchPeriod);
-            await expect(watchRequestPromise).toHavePayload(expectedWatchRequestPayload);
+            await expect(watchRequestPromise).toHavePayload(expectedWatchRequestPayload, {
+                omit: ['partnerData'],
+            });
             await expect(marketPage.transactionDetailStatus).toHaveText('Approved');
             await expect(marketPage.transactionDetail).toHaveScreenshot('transactions-detail.png');
         });

packages/suite-desktop-core/package.json

@@ -60,8 +60,9 @@
         "electron": "32.2.6",
         "fs-extra": "^11.2.0",
         "glob": "^10.3.10",
-        "terser-webpack-plugin": "^5.3.11",
+        "jest-diff": "^29.7.0",
         "lodash": "^4.17.21",
+        "terser-webpack-plugin": "^5.3.11",
         "webpack": "^5.96.1",
         "xvfb-maybe": "^0.2.1"
     }

yarn.lock

@@ -12500,6 +12500,7 @@ __metadata:
     electron-updater: "npm:6.3.9"
     fs-extra: "npm:^11.2.0"
     glob: "npm:^10.3.10"
+    jest-diff: "npm:^29.7.0"
     lodash: "npm:^4.17.21"
     openpgp: "npm:^6.0.1"
     systeminformation: "npm:^5.25.4"