storybook updated

Author: punithbm

.storybook/main.js

@@ -31,14 +31,14 @@ module.exports = {
         config.plugins = [
             ...config.plugins,
             new webpack.NormalModuleReplacementPlugin(
-                /webextension-polyfill-ts/,
+                /webextension-polyfill/,
                 (resource) => {
                     // Gets absolute path to mock `webextension-polyfill-ts` package
                     // NOTE: this is required beacuse the `webextension-polyfill-ts`
                     // package can't be used outside the environment provided by web extensions
                     const absRootMockPath = path.resolve(
                         __dirname,
-                        "../src/__mocks__/webextension-polyfill-ts.ts",
+                        "../src/__mocks__/webextension-polyfill.ts",
                     );
 
                     // Gets relative path from requesting module to our mocked module

src/__mocks__/webextension-polyfill-ts.ts

@@ -1,8 +1,8 @@
-// src/__mocks__/webextension-polyfill-ts
-// Update this file to include any mocks for the `webextension-polyfill-ts` package
+// src/__mocks__/webextension-polyfill
+// Update this file to include any mocks for the `webextension-polyfill` package
 // 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-ts`
+// See .storybook/main.js to see how this module is swapped in for `webextension-polyfill`
 export const browser: any = {
     tabs: {
         executeScript(currentTabId: number, details: any) {

src/__mocks__/webextension-polyfill.ts

@@ -0,0 +1,28 @@
+// src/__mocks__/webextension-polyfill-ts
+// Update this file to include any mocks for the `webextension-polyfill-ts` package
+// 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-ts`
+export const browser: any = {
+    tabs: {
+        executeScript(currentTabId: number, details: any) {
+            return Promise.resolve({ done: true });
+        },
+        query(params: any): Promise<Tab[]> {
+            return Promise.resolve([]);
+        },
+    },
+    runtime: {
+        sendMessage: (params: { popupMounted: boolean }) => {
+            return;
+        },
+    },
+};
+
+interface Tab {
+    id: number;
+}
+
+export interface Tabs {
+    Tab: Tab;
+}