Merge pull request #9 from CSCD01/issue-1624-backend-logic

Issue 1624 backend logic

src/js/popup.js

@@ -990,7 +990,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
   /*  This function is the handler of deletion for both keypress delete and delete button.
       The keypress delete support for both backspace and delete key.
    */
-  async deleteHandler() {
+  async _deleteHandler() {
     const selectedIdentities = Logic.currentSelectedIdentities();
     if (selectedIdentities.length > 0) {
       await Logic.showPanel(P_CONTAINER_DELETE);
@@ -1000,7 +1000,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
   /*  The function is to update the delete button.
       The delete button shows up once any containers are selected.
    */
-  updateDeleteButton(selectedContainers) {
+  _updateDeleteButton(selectedContainers) {
     const deleteButton = document.querySelector("div.panel-footer.panel-footer-secondary");
     if (selectedContainers.length === 0) {
       deleteButton.classList.add("hide");
@@ -1015,13 +1015,13 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
       Logic.showPanel(P_CONTAINERS_LIST);
     });
 
-    Logic.addEnterHandler(document.querySelector("#delete-link"), this.deleteHandler);
+    Logic.addEnterHandler(document.querySelector("#delete-link"), this._deleteHandler);
 
     document.addEventListener("keydown", e => {
       if (e.keyCode === 16) {
         this.shiftOn = true;
-      } else if (e.keyCode === 8 || e.keyCode === 48) {
+      } else if (e.keyCode === 8 || e.keyCode === 46) {
-        this.deleteHandler();
+        this._deleteHandler();
       }
     });
 
@@ -1035,7 +1035,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
   // This method is called when the panel is shown.
   prepare() {
     Logic.resetSelectedIdentities();
-    this.updateDeleteButton(Logic.currentSelectedIdentities());
+    this._updateDeleteButton(Logic.currentSelectedIdentities());
     const fragment = document.createDocumentFragment();
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
@@ -1107,7 +1107,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
           }
 
           this.lastSelected = identity;
-          this.updateDeleteButton(currentSelectedIdentity);
+          this._updateDeleteButton(currentSelectedIdentity);
         }
       });
     });
@@ -1329,6 +1329,9 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
   prepare() {
     // if current identity is not null, then show single container information, otherwise show all selected
     let currentSelection;
+    let totalNumberOfTabs = 0;
+    let containerString = "";
+
     try {
       currentSelection = [Logic.currentIdentity()];
     } catch (e) {
@@ -1336,22 +1339,31 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
     }
     // right now for mult-selection, it displays the first item in the selection at the icon and name
     // Populating the panel: name, icon, and warning message
-    document.getElementById("delete-container-name").textContent = currentSelection[0].name;
+    document.getElementById("delete-container-tab-warning").textContent = ``;
-    document.getElementById("delete-container-tab-warning").textContent = "";
     for (let i = 0; i < currentSelection.length; i++) {
       const identity = currentSelection[i];
-      const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
+      totalNumberOfTabs += identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
-      let warningMessage = "";
-      if (totalNumberOfTabs > 0) {
-        const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab";
-        warningMessage =`If you remove ${identity.name} container now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`;
-      }
-      document.getElementById("delete-container-tab-warning").textContent += warningMessage;
-
-      const icon = document.getElementById("delete-container-icon");
-      icon.setAttribute("data-identity-icon", identity.icon);
-      icon.setAttribute("data-identity-color", identity.color);
     }
+    const icon = document.getElementById("delete-container-icon");
+    if (currentSelection.length === 1 ) {
+      document.getElementById("delete-container-name").textContent = currentSelection[0].name;
+      icon.style.visibility = 'visible';
+      icon.style.marginLeft = `0px`;
+      icon.setAttribute("data-identity-icon", currentSelection[0].icon);
+      icon.setAttribute("data-identity-color", currentSelection[0].color);
+      containerString = "this container";
+    } else {
+      icon.style.visibility = 'hidden';
+      icon.style.marginLeft = `-16px`;
+      document.getElementById("delete-container-name").textContent = `Containers`;
+      containerString = "this " + currentSelection.length + " containers";
+    }
+    let warningMessage = "";
+    if (totalNumberOfTabs > 0) {
+      const grammaticalNumTabs = totalNumberOfTabs > 1 ? "tabs" : "tab";
+      warningMessage =`If you remove ${containerString} now, ${totalNumberOfTabs} container ${grammaticalNumTabs} will be closed.`;
+    }
+    document.getElementById("delete-container-tab-warning").textContent += warningMessage + ` Are you sure you want to remove ${containerString}?`;
     return Promise.resolve(null);
   },
 });

