Merge pull request #13 from satoryu/show-count-of-selected-tabs

Show the count of selected tabs on the button

Author: satoryu

popup.html

@@ -10,7 +10,7 @@
     <div id="message-box"></div>
 
     <button id="copy-current-tab-button">Copy Current Tab</button>
-    <button id="copy-selected-tabs-button">Copy Selected Tab</button>
+    <button id="copy-selected-tabs-button">Copy Selected Tabs (<span id="count-of-selected-tabs">0</span>)</button>
     <button id="copy-all-tabs-button">Copy All Tabs</button>
   </div>
   <script src="popup.js" type="module"></script>

popup.js

@@ -1,5 +1,5 @@
 import { writeTextToClipboard } from './src/clipboard.js';
-import { findTabs } from './src/chrome.js';
+import { getCurrentTab, getSelectedTabs, getAllTabsOnCurrentWindow } from './src/chrome.js';
 import { createLinkForTab, createLinksForTabs } from './src/link.js';
 
 let messageBox = document.getElementById('message-box');
@@ -14,36 +14,30 @@ function appendMessage(messageText) {
 }
 
 copyCurrentTabButton.addEventListener('click', () => {
-  findTabs({ active: true, currentWindow: true })
-    .then(([tab]) => {
-      let linkText = createLinkForTab(tab)
-
-      writeTextToClipboard(linkText).then(() => {
-        appendMessage('Copied')
-      })
-    })
+  getCurrentTab()
+    .then(([tab]) => (createLinkForTab(tab)))
+    .then(writeTextToClipboard)
+    .then(() => { appendMessage('Copied') })
     .catch((err) => console.error(err))
 });
 
 copySelectedTabsButton.addEventListener('click', () => {
-  findTabs({ highlighted: true, currentWindow: true })
-    .then(tabs => {
-      let linkText = createLinksForTabs(tabs)
-
-      writeTextToClipboard(linkText).then(() => {
-        appendMessage('Copied Selected Tabs!')
-      })
-    })
+  getSelectedTabs()
+    .then(createLinksForTabs)
+    .then(writeTextToClipboard)
+    .then(() => { appendMessage('Copied Selected Tabs!') })
     .catch((err) => console.error(err))
 })
+const countOfSelectedTabs = document.getElementById('count-of-selected-tabs')
+if (countOfSelectedTabs) {
+  getSelectedTabs().then(tabs => {
+    countOfSelectedTabs.textContent = tabs.length
+  })
+}
 
 copyAllTabsButton.addEventListener('click', () => {
-  findTabs({currentWindow: true})
-    .then(tabs => {
-      let linkText = createLinksForTabs(tabs)
-
-      writeTextToClipboard(linkText).then(() => {
-        appendMessage('Copied All Tabs!')
-      })
-    })
+  getAllTabsOnCurrentWindow()
+    .then(createLinksForTabs)
+    .then(writeTextToClipboard)
+    .then(() => { appendMessage('Copied All Tabs!') })
 })

src/chrome.js

@@ -2,4 +2,16 @@ function findTabs(queryOption) {
   return chrome.tabs.query(queryOption)
 }
 
-export { findTabs }
+function getCurrentTab() {
+  return findTabs({active: true, currentWindow: true})
+}
+
+function getSelectedTabs() {
+  return findTabs({highlighted: true, currentWindow: true})
+}
+
+function getAllTabsOnCurrentWindow() {
+  return findTabs({ currentWindow: true })
+}
+
+export { findTabs, getCurrentTab, getSelectedTabs, getAllTabsOnCurrentWindow }

src/link.js

