Test added

src/core/client/ui/components/Tabs/Tab.spec.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Tab tabId="three">Three</Tab>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

src/core/client/ui/components/Tabs/TabBar.spec.tsx

@@ -14,3 +14,21 @@ it("renders correctly", () => {
   );
   expect(renderer.toJSON()).toMatchSnapshot();
 });
+
+it("sets initial tab as active", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabId="one">One</Tab>
+      <Tab tabId="two">Two</Tab>
+      <Tab tabId="three">Three</Tab>
+    </TabBar>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabBar).props.activeTab).toBe("one");
+  const tabs = testInstance.findAllByType(Tab);
+  expect(tabs.length).toBe(3);
+  expect(tabs[0].props.active).toBe(true);
+  expect(tabs[1].props.active).toBe(false);
+  expect(tabs[2].props.active).toBe(false);
+});

src/core/client/ui/components/Tabs/TabContent.spec.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabContent from "./TabContent";
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("sets initial tab as active, renders only one", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabId="one">Hola One</TabPane>
+      <TabPane tabId="two">Hola Two</TabPane>
+      <TabPane tabId="three">Hola Three</TabPane>
+    </TabContent>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabContent).props.activeTab).toBe("one");
+  const panes = testInstance.findAllByType(TabPane);
+  expect(panes.length).toBe(1);
+});

src/core/client/ui/components/Tabs/TabPane.spec.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<TabPane tabId="three">Three</TabPane>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});

src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<li
+  aria-controls="three"
+  className="Tab-root"
+  id="three-tab"
+  onClick={[Function]}
+  role="tab"
+>
+  Three
+</li>
+`;

src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ul
+  className="TabBar-root TabBar-primary"
+  role="tablist"
+>
+  <li
+    aria-controls="one"
+    aria-selected={true}
+    className="Tab-root Tab-primary Tab-active"
+    id="one-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    One
+  </li>
+  <li
+    aria-controls="two"
+    aria-selected={false}
+    className="Tab-root Tab-primary"
+    id="two-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    Two
+  </li>
+  <li
+    aria-controls="three"
+    aria-selected={false}
+    className="Tab-root Tab-primary"
+    id="three-tab"
+    onClick={[Function]}
+    role="tab"
+  >
+    Three
+  </li>
+</ul>
+`;

src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="one-tab"
+  id="one"
+  role="tabpanel"
+>
+  Hola One
+</section>
+`;

src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="three-tab"
+  id="three"
+  role="tabpanel"
+>
+  Three
+</section>
+`;