Fix mocking Chrome API for Electron (#1748)

* Fix mocking Chrome API for Electron

* Create chilled-feet-marry.md

.changeset/chilled-feet-marry.md

@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+Fix mocking Chrome API for Electron

extension/src/app/Actions.tsx

@@ -29,11 +29,7 @@ interface OwnProps {
 }
 type Props = StateProps & DispatchProps & OwnProps;
 
-declare global {
-  interface Window {
-    isElectron?: boolean;
-  }
-}
+const isElectron = navigator.userAgent.includes('Electron');
 
 function sendMessage(message: SingleMessage) {
   chrome.runtime.sendMessage(message);
@@ -98,7 +94,7 @@ class Actions extends Component<Props> {
             <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
           )}
           <Divider />
-          {!window.isElectron && (
+          {!isElectron && (
             <Button
               onClick={() => {
                 this.openWindow('window');
@@ -107,7 +103,7 @@ class Actions extends Component<Props> {
               <MdOutlineWindow />
             </Button>
           )}
-          {!window.isElectron && (
+          {!isElectron && (
             <Button
               onClick={() => {
                 this.openWindow('remote');

extension/src/background/index.ts

@@ -1,3 +1,4 @@
+import '../chromeApiMock';
 import configureStore from './store/backgroundStore';
 import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 import { createMenu, removeMenu } from './contextMenus';

extension/src/chromeApiMock.ts

@@ -1,14 +1,11 @@
 // Mock not supported chrome.* API for Firefox and Electron
 
-window.isElectron =
-  window.navigator && window.navigator.userAgent.indexOf('Electron') !== -1;
-
-const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
+const isElectron = navigator.userAgent.includes('Electron');
+const isFirefox = navigator.userAgent.includes('Firefox');
 
 // Background page only
 if (
-  (window.isElectron &&
-    location.pathname === '/_generated_background_page.html') ||
+  (isElectron && location.pathname === '/background.bundle.js') ||
   isFirefox
 ) {
   (chrome.runtime as any).onConnectExternal = {
@@ -18,7 +15,7 @@ if (
     addListener() {},
   };
 
-  if (window.isElectron) {
+  if (isElectron) {
     (chrome.notifications as any) = {
       onClicked: {
         addListener() {},
@@ -31,6 +28,11 @@ if (
         addListener() {},
       },
     };
+    (chrome.commands as any) = {
+      onCommand: {
+        addListener() {},
+      },
+    };
   } else {
     (chrome.storage as any).sync = chrome.storage.local;
     (chrome.runtime as any).onInstalled = {
@@ -39,7 +41,7 @@ if (
   }
 }
 
-if (window.isElectron) {
+if (isElectron) {
   if (!chrome.storage.local || !chrome.storage.local.remove) {
     (chrome.storage as any).local = {
       set(obj: any, callback: any) {
@@ -87,6 +89,6 @@ if (window.isElectron) {
   };
 }
 
-if (isFirefox || window.isElectron) {
+if (isFirefox || isElectron) {
   (chrome.storage as any).sync = chrome.storage.local;
 }

extension/test/electron/devpanel.spec.js

@@ -6,7 +6,7 @@ import chromedriver from 'chromedriver';
 import { switchMonitorTests, delay } from '../utils/e2e';
 
 const devPanelPath =
-  'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html';
+  'chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/devpanel.html';
 
 describe('DevTools panel for Electron', function () {
   let driver;
@@ -76,7 +76,7 @@ describe('DevTools panel for Electron', function () {
     expect(className).not.toMatch(/hidden/); // not hidden
   });
 
-  it.skip('should have Redux DevTools UI on current tab', async () => {
+  it('should have Redux DevTools UI on current tab', async () => {
     await driver
       .switchTo()
       .frame(
@@ -87,7 +87,7 @@ describe('DevTools panel for Electron', function () {
     await delay(1000);
   });
 
-  it.skip('should contain INIT action', async () => {
+  it('should contain INIT action', async () => {
     const element = await driver.wait(
       webdriver.until.elementLocated(
         webdriver.By.xpath('//div[@data-testid="actionListRows"]'),
@@ -99,7 +99,7 @@ describe('DevTools panel for Electron', function () {
     expect(val).toMatch(/@@INIT/);
   });
 
-  it.skip("should contain Inspector monitor's component", async () => {
+  it("should contain Inspector monitor's component", async () => {
     const val = await driver
       .findElement(webdriver.By.xpath('//div[@data-testid="inspector"]'))
       .getText();
@@ -107,7 +107,7 @@ describe('DevTools panel for Electron', function () {
   });
 
   Object.keys(switchMonitorTests).forEach((description) =>
-    it.skip(description, () => switchMonitorTests[description](driver)),
+    it(description, () => switchMonitorTests[description](driver)),
   );
 
   /*  it('should be no logs in console of main window', async () => {