Adding DockTab tests with fine-tuning jest config

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

__mocks__/@linguiMacro.ts

@@ -1,3 +1,4 @@
 module.exports = {
   Trans: ({ children }: { children: React.ReactNode }) => children,
+  t: (message: string) => message
 };

__mocks__/imageMock.ts

@@ -0,0 +1 @@
+module.exports = {};

package.json

@@ -76,6 +76,7 @@
     },
     "moduleNameMapper": {
       "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
+      "\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts",
       "^@lingui/macro$": "<rootDir>/__mocks__/@linguiMacro.ts"
     },
     "modulePathIgnorePatterns": [
@@ -83,7 +84,8 @@
       "<rootDir>/src/extensions/npm"
     ],
     "setupFiles": [
-      "<rootDir>/src/jest.setup.ts"
+      "<rootDir>/src/jest.setup.ts",
+      "jest-canvas-mock"
     ]
   },
   "build": {
@@ -212,6 +214,7 @@
     "fs-extra": "^9.0.1",
     "handlebars": "^4.7.6",
     "http-proxy": "^1.18.1",
+    "jest-canvas-mock": "^2.3.0",
     "js-yaml": "^3.14.0",
     "jsdom": "^16.4.0",
     "jsonpath": "^1.0.2",

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -0,0 +1,129 @@
+
+
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import { DockTabs } from "../dock-tabs";
+import { dockStore, TabKind } from "../dock.store";
+import { createResourceTab } from "../create-resource.store";
+import { createTerminalTab } from "../terminal.store";
+
+const onChangeTab = jest.fn();
+const getComponent = () => (
+  <DockTabs
+    tabs={dockStore.tabs}
+    selectedTab={dockStore.selectedTab}
+    autoFocus={true}
+    onChangeTab={onChangeTab}
+  />
+);
+
+const renderTabs = () => render(getComponent());
+
+const getTabKinds = () => dockStore.tabs.map(tab => tab.kind);
+
+describe("<DockTabs />", () => {
+  beforeEach(() => {
+    createTerminalTab();
+    createResourceTab();
+    createTerminalTab();
+    createResourceTab();
+    createTerminalTab();
+  });
+
+  afterEach(() => {
+    dockStore.reset();
+  });
+
+  it("renders w/o errors", () => {
+    const { container } = renderTabs();
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("has 6 tabs (1 tab is initial terminal)", () => {
+    const { container } = renderTabs();
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(6);
+  });
+
+  it("opens a context menu", () => {
+    const { container, getByText } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    expect(getByText("Close all tabs")).toBeInTheDocument();
+  });
+
+  it("closes selected tab", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(5);
+    expect(getTabKinds()).toEqual([
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL
+    ]);
+  });
+
+  it("closes other tabs", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelectorAll(".Tab")[3];
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close other tabs");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(1);
+    expect(getTabKinds()).toEqual([TabKind.TERMINAL]);
+  });
+
+  it("closes all tabs", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close all tabs");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(0);
+  });
+
+  it("closes tabs to the right", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelectorAll(".Tab")[3];
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close tabs to the right");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(4);
+    expect(getTabKinds()).toEqual([
+      TabKind.TERMINAL,
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL
+    ]);
+  });
+});

yarn.lock

@@ -4482,7 +4482,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -5016,6 +5016,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -8423,6 +8428,14 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+jest-canvas-mock@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.0.tgz#50f4cc178ae52c4c0e2ce4fd3a3ad2a41ad4eb36"
+  integrity sha512-3TMyR66VG2MzAW8Negzec03bbcIjVJMfGNvKzrEnbws1CYKqMNkvIJ8LbkoGYfp42tKqDmhIpQq3v+MNLW2A2w==
+  dependencies:
+    cssfontparser "^1.2.1"
+    moo-color "^1.0.2"
+
 jest-changed-files@^26.0.1:
   version "26.0.1"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.0.1.tgz#1334630c6a1ad75784120f39c3aa9278e59f349f"
@@ -10168,6 +10181,13 @@ moment@^2.10.2, moment@^2.26.0:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
   integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
 
+moo-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
+  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
+  dependencies:
+    color-name "^1.1.4"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"