Skip to content

Commit

Permalink
fix: UI transaction integration tests (#27130)
Browse files Browse the repository at this point in the history
## **Description**

* Fixes warnings to redesigned transactions existing UI integration
tests.
* Adds new UI integration tests to erc20 approve confirmation.
** Some of those tests required interaction with tooltips, so added a
way to automatically include a tooltip data-testid whenever the Confirm
row has a data-testid set (in case there is a tooltip obviously).



[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27130?quickstart=1)

## **Related issues**

Fixes: None


## **Screenshots/Recordings**

No visual changes. This is PR mainly adds/updates tests.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
  • Loading branch information
cryptotavares authored Sep 18, 2024
1 parent eadc707 commit 8d3e6ad
Show file tree
Hide file tree
Showing 22 changed files with 596 additions and 231 deletions.
1 change: 0 additions & 1 deletion shared/lib/four-byte.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export async function getMethodDataAsync(
console.error(e);
return null;
});
console.log('fourByteSig = ', fourByteSig);
}

if (!registry) {
Expand Down
4 changes: 2 additions & 2 deletions test/integration/confirmations/signatures/permit.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ describe('Permit Confirmation', () => {
accountName,
);
expect(screen.getByTestId('header-network-display-name')).toHaveTextContent(
'Chain 5',
'Sepolia',
);

fireEvent.click(screen.getByTestId('header-info__account-details-button'));
Expand All @@ -120,7 +120,7 @@ describe('Permit Confirmation', () => {
);
expect(
screen.getByTestId('confirmation-account-details-modal__account-balance'),
).toHaveTextContent('1.58271596ETH');
).toHaveTextContent('1.582717SepoliaETH');

let confirmAccountDetailsModalMetricsEvent;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ describe('PersonalSign Confirmation', () => {

expect(getByTestId('header-account-name')).toHaveTextContent(accountName);
expect(getByTestId('header-network-display-name')).toHaveTextContent(
'Chain 5',
'Sepolia',
);

fireEvent.click(getByTestId('header-info__account-details-button'));
Expand All @@ -106,7 +106,7 @@ describe('PersonalSign Confirmation', () => {
);
expect(
getByTestId('confirmation-account-details-modal__account-balance'),
).toHaveTextContent('1.58271596ETH');
).toHaveTextContent('1.582717SepoliaETH');

let confirmAccountDetailsModalMetricsEvent;

Expand Down
148 changes: 82 additions & 66 deletions test/integration/confirmations/transactions/alerts.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import mockMetaMaskState from '../../data/integration-init-state.json';
import { integrationTestRender } from '../../../lib/render-helpers';
import * as backgroundConnection from '../../../../ui/store/background-connection';
import { createMockImplementation, mock4byte } from '../../helpers';
import { createTestProviderTools } from '../../../stub/provider';
import { getUnapprovedApproveTransaction } from './transactionDataHelpers';

jest.mock('../../../../ui/store/background-connection', () => ({
Expand Down Expand Up @@ -75,7 +76,17 @@ const setupSubmitRequestToBackgroundMocks = (
);
};

describe('Contract Interaction Confirmation', () => {
describe('Contract Interaction Confirmation Alerts', () => {
beforeAll(() => {
const { provider } = createTestProviderTools({
networkId: 'sepolia',
chainId: '0xaa36a7',
});

// eslint-disable-next-line @typescript-eslint/no-explicit-any
global.ethereumProvider = provider as any;
});

beforeEach(() => {
jest.resetAllMocks();
setupSubmitRequestToBackgroundMocks();
Expand All @@ -87,6 +98,11 @@ describe('Contract Interaction Confirmation', () => {
nock.cleanAll();
});

afterAll(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
delete (global as any).ethereumProvider;
});

it('displays the alert when network is busy', async () => {
const account =
mockMetaMaskState.internalAccounts.accounts[
Expand All @@ -97,12 +113,12 @@ describe('Contract Interaction Confirmation', () => {
const mockedMetaMaskState =
getMetaMaskStateWithUnapprovedApproveTransaction(account.address);

const { findByTestId, getByTestId, queryByTestId } =
await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
gasFeeEstimatesByChainId: {
'0x5': {
'0xaa36a7': {
gasFeeEstimates: {
networkCongestion: 1.0005,
},
Expand All @@ -111,29 +127,28 @@ describe('Contract Interaction Confirmation', () => {
},
backgroundConnection: backgroundConnectionMocked,
});

act(() => {
fireEvent.click(getByTestId('inline-alert'));
});

expect(await findByTestId('alert-modal')).toBeInTheDocument();
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

expect(
await findByTestId('alert-modal__selected-alert'),
await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();

expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
'Gas prices are high and estimates are less accurate.',
);
expect(
await screen.findByTestId('alert-modal__selected-alert'),
).toHaveTextContent('Gas prices are high and estimates are less accurate.');

expect(await findByTestId('alert-modal-button')).toBeInTheDocument();
const alertModalConfirmButton = await findByTestId('alert-modal-button');
expect(await screen.findByTestId('alert-modal-button')).toBeInTheDocument();
const alertModalConfirmButton = await screen.findByTestId(
'alert-modal-button',
);

act(() => {
fireEvent.click(alertModalConfirmButton);
});
fireEvent.click(alertModalConfirmButton);

expect(queryByTestId('alert-modal')).not.toBeInTheDocument();
expect(screen.queryByTestId('alert-modal')).not.toBeInTheDocument();
});

it('displays the alert when gas estimate fails', async () => {
Expand All @@ -157,37 +172,38 @@ describe('Contract Interaction Confirmation', () => {
},
};

const { findByTestId, getByTestId, queryByTestId } =
await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
transactions: [transactions],
},
backgroundConnection: backgroundConnectionMocked,
});

act(() => {
fireEvent.click(getByTestId('inline-alert'));
});

expect(await findByTestId('alert-modal')).toBeInTheDocument();
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

expect(
await findByTestId('alert-modal__selected-alert'),
await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();

expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
expect(
await screen.findByTestId('alert-modal__selected-alert'),
).toHaveTextContent(
'We’re unable to provide an accurate fee and this estimate might be high. We suggest you to input a custom gas limit, but there’s a risk the transaction will still fail.',
);

expect(await findByTestId('alert-modal-button')).toBeInTheDocument();
const alertModalConfirmButton = await findByTestId('alert-modal-button');
expect(await screen.findByTestId('alert-modal-button')).toBeInTheDocument();
const alertModalConfirmButton = await screen.findByTestId(
'alert-modal-button',
);

act(() => {
fireEvent.click(alertModalConfirmButton);
});
fireEvent.click(alertModalConfirmButton);

expect(queryByTestId('alert-modal')).not.toBeInTheDocument();
expect(screen.queryByTestId('alert-modal')).not.toBeInTheDocument();
});

it('displays the alert for insufficient gas', async () => {
Expand All @@ -202,33 +218,35 @@ describe('Contract Interaction Confirmation', () => {
const transaction = mockedMetaMaskState.transactions[0];
transaction.txParams.gas = '0x0';

const { findByTestId, getByTestId } = await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
transactions: [transaction],
},
backgroundConnection: backgroundConnectionMocked,
await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
transactions: [transaction],
},
backgroundConnection: backgroundConnectionMocked,
});
});

act(() => {
fireEvent.click(getByTestId('inline-alert'));
});
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await findByTestId('alert-modal')).toBeInTheDocument();
expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

expect(
await findByTestId('alert-modal__selected-alert'),
await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();

expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
expect(
await screen.findByTestId('alert-modal__selected-alert'),
).toHaveTextContent(
'To continue with this transaction, you’ll need to increase the gas limit to 21000 or higher.',
);

expect(
await findByTestId('alert-modal-action-showAdvancedGasModal'),
await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toBeInTheDocument();
expect(
await findByTestId('alert-modal-action-showAdvancedGasModal'),
await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toHaveTextContent('Update gas limit');
});

Expand All @@ -245,34 +263,36 @@ describe('Contract Interaction Confirmation', () => {
const transaction = mockedMetaMaskState.transactions[0];
transaction.gasFeeEstimates.type = 'none';

const { findByTestId, getByTestId } = await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
gasEstimateType: 'none',
transactions: [transaction],
},
backgroundConnection: backgroundConnectionMocked,
await act(async () => {
await integrationTestRender({
preloadedState: {
...mockedMetaMaskState,
gasEstimateType: 'none',
transactions: [transaction],
},
backgroundConnection: backgroundConnectionMocked,
});
});

act(() => {
fireEvent.click(getByTestId('inline-alert'));
});
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await findByTestId('alert-modal')).toBeInTheDocument();
expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

expect(
await findByTestId('alert-modal__selected-alert'),
await screen.findByTestId('alert-modal__selected-alert'),
).toBeInTheDocument();

expect(await findByTestId('alert-modal__selected-alert')).toHaveTextContent(
expect(
await screen.findByTestId('alert-modal__selected-alert'),
).toHaveTextContent(
'We can’t move forward with this transaction until you manually update the fee.',
);

expect(
await findByTestId('alert-modal-action-showAdvancedGasModal'),
await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toBeInTheDocument();
expect(
await findByTestId('alert-modal-action-showAdvancedGasModal'),
await screen.findByTestId('alert-modal-action-showAdvancedGasModal'),
).toHaveTextContent('Update fee');
});

Expand Down Expand Up @@ -331,9 +351,7 @@ describe('Contract Interaction Confirmation', () => {

expect(await screen.getByTestId('inline-alert')).toBeInTheDocument();

act(() => {
fireEvent.click(screen.getByTestId('inline-alert'));
});
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

Expand All @@ -348,7 +366,7 @@ describe('Contract Interaction Confirmation', () => {
);
});

it('displays the alert for gas fees too', async () => {
it('displays the alert for gas fees too low', async () => {
const account =
mockMetaMaskState.internalAccounts.accounts[
mockMetaMaskState.internalAccounts
Expand All @@ -372,9 +390,7 @@ describe('Contract Interaction Confirmation', () => {
});
});

act(() => {
fireEvent.click(screen.getByTestId('inline-alert'));
});
fireEvent.click(screen.getByTestId('inline-alert'));

expect(await screen.findByTestId('alert-modal')).toBeInTheDocument();

Expand Down
Loading

0 comments on commit 8d3e6ad

Please sign in to comment.