component/dropdown tests added

package.json

@@ -8,7 +8,7 @@
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint ./src --fix",
     "prepare": "husky install",
-    "test": "jest -u",
+    "test": "jest -u --silent",
     "coverage": "jest --coverage"
   },
   "engines": {

src/components/dropdown/__test__/__snapshots__/dropdown.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/dropdown should render a dropdown 1`] = `[Function]`;

src/components/dropdown/__test__/dropdown.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import React from "react";
+import Dropdown from "../dropdown";
+
+describe("components/dropdown", () => {
+  it("should render a dropdown", () => {
+    const { asFragment } = render(
+      <Dropdown
+        data={[
+          {
+            label: "💼 News and Media",
+            value: "category-1",
+          },
+          {
+            label: "🦊 NPM Packages",
+            value: "category-2",
+          },
+          {
+            label: "👛 Case Studies",
+            value: "category-3",
+          },
+        ]}
+      />,
+    );
+    const primaryButton = screen.getByTestId("folio-dropdown");
+
+    expect(primaryButton).toHaveClass("folio-dropdown");
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("dropdown should be closed by defult", () => {
+    render(
+      <Dropdown
+        data={[
+          {
+            label: "💼 News and Media",
+            value: "category-1",
+          },
+          {
+            label: "🦊 NPM Packages",
+            value: "category-2",
+          },
+          {
+            label: "👛 Case Studies",
+            value: "category-3",
+          },
+        ]}
+      />,
+    );
+
+    const dropdownTitle = screen.getByTestId("folio-dropdown--title");
+
+    expect(dropdownTitle).toHaveTextContent("Select Category");
+  });
+
+  it("dropdown should be opened when clicked", () => {
+    render(
+      <Dropdown
+        data={[
+          {
+            label: "💼 News and Media",
+            value: "category-1",
+          },
+          {
+            label: "🦊 NPM Packages",
+            value: "category-2",
+          },
+          {
+            label: "👛 Case Studies",
+            value: "category-3",
+          },
+        ]}
+      />,
+    );
+
+    const dropdownTitle = screen.getByTestId("folio-dropdown--title");
+
+    fireEvent.click(dropdownTitle);
+
+    expect(dropdownTitle).toHaveTextContent("Select Category");
+
+    const dropdownItem = screen.getByTestId("folio-dropdown--item-1");
+    expect(dropdownItem).toHaveTextContent("💼 News and Media");
+
+    const dropdownItem2 = screen.getByTestId("folio-dropdown--item-2");
+
+    expect(dropdownItem2).toHaveTextContent("🦊 NPM Packages");
+
+    const dropdownItem3 = screen.getByTestId("folio-dropdown--item-3");
+
+    expect(dropdownItem3).toHaveTextContent("👛 Case Studies");
+  });
+});

src/components/dropdown/dropdown.tsx

@@ -15,20 +15,34 @@ export type DropdownData = {
 const Dropdown: React.FC<DropdownProps> = (props) => {
   const [dropdownItems, setDropdownItems] = useState<DropdownData[]>([]);
   const [selectedItem, setSeltectedItem] = useState<DropdownData | null>(null);
+
   const styles = classnames.default("folio-dropdown");
 
   const openOrCloseDropdownMenu = (data: DropdownData[]) => {
     if (dropdownItems.length > 0) {
       setDropdownItems([]);
     } else {
-      setDropdownItems(data);
+      const dataCopy = [...data];
+      if (selectedItem) {
+        const index = data.findIndex(
+          (item: DropdownData) => item.value === selectedItem.value,
+        );
+        dataCopy.splice(index, 1);
+        setDropdownItems(dataCopy);
+      } else {
+        setDropdownItems(data);
+      }
     }
   };
 
   const { data, value, customStyles } = props;
 
   return (
-    <div style={{ ...customStyles }} className={styles}>
+    <div
+      data-testid="folio-dropdown"
+      style={{ ...customStyles }}
+      className={styles}
+    >
       <div
         style={{
           border: dropdownItems.length > 0 ? "1px dashed #7e8c9a" : "",
@@ -38,16 +52,18 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
         <span
           role="presentation"
           className="folio-dropdown_title"
+          data-testid="folio-dropdown--title"
           onKeyDown={() => openOrCloseDropdownMenu(data)}
           onClick={() => openOrCloseDropdownMenu(data)}
         >
           {selectedItem ? selectedItem.label : "Select Category"}
         </span>
-        {dropdownItems.map((item: DropdownData) => (
+        {dropdownItems.map((item: DropdownData, index) => (
           // eslint-disable-next-line react/jsx-key
           <div
             role="presentation"
             className="folio-dropdown_item"
+            data-testid={`folio-dropdown--item-${index + 1}`}
             onClick={() => {
               if (value) {
                 value(item.value);