Unit tests

src/components/TagBadge/TagBadge.tsx

@@ -24,7 +24,7 @@ export function TagBadge({
     : backgroundColor;
 
   return (
-    <span
+    <div
       className={styles.tagBadge}
       style={{
         borderColor,
@@ -35,6 +35,6 @@ export function TagBadge({
     >
       <span className={styles.icon}>{icon}</span>
       <span>{label}</span>
-    </span>
+    </div>
   );
 }

src/features/Search/Search.tsx

@@ -61,7 +61,7 @@ export function Search({ tags }: SearchProps) {
       setProjects((prev) =>
         pageToFetch === 1 || reset
           ? (data.results ?? [])
-          : [...prev, ...(data.results ?? [])],
+          : [...prev, ...(data.results ?? [])]
       );
 
       setHasMore((data.results?.length ?? 0) >= 20);
@@ -99,7 +99,7 @@ export function Search({ tags }: SearchProps) {
     setSelectedTagIds((prev) =>
       prev.includes(tag.id)
         ? prev.filter((id) => id !== tag.id)
-        : [...prev, tag.id],
+        : [...prev, tag.id]
     );
   };
 

src/features/Search/TagList/TagList.test.tsx

@@ -0,0 +1,75 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TagList } from "./TagList";
+
+export interface Tag {
+  id: string;
+  label: string;
+  lucideIcon: string;
+  borderColor: string;
+  backgroundColor: string;
+}
+
+const mockTagLabel = "Atom";
+const secondTagLabel = "Beta";
+const mockTag = {
+  id: "atom",
+  label: mockTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+const secondTag = {
+  id: "beta",
+  label: secondTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+
+describe("TagList", () => {
+  it("hides tags", () => {
+    render(
+      <TagList tags={[mockTag]} onTagClick={() => {}} selectedTagIds={[]} />
+    );
+    expect(screen.getByText(mockTagLabel)).toBeInTheDocument();
+  });
+  it("test click event", () => {
+    const mockClick = jest.fn();
+    render(
+      <TagList tags={[mockTag]} onTagClick={mockClick} selectedTagIds={[]} />
+    );
+    const tag = screen.getByText("Atom");
+    fireEvent.click(tag);
+    expect(mockClick).toHaveBeenCalledWith(mockTag);
+    expect(mockClick).toHaveBeenCalledTimes(1);
+  });
+  it("will hide 13th element after clicking show less", () => {
+    const mockClick = jest.fn();
+    const tags = Array(13).fill(mockTag);
+    tags.push(secondTag);
+    render(<TagList tags={tags} onTagClick={mockClick} selectedTagIds={[]} />);
+    const showLessButton = screen.getByText("Show Less");
+    fireEvent.click(showLessButton);
+    const tag = screen.queryByText(secondTagLabel);
+    expect(tag).toBeNull();
+  });
+  it("Pressing show more button to show the tags", () => {
+    const mockClick = jest.fn();
+    const tags = Array(13).fill(mockTag);
+    tags.push(secondTag);
+    const { container } = render(
+      <TagList tags={tags} onTagClick={mockClick} selectedTagIds={[]} />
+    );
+    const showLessButton = screen.getByText("Show Less");
+    fireEvent.click(showLessButton);
+
+    const string = container.firstChild?.textContent;
+    expect(string).toContain("Show More");
+
+    const showMoreButton = screen.getByText("Show More (2)");
+    fireEvent.click(showMoreButton);
+    const str = container.firstChild?.textContent;
+    expect(str).toContain("Show Less");
+  });
+});

src/features/Search/TagList/TagList.tsx

@@ -69,9 +69,9 @@ export function TagList({ tags, selectedTagIds, onTagClick }: TagListProps) {
   return (
     <div className={styles.tagContainer}>
       <div className={styles.tagList}>
-        {visibleTags.map((tag) => (
+        {visibleTags.map((tag, i) => (
           <TagBadge
-            key={tag.id}
+            key={`${tag.id}-${i}`}
             label={tag.label}
             borderColor={tag.borderColor}
             backgroundColor={tag.backgroundColor}