Add basic test infrastructure.

.eslintignore

@@ -1 +1,2 @@
 src/sidebar/dist
+src/test/vendor

README.md

@@ -23,3 +23,7 @@ You need to have a recent version of node.
 3. Run `npm run dev` and start hacking! [Here is a list of some things](https://github.com/eoger/tabcenter-redux/issues?q=is%3Aopen+is%3Aissue+label%3AA-P2) you could work on.
 
    If you don’t have Firefox Release installed, `WEB_EXT_FIREFOX=nightly npm run dev` or `WEB_EXT_FIREFOX=beta npm run dev` should work much better.
+
+## Tests
+
+Basic functional tests can be run by opening the extension's debug console (in `about:debugging`) and executing `tabCenter.startTests()` (in the sidebar document).

src/sidebar/index.js

@@ -0,0 +1,8 @@
+import TabCenter from "./tabcenter.js";
+
+// Start-it up!
+const tabCenter = new TabCenter();
+tabCenter.init();
+
+// For testing!
+window.tabCenter = tabCenter;

src/sidebar/tabcenter.html

@@ -25,7 +25,7 @@
       <div id="moretabs" draggable="true"></div>
       <div id="spacer" draggable="true"></div>
     </div>
-    <script type="module" src="tabcenter.js"></script>
+    <script type="module" src="index.js"></script>
     <script nomodule src="dist/bundle.js"></script>
   </body>
   <template id="tab-template">

src/sidebar/tabcenter.js

@@ -84,6 +84,11 @@ TabCenter.prototype = {
     if (prefs.hasOwnProperty("darkTheme")) {
       this._darkTheme = prefs.darkTheme;
     }
+  },
+  startTests() {
+    const script = document.createElement("script");
+    script.src = "../test/index.js";
+    document.head.appendChild(script);
   }
 };
 
@@ -95,6 +100,4 @@ function unwrapChanges(changes) {
   return unwrapped;
 }
 
-// Start-it up!
-const tabCenter = new TabCenter();
-tabCenter.init();
+export default TabCenter;

src/test/index.js

@@ -0,0 +1,22 @@
+/* eslint-env mocha */
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+(async () => {
+  await Promise.all([
+    loadScript("../test/vendor/mocha.js"),
+    loadScript("../test/vendor/chai.js")
+  ]);
+  mocha.setup({ui: "tdd", timeout: 10000}).reporter("spec");
+
+  await loadScript("../test/tabs-position.test.js");
+
+  mocha.run();
+})();

src/test/tabs-position.test.js

@@ -0,0 +1,109 @@
+/* eslint-env mocha */
+/* global chai, tabCenter */
+
+suite("tabs positions and indexes", () => {
+  const {assert} = chai;
+
+  function assertDOMOrderCorrect(ffTabs) {
+    const ffTabsIds = ffTabs.map(t => t.id);
+    const domTabsIds = [...document.querySelectorAll(".tab")]
+      .map(e => parseInt(e.getAttribute("data-tab-id")));
+    assert.deepEqual(domTabsIds, ffTabsIds, "Order of tabs in the DOM is correct.");
+  }
+
+  function assertIndexesCorrect(ffTabs) {
+    const tcTabs = tabCenter._tabList._tabs;
+    assert.equal(tcTabs.size, ffTabs.length, "TabList number of tabs is correct.");
+
+    for (const ffTab of ffTabs) {
+      const tcTab = tcTabs.get(ffTab.id);
+      assert.ok(tcTab, "found the TC tab");
+      assert.equal(tcTab.index, ffTab.index, "Tab index is correct.");
+    }
+  }
+
+  async function assertOrderAndIndexes() {
+    const ffTabs = await browser.tabs.query({windowId: ourWindowId});
+    assertDOMOrderCorrect(ffTabs);
+    assertIndexesCorrect(ffTabs);
+  }
+
+  let ourWindowId;
+  suiteSetup(async () => {
+    const ourWindow = await browser.windows.getCurrent();
+    ourWindowId = ourWindow.id;
+  });
+
+  async function cleanState() {
+    const windows = await browser.windows.getAll();
+    for (const win of windows) {
+      if (win.id !== ourWindowId) {
+        await browser.windows.remove(win.id);
+      }
+    }
+    const tabs = (await browser.tabs.query({windowId: ourWindowId})).map(t => t.id);
+    await browser.tabs.create({windowId: ourWindowId});
+    await browser.tabs.remove(tabs);
+  }
+
+  setup(() => cleanState());
+  suiteTeardown(() => cleanState());
+
+  test("sanity check", async () => {
+    const ffTabs = await browser.tabs.query({windowId: ourWindowId});
+    assertDOMOrderCorrect(ffTabs);
+    assertIndexesCorrect(ffTabs);
+  });
+  test("insertions/deletions", async () => {
+    await browser.tabs.create({});
+    const {id: tabID1} = await browser.tabs.create({});
+    await browser.tabs.create({});
+    await assertOrderAndIndexes();
+    await browser.tabs.remove(tabID1);
+    await assertOrderAndIndexes();
+    await browser.tabs.create({index: 1});
+    await assertOrderAndIndexes();
+    await browser.tabs.create({});
+    await assertOrderAndIndexes();
+  });
+  test("moves", async () => {
+    await browser.tabs.create({});
+    const {id: tabID1} = await browser.tabs.create({});
+    await browser.tabs.create({});
+    await browser.tabs.create({});
+    await browser.tabs.create({});
+    await browser.tabs.move(tabID1, {index: 3});
+    await assertOrderAndIndexes();
+    await browser.tabs.move(tabID1, {index: -1});
+    await assertOrderAndIndexes();
+    await browser.tabs.move(tabID1, {index: 0});
+    await assertOrderAndIndexes();
+  });
+  test("attach from other window", async () => {
+    await browser.tabs.create({});
+    await browser.tabs.create({});
+    await browser.tabs.create({});
+    const {id: otherWindowId} = await browser.windows.create();
+    await assertOrderAndIndexes();
+    const {id: otherTabId1} = (await browser.tabs.query({windowId: otherWindowId}))[0];
+    const {id: otherTabId2} = await browser.tabs.create({windowId: otherWindowId});
+    const {id: otherTabId3} = await browser.tabs.create({windowId: otherWindowId});
+
+    await browser.tabs.move(otherTabId1, {windowId: ourWindowId, index: -1});
+    await assertOrderAndIndexes();
+    await browser.tabs.move(otherTabId2, {windowId: ourWindowId, index: 0});
+    await assertOrderAndIndexes();
+    await browser.tabs.move(otherTabId3, {windowId: ourWindowId, index: 2});
+    await assertOrderAndIndexes();
+  });
+  test("detach to other window", async () => {
+    const {id: tabID1} = await browser.tabs.create({});
+    await browser.tabs.create({});
+    const {id: tabID3} = await browser.tabs.create({});
+    await browser.tabs.create({});
+    const {id: otherWindowId} = await browser.windows.create({tabId: tabID3});
+    await assertOrderAndIndexes();
+    await browser.tabs.move(tabID1, {windowId: otherWindowId, index: -1});
+    await assertOrderAndIndexes();
+  });
+});