schedule-actions-modal-content.test.tsx

import { HttpResponse } from 'msw';

import { render, screen, userEvent, waitFor } from '@/test-utils/rtl';

import { mockDescribeScheduleResponse } from '@/route-handlers/describe-schedule/__fixtures__/mock-describe-schedule-response';
import { type PauseScheduleResponse } from '@/route-handlers/pause-schedule/pause-schedule.types';
import { type UnpauseScheduleResponse } from '@/route-handlers/unpause-schedule/unpause-schedule.types';

import { mockScheduleActionsConfig } from '../../__fixtures__/schedule-actions-config';
import { type ScheduleAction } from '../../schedule-actions.types';
import ScheduleActionsModalContent from '../schedule-actions-modal-content';

const mockScheduleParams = {
  domain: 'mock-domain',
  cluster: 'mock-cluster',
  scheduleId: 'mock-schedule-id',
};

const mockEnqueue = jest.fn();
const mockDequeue = jest.fn();
jest.mock('baseui/snackbar', () => ({
  ...jest.requireActual('baseui/snackbar'),
  useSnackbar: () => ({
    enqueue: mockEnqueue,
    dequeue: mockDequeue,
  }),
}));

const mockPush = jest.fn();
jest.mock('next/navigation', () => ({
  ...jest.requireActual('next/navigation'),
  useRouter: () => ({ push: mockPush }),
}));

describe(ScheduleActionsModalContent.name, () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders the modal content as expected', async () => {
    setup({});

    expect(await screen.findAllByText('Mock pause schedule')).toHaveLength(2);
    expect(screen.getByText('Mock pause banner message')).toBeInTheDocument();
    expect(
      screen.getByRole('button', { name: 'Mock pause schedule' })
    ).toBeInTheDocument();
  });

  it('calls onCloseModal when the Cancel button is clicked', async () => {
    const { user, mockOnClose } = setup({});

    await user.click(await screen.findByText('Cancel'));
    expect(mockOnClose).toHaveBeenCalled();
  });

  it('calls pause API, sends toast, and closes modal when confirmed', async () => {
    const { user, mockOnClose, getLatestRequestBody, waitForRequest } = setup(
      {}
    );

    await user.type(
      screen.getByTestId('mock-pause-reason'),
      'Mock pause reason'
    );
    await user.click(
      await screen.findByRole('button', { name: 'Mock pause schedule' })
    );

    await waitForRequest();
    expect(getLatestRequestBody()).toEqual({ reason: 'Mock pause reason' });

    await waitFor(() => {
      expect(mockEnqueue).toHaveBeenCalledWith(
        expect.objectContaining({
          message: 'Mock pause notification',
        })
      );
    });
    expect(mockOnClose).toHaveBeenCalled();
  });

  it('renders pause banner without describe schedule data', async () => {
    setup({ schedule: undefined });

    expect(
      await screen.findByText('Mock pause banner message')
    ).toBeInTheDocument();
  });

  it('displays banner when the action fails', async () => {
    const { user, mockOnClose } = setup({ error: true });

    await user.type(
      screen.getByTestId('mock-pause-reason'),
      'Mock pause reason'
    );
    await user.click(
      await screen.findByRole('button', { name: 'Mock pause schedule' })
    );

    await waitFor(() => {
      expect(screen.getByText('Failed to pause schedule')).toBeInTheDocument();
    });
    expect(mockOnClose).not.toHaveBeenCalled();
  });

  describe('form handling', () => {
    it('renders form when provided in action config', () => {
      setup({});

      expect(screen.getByTestId('mock-pause-form')).toBeInTheDocument();
      expect(screen.getByTestId('mock-pause-reason')).toBeInTheDocument();
    });

    it('disables submit button when form has validation errors', async () => {
      const { user } = setup({});

      const submitButton = screen.getByRole('button', {
        name: 'Mock pause schedule',
      });
      await user.click(submitButton);

      expect(submitButton).toHaveAttribute('disabled');
    });

    it('shows validation error when reason is empty', async () => {
      const { user } = setup({});

      const submitButton = screen.getByRole('button', {
        name: 'Mock pause schedule',
      });
      await user.click(submitButton);

      expect(screen.getByTestId('mock-pause-reason')).toHaveAttribute(
        'aria-invalid',
        'true'
      );
    });
  });
});

function setup({
  error,
  actionConfig,
  schedule = mockDescribeScheduleResponse,
}: {
  error?: boolean;
  actionConfig?: ScheduleAction<any, any, any>;
  schedule?: typeof mockDescribeScheduleResponse;
}) {
  const user = userEvent.setup();
  const mockOnClose = jest.fn();
  let latestRequestBody: unknown = null;
  let requestPromiseResolve: (value: unknown) => void = () => undefined;
  const requestPromise = new Promise((resolve) => {
    requestPromiseResolve = resolve;
  });

  render(
    <ScheduleActionsModalContent
      action={actionConfig ?? mockScheduleActionsConfig[0]}
      params={{ ...mockScheduleParams }}
      schedule={schedule}
      onCloseModal={mockOnClose}
    />,
    {
      endpointsMocks: [
        {
          path: '/api/domains/:domain/:cluster/schedules/:scheduleId/:action',
          httpMethod: 'POST',
          mockOnce: false,
          httpResolver: async ({ request }) => {
            const text = await request.text();
            latestRequestBody = text ? JSON.parse(text) : null;
            requestPromiseResolve(null);

            if (error) {
              return HttpResponse.json(
                { message: 'Failed to pause schedule' },
                { status: 500 }
              );
            }

            return HttpResponse.json(
              {} satisfies PauseScheduleResponse | UnpauseScheduleResponse
            );
          },
        },
      ],
    }
  );

  return {
    user,
    mockOnClose,
    getLatestRequestBody: () => latestRequestBody,
    waitForRequest: () => requestPromise,
  };
}