+vi.mock('@/pages/social/messages/ModalNewMessageBody', () => ({
+ default: ({ onClose }: { onClose: () => void }) => (
+
),
-}));
+}))
+
+import MessagingHeader from '../MessagingHeader'
+
+describe('MessagingHeader', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('renders the messaging-header container', () => {
+ render(
)
+ expect(screen.getByTestId('messaging-header')).toBeInTheDocument()
+ })
-const renderHeader = () =>
- render(
-
)
+ expect(screen.getByText('Messages')).toBeInTheDocument()
+ })
-describe("MessagingHeader", () => {
- it("renders the Messages heading", () => {
- renderHeader();
- expect(
- screen.getByRole("heading", { name: /messages/i })
- ).toBeInTheDocument();
- });
+ it('renders the New button', () => {
+ render(
)
+ expect(screen.getByTestId('new-message-button')).toBeInTheDocument()
+ })
- it("renders the New button", () => {
- renderHeader();
- expect(screen.getByRole("button", { name: /new/i })).toBeInTheDocument();
- });
+ it('does not show modal initially', () => {
+ render(
)
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ })
+ })
- it("does not show modal initially", () => {
- renderHeader();
- expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
- });
+ describe('interactions', () => {
+ it('opens the modal when New button is clicked', async () => {
+ render(
)
+ await userEvent.click(screen.getByTestId('new-message-button'))
+ expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument()
+ })
- it("opens the modal when New is clicked", async () => {
- renderHeader();
- await userEvent.click(screen.getByRole("button", { name: /new/i }));
- expect(await screen.findByTestId("modal")).toBeInTheDocument();
- });
+ it('renders ModalNewMessageBody inside the modal', async () => {
+ render(
)
+ await userEvent.click(screen.getByTestId('new-message-button'))
+ expect(screen.getByTestId('modal-new-message-body')).toBeInTheDocument()
+ })
- it("renders ModalNewMessageBody inside the modal", async () => {
- renderHeader();
- await userEvent.click(screen.getByRole("button", { name: /new/i }));
- expect(await screen.findByTestId("new-message-body")).toBeInTheDocument();
- });
+ it('closes the modal when modal close button is clicked', async () => {
+ render(
)
+ await userEvent.click(screen.getByTestId('new-message-button'))
+ expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument()
+ await userEvent.click(screen.getByTestId('modal-close-button'))
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ })
- it("closes the modal when onClose is called from Modal", async () => {
- renderHeader();
- await userEvent.click(screen.getByRole("button", { name: /new/i }));
- await userEvent.click(await screen.findByText("Close modal"));
- expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
- });
+ it('closes the modal when onClose is called from ModalNewMessageBody', async () => {
+ render(
)
+ await userEvent.click(screen.getByTestId('new-message-button'))
+ await userEvent.click(screen.getByText('Close Modal'))
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ })
- it("closes the modal when onClose is called from ModalNewMessageBody", async () => {
- renderHeader();
- await userEvent.click(screen.getByRole("button", { name: /new/i }));
- await userEvent.click(await screen.findByText("Close body"));
- expect(screen.queryByTestId("modal")).not.toBeInTheDocument();
- });
-});
\ No newline at end of file
+ it('accepts optional onConversationCreated prop without crashing', () => {
+ const onCreated = vi.fn()
+ render(
)
+ expect(screen.getByTestId('messaging-header')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/components/MessagingComponents/tests/MiniPlayer.test.tsx b/src/components/MessagingComponents/tests/MiniPlayer.test.tsx
new file mode 100644
index 00000000..9cf2a502
--- /dev/null
+++ b/src/components/MessagingComponents/tests/MiniPlayer.test.tsx
@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+vi.mock('@/components/UI/CoverImage', () => ({
+ default: ({ src, alt, className }: { src: string | null; alt: string; className?: string }) => (
+
+ ),
+}))
+
+import MiniPlayer from '../MiniPlayer'
+
+describe('MiniPlayer', () => {
+ const defaultProps = {
+ coverImage: 'https://example.com/cover.jpg',
+ trackName: 'My Track',
+ artistName: 'My Artist',
+ onClose: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('renders the mini-player container', () => {
+ render(
)
+ expect(screen.getByTestId('mini-player')).toBeInTheDocument()
+ })
+
+ it('renders the track name', () => {
+ render(
)
+ expect(screen.getByText('Cool Song')).toBeInTheDocument()
+ })
+
+ it('renders the artist name', () => {
+ render(
)
+ expect(screen.getByText('Cool Artist')).toBeInTheDocument()
+ })
+
+ it('renders the close button', () => {
+ render(
)
+ expect(screen.getByTestId('mini-player-close')).toBeInTheDocument()
+ })
+
+ it('renders CoverImage with correct src', () => {
+ render(
)
+ expect(screen.getByTestId('cover-image')).toHaveAttribute('src', 'https://img.com/art.jpg')
+ })
+
+ it('renders CoverImage without crashing when coverImage is null', () => {
+ render(
)
+ expect(screen.getByTestId('cover-image')).toBeInTheDocument()
+ })
+
+ it('renders CoverImage with correct alt text', () => {
+ render(
)
+ expect(screen.getByTestId('cover-image')).toHaveAttribute('alt', 'My Song')
+ })
+
+ it('renders the dot separator between track name and artist', () => {
+ render(
)
+ expect(screen.getByText('·')).toBeInTheDocument()
+ })
+ })
+
+ describe('interactions', () => {
+ it('calls onClose when close button is clicked', async () => {
+ const onClose = vi.fn()
+ render(
)
+ await userEvent.click(screen.getByTestId('mini-player-close'))
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('calls onClose exactly once per click', async () => {
+ const onClose = vi.fn()
+ render(
)
+ await userEvent.click(screen.getByTestId('mini-player-close'))
+ await userEvent.click(screen.getByTestId('mini-player-close'))
+ expect(onClose).toHaveBeenCalledTimes(2)
+ })
+ })
+
+ describe('edge cases', () => {
+ it('renders with empty strings for track and artist names', () => {
+ render(
)
+ expect(screen.getByTestId('mini-player')).toBeInTheDocument()
+ })
+
+ it('renders long track names without crashing', () => {
+ render(
)
+ expect(screen.getByTestId('mini-player')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/components/MessagingComponents/tests/Modal.test.tsx b/src/components/MessagingComponents/tests/Modal.test.tsx
index fdc67201..0dc86572 100644
--- a/src/components/MessagingComponents/tests/Modal.test.tsx
+++ b/src/components/MessagingComponents/tests/Modal.test.tsx
@@ -1,115 +1,111 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Modal } from "../Modal";
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Modal } from '../Modal'
-const renderModal = (props: Partial
> = {}) =>
- render(
-
- Modal content
-
- );
-
-describe("Modal", () => {
+describe('Modal', () => {
beforeEach(() => {
- vi.clearAllMocks();
- });
-
- // ── Rendering ──────────────────────────────────────────────────────────────
-
- it("renders the backdrop when isOpen is true", () => {
- renderModal();
- expect(screen.getByTestId("modal-backdrop")).toBeInTheDocument();
- });
-
- it("does not render when isOpen is false", () => {
- renderModal({ isOpen: false });
- expect(screen.queryByTestId("modal-backdrop")).not.toBeInTheDocument();
- });
-
- it("renders children inside the modal", () => {
- renderModal();
- expect(screen.getByText("Modal content")).toBeInTheDocument();
- });
-
- it("renders the close button", () => {
- renderModal();
- expect(screen.getByTestId("modal-close-button")).toBeInTheDocument();
- });
-
- // ── Closing behaviour ──────────────────────────────────────────────────────
-
- it("calls onClose when the close button is clicked", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ onClose });
- await user.click(screen.getByTestId("modal-close-button"));
- expect(onClose).toHaveBeenCalledTimes(1);
- });
-
- it("calls onClose when the backdrop is clicked", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ onClose });
- await user.click(screen.getByTestId("modal-backdrop"));
- expect(onClose).toHaveBeenCalledTimes(1);
- });
-
- it("does not call onClose when the modal content area is clicked", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ onClose });
- await user.click(screen.getByText("Modal content"));
- expect(onClose).not.toHaveBeenCalled();
- });
-
- // ── Escape key ─────────────────────────────────────────────────────────────
-
- it("calls onClose when Escape is pressed and modal is open", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ isOpen: true, onClose });
- await user.keyboard("{Escape}");
- expect(onClose).toHaveBeenCalledTimes(1);
- });
-
- it("does not call onClose when Escape is pressed and modal is closed", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ isOpen: false, onClose });
- await user.keyboard("{Escape}");
- expect(onClose).not.toHaveBeenCalled();
- });
-
- it("does not call onClose when a non-Escape key is pressed", async () => {
- const user = userEvent.setup();
- const onClose = vi.fn();
- renderModal({ isOpen: true, onClose });
- await user.keyboard("{Enter}");
- expect(onClose).not.toHaveBeenCalled();
- });
-
- // ── Event listener lifecycle ───────────────────────────────────────────────
-
- it("removes the keydown listener when modal closes", () => {
- const removeEventListener = vi.spyOn(document, "removeEventListener");
- const { rerender } = renderModal({ isOpen: true });
- rerender(
-
- Modal content
-
- );
- expect(removeEventListener).toHaveBeenCalledWith("keydown", expect.any(Function));
- });
-
- it("removes the keydown listener on unmount", () => {
- const removeEventListener = vi.spyOn(document, "removeEventListener");
- const { unmount } = renderModal({ isOpen: true });
- unmount();
- expect(removeEventListener).toHaveBeenCalledWith("keydown", expect.any(Function));
- });
-});
\ No newline at end of file
+ vi.clearAllMocks()
+ })
+
+ describe('rendering', () => {
+ it('renders nothing when isOpen is false', () => {
+ render(Content
)
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ })
+
+ it('renders the backdrop when isOpen is true', () => {
+ render(Content
)
+ expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument()
+ })
+
+ it('renders children when open', () => {
+ render(Hello
)
+ expect(screen.getByTestId('child')).toBeInTheDocument()
+ })
+
+ it('renders the close button when open', () => {
+ render(Content
)
+ expect(screen.getByTestId('modal-close-button')).toBeInTheDocument()
+ })
+
+ it('renders into document.body via portal', () => {
+ render(Content
)
+ expect(document.body.contains(screen.getByTestId('modal-backdrop'))).toBe(true)
+ })
+ })
+
+ describe('interactions', () => {
+ it('calls onClose when close button is clicked', async () => {
+ const onClose = vi.fn()
+ render(Content
)
+ await userEvent.click(screen.getByTestId('modal-close-button'))
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('calls onClose when Escape key is pressed', () => {
+ const onClose = vi.fn()
+ render(Content
)
+ fireEvent.keyDown(document, { key: 'Escape' })
+ expect(onClose).toHaveBeenCalledTimes(1)
+ })
+
+ it('does not call onClose on other key presses', () => {
+ const onClose = vi.fn()
+ render(Content
)
+ fireEvent.keyDown(document, { key: 'Enter' })
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('does not attach keydown listener when isOpen is false', () => {
+ const onClose = vi.fn()
+ render(Content
)
+ fireEvent.keyDown(document, { key: 'Escape' })
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('removes keydown listener when closed', () => {
+ const onClose = vi.fn()
+ const { rerender } = render(Content
)
+ rerender(Content
)
+ fireEvent.keyDown(document, { key: 'Escape' })
+ expect(onClose).not.toHaveBeenCalled()
+ })
+
+ it('backdrop click stops propagation (does not bubble to parent)', () => {
+ const outerClick = vi.fn()
+ render(
+
+ )
+ fireEvent.click(screen.getByTestId('modal-backdrop'))
+ expect(outerClick).not.toHaveBeenCalled()
+ })
+
+ it('clicking the backdrop does not close the modal', () => {
+ const onClose = vi.fn()
+ render(Content
)
+ fireEvent.click(screen.getByTestId('modal-backdrop'))
+ expect(onClose).not.toHaveBeenCalled()
+ })
+ })
+
+ describe('lifecycle', () => {
+ it('re-renders correctly when isOpen changes from false to true', () => {
+ const onClose = vi.fn()
+ const { rerender } = render(Content
)
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ rerender(Content
)
+ expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument()
+ })
+
+ it('re-renders correctly when isOpen changes from true to false', () => {
+ const onClose = vi.fn()
+ const { rerender } = render(Content
)
+ expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument()
+ rerender(Content
)
+ expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx b/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx
index d1152c2e..4e71af58 100644
--- a/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx
+++ b/src/components/MessagingComponents/tests/ModalNewMessageBody.test.tsx
@@ -1,270 +1,862 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
-import ModalNewMessageBody from "@/pages/social/messages/ModalNewMessageBody";
-
-// ── Module mocks ───────────────────────────────────────────────────────────────
-//
-// NOTE: this project sets testIdAttribute: "data-test" in its Testing Library
-// config, so getByTestId() queries for data-test (not the default data-testid).
-// All attributes in the mocks below use data-test to match that convention.
-
-vi.mock("@/services/api/messaging/conversationApi", () => ({
- startConversation: vi.fn(),
- sendMessage: vi.fn(),
-}));
-
-vi.mock("@/components/MessagingComponents/MessageBox", () => ({
- MessageBox: ({
- onValueChange,
- onSubmit,
- hasError,
- }: {
- onValueChange: (v: string) => void;
- onIsEmptyChange: (empty: boolean) => void;
- onEmbedsResolved: (embeds: unknown[]) => void;
- onSubmit?: () => void;
- hasError?: boolean;
- }) => (
-
-