Production release

.circleci/config.yml

@@ -108,6 +108,124 @@ jobs:
 
             curl -X POST -H 'Content-type: application/json' --data '{"text":"'"$SLACK_MESSAGE"'"}' $E2E_SLACK_WEBHOOK_URL
 
+  e2e-playwright:
+    working_directory: ~/x
+    docker:
+      - image: cypress/included:cypress-13.15.1-node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+    resource_class: xlarge
+    steps:
+      - checkout
+
+      - run:
+          name: Install jq
+          command: |
+            apt-get update && apt-get install -y curl jq
+
+      - run:
+          name: Checkout x-e2e repo and run tests
+          no_output_timeout: 90m
+          command: |
+            cd ~
+            git clone -b pillarx-playwright --single-branch https://$GITHUB_TOKEN@github.com/pillarwallet/x-e2e.git
+            cd x-e2e
+            git pull 
+            sed -i "s|base_url_value|$BASE_URL|g" .env
+            sed -i "s|dry_run_value|$DRY_RUN|g" .env
+            sed -i "s|master_email_value|$MASTER_EMAIL|g" .env
+            sed -i "s|master_wallet_value|$MASTER_WALLET|g" .env
+            sed -i "s|testmail_api_key_value|$TESTMAIL_API_KEY|g" .env
+            sed -i "s|testmail_namespace_value|$TESTMAIL_NAMESPACE|g" .env
+            sed -i "s|recovery_recipient_address_value|$RECOVERY_RECIPIENT_ADDRESS|g" .env
+            sed -i "s|minimum_amount_value|$MINIMUM_AMOUNT|g" .env
+            sed -i "s|headless_value|$HEADLESS|g" .env
+            sed -i "s|timeout_value|$TIMEOUT|g" .env
+            sed -i "s|debug_value|$DEBUG|g" .env
+            sed -i "s|ci_value|$CI|g" .env
+            sed -i "s|headed_value|$HEADED|g" .env
+            sed -i "s|sushi_url_value|$SUSHI_URL|g" .env
+            sed -i "s|staging_url_value|$STAGING_URL|g" .env
+            sed -i "s|testmail_username_value|$TESTMAIL_USERNAME|g" .env
+            sed -i "s|testmail_email_value|$TESTMAIL_EMAIL|g" .env
+            npm install
+            npx playwright install
+            npm run test:all
+
+      - run:
+          name: Move test report
+          when: always
+          command: |
+            mv /root/x-e2e/mochawesome-report /tmp/
+            chmod 777 -R /tmp/mochawesome-report
+
+      - store_artifacts:
+          path: /tmp/mochawesome-report
+          when: always
+
+      - run:
+          name: Parse and send test results to Slack
+          when: always
+          command: |
+            wget https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/${CIRCLE_NODE_INDEX}/tmp/mochawesome-report/mochawesome.json
+
+            MOCHAWESOME_JSON_FILE=./mochawesome.json
+            FAILED_TESTS_FILE=failed-tests.txt
+            TOTAL_SUITES=$(jq '.stats.suites' $MOCHAWESOME_JSON_FILE)
+            TOTAL_PASSES=$(jq '.stats.passes' $MOCHAWESOME_JSON_FILE)
+            TOTAL_PENDING=$(jq '.stats.pending' $MOCHAWESOME_JSON_FILE)
+            TOTAL_FAILURES=$(jq '.stats.failures' $MOCHAWESOME_JSON_FILE)
+            START_TIME=$(jq -r '.stats.start' $MOCHAWESOME_JSON_FILE)
+            END_TIME=$(jq -r '.stats.end' $MOCHAWESOME_JSON_FILE)
+            DURATION_MS=$(jq -r '.stats.duration' $MOCHAWESOME_JSON_FILE)
+
+            START_TIME_FORMATTED=$(date -d "$START_TIME" "+%Y-%m-%d %H:%M:%S")
+            END_TIME_FORMATTED=$(date -d "$END_TIME" "+%Y-%m-%d %H:%M:%S")
+            DURATION_MIN=$(awk "BEGIN {printf \"%.2f\",${DURATION_MS}/60000}")
+
+            jq -r '.results[] | .suites[] | select(.failures > 0) | {suite: .title, tests: [.tests[] | select(.fail) | .title]} | select(.tests | length > 0) |
+            "*Suite:* \(.suite)\n*Failing Tests:* \n\(.tests | map("- " + .) | join("\n"))\n"' $MOCHAWESOME_JSON_FILE > $FAILED_TESTS_FILE
+
+            if [ -s $FAILED_TESTS_FILE ]; then
+              MESSAGE=$(cat $FAILED_TESTS_FILE)
+              SLACK_MESSAGE=":x: *PillarX UI Tests Failed :x: *\n\
+            *Project:* ${CIRCLE_PROJECT_REPONAME}\n\
+            *Triggered by:* ${CIRCLE_USERNAME}\n\
+            *Branch:* ${CIRCLE_BRANCH}\n\
+            *Commit:* <https://github.com/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/commit/${CIRCLE_SHA1}|${CIRCLE_SHA1}>\n\n\
+            *Test Summary:*\n\
+            *Total Suites:* ${TOTAL_SUITES}\n\
+            *Passes:* ${TOTAL_PASSES}\n\
+            *Pending:* ${TOTAL_PENDING}\n\
+            *Failures:* ${TOTAL_FAILURES}\n\
+            *Start Time:* ${START_TIME_FORMATTED}\n\
+            *End Time:* ${END_TIME_FORMATTED}\n\
+            *Duration:* ${DURATION_MIN} minutes\n\n\
+            *Failed Tests:*\n${MESSAGE}\n\
+            *Report:* <https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/${CIRCLE_NODE_INDEX}/tmp/mochawesome-report/mochawesome.html|View HTML Report>\n\
+            *Job:* <https://circleci.com/gh/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/${CIRCLE_BUILD_NUM}|View Job>\n\
+            cc: ${TAG_RESPONSIBLE_PEOPLE}"
+            else
+              SLACK_MESSAGE=":white_check_mark: All PillarX UI tests passed\n\
+            *Project:* ${CIRCLE_PROJECT_REPONAME}\n\
+            *Triggered by:* ${CIRCLE_USERNAME}\n\
+            *Branch:* ${CIRCLE_BRANCH}\n\
+            *Commit:* <https://github.com/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/commit/${CIRCLE_SHA1}|${CIRCLE_SHA1}>\n\
+            *Job:* <https://circleci.com/gh/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/${CIRCLE_BUILD_NUM}|View Job>\n\
+            \n*Test Summary:*\n\
+            *Total Suites:* ${TOTAL_SUITES}\n\
+            *Passes:* ${TOTAL_PASSES}\n\
+            *Pending:* ${TOTAL_PENDING}\n\
+            *Failures:* ${TOTAL_FAILURES}\n\
+            *Start Time:* ${START_TIME_FORMATTED}\n\
+            *End Time:* ${END_TIME_FORMATTED}\n\
+            *Duration:* ${DURATION_MIN} minutes\n\n\
+            *Report:* <https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/${CIRCLE_NODE_INDEX}/tmp/mochawesome-report/mochawesome.html|View HTML Report>\n\
+            *Job:* <https://circleci.com/gh/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/${CIRCLE_BUILD_NUM}|View Job>"
+
+            fi
+
+            curl -X POST -H 'Content-type: application/json' --data '{"text":"'"$SLACK_MESSAGE"'"}' $E2E_SLACK_WEBHOOK_URL
+
+
 workflows:
   version: 2
 
