Fix tabs so that they use the correct id when closing/focusing (#1761)

* Fix tabs so that they use the correct id when closing/focusing

* Add integration test for opening/closing tabs with tabs.modes set to tabs

browser/src/UI/components/Tabs.tsx

@@ -303,7 +303,7 @@ const getTabsFromVimTabs = createSelector(
         allBuffers: State.IBuffer[],
     ) => {
         return tabState.tabs.map((t: State.ITab, idx: number) => ({
-            id: t.id,
+            id: idx + 1,
             name: getIdPrefix((idx + 1).toString(), shouldShowId) + getTabName(t.name),
             highlightColor: t.id === tabState.selectedTabId ? color : "transparent",
             iconFileName: showFileIcon ? getTabName(t.name) : "",

test/CiTests.ts

@@ -26,6 +26,7 @@ const CiTests = [
     "Editor.BufferModifiedState",
     "Editor.OpenFile.PathWithSpacesTest",
     "Editor.TabModifiedState",
+    "Editor.CloseTabWithTabModesTabsTest",
     "MarkdownPreviewTest",
     "PaintPerformanceTest",
     "QuickOpenTest",

test/ci/Common.ts

@@ -22,6 +22,11 @@ export const getElementByClassName = (className: string) => {
     }
 }
 
+export const getElementsBySelector = (selector: string) => {
+    const elements = document.body.querySelectorAll(selector)
+    return elements || []
+}
+
 export const createNewFile = async (
     fileExtension: string,
     oni: Oni.Plugin.Api,

test/ci/Editor.CloseTabWithTabModesTabsTest.ts

@@ -0,0 +1,43 @@
+import * as assert from "assert"
+import * as Oni from "oni-api"
+
+import { getElementsBySelector } from "./Common"
+
+export const test = async (oni: Oni.Plugin.Api) => {
+    const getTabsCount = () => getElementsBySelector(".tabs .tab").length
+    const waitForTabCount = count => oni.automation.waitFor(() => getTabsCount() === count)
+
+    const openTab = () => {
+        const initialTabCount = getTabsCount()
+        oni.automation.sendKeys(":tabnew")
+        oni.automation.sendKeys("<cr>")
+        return waitForTabCount(initialTabCount + 1)
+    }
+
+    const closeLastTabWithMouse = () => {
+        const tabs = getElementsBySelector(".tabs .tab")
+        const closeButton = tabs[tabs.length - 1].querySelector(".corner.enable-hover")
+        closeButton.click()
+        return waitForTabCount(tabs.length - 1)
+    }
+
+    await oni.automation.waitForEditors()
+
+    // 1. Create two tabs, then close the last on
+    await openTab()
+    await openTab()
+    await closeLastTabWithMouse()
+
+    // 3. Open another tab
+    await openTab()
+
+    // 4.1 Attempt to close it
+    await closeLastTabWithMouse()
+}
+
+// Bring in custom config.
+export const settings = {
+    config: {
+        "tabs.mode": "tabs",
+    },
+}