@etus/ui 0.1.1 → 0.1.3

package/src/components/feedback/Notification/Notification.test.tsx

@@ -1,908 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { axe, toHaveNoViolations } from "jest-axe"
-import {
-  AtSign,
-  CircleX,
-  GitPullRequest,
-  Info,
-  MessageSquare,
-} from "lucide-react"
-import { describe, expect, it, vi } from "vitest"
-
-import { Notification, NotificationDismissButton } from "./Notification"
-
-expect.extend(toHaveNoViolations)
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("Notification", () => {
-  describe("Rendering", () => {
-    it("renders title correctly", () => {
-      render(<Notification title="Test Title" />)
-      expect(screen.getByText("Test Title")).toBeInTheDocument()
-    })
-
-    it("renders title and description", () => {
-      render(
-        <Notification description="Test Description" title="Test Title" />
-      )
-      expect(screen.getByText("Test Title")).toBeInTheDocument()
-      expect(screen.getByText("Test Description")).toBeInTheDocument()
-    })
-
-    it("renders timestamp", () => {
-      render(<Notification timestamp="5 min ago" title="Title" />)
-      expect(screen.getByText("5 min ago")).toBeInTheDocument()
-    })
-
-    it("renders Date timestamp", () => {
-      const date = new Date("2024-01-15T10:30:00")
-      render(<Notification timestamp={date} title="Title" />)
-      // Date will be formatted using toLocaleString
-      expect(
-        screen.getByText(date.toLocaleString())
-      ).toBeInTheDocument()
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <Notification
-          className="custom-class"
-          data-testid="notification"
-          title="Title"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveClass("custom-class")
-    })
-
-    it("renders with custom icon", () => {
-      render(
-        <Notification
-          icon={<Info data-testid="custom-icon" />}
-          title="With Icon"
-        />
-      )
-      expect(screen.getByTestId("custom-icon")).toBeInTheDocument()
-    })
-
-    it("renders avatar with avatarSrc", () => {
-      const { container } = render(
-        <Notification
-          avatarFallback="JD"
-          avatarSrc="/avatar.jpg"
-          title="Title"
-        />
-      )
-      // Avatar component renders with data-slot="avatar"
-      expect(container.querySelector('[data-slot="avatar"]')).toBeInTheDocument()
-    })
-
-    it("renders avatar fallback", () => {
-      render(<Notification avatarFallback="JD" title="Title" />)
-      expect(screen.getByText("JD")).toBeInTheDocument()
-    })
-
-    it("renders custom avatar element", () => {
-      render(
-        <Notification
-          avatar={<div data-testid="custom-avatar">Custom Avatar</div>}
-          title="Title"
-        />
-      )
-      expect(screen.getByTestId("custom-avatar")).toBeInTheDocument()
-    })
-
-    it("renders actions", () => {
-      render(
-        <Notification
-          actions={<button type="button">Accept</button>}
-          title="Title"
-        />
-      )
-      expect(screen.getByRole("button", { name: "Accept" })).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // DATA SLOT TESTS
-  // ============================================
-  describe("Data Slot Attributes", () => {
-    it("has data-slot on root", () => {
-      render(<Notification data-testid="notification" title="Title" />)
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-slot",
-        "notification"
-      )
-    })
-
-    it("has data-slot on title", () => {
-      const { container } = render(<Notification title="Title" />)
-      expect(
-        container.querySelector('[data-slot="notification-title"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on description", () => {
-      const { container } = render(
-        <Notification description="Description" title="Title" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-description"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on timestamp", () => {
-      const { container } = render(
-        <Notification timestamp="5 min" title="Title" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-timestamp"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on unread dot when unread", () => {
-      const { container } = render(
-        <Notification read={false} title="Unread" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-unread-dot"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on media container", () => {
-      const { container } = render(
-        <Notification icon={<Info />} title="Title" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-media"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on content", () => {
-      const { container } = render(<Notification title="Title" />)
-      expect(
-        container.querySelector('[data-slot="notification-content"]')
-      ).toBeInTheDocument()
-    })
-
-    it("has data-slot on actions", () => {
-      const { container } = render(
-        <Notification actions={<button type="button">Action</button>} title="Title" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-actions"]')
-      ).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // READ/UNREAD STATE TESTS
-  // ============================================
-  describe("Read/Unread State", () => {
-    it("shows unread indicator when read is false", () => {
-      const { container } = render(
-        <Notification read={false} title="Unread" />
-      )
-      expect(
-        container.querySelector('[data-slot="notification-unread-dot"]')
-      ).toBeInTheDocument()
-    })
-
-    it("hides unread indicator when read is true", () => {
-      const { container } = render(<Notification read={true} title="Read" />)
-      expect(
-        container.querySelector('[data-slot="notification-unread-dot"]')
-      ).not.toBeInTheDocument()
-    })
-
-    it("has data-unread attribute", () => {
-      const { rerender } = render(
-        <Notification data-testid="notification" read={false} title="Title" />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-unread",
-        "true"
-      )
-
-      rerender(
-        <Notification data-testid="notification" read={true} title="Title" />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-unread",
-        "false"
-      )
-    })
-
-    it("applies unread background style", () => {
-      render(
-        <Notification data-testid="notification" read={false} title="Title" />
-      )
-      expect(screen.getByTestId("notification").className).toContain(
-        "bg-[color:var(--notification-bg-unread)]/50"
-      )
-    })
-
-    it("applies read background style", () => {
-      render(
-        <Notification data-testid="notification" read={true} title="Title" />
-      )
-      expect(screen.getByTestId("notification").className).toContain(
-        "bg-[color:var(--notification-bg-read)]"
-      )
-    })
-  })
-
-  // ============================================
-  // VARIANT TESTS
-  // ============================================
-  describe("Variants", () => {
-    it("applies default variant", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Default"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-variant",
-        "default"
-      )
-    })
-
-    it("applies info variant", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Info"
-          variant="info"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-variant",
-        "info"
-      )
-    })
-
-    it("applies success variant", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Success"
-          variant="success"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-variant",
-        "success"
-      )
-    })
-
-    it("applies warning variant", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Warning"
-          variant="warning"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-variant",
-        "warning"
-      )
-    })
-
-    it("applies error variant", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Error"
-          variant="error"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "data-variant",
-        "error"
-      )
-    })
-
-    it("applies variant color to unread dot", () => {
-      const { container } = render(
-        <Notification read={false} title="Title" variant="info" />
-      )
-      const dot = container.querySelector('[data-slot="notification-unread-dot"]')
-      expect(dot?.className).toContain("bg-[color:var(--notification-dot-color-info)]")
-    })
-  })
-
-  // ============================================
-  // INTERACTION TESTS
-  // ============================================
-  describe("Interactions", () => {
-    it("calls onClick when clicked", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      render(<Notification title="Clickable" onClick={onClick} />)
-
-      await user.click(screen.getByText("Clickable"))
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it("has cursor-pointer when onClick is provided", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          title="Clickable"
-          onClick={() => {}}
-        />
-      )
-      expect(screen.getByTestId("notification").className).toContain(
-        "cursor-pointer"
-      )
-    })
-
-    it("is focusable when onClick is provided", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          title="Focusable"
-          onClick={() => {}}
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute("tabIndex", "0")
-    })
-
-    it("does not have tabIndex when not interactive", () => {
-      render(<Notification data-testid="notification" title="Not Interactive" />)
-      expect(screen.getByTestId("notification")).not.toHaveAttribute("tabIndex")
-    })
-
-    it("calls onClick on Enter key", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      render(
-        <Notification
-          data-testid="notification"
-          title="Enter"
-          onClick={onClick}
-        />
-      )
-
-      screen.getByTestId("notification").focus()
-      await user.keyboard("{Enter}")
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it("calls onClick on Space key", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      render(
-        <Notification
-          data-testid="notification"
-          title="Space"
-          onClick={onClick}
-        />
-      )
-
-      screen.getByTestId("notification").focus()
-      await user.keyboard(" ")
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it("handles Delete key when onDelete is provided", () => {
-      const onDelete = vi.fn()
-      const { container } = render(
-        <Notification
-          data-testid="notification"
-          title="Delete"
-          onDelete={onDelete}
-        />
-      )
-
-      // Verify the onDelete prop is connected (delete button works)
-      const deleteButton = container.querySelector('[data-slot="notification-delete"]')
-      expect(deleteButton).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // ACTION BUTTON TESTS
-  // ============================================
-  describe("Action Buttons", () => {
-    it("renders mark as read button when onMarkAsRead is provided and unread", async () => {
-      const user = userEvent.setup()
-      const onMarkAsRead = vi.fn()
-      render(
-        <Notification
-          read={false}
-          title="Unread"
-          onMarkAsRead={onMarkAsRead}
-        />
-      )
-
-      const button = screen.getByRole("button", { name: /mark.*read/i })
-      expect(button).toBeInTheDocument()
-
-      await user.click(button)
-      expect(onMarkAsRead).toHaveBeenCalledTimes(1)
-    })
-
-    it("hides mark as read button when already read", () => {
-      render(
-        <Notification
-          read={true}
-          title="Already Read"
-          onMarkAsRead={() => {}}
-        />
-      )
-      expect(
-        screen.queryByRole("button", { name: /mark.*read/i })
-      ).not.toBeInTheDocument()
-    })
-
-    it("renders delete button when onDelete is provided", async () => {
-      const user = userEvent.setup()
-      const onDelete = vi.fn()
-      render(<Notification title="With Delete" onDelete={onDelete} />)
-
-      const button = screen.getByRole("button", { name: /delete/i })
-      expect(button).toBeInTheDocument()
-
-      await user.click(button)
-      expect(onDelete).toHaveBeenCalledTimes(1)
-    })
-
-    it("stops propagation on mark as read click", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      const onMarkAsRead = vi.fn()
-      render(
-        <Notification
-          read={false}
-          title="Title"
-          onClick={onClick}
-          onMarkAsRead={onMarkAsRead}
-        />
-      )
-
-      await user.click(screen.getByRole("button", { name: /mark.*read/i }))
-      expect(onMarkAsRead).toHaveBeenCalledTimes(1)
-      expect(onClick).not.toHaveBeenCalled()
-    })
-
-    it("stops propagation on delete click", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      const onDelete = vi.fn()
-      render(
-        <Notification title="Title" onClick={onClick} onDelete={onDelete} />
-      )
-
-      await user.click(screen.getByRole("button", { name: /delete/i }))
-      expect(onDelete).toHaveBeenCalledTimes(1)
-      expect(onClick).not.toHaveBeenCalled()
-    })
-
-    it("hides built-in buttons when custom actions provided", () => {
-      render(
-        <Notification
-          actions={<button type="button">Custom</button>}
-          read={false}
-          title="Title"
-          onDelete={() => {}}
-          onMarkAsRead={() => {}}
-        />
-      )
-      expect(
-        screen.queryByRole("button", { name: /mark.*read/i })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole("button", { name: /delete/i })
-      ).not.toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Custom" })).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // CLASSNAME MERGING TESTS
-  // ============================================
-  describe("ClassName Merging", () => {
-    it("merges custom className", () => {
-      render(
-        <Notification
-          className="mt-4 custom-notification"
-          data-testid="notification"
-          title="Title"
-        />
-      )
-      const notification = screen.getByTestId("notification")
-      expect(notification).toHaveClass("mt-4")
-      expect(notification).toHaveClass("custom-notification")
-      expect(notification).toHaveClass("flex")
-    })
-
-    it("allows overriding padding", () => {
-      render(
-        <Notification className="p-6" data-testid="notification" title="Title" />
-      )
-      expect(screen.getByTestId("notification")).toHaveClass("p-6")
-    })
-  })
-
-  // ============================================
-  // ARIA ATTRIBUTES TESTS
-  // ============================================
-  describe("ARIA Attributes", () => {
-    it("has role=article", () => {
-      render(<Notification data-testid="notification" title="Title" />)
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "role",
-        "article"
-      )
-    })
-
-    it("has aria-label with full context", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          description="Description text"
-          read={true}
-          timestamp="5 min"
-          title="Title text"
-        />
-      )
-      expect(screen.getByTestId("notification")).toHaveAttribute(
-        "aria-label",
-        "Title text. Description text. 5 min"
-      )
-    })
-
-    it("indicates unread state in aria-label", () => {
-      render(
-        <Notification
-          data-testid="notification"
-          read={false}
-          title="Unread Notification"
-        />
-      )
-      expect(screen.getByTestId("notification").getAttribute("aria-label")).toContain(
-        "Unread:"
-      )
-    })
-
-    it("has proper time element with datetime for Date timestamps", () => {
-      const date = new Date("2024-01-15T10:30:00")
-      const { container } = render(
-        <Notification timestamp={date} title="Title" />
-      )
-      const time = container.querySelector("time")
-      expect(time).toHaveAttribute("dateTime", date.toISOString())
-    })
-  })
-
-  // ============================================
-  // EDGE CASE TESTS
-  // ============================================
-  describe("Edge Cases", () => {
-    it("renders with only title", () => {
-      render(<Notification title="Title Only" />)
-      expect(screen.getByText("Title Only")).toBeInTheDocument()
-    })
-
-    it("renders without timestamp", () => {
-      const { container } = render(<Notification title="No Timestamp" />)
-      expect(
-        container.querySelector('[data-slot="notification-timestamp"]')
-      ).not.toBeInTheDocument()
-    })
-
-    it("handles long title gracefully", () => {
-      const longTitle = "A".repeat(200)
-      render(<Notification title={longTitle} />)
-      expect(screen.getByText(longTitle)).toBeInTheDocument()
-    })
-
-    it("handles long description gracefully", () => {
-      const longDescription = "B".repeat(500)
-      render(<Notification description={longDescription} title="Title" />)
-      expect(screen.getByText(longDescription)).toBeInTheDocument()
-    })
-
-    it("prefers custom avatar over avatarSrc", () => {
-      render(
-        <Notification
-          avatar={<div data-testid="custom">Custom</div>}
-          avatarSrc="/avatar.jpg"
-          title="Title"
-        />
-      )
-      expect(screen.getByTestId("custom")).toBeInTheDocument()
-    })
-
-    it("prefers icon over avatar", () => {
-      const { container } = render(
-        <Notification
-          avatarSrc="/avatar.jpg"
-          icon={<Info data-testid="icon" />}
-          title="Title"
-        />
-      )
-      expect(screen.getByTestId("icon")).toBeInTheDocument()
-      expect(
-        container.querySelector('[data-slot="avatar"]')
-      ).not.toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // NOTIFICATIONDISMISSBUTTON TESTS
-  // ============================================
-  describe("NotificationDismissButton", () => {
-    it("renders correctly", () => {
-      render(<NotificationDismissButton data-testid="dismiss" />)
-      expect(screen.getByTestId("dismiss")).toBeInTheDocument()
-    })
-
-    it("has correct data-slot", () => {
-      render(<NotificationDismissButton data-testid="dismiss" />)
-      expect(screen.getByTestId("dismiss")).toHaveAttribute(
-        "data-slot",
-        "notification-dismiss"
-      )
-    })
-
-    it("has aria-label for accessibility", () => {
-      render(<NotificationDismissButton />)
-      expect(
-        screen.getByRole("button", { name: "Dismiss" })
-      ).toBeInTheDocument()
-    })
-
-    it("calls onClick when clicked", async () => {
-      const user = userEvent.setup()
-      const onClick = vi.fn()
-      render(<NotificationDismissButton onClick={onClick} />)
-
-      await user.click(screen.getByRole("button", { name: "Dismiss" }))
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it("merges custom className", () => {
-      render(
-        <NotificationDismissButton className="custom-class" data-testid="dismiss" />
-      )
-      expect(screen.getByTestId("dismiss")).toHaveClass("custom-class")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations with default props", async () => {
-      const { container } = render(
-        <Notification
-          description="This is a notification message."
-          title="Notification Title"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations when unread", async () => {
-      const { container } = render(
-        <Notification
-          description="Unread notification."
-          read={false}
-          timestamp="5 min ago"
-          title="Unread"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with avatar", async () => {
-      const { container } = render(
-        <Notification
-          avatarFallback="JD"
-          avatarSrc="/avatar.jpg"
-          description="User notification."
-          title="From John"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with icon", async () => {
-      const { container } = render(
-        <Notification
-          description="Info notification."
-          icon={<Info className="size-5 text-blue-500" />}
-          title="Information"
-          variant="info"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with actions", async () => {
-      const { container } = render(
-        <Notification
-          actions={
-            <div className="flex gap-2">
-              <button type="button">Accept</button>
-              <button type="button">Decline</button>
-            </div>
-          }
-          description="Team invitation."
-          title="Invite"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations when interactive", async () => {
-      const { container } = render(
-        <Notification
-          description="Click to view."
-          title="Clickable"
-          onClick={() => {}}
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all variants", async () => {
-      for (const variant of [
-        "default",
-        "info",
-        "success",
-        "warning",
-        "error",
-      ] as const) {
-        const { container } = render(
-          <Notification
-            description={`${variant} notification.`}
-            read={false}
-            title={`${variant} Title`}
-            variant={variant}
-          />
-        )
-        const results = await axe(container)
-        expect(results).toHaveNoViolations()
-      }
-    })
-
-    it("has no violations with action buttons", async () => {
-      const { container } = render(
-        <Notification
-          read={false}
-          title="With Actions"
-          onDelete={() => {}}
-          onMarkAsRead={() => {}}
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  // ============================================
-  // INTEGRATION TESTS
-  // ============================================
-  describe("Integration", () => {
-    it("renders complete notification with all features", () => {
-      render(
-        <Notification
-          avatarFallback="JD"
-          avatarSrc="/john.jpg"
-          data-testid="notification"
-          description="Great work on the new feature!"
-          read={false}
-          timestamp="10 min ago"
-          title="John commented on your PR"
-          variant="info"
-          onClick={() => {}}
-        />
-      )
-
-      expect(screen.getByTestId("notification")).toBeInTheDocument()
-      expect(screen.getByText("John commented on your PR")).toBeInTheDocument()
-      expect(
-        screen.getByText("Great work on the new feature!")
-      ).toBeInTheDocument()
-      expect(screen.getByText("10 min ago")).toBeInTheDocument()
-      expect(screen.getByText("JD")).toBeInTheDocument()
-    })
-
-    it("renders notification with custom icon and actions", () => {
-      render(
-        <Notification
-          actions={
-            <div className="flex gap-2 mt-2">
-              <button type="button">Accept</button>
-              <button type="button">Decline</button>
-            </div>
-          }
-          description="Maria invited you to join Design."
-          icon={<AtSign className="size-5 text-green-500" />}
-          timestamp="30 min"
-          title="Team Invitation"
-        />
-      )
-
-      expect(screen.getByText("Team Invitation")).toBeInTheDocument()
-      expect(
-        screen.getByText("Maria invited you to join Design.")
-      ).toBeInTheDocument()
-      expect(screen.getByRole("button", { name: "Accept" })).toBeInTheDocument()
-      expect(
-        screen.getByRole("button", { name: "Decline" })
-      ).toBeInTheDocument()
-    })
-
-    it("renders multiple notifications in a list", () => {
-      const notifications = [
-        { id: "1", title: "First", read: false },
-        { id: "2", title: "Second", read: true },
-        { id: "3", title: "Third", read: false },
-      ]
-
-      render(
-        <div>
-          {notifications.map((n) => (
-            <Notification
-              key={n.id}
-              data-testid={`notification-${n.id}`}
-              read={n.read}
-              title={n.title}
-            />
-          ))}
-        </div>
-      )
-
-      expect(screen.getByText("First")).toBeInTheDocument()
-      expect(screen.getByText("Second")).toBeInTheDocument()
-      expect(screen.getByText("Third")).toBeInTheDocument()
-      expect(screen.getAllByRole("article")).toHaveLength(3)
-    })
-
-    it("renders different notification types", () => {
-      render(
-        <div className="space-y-2">
-          <Notification
-            icon={<GitPullRequest className="size-5 text-purple-500" />}
-            title="PR Approved"
-            variant="success"
-          />
-          <Notification
-            icon={<MessageSquare className="size-5 text-blue-500" />}
-            title="New Message"
-            variant="info"
-          />
-          <Notification
-            icon={<CircleX className="size-5 text-red-500" />}
-            title="Build Failed"
-            variant="error"
-          />
-        </div>
-      )
-
-      expect(screen.getByText("PR Approved")).toBeInTheDocument()
-      expect(screen.getByText("New Message")).toBeInTheDocument()
-      expect(screen.getByText("Build Failed")).toBeInTheDocument()
-    })
-  })
-})