diff --git a/coverage-targets.js b/coverage-targets.js index 6097331d1..1ed939c2f 100644 --- a/coverage-targets.js +++ b/coverage-targets.js @@ -6,10 +6,10 @@ // subset of files to check against these targets. module.exports = { global: { - lines: 66, - branches: 54.4, - statements: 65, - functions: 58.5, + lines: 67.8, + branches: 55.84, + statements: 67.13, + functions: 59.66, }, transforms: { branches: 100, diff --git a/test/data/mock-send-state.json b/test/data/mock-send-state.json index 6e460ef8e..a8d379dcd 100644 --- a/test/data/mock-send-state.json +++ b/test/data/mock-send-state.json @@ -2,6 +2,13 @@ "DNS": { "resolution": "" }, + "activeTab": { + "id": 113, + "title": "E2E Test Dapp", + "origin": "https://metamask.github.io", + "protocol": "https:", + "url": "https://metamask.github.io/test-dapp/" + }, "appState": { "networkDropdownOpen": false, "gasIsLoading": false, @@ -16,7 +23,8 @@ "name": null } }, - "warning": null + "warning": null, + "alertOpen": false }, "confirmTransaction": { "txData": { @@ -42,6 +50,10 @@ "history": { "mostRecentOverviewPage": "/mostRecentOverviewPage" }, + "invalidCustomNetwork": { + "state": "CLOSED", + "networkName": "" + }, "metamask": { "ipfsGateway": "", "dismissSeedBackUpReminder": false, @@ -88,6 +100,14 @@ "ensResolutionsByAddress": {}, "isAccountMenuOpen": false, "isUnlocked": true, + "completedOnboarding": true, + "usedNetworks": { + "0x1": true, + "0x5": true, + "0x539": true + }, + "showTestnetMessageInDropdown": true, + "networkConfigurations": {}, "alertEnabledness": { "unconnectedAccount": true }, @@ -1358,5 +1378,8 @@ "balance": "0x4563918244f40000" }, "stage": "DRAFT" + }, + "unconnectedAccount": { + "state": "CLOSED" } } diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js index 248dda89f..6ef03c773 100644 --- a/ui/components/app/app-header/app-header.component.js +++ b/ui/components/app/app-header/app-header.component.js @@ -89,6 +89,7 @@ export default class AppHeader extends PureComponent { className={classnames('account-menu__icon', { 'account-menu__icon--disabled': disabled, })} + disabled={Boolean(disabled)} onClick={() => { if (!disabled) { !isAccountMenuOpen && diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 8cb160764..c5804d146 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -322,7 +322,11 @@ export default class Routes extends Component { } onEditTransactionPage() { - return this.props.sendStage === SEND_STAGES.EDIT; + return ( + this.props.sendStage === SEND_STAGES.EDIT || + this.props.sendStage === SEND_STAGES.DRAFT || + this.props.sendStage === SEND_STAGES.ADD_RECIPIENT + ); } onSwapsPage() { diff --git a/ui/pages/routes/routes.component.test.js b/ui/pages/routes/routes.component.test.js new file mode 100644 index 000000000..fba5da41f --- /dev/null +++ b/ui/pages/routes/routes.component.test.js @@ -0,0 +1,122 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { fireEvent } from '@testing-library/react'; + +import { SEND_STAGES } from '../../ducks/send'; +import { renderWithProvider } from '../../../test/jest'; +import mockSendState from '../../../test/data/mock-send-state.json'; +import Routes from '.'; + +const mockShowNetworkDropdown = jest.fn(); +const mockHideNetworkDropdown = jest.fn(); + +jest.mock('webextension-polyfill', () => ({ + runtime: { + onMessage: { + addListener: jest.fn(), + removeListener: jest.fn(), + }, + getManifest: () => ({ manifest_version: 2 }), + }, +})); + +jest.mock('../../store/actions', () => ({ + getGasFeeTimeEstimate: jest.fn().mockImplementation(() => Promise.resolve()), + getGasFeeEstimatesAndStartPolling: jest + .fn() + .mockImplementation(() => Promise.resolve()), + addPollingTokenToAppState: jest.fn(), + showNetworkDropdown: () => mockShowNetworkDropdown, + hideNetworkDropdown: () => mockHideNetworkDropdown, +})); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useHistory: () => ({ + push: jest.fn(), + }), +})); + +jest.mock('../../ducks/send', () => ({ + ...jest.requireActual('../../ducks/send'), + resetSendState: () => ({ type: 'XXX' }), + getGasPrice: jest.fn(), +})); + +jest.mock('../../ducks/domains', () => ({ + ...jest.requireActual('../../ducks/domains'), + initializeDomainSlice: () => ({ type: 'XXX' }), +})); + +describe('Routes Component', () => { + afterEach(() => { + mockShowNetworkDropdown.mockClear(); + mockHideNetworkDropdown.mockClear(); + }); + describe('render during send flow', () => { + it('should render with network and account change disabled while adding recipient for send flow', () => { + const store = configureMockStore()({ + ...mockSendState, + send: { + ...mockSendState.send, + stage: SEND_STAGES.ADD_RECIPIENT, + }, + }); + const { getByTestId } = renderWithProvider(, store, ['/send']); + + expect(getByTestId('account-menu-icon')).toBeDisabled(); + + const networkDisplay = getByTestId('network-display'); + fireEvent.click(networkDisplay); + expect(mockShowNetworkDropdown).not.toHaveBeenCalled(); + }); + it('should render with network and account change disabled while user is in send page', () => { + const store = configureMockStore()({ + ...mockSendState, + }); + const { getByTestId } = renderWithProvider(, store, ['/send']); + + expect(getByTestId('account-menu-icon')).toBeDisabled(); + + const networkDisplay = getByTestId('network-display'); + fireEvent.click(networkDisplay); + expect(mockShowNetworkDropdown).not.toHaveBeenCalled(); + }); + it('should render with network and account change disabled while editing a send transaction', () => { + const store = configureMockStore()({ + ...mockSendState, + send: { + ...mockSendState.send, + stage: SEND_STAGES.EDIT, + }, + }); + const { getByTestId } = renderWithProvider(, store, ['/send']); + + expect(getByTestId('account-menu-icon')).toBeDisabled(); + + const networkDisplay = getByTestId('network-display'); + fireEvent.click(networkDisplay); + expect(mockShowNetworkDropdown).not.toHaveBeenCalled(); + }); + it('should render when send transaction is not active', () => { + const store = configureMockStore()({ + ...mockSendState, + metamask: { + ...mockSendState.metamask, + swapsState: { + ...mockSendState.metamask.swapsState, + swapsFeatureIsLive: true, + }, + pendingApprovals: {}, + announcements: {}, + }, + send: { + ...mockSendState.send, + stage: SEND_STAGES.INACTIVE, + }, + }); + const { getByTestId } = renderWithProvider(, store); + expect(getByTestId('account-menu-icon')).not.toBeDisabled(); + }); + }); +});