@@ -118,3 +236,8 @@ workflows:
             branches:
               only:
                 - staging
+      - e2e-playwright:
+          filters:
+            branches:
+              only:
+                - staging

__mocks__/EtherspotTransactionKitProvider.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { createContext } from 'react';
+
+// Mock context type that matches the real implementation
+export interface EtherspotTransactionKitContextType {
+  data: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    kit: any; // Mock kit object
+    walletAddress: string | undefined;
+    setWalletAddress: React.Dispatch<React.SetStateAction<string | undefined>>;
+  };
+}
+
+export const EtherspotTransactionKitContext =
+  createContext<EtherspotTransactionKitContextType | null>({
+    data: {
+      kit: {
+        // Mock kit methods, can add more as needed for the tests
+        getWalletAddress: () => Promise.resolve('0xMockWalletAddress'),
+      },
+      walletAddress: '0xMockWalletAddress',
+      setWalletAddress: () => {},
+    },
+  });
+
+export const EtherspotTransactionKitProvider: React.FC<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/no-unused-prop-types
+  config: any;
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return (
+    <EtherspotTransactionKitContext.Provider
+      value={{
+        data: {
+          kit: {
+            getWalletAddress: () => Promise.resolve('0xMockWalletAddress'),
+          },
+          walletAddress: '0xMockWalletAddress',
+          setWalletAddress: () => {},
+        },
+      }}
+    >
+      {children}
+    </EtherspotTransactionKitContext.Provider>
+  );
+};

__mocks__/useTransactionKit.ts

@@ -0,0 +1,29 @@
+import { vi } from 'vitest';
+
+const useTransactionKit = vi.fn(() => ({
+  kit: {
+    getState: vi.fn(() => ({
+      namedTransactions: {},
+      batches: {},
+      isEstimating: false,
+      isSending: false,
+      containsSendingError: false,
+      containsEstimatingError: false,
+    })),
+    getEtherspotProvider: vi.fn(() => ({
+      getChainId: vi.fn(() => 1),
+    })),
+    transaction: vi.fn(() => ({
+      name: vi.fn(() => ({
+        estimate: vi.fn(() => Promise.resolve({})),
+        send: vi.fn(() => Promise.resolve({})),
+      })),
+    })),
+    estimateBatches: vi.fn(() => Promise.resolve({})),
+    sendBatches: vi.fn(() => Promise.resolve({})),
+  },
+  walletAddress: '0x1234567890123456789012345678901234567890',
+  setWalletAddress: vi.fn(),
+}));
+
+export default useTransactionKit;