adding tests

GetJobber · Nov 18, 2024 · 7acd643 · 7acd643
1 parent 31334cb
commit 7acd643
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 28 deletions.
diff --git a/docs/components/Tabs/Web.stories.tsx b/docs/components/Tabs/Web.stories.tsx
@@ -1,7 +1,10 @@
 import React, { useState } from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Tab, Tabs } from "@jobber/components/Tabs";
-import { Heading } from "@jobber/components/Heading";
+import { InlineLabel } from "@jobber/components/InlineLabel";
+import { Typography } from "@jobber/components/Typography";
+import { Icon } from "@jobber/components/Icon";
+import { StatusIndicator } from "@jobber/components/StatusIndicator";
 
 export default {
   title: "Components/Navigation/Tabs/Web",
@@ -87,26 +90,50 @@ const WithTabChangeCallbackTemplate: ComponentStory<typeof Tabs> = args => {
   );
 };
 
-const WithCustomRenderingTemplate: ComponentStory<typeof Tabs> = args => {
+const WithCustomReactNodeTemplate: ComponentStory<typeof Tabs> = args => {
   const [tab, setTab] = useState(args.defaultTab ?? 0);
 
-  console.log("****", typeof args.customRenderItem);
-
   return (
     <div>
       <p>Active tab index: {tab}</p>
       <Tabs onTabChange={setTab}>
-        <Tab {...args}>
-          🍳 Some eggs are laid by female animals of many different species,
-          including birds, reptiles, amphibians, mammals, and fish, and have
-          been eaten by humans for thousands of years.
+        <Tab
+          label={
+            <div>
+              <Typography element={"span"} fontWeight={"semiBold"}>
+                Inline Label
+              </Typography>
+              <InlineLabel color="red">{"+99"}</InlineLabel>
+            </div>
+          }
+        >
+          Pass a custom react node to customize your label!
         </Tab>
-        <Tab label="Cheese">
+        <Tab
+          label={
+            <div>
+              <Icon name={"happyFace"} />
+              <Typography element={"span"} fontWeight={"semiBold"}>
+                Icons
+              </Typography>
+              <Icon name={"thumbsUp"} />
+            </div>
+          }
+        >
           🧀 Cheese is a dairy product derived from milk that is produced in a
           wide range of flavors, textures, and forms by coagulation of the milk
           protein casein.
         </Tab>
-        <Tab label="Berries">
+        <Tab
+          label={
+            <div>
+              <Typography element={"span"} fontWeight={"semiBold"}>
+                Status Label
+              </Typography>
+              <StatusIndicator status={"informative"} />
+            </div>
+          }
+        >
           🍓 A berry is a small, pulpy, and often edible fruit. Typically,
           berries are juicy, rounded, brightly colored, sweet, sour or tart, and
           do not have a stone or pit.
@@ -119,7 +146,7 @@ const WithCustomRenderingTemplate: ComponentStory<typeof Tabs> = args => {
 export const Basic = BasicTemplate.bind({});
 export const WithDefaultTab = WithDefaultTabTemplate.bind({});
 export const WithTabChangeCallback = WithTabChangeCallbackTemplate.bind({});
-export const WithCustomRendering = WithCustomRenderingTemplate.bind({});
+export const WithCustomReactNode = WithCustomReactNodeTemplate.bind({});
 
 Basic.args = {
   label: "Eggs",
@@ -133,6 +160,4 @@ WithTabChangeCallback.args = {
   defaultTab: 1,
 };
 
-WithCustomRendering.args = {
-  renderCustomItem: () => <Heading level={4}>TEST CUSTOM</Heading>,
-};
+WithCustomReactNode.args = {};
diff --git a/packages/components/src/Tabs/Tabs.test.tsx b/packages/components/src/Tabs/Tabs.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render } from "@testing-library/react";
+import { InlineLabel } from "@jobber/components/InlineLabel";
 import { Tab, Tabs } from ".";
 
 let count = 0;
@@ -15,6 +16,14 @@ const omelet = (
   </Tabs>
 );
 
+const omeletWithReactNodeLabel = (
+  <Tabs>
+    <Tab label={<InlineLabel color="red">{"Bacon"}</InlineLabel>}>
+      <p>Eggs</p>
+    </Tab>
+  </Tabs>
+);
+
 const originalClientWidth = Object.getOwnPropertyDescriptor(
   HTMLElement.prototype,
   "clientWidth",
@@ -30,6 +39,11 @@ describe("Tabs", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("displays the label when it is a ReactNode", () => {
+    const { container } = render(omeletWithReactNodeLabel);
+    expect(container).toMatchSnapshot();
+  });
+
   it("should switch tabs", () => {
     const { getByText, queryByText } = render(omelet);
 

diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx
@@ -61,7 +61,6 @@ export function Tabs({ children, defaultTab = 0, onTabChange }: TabsProps) {
               selected={activeTab === index}
               activateTab={activateTab(index)}
               onClick={tab.props.onClick}
-              customRenderItem={tab.props.customRenderItem}
             />
           ))}
         </ul>
@@ -78,9 +77,8 @@ export function Tabs({ children, defaultTab = 0, onTabChange }: TabsProps) {
 }
 
 interface TabProps {
-  readonly label: string;
+  readonly label: string | ReactNode;
   readonly children: ReactNode | ReactNode[];
-  readonly customRenderItem?: (item: T) => React.ReactNode;
 
   onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 }
@@ -90,9 +88,8 @@ export function Tab({ label }: TabProps) {
 }
 
 interface InternalTabProps {
-  readonly label: string;
+  readonly label: string | ReactNode;
   readonly selected: boolean;
-  readonly customRenderItem?: (item: T) => React.ReactNode;
   activateTab(): void;
   onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 }
@@ -101,33 +98,29 @@ export function InternalTab({
   label,
   selected,
   activateTab,
-  customRenderItem,
   onClick = () => {
     return;
   },
 }: InternalTabProps) {
   const className = classnames(styles.tab, { [styles.selected]: selected });
 
-  console.log("***** customRenderItem", customRenderItem);
-
   return (
     <li role="presentation">
       <button
         type="button"
         role="tab"
-        id={label}
         className={className}
         onClick={event => {
           activateTab();
           onClick(event);
         }}
       >
-        {customRenderItem ? (
-          customRenderItem
-        ) : (
+        {typeof label === "string" ? (
           <Typography element="span" size="large" fontWeight="semiBold">
             {label}
           </Typography>
+        ) : (
+          label
         )}
       </button>
     </li>

diff --git a/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tabs displays the label when it is a ReactNode 1`] = `
+<div>
+  <div
+    class="tabs"
+  >
+    <div
+      class="overflow"
+    >
+      <ul
+        class="tabRow"
+        role="tablist"
+      >
+        <li
+          role="presentation"
+        >
+          <button
+            class="tab selected"
+            role="tab"
+            type="button"
+          >
+            <span
+              class="inlineLabel base red"
+            >
+              <span
+                class="base regular small"
+              >
+                Bacon
+              </span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+    <section
+      aria-label="[object Object]"
+      class="tabContent"
+      role="tabpanel"
+    >
+      <p>
+        Eggs
+      </p>
+    </section>
+  </div>
+</div>
+`;
+
 exports[`Tabs renders Tabs 1`] = `
 <div>
   <div
@@ -17,7 +63,6 @@ exports[`Tabs renders Tabs 1`] = `
         >
           <button
             class="tab selected"
-            id="Eggs"
             role="tab"
             type="button"
           >
@@ -33,7 +78,6 @@ exports[`Tabs renders Tabs 1`] = `
         >
           <button
             class="tab"
-            id="Cheese"
             role="tab"
             type="button"
           >