src/popup.html

@@ -228,7 +228,7 @@
     </div>
     <div class="panel-content delete-container-confirm">
       <h4 class="delete-container-confirm-title">Remove This Container</h4>
-      <p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
+      <p id="delete-container-tab-warning"></p>
     </div>
     <div class="panel-footer">
       <a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>

test/issues/1624.test.js

@@ -0,0 +1,136 @@
+const {initializeWithTab} = require("../common");
+
+describe("Remove multiple Containers", function () {
+  beforeEach(async function () {
+    this.webExt = await initializeWithTab();
+  });
+
+  afterEach(function () {
+    this.webExt.destroy();
+  });
+
+  describe("creating three new containers", function () {
+    beforeEach(async function () {
+      for (let i = 0; i < 3; i++) {
+        await this.webExt.popup.helper.clickElementById("container-add-link");
+        await this.webExt.popup.helper.clickElementById("edit-container-ok-link");
+      }
+    });
+
+    it("should create these in the browser as well", function () {
+      this.webExt.background.browser.contextualIdentities.create.should.have.been.calledThrice;
+    });
+
+    describe("manually select one container and delete by delete button", function () {
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".select-container", "last");
+        await this.webExt.popup.helper.clickElementById("delete-link");
+        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
+      });
+
+      it("should remove it in the browser as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-7");
+      });
+    });
+
+    describe("manually select one container and delete by backspace key", function () {
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".select-container", "last");
+
+        const backspaceKey = 6;
+        const event = new this.webExt.popup.window.KeyboardEvent("keydown",{"keyCode": backspaceKey});
+        this.webExt.popup.window.document.dispatchEvent(event);
+
+        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
+
+
+      });
+
+      it("should remove it in the browser as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-7");
+      });
+    });
+
+    describe("manually select one container and delete by delete key", function () {
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".select-container", "last");
+
+        const deleteKey = 46;
+        const event = new this.webExt.popup.window.KeyboardEvent("keydown",{"keyCode": deleteKey});
+        this.webExt.popup.window.document.dispatchEvent(event);
+
+        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
+
+
+      });
+
+      it("should remove it in the browser as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-7");
+      });
+    });
+
+    describe("manually click select two containers and delete by delete button", function () {
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+
+        const nodeArray = Array.from(this.webExt.popup.window.document.querySelectorAll(".select-container"));
+        nodeArray[5].click();
+        nodeArray[6].click();
+
+        await this.webExt.popup.helper.clickElementById("delete-link");
+        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
+
+      });
+
+      it("should remove it in the browser twice as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledTwice;
+      });
+
+      it("should remove the container # 7 as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-7");
+      });
+
+      it("should remove the container # 6 as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-6");
+      });
+    });
+
+    describe("manually shift click select multiple containers and delete by delete button", function () {
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+
+        const nodeArray = Array.from(this.webExt.popup.window.document.querySelectorAll(".select-container"));
+        nodeArray[4].click();
+
+        const shiftKey = 16;
+        const event = new this.webExt.popup.window.KeyboardEvent("keydown",{"keyCode": shiftKey});
+        this.webExt.popup.window.document.dispatchEvent(event);
+
+        nodeArray[6].click();
+
+        await this.webExt.popup.helper.clickElementById("delete-link");
+        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
+
+      });
+
+      it("should remove these three containers in the browser as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledThrice;
+      });
+
+      it("should remove the container # 5 as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-5");
+      });
+
+      it("should remove the container # 6 as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-6");
+      });
+
+      it("should remove the container # 7 as well", function () {
+        this.webExt.background.browser.contextualIdentities.remove.should.have.been.calledWith("firefox-container-7");
+      });
+    });
+  });
+});