test: update snapshot and fix hidden class assertion

Author: Sahilshrma31

src/components/Dropdown/Dropdown.test.jsx

@@ -13,7 +13,7 @@ const items = [
 ];
 
 function getListWrapper(container) {
-  return container.querySelector("ul").closest("div").className;
+  return container.querySelector("ul").closest("div");
 }
 
 describe("Dropdown", () => {
@@ -30,15 +30,15 @@ describe("Dropdown", () => {
 
   it("hides the dropdown by default", () => {
     const { container } = render(<Dropdown items={items} />);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("shows the dropdown on hover", () => {
     const { container } = render(<Dropdown items={items} />);
     const nav = container.querySelector("nav");
 
     fireEvent.mouseOver(nav);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
   });
 
   it("hides the dropdown on mouse leave", () => {
@@ -47,18 +47,18 @@ describe("Dropdown", () => {
 
     fireEvent.mouseOver(nav);
     fireEvent.mouseLeave(nav);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("toggles dropdown on button click", () => {
     const { container } = render(<Dropdown items={items} />);
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("sets aria-expanded correctly", () => {
@@ -82,29 +82,29 @@ describe("Dropdown", () => {
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     act(() => {
       document.dispatchEvent(
         new KeyboardEvent("keyup", { key: "Escape", bubbles: true }),
       );
     });
 
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("closes when clicking outside", () => {
     const { container } = render(<Dropdown items={items} />);
     const button = screen.getByRole("button", { name: /select language/i });
 
     fireEvent.click(button);
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     act(() => {
       document.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(getListWrapper(container)).toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(true);
   });
 
   it("does not close dropdown when arrow keys are pressed", () => {
@@ -114,10 +114,10 @@ describe("Dropdown", () => {
 
     const links = screen.getAllByRole("link");
     fireEvent.keyDown(links[0], { key: "ArrowDown" });
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
 
     fireEvent.keyDown(links[links.length - 1], { key: "ArrowDown" });
-    expect(getListWrapper(container)).not.toContain("hidden");
+    expect(getListWrapper(container).classList.contains("hidden")).toBe(false);
   });
 
   it("matches snapshot", () => {

src/components/Dropdown/__snapshots__/Dropdown.test.jsx.snap

@@ -51,16 +51,14 @@ exports[`Dropdown matches snapshot 1`] = `
     />
   </button>
   <div
-    class="hidden absolute top-full right-0 text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]"
+    class="hidden absolute top-full left-1/2 -translate-x-1/2 overflow-hidden text-[13px] bg-[#526b78] rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.4)] z-[9999]"
   >
-    <ul
-      class="pt-1"
-    >
+    <ul>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/en/"
         >
           <span
@@ -72,10 +70,10 @@ exports[`Dropdown matches snapshot 1`] = `
         </a>
       </li>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/fr/"
         >
           <span
@@ -87,10 +85,10 @@ exports[`Dropdown matches snapshot 1`] = `
         </a>
       </li>
       <li
-        class="py-1 px-2 list-none text-white transition-all duration-[250ms] hover:bg-[#175d96]"
+        class="list-none"
       >
         <a
-          class="px-5 block text-white visited:text-white hover:text-white"
+          class="block min-w-[88px] px-3 py-1 text-center text-white transition-colors duration-[200ms] visited:text-white hover:bg-[#175d96] hover:text-white focus:bg-[#175d96] focus:text-white"
           href="/es/"
         >
           <span