index.test.jsx

import { renderWithAllProviders, initializeMocks } from '@src/testUtils';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { resolveRouteByRole } from '@openedx/frontend-base';
import { instructorDashboardUrl } from '@src/data/services/lms/urls';
import { useGradebookNavigation } from '@src/data/gradebookNavigationContext';

import { GradebookHeader } from './index';
import useGradebookHeaderData from './hooks';
import messages from './messages';

jest.mock('@openedx/frontend-base', () => ({
  ...jest.requireActual('@openedx/frontend-base'),
  resolveRouteByRole: jest.fn(),
}));
jest.mock('@src/data/services/lms/urls', () => ({
  instructorDashboardUrl: jest.fn(),
}));
jest.mock('@src/data/gradebookNavigationContext', () => ({
  ...jest.requireActual('@src/data/gradebookNavigationContext'),
  useGradebookNavigation: jest.fn(),
}));
jest.mock('./hooks', () => jest.fn());

initializeMocks();

describe('GradebookHeader', () => {
  const mockHandleToggleViewClick = jest.fn();

  beforeEach(() => {
    jest.clearAllMocks();
    resolveRouteByRole.mockReturnValue(null);
    instructorDashboardUrl.mockReturnValue('https://example.com/dashboard');
    useGradebookNavigation.mockReturnValue({ onBack: undefined });
  });

  describe('basic rendering', () => {
    beforeEach(() => {
      useGradebookHeaderData.mockReturnValue({
        areGradesFrozen: false,
        canUserViewGradebook: true,
        courseId: 'course-v1:TestU+CS101+2024',
        handleToggleViewClick: mockHandleToggleViewClick,
        showBulkManagement: false,
        toggleViewMessage: messages.toActivityLog,
      });
    });

    it('renders the main header container', () => {
      renderWithAllProviders(<GradebookHeader />);
      const header = screen.getByText('Gradebook').closest('.gradebook-header');
      expect(header).toHaveClass('gradebook-header');
    });

    it('renders back to dashboard link', () => {
      renderWithAllProviders(<GradebookHeader />);
      const dashboardLink = screen.getByRole('link');
      expect(dashboardLink).toHaveAttribute(
        'href',
        'https://example.com/dashboard',
      );
      expect(dashboardLink).toHaveClass('mb-3');
      expect(dashboardLink).toHaveTextContent('Back to Dashboard');
    });

    it('renders gradebook title', () => {
      renderWithAllProviders(<GradebookHeader />);
      const title = screen.getByRole('heading', { level: 2 });
      expect(title).toHaveTextContent('Gradebook');
    });

    it('renders subtitle row with correct classes', () => {
      const { container } = renderWithAllProviders(<GradebookHeader />);
      const subtitleRow = container.querySelector('.subtitle-row');
      expect(subtitleRow).toHaveClass(
        'subtitle-row',
        'd-flex',
        'justify-content-between',
        'align-items-center',
      );
    });

    it('calls instructorDashboardUrl to get dashboard URL', () => {
      renderWithAllProviders(<GradebookHeader />);
      expect(instructorDashboardUrl).toHaveBeenCalled();
    });

    it('renders an SPA link when the site provides an instructor dashboard route', () => {
      resolveRouteByRole.mockReturnValue({
        url: '/instructor-dashboard/course-v1:TestU+CS101+2024',
        isInternal: true,
      });
      renderWithAllProviders(<GradebookHeader />);
      expect(resolveRouteByRole).toHaveBeenCalledWith(
        'org.openedx.frontend.role.instructorDashboard',
        { courseId: 'course-v1:TestU+CS101+2024' },
      );
      const dashboardLink = screen.getByRole('link');
      expect(dashboardLink).toHaveAttribute(
        'href',
        '/instructor-dashboard/course-v1:TestU+CS101+2024',
      );
      expect(instructorDashboardUrl).not.toHaveBeenCalled();
    });

    it('renders a plain anchor when the instructor dashboard route is external', () => {
      resolveRouteByRole.mockReturnValue({
        url: 'https://other.example.com/dashboard',
        isInternal: false,
      });
      renderWithAllProviders(<GradebookHeader />);
      const dashboardLink = screen.getByRole('link');
      expect(dashboardLink).toHaveAttribute(
        'href',
        'https://other.example.com/dashboard',
      );
      expect(instructorDashboardUrl).not.toHaveBeenCalled();
    });

    it('calls useGradebookHeaderData hook', () => {
      renderWithAllProviders(<GradebookHeader />);
      expect(useGradebookHeaderData).toHaveBeenCalled();
    });

    it('renders a button that invokes onBack (no link) when the navigation context supplies onBack', async () => {
      const onBack = jest.fn();
      useGradebookNavigation.mockReturnValue({ onBack });
      renderWithAllProviders(<GradebookHeader />);
      expect(screen.queryByRole('link')).not.toBeInTheDocument();
      const backButton = screen.getByRole('button', { name: /back to dashboard/i });
      expect(resolveRouteByRole).not.toHaveBeenCalled();
      expect(instructorDashboardUrl).not.toHaveBeenCalled();
      await userEvent.click(backButton);
      expect(onBack).toHaveBeenCalledTimes(1);
    });
  });

  describe('bulk management toggle button', () => {
    describe('when showBulkManagement is true', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: true,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('renders toggle view button', () => {
        renderWithAllProviders(<GradebookHeader />);
        expect(screen.getByRole('button')).toBeInTheDocument();
      });

      it('displays correct button text from toggleViewMessage', () => {
        renderWithAllProviders(<GradebookHeader />);
        const toggleButton = screen.getByRole('button');
        expect(toggleButton).toHaveTextContent('View Bulk Management History');
      });

      it('calls handleToggleViewClick when button is clicked', async () => {
        renderWithAllProviders(<GradebookHeader />);
        const user = userEvent.setup();
        const toggleButton = screen.getByRole('button');

        await user.click(toggleButton);
        expect(mockHandleToggleViewClick).toHaveBeenCalledTimes(1);
      });

      it('displays correct message from toggleViewMessage', () => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: true,
          toggleViewMessage: messages.toGradesView,
        });

        renderWithAllProviders(<GradebookHeader />);
        const toggleButton = screen.getByRole('button');
        expect(toggleButton).toHaveTextContent('Return to Gradebook');
      });
    });

    describe('when showBulkManagement is false', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: false,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('does not render toggle view button', () => {
        renderWithAllProviders(<GradebookHeader />);
        expect(screen.queryByRole('button')).not.toBeInTheDocument();
      });
    });
  });

  describe('frozen grades warning', () => {
    describe('when areGradesFrozen is true', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: true,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: false,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('renders frozen warning alert', () => {
        renderWithAllProviders(<GradebookHeader />);
        const alert = screen.getByRole('alert');
        expect(alert).toHaveClass('alert', 'alert-warning');
        expect(alert).toHaveTextContent(
          'The grades for this course are now frozen. Editing of grades is no longer allowed.',
        );
      });
    });

    describe('when areGradesFrozen is false', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: false,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('does not render frozen warning alert', () => {
        renderWithAllProviders(<GradebookHeader />);
        expect(
          screen.queryByText(
            'The grades for this course are now frozen. Editing of grades is no longer allowed.',
          ),
        ).not.toBeInTheDocument();
      });
    });
  });

  describe('unauthorized warning', () => {
    describe('when canUserViewGradebook is false', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: false,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: false,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('renders unauthorized warning alert', () => {
        renderWithAllProviders(<GradebookHeader />);
        const alert = screen.getByRole('alert');
        expect(alert).toHaveClass('alert', 'alert-warning');
        expect(alert).toHaveTextContent(
          'You are not authorized to view the gradebook for this course.',
        );
      });
    });

    describe('when canUserViewGradebook is true', () => {
      beforeEach(() => {
        useGradebookHeaderData.mockReturnValue({
          areGradesFrozen: false,
          canUserViewGradebook: true,
          courseId: 'course-v1:TestU+CS101+2024',
          handleToggleViewClick: mockHandleToggleViewClick,
          showBulkManagement: false,
          toggleViewMessage: messages.toActivityLog,
        });
      });

      it('does not render unauthorized warning alert', () => {
        renderWithAllProviders(<GradebookHeader />);
        expect(
          screen.queryByText(
            'You are not authorized to view the gradebook for this course.',
          ),
        ).not.toBeInTheDocument();
      });
    });
  });

  describe('multiple warnings', () => {
    it('renders both frozen and unauthorized warnings when both conditions are true', () => {
      useGradebookHeaderData.mockReturnValue({
        areGradesFrozen: true,
        canUserViewGradebook: false,
        courseId: 'course-v1:TestU+CS101+2024',
        handleToggleViewClick: mockHandleToggleViewClick,
        showBulkManagement: false,
        toggleViewMessage: messages.toActivityLog,
      });

      renderWithAllProviders(<GradebookHeader />);
      const alerts = screen.getAllByRole('alert');
      expect(alerts).toHaveLength(2);

      expect(
        screen.getByText(
          'The grades for this course are now frozen. Editing of grades is no longer allowed.',
        ),
      ).toBeInTheDocument();
      expect(
        screen.getByText(
          'You are not authorized to view the gradebook for this course.',
        ),
      ).toBeInTheDocument();
    });
  });

  describe('complete integration', () => {
    it('renders all elements when showBulkManagement is true', () => {
      useGradebookHeaderData.mockReturnValue({
        areGradesFrozen: false,
        canUserViewGradebook: true,
        courseId: 'course-v1:TestU+CS101+2024',
        handleToggleViewClick: mockHandleToggleViewClick,
        showBulkManagement: true,
        toggleViewMessage: messages.toActivityLog,
      });

      renderWithAllProviders(<GradebookHeader />);

      expect(screen.getByRole('link')).toBeInTheDocument();
      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
      expect(screen.getByRole('button')).toBeInTheDocument();
      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
    });
  });
});