add Tabs keyboard unit tests

src/components/Tabs/Tabs.test.tsx

@@ -1,6 +1,119 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { TabsItem } from "../TabsItem/TabsItem";
 import { baselineComponent } from "../../testing/utils";
 import { Tabs } from "./Tabs";
+import { useState } from "react";
+
+function TestTabs() {
+  const [currentTab, setCurrentTab] = useState("first");
+
+  return (
+    <Tabs>
+      <TabsItem
+        id="tab-first"
+        data-testid="first"
+        selected={currentTab === "first"}
+        onClick={() => setCurrentTab("first")}
+        aria-controls="tab-content-first"
+      >
+        First
+      </TabsItem>
+      <TabsItem
+        id="tab-second"
+        data-testid="second"
+        aria-controls="tab-content-second"
+        onClick={() => setCurrentTab("second")}
+        selected={currentTab === "second"}
+      >
+        Second
+      </TabsItem>
+      <TabsItem
+        id="tab-third"
+        data-testid="third"
+        aria-controls="tab-content-third"
+        onClick={() => setCurrentTab("third")}
+        selected={currentTab === "third"}
+      >
+        Third
+      </TabsItem>
+    </Tabs>
+  );
+}
+
+function renderTestTabs() {
+  render(<TestTabs />);
+  screen.getByTestId("first").focus();
+}
+
+function pressKey(key: Key) {
+  if (!document.activeElement) {
+    return;
+  }
+
+  fireEvent.keyDown(document.activeElement, {
+    key,
+  });
+}
 
 describe("Tabs", () => {
   baselineComponent(Tabs);
+
+  describe("Keyboard handlers", () => {
+    it("doesn't focus previous element when first focused", () => {
+      renderTestTabs();
+      screen.getByTestId("first").focus();
+      pressKey("ArrowLeft");
+      expect(document.activeElement).toEqual(screen.getByTestId("first"));
+    });
+    it("doesn't focus next element when last focused", () => {
+      renderTestTabs();
+      screen.getByTestId("third").focus();
+      pressKey("ArrowRight");
+      expect(document.activeElement).toEqual(screen.getByTestId("third"));
+    });
+    it("focus next element with ArrowRight key", () => {
+      renderTestTabs();
+      screen.getByTestId("second").focus();
+      pressKey("ArrowRight");
+      expect(document.activeElement).toEqual(screen.getByTestId("third"));
+    });
+    it("focus previuos element with ArrowLeft key", () => {
+      renderTestTabs();
+      screen.getByTestId("second").focus();
+      pressKey("ArrowLeft");
+      expect(document.activeElement).toEqual(screen.getByTestId("first"));
+    });
+    it("focus first element with Home key", () => {
+      renderTestTabs();
+      screen.getByTestId("third").focus();
+      pressKey("Home");
+      expect(document.activeElement).toEqual(screen.getByTestId("first"));
+    });
+    it("focus last element with End key", () => {
+      renderTestTabs();
+      screen.getByTestId("first").focus();
+      pressKey("End");
+      expect(document.activeElement).toEqual(screen.getByTestId("third"));
+    });
+    it("select element with Space key", () => {
+      renderTestTabs();
+      screen.getByTestId("first").focus();
+      pressKey("ArrowRight");
+      pressKey("Space");
+      expect(document.activeElement).toEqual(screen.getByTestId("second"));
+      expect(
+        screen.getByTestId("second").getAttribute("aria-selected")
+      ).toEqual("true");
+    });
+    it("select element with Enter key", () => {
+      renderTestTabs();
+      screen.getByTestId("first").focus();
+      pressKey("ArrowRight");
+      pressKey("Enter");
+      expect(document.activeElement).toEqual(screen.getByTestId("second"));
+      expect(
+        screen.getByTestId("second").getAttribute("aria-selected")
+      ).toEqual("true");
+    });
+  });
 });