Skip to content

Commit

Permalink
Merge branch 'develop' into 17191-onboarding-unit-tests-privacy-settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmashuang
tmashuang authored Mar 29, 2023
2 parents 34fff92 + f32d71b commit 81f4621
Show file tree
Hide file tree
Showing 18 changed files with 834 additions and 349 deletions.
6 changes: 6 additions & 0 deletions app/_locales/en/messages.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions shared/lib/error-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,17 @@ export async function getErrorHtml(
}

///: BEGIN:ONLY_INCLUDE_IN(flask)
export const MMD_DOWNLOAD_LINK =
'https://github.com/MetaMask/metamask-desktop/releases';

function disableDesktop(backgroundConnection) {
backgroundConnection.disableDesktopError();
}

export function downloadDesktopApp() {
global.platform.openTab({ url: 'https://metamask.io/' });
global.platform.openTab({
url: MMD_DOWNLOAD_LINK,
});
}

export function downloadExtension() {
Expand All @@ -139,7 +144,7 @@ export function restartExtension() {

export function openOrDownloadMMD() {
openCustomProtocol('metamask-desktop://pair').catch(() => {
window.open('https://metamask.io/download.html', '_blank').focus();
window.open(MMD_DOWNLOAD_LINK, '_blank').focus();
});
}

Expand Down
126 changes: 125 additions & 1 deletion shared/lib/error-utils.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,48 @@
import browser from 'webextension-polyfill';
import { fetchLocale } from '../../ui/helpers/utils/i18n-helper';
import { SUPPORT_LINK } from './ui-utils';
import { getErrorHtml } from './error-utils';
import {
downloadDesktopApp,
openOrDownloadMMD,
downloadExtension,
getErrorHtml,
restartExtension,
registerDesktopErrorActions,
MMD_DOWNLOAD_LINK,
} from './error-utils';
import { openCustomProtocol } from './deep-linking';

jest.mock('../../ui/helpers/utils/i18n-helper', () => ({
fetchLocale: jest.fn(),
loadRelativeTimeFormatLocaleData: jest.fn(),
}));
jest.mock('./deep-linking', () => ({
openCustomProtocol: jest.fn(),
}));

jest.mock('webextension-polyfill', () => {
return {
runtime: {
reload: jest.fn(),
},
};
});

describe('Error utils Tests', function () {
beforeEach(() => {
jest.clearAllMocks();
jest.restoreAllMocks();

global.platform = {
openTab: jest.fn(),
};
});

afterAll(() => {
jest.clearAllMocks();
jest.restoreAllMocks();
delete global.platform;
});
it('should get error html', async function () {
const mockStore = {
localeMessages: {
Expand Down Expand Up @@ -50,4 +85,93 @@ describe('Error utils Tests', function () {
expect(errorHtml).toContain(stillGettingMessageMessage);
expect(errorHtml).toContain(sendBugReportMessage);
});
describe('desktop', () => {
it('downloadDesktopApp opens a new tab on metamask-desktop releases url', () => {
downloadDesktopApp();

expect(global.platform.openTab).toHaveBeenCalledTimes(1);
expect(global.platform.openTab).toHaveBeenCalledWith({
url: MMD_DOWNLOAD_LINK,
});
});

it('downloadExtension opens a new tab on metamask extension url', () => {
downloadExtension();

expect(global.platform.openTab).toHaveBeenCalledTimes(1);
expect(global.platform.openTab).toHaveBeenCalledWith({
url: 'https://metamask.io/',
});
});

it('restartExtension calls runtime reload method', () => {
restartExtension();

expect(browser.runtime.reload).toHaveBeenCalledTimes(1);
});

describe('openOrDownloadMMD', () => {
it('launches installed desktop app by calling openCustomProtocol successfully', () => {
openCustomProtocol.mockResolvedValue();
openOrDownloadMMD();

expect(openCustomProtocol).toHaveBeenCalledTimes(1);
expect(openCustomProtocol).toHaveBeenCalledWith(
'metamask-desktop://pair',
);
});

it('opens metamask-desktop release url when fails to find and start a local metamask-desktop app', async () => {
openCustomProtocol.mockRejectedValue();
const focusMock = jest.fn();
jest.spyOn(window, 'open').mockReturnValue({
focus: focusMock,
});

openOrDownloadMMD();

// this ensures that we are awaiting for pending promises to resolve
// as the openOrDownloadMMD calls a promise, but returns before it is resolved
await new Promise(process.nextTick);

expect(openCustomProtocol).toHaveBeenCalledTimes(1);
expect(openCustomProtocol).toHaveBeenCalledWith(
'metamask-desktop://pair',
);

expect(window.open).toHaveBeenCalledTimes(1);
expect(window.open).toHaveBeenCalledWith(MMD_DOWNLOAD_LINK, '_blank');
expect(focusMock).toHaveBeenCalledTimes(1);
});
});

it('registerDesktopErrorActions add click event listeners for each desktop error elements', async () => {
const addEventListenerMock = jest.fn();
jest.spyOn(document, 'getElementById').mockReturnValue({
addEventListener: addEventListenerMock,
});

registerDesktopErrorActions();

expect(document.getElementById).toHaveBeenCalledTimes(4);
expect(document.getElementById).toHaveBeenNthCalledWith(
1,
'desktop-error-button-disable-mmd',
);
expect(document.getElementById).toHaveBeenNthCalledWith(
2,
'desktop-error-button-restart-mm',
);
expect(document.getElementById).toHaveBeenNthCalledWith(
3,
'desktop-error-button-download-mmd',
);
expect(document.getElementById).toHaveBeenNthCalledWith(
4,
'desktop-error-button-open-or-download-mmd',
);

expect(addEventListenerMock).toHaveBeenCalledTimes(4);
});
});
});
60 changes: 32 additions & 28 deletions ui/components/app/add-network/add-network.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
TypographyVariant,
TextVariant,
JustifyContent,
BorderRadius,
BackgroundColor,
Expand Down Expand Up @@ -38,7 +36,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network';
import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
import { Icon, ICON_NAMES, ICON_SIZES, Text } from '../../component-library';
import { EVENT } from '../../../../shared/constants/metametrics';

const AddNetwork = () => {
Expand Down Expand Up @@ -98,7 +96,7 @@ const AddNetwork = () => {
<img src="images/info-fox.svg" />
</Box>
<Box>
<Typography variant={TypographyVariant.H7}>
<Text variant={TextVariant.bodySm} as="h6">
{t('youHaveAddedAll', [
<a
key="link"
Expand All @@ -121,15 +119,16 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.infoDefault}
>
{t('addMoreNetworks')}.
</Typography>
</Text>
</Button>,
])}
</Typography>
</Text>
</Box>
</Box>
) : (
Expand All @@ -144,42 +143,46 @@ const AddNetwork = () => {
paddingBottom={2}
className="add-network__header"
>
<Typography
variant={TypographyVariant.H4}
<Text
variant={TextVariant.headingSm}
color={TextColor.textMuted}
as="h4"
>
{t('networks')}
</Typography>
</Text>
<span className="add-network__header__subtitle">{' > '}</span>
<Typography
variant={TypographyVariant.H4}
<Text
variant={TextVariant.headingSm}
as="h4"
color={TextColor.textDefault}
>
{t('addANetwork')}
</Typography>
</Text>
</Box>
)}
<Box
marginTop={getEnvironmentType() === ENVIRONMENT_TYPE_POPUP ? 0 : 4}
marginBottom={1}
className="add-network__main-container"
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative}
margin={0}
marginTop={4}
>
{t('addFromAListOfPopularNetworks')}
</Typography>
<Typography
variant={TypographyVariant.H7}
</Text>
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.textMuted}
marginTop={4}
marginBottom={3}
>
{t('popularCustomNetworks')}
</Typography>
</Text>
{notExistingNetworkConfigurations.map((item, index) => (
<Box
key={index}
Expand All @@ -200,13 +203,13 @@ const AddNetwork = () => {
</IconBorder>
</Box>
<Box marginLeft={2}>
<Typography
variant={TypographyVariant.H7}
<Text
variant={TextVariant.bodySmBold}
as="h6"
color={TextColor.textDefault}
fontWeight={FONT_WEIGHT.BOLD}
>
{item.nickname}
</Typography>
</Text>
</Box>
</Box>
<Box
Expand Down Expand Up @@ -294,12 +297,13 @@ const AddNetwork = () => {
: history.push(ADD_NETWORK_ROUTE);
}}
>
<Typography
variant={TypographyVariant.H6}
<Text
variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault}
>
{t('addANetworkManually')}
</Typography>
</Text>
</Button>
</Box>
</Box>
Expand Down
23 changes: 17 additions & 6 deletions ui/components/app/confirm-page-container/confirm-page-container.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@ import EditGasFeePopover from '../edit-gas-fee-popover/edit-gas-fee-popover';
import EditGasPopover from '../edit-gas-popover';
import ErrorMessage from '../../ui/error-message';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import Typography from '../../ui/typography';
import { TypographyVariant } from '../../../helpers/constants/design-system';
import { Text } from '../../component-library';
import {
TextVariant,
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';

import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header';
import { fetchTokenBalance } from '../../../../shared/lib/token-util.ts';
Expand Down Expand Up @@ -233,7 +236,11 @@ const ConfirmPageContainer = (props) => {
<ActionableMessage
message={
isBuyableChain ? (
<Typography variant={TypographyVariant.H7} align="left">
<Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyBuyOrDeposit', [
nativeCurrency,
networkName,
Expand All @@ -256,14 +263,18 @@ const ConfirmPageContainer = (props) => {
{t('buyAsset', [nativeCurrency])}
</Button>,
])}
</Typography>
</Text>
) : (
<Typography variant={TypographyVariant.H7} align="left">
<Text
variant={TextVariant.bodySm}
textAlign={TEXT_ALIGN.LEFT}
as="h6"
>
{t('insufficientCurrencyDeposit', [
nativeCurrency,
networkName,
])}
</Typography>
</Text>
)
}
useIcon
Expand Down
Loading

0 comments on commit 81f4621

Please sign in to comment.