Merge pull request #53 from aeksco/bug/fix-broken-broser-polyfill

Fix webextension-polyfill mock

Author: aeksco

src/__mocks__/webextension-polyfill.ts

@@ -3,7 +3,7 @@
 // This is used to mock these values for Storybook so you can develop your components
 // outside the Web Extension environment provided by a compatible browser
 // See .storybook/main.js to see how this module is swapped in for `webextension-polyfill`
-export const browser: any = {
+const browser: any = {
     tabs: {
         executeScript(currentTabId: number, details: any) {
             return Promise.resolve({ done: true });
@@ -18,6 +18,7 @@ export const browser: any = {
         },
     },
 };
+export default browser;
 
 interface Tab {
     id: number;

src/popup/component.tsx

@@ -20,7 +20,7 @@ function scrollWindow(position: number) {
  */
 function executeScript(position: number): void {
     // Query for the active tab in the current window
-    browser?.tabs
+    browser.tabs
         .query({ active: true, currentWindow: true })
         .then((tabs: Tabs.Tab[]) => {
             // Pulls current tab from browser.tabs.query response
@@ -52,9 +52,7 @@ function executeScript(position: number): void {
 export function Popup() {
     // Sends the `popupMounted` event
     React.useEffect(() => {
-        // NOTE - we use conditional chaining on `browser`import
-        // because it doesn't load up in Storybook
-        browser?.runtime.sendMessage({ popupMounted: true });
+        browser.runtime.sendMessage({ popupMounted: true });
     }, []);
 
     // Renders the component tree