discussion.test.tsx

import { useParams as useMockParams } from 'react-router-dom';
import type { Mock } from 'vitest';

import {
  renderApp,
  screen,
  userEvent,
  waitFor,
  createDiscussion,
  createUser,
  within,
} from '@/testing/test-utils';

import { DiscussionRoute } from '../discussion';

vi.mock('react-router-dom', () => ({
  ...vi.importActual('react-router-dom'), // keep the rest of the exports intact
  useParams: vi.fn(),
  BrowserRouter: vi.fn().mockImplementation((props) => props.children),
}));

const renderDiscussion = async () => {
  const fakeUser = await createUser();
  const fakeDiscussion = await createDiscussion({ teamId: fakeUser.teamId });

  (useMockParams as Mock).mockImplementation(() => ({
    discussionId: fakeDiscussion.id,
  }));

  const utils = await renderApp(<DiscussionRoute />, {
    user: fakeUser,
  });

  await screen.findByText(fakeDiscussion.title);

  return {
    ...utils,
    fakeUser,
    fakeDiscussion,
  };
};

test('should render discussion', async () => {
  const { fakeDiscussion } = await renderDiscussion();
  expect(screen.getByText(fakeDiscussion.body)).toBeInTheDocument();
});

test('should update discussion', async () => {
  const { fakeDiscussion } = await renderDiscussion();

  const titleUpdate = '-Updated';
  const bodyUpdate = '-Updated';

  await userEvent.click(
    screen.getByRole('button', { name: /update discussion/i }),
  );

  const drawer = await screen.findByRole('dialog', {
    name: /update discussion/i,
  });

  const titleField = within(drawer).getByText(/title/i);
  const bodyField = within(drawer).getByText(/body/i);

  const newTitle = `${fakeDiscussion.title}${titleUpdate}`;
  const newBody = `${fakeDiscussion.body}${bodyUpdate}`;

  // replacing the title with the new title
  await userEvent.type(titleField, newTitle);

  // appending updated to the body
  await userEvent.type(bodyField, bodyUpdate);

  const submitButton = within(drawer).getByRole('button', {
    name: /submit/i,
  });

  await userEvent.click(submitButton);

  await waitFor(() => expect(drawer).not.toBeInTheDocument());

  expect(
    await screen.findByRole('heading', { name: newTitle }),
  ).toBeInTheDocument();
  expect(await screen.findByText(newBody)).toBeInTheDocument();
});

test('should create and delete a comment on the discussion', async () => {
  await renderDiscussion();

  const comment = 'Hello World';

  await userEvent.click(
    screen.getByRole('button', { name: /create comment/i }),
  );

  const drawer = await screen.findByRole('dialog', {
    name: /create comment/i,
  });

  const bodyField = await within(drawer).findByText(/body/i);

  await userEvent.type(bodyField, comment);

  const submitButton = await within(drawer).findByRole('button', {
    name: /submit/i,
  });

  await userEvent.click(submitButton);

  await waitFor(() => expect(drawer).not.toBeInTheDocument());

  const commentsList = screen.getByRole('list', {
    name: 'comments',
  });

  const commentElements = within(commentsList).getAllByRole('listitem');

  const commentElement = commentElements[0];

  expect(commentElement).toBeInTheDocument();

  const deleteCommentButton = within(commentElement).getByRole('button', {
    name: /delete comment/i,
    // exact: false,
  });

  await userEvent.click(deleteCommentButton);

  const confirmationDialog = await screen.findByRole('dialog', {
    name: /delete comment/i,
  });

  const confirmationDeleteButton = await within(confirmationDialog).findByRole(
    'button',
    {
      name: /delete/i,
    },
  );

  await userEvent.click(confirmationDeleteButton);

  await screen.findByText(/comment deleted/i);

  expect(within(commentsList).queryByText(comment)).not.toBeInTheDocument();
});