@@ -1,11 +1,12 @@
-function createLinkForTab(tab) {
+async function createLinkForTab(tab) {
   const title = tab.title.replaceAll(/[\[\]]/g, '').replaceAll(/`(.*)`/g, '$1')
 
   return `[${tab.url} ${title}]`
 }
 
-function createLinksForTabs(tabs) {
-  return tabs.map(createLinkForTab).map((link) => (` ${link}`)).join("\n")
+async function createLinksForTabs(tabs) {
+  return Promise.all(tabs.map(createLinkForTab))
+    .then((links) => (links.map((link) => (` ${link}`)).join("\n")))
 }
 
 export { createLinksForTabs, createLinkForTab }

test/chrome.test.js

@@ -0,0 +1,51 @@
+import { findTabs, getCurrentTab, getSelectedTabs, getAllTabsOnCurrentWindow } from '../src/chrome.js'
+
+global.chrome = {
+  tabs: {
+    query: jest.fn(options => (options))
+  }
+}
+
+beforeEach(() => {
+  chrome.tabs.query.mockClear()
+})
+
+describe("findTabs", () => {
+  it("passes given options to chrome.tabs.query()", async () => {
+    const expectedOptions = { active: true, currentWindow: true }
+
+    await findTabs(expectedOptions)
+
+    expect(chrome.tabs.query.mock.calls[0][0]).toEqual(expectedOptions)
+  })
+})
+
+describe("getCurrentTab", () => {
+  it("passes a specific option to findTabs to get the current tab", async () => {
+    const expectedOptions = { active: true, currentWindow: true }
+
+    await getCurrentTab()
+
+    expect(chrome.tabs.query.mock.calls[0][0]).toEqual(expectedOptions)
+  })
+})
+
+describe("getSelectedTabs", () => {
+  it("passes a specific option to findTabs to get the selected tabs", async () => {
+    const expectedOptions = { highlighted: true, currentWindow: true }
+
+    await getSelectedTabs()
+
+    expect(chrome.tabs.query.mock.calls[0][0]).toEqual(expectedOptions)
+  })
+})
+
+describe("getAllTabsOnCurrentWindow", () => {
+  it("passes a specific option to findTabs to get the selected tabs", async () => {
+    const expectedOptions = { currentWindow: true }
+
+    await getAllTabsOnCurrentWindow()
+
+    expect(chrome.tabs.query.mock.calls[0][0]).toEqual(expectedOptions)
+  })
+})

test/link.test.js

@@ -1,17 +1,17 @@
 import { createLinkForTab } from "../src/link.js";
 
 describe("createLinkForTab", () => {
-  test("creates a link from a given tab's title and url", () => {
-    const link = createLinkForTab({
+  test("creates a link from a given tab's title and url", async () => {
+    const link = await createLinkForTab({
       title: "title",
       url: "https://example.com",
     });
 
     expect(link).toEqual("[https://example.com title]");
   });
 
-  test("omits square brackets in title", () => {
-    const link = createLinkForTab({
+  test("omits square brackets in title", async () => {
+    const link = await createLinkForTab({
       title: "[title]",
       url: "https://example.com",
     });

test/popup.test.js

@@ -9,11 +9,12 @@ describe("appendMessage", () => {
       <div id="message-box"></div>
 
       <button id="copy-current-tab-button">Copy Current Tab</button>
-      <button id="copy-selected-tabs-button">Copy Selected Tabs</button>
+      <button id="copy-selected-tabs-button">Copy Selected Tabs (<span id="count-of-selected-tabs">0</span>)</button>
       <button id="copy-all-tabs-button">Copy All Tabs</button>
     `;
 
     jest.mock("../src/chrome.js", () => mockChrome)
+    mockChrome.getSelectedTabs = jest.fn(() => (Promise.resolve([])))
 
     require("./../popup.js");
   })
@@ -22,11 +23,11 @@ describe("appendMessage", () => {
     let user
 
     beforeEach(async () => {
-      mockChrome.findTabs = jest.fn(() => {
+      mockChrome.getCurrentTab = jest.fn(() => {
         return Promise.resolve([
           { title: "hoge", url: "https://www.example.com" },
         ]);
-      }),
+      })
 
       user = userEvent.setup()
       const button = screen.getByRole('button', { name: 'Copy Current Tab' })
@@ -50,14 +51,14 @@ describe("appendMessage", () => {
     let user
 
     beforeEach(async () => {
-      mockChrome.findTabs = jest.fn(() => {
+      mockChrome.getSelectedTabs = jest.fn(() => {
           return Promise.resolve([
             { title: "hoge", url: "https://www.example.com" },
             { title: "fuga", url: "https://fuga.example.com" },
           ]);
         })
       user = userEvent.setup()
-      const button = screen.getByRole('button', { name: 'Copy Selected Tabs' })
+      const button = screen.getByRole('button', { name: 'Copy Selected Tabs ( 0 )' })
       await user.click(button)
     })
 
@@ -78,7 +79,7 @@ describe("appendMessage", () => {
     let user
 
     beforeEach(async () => {
-      mockChrome.findTabs = jest.fn(() => {
+      mockChrome.getAllTabsOnCurrentWindow = jest.fn(() => {
           return Promise.resolve([
             { title: "foo", url: "https://www.foo.com" },
             { title: "bar", url: "https://www.bar.com" },