Merge pull request #18102 from MetaMask/fix/599-fix-theme-issues-of-d…

…esktop-pairing-page-in-the-extension-ui fix: fix theme issues of desktop pairing page
MetaMask · Mar 29, 2023 · f32d71b · f32d71b
2 parents 8f65c26 + c640e76
commit f32d71b
Show file tree

Hide file tree

Showing 7 changed files with 415 additions and 299 deletions.
diff --git a/shared/lib/error-utils.js b/shared/lib/error-utils.js
@@ -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() {
@@ -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();
   });
 }
 

diff --git a/shared/lib/error-utils.test.js b/shared/lib/error-utils.test.js
@@ -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: {
@@ -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);
+    });
+  });
 });