test: improve coverage

Author: navinkarkera

src/course-outline/outline-sidebar/info-sidebar/sharedSettings/ReleaseSection.test.tsx

@@ -0,0 +1,60 @@
+import { initializeMocks, render, screen } from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { ReleaseSection } from './ReleaseSection';
+
+// Make useStateWithCallback synchronous so callbacks call onChange immediately
+jest.mock('@src/hooks', () => ({
+  useStateWithCallback: (defaultValue: any, cb?: any) => {
+    const { useState } = jest.requireActual('react');
+    const [state, setState] = useState(defaultValue);
+    const wrappedSetState = (val: any) => {
+      const newVal = typeof val === 'function' ? val(state) : val;
+      setState(newVal);
+      if (cb) { cb(newVal); }
+    };
+    return [state, wrappedSetState];
+  },
+}));
+
+// Mock DatepickerControl so we can trigger onChange easily
+jest.mock('@src/generic/datepicker-control', () => ({
+  DATEPICKER_TYPES: { date: 'date', time: 'time' },
+  DatepickerControl: ({ onChange, type }: any) => (
+    <button type="button" onClick={() => onChange(type === 'date' ? '2025-12-31' : '12:00')}>
+      {type}
+    </button>
+  ),
+}));
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  useCourseItemData: jest.fn(),
+}));
+
+const mockUseCourseItemData = useCourseItemData as jest.Mock;
+
+describe('ReleaseSection', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockUseCourseItemData.mockReturnValue({ data: { start: null } });
+  });
+
+  it('renders date and time pickers', () => {
+    render(<ReleaseSection itemId="i" onChange={jest.fn()} />);
+    expect(screen.getByRole('button', { name: 'date' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'time' })).toBeInTheDocument();
+  });
+
+  it('calls onChange when pickers change', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    render(<ReleaseSection itemId="i" onChange={onChange} />);
+
+    await user.click(screen.getByRole('button', { name: 'date' }));
+    expect(onChange).toHaveBeenCalledWith('2025-12-31');
+
+    await user.click(screen.getByRole('button', { name: 'time' }));
+    expect(onChange).toHaveBeenCalledWith('12:00');
+  });
+});

src/course-outline/outline-sidebar/info-sidebar/sharedSettings/VisibilitySection.test.tsx

@@ -0,0 +1,79 @@
+import {
+  initializeMocks, render, screen, waitFor,
+} from '@src/testUtils';
+import userEvent from '@testing-library/user-event';
+import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { VisibilityTypes } from '@src/data/constants';
+import { VisibilitySection } from './VisibilitySection';
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useCourseItemData: jest.fn(),
+}));
+
+const mockUseCourseItemData = useCourseItemData as jest.Mock;
+
+const defaultProps = {
+  itemId: 'block-v1:course+type@sequential+block@test',
+  isSubsection: true,
+  onChange: jest.fn(),
+};
+
+describe('VisibilitySection component', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockUseCourseItemData.mockReturnValue({ data: undefined });
+  });
+
+  it('renders title and buttons', async () => {
+    render(<VisibilitySection {...defaultProps} />);
+    expect(await screen.findByText('Visibility')).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Student Visible' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Staff Only' })).toBeInTheDocument();
+  });
+
+  it('clicking staff only calls onChange with staff and hideAfterDue false', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+
+    await user.click(await screen.findByRole('button', { name: 'Staff Only' }));
+    await waitFor(async () => {
+      expect(onChange).toHaveBeenCalledWith({ isVisibleToStaffOnly: true, hideAfterDue: false });
+    });
+  });
+
+  it('clicking student visible calls onChange with isVisibleToStaffOnly false', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
+    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+
+    await user.click(await screen.findByRole('button', { name: 'Student Visible' }));
+    await waitFor(async () => {
+      expect(onChange).toHaveBeenCalledWith({ isVisibleToStaffOnly: false });
+    });
+  });
+
+  it('shows checkbox when subsection and not staff only, and toggling it calls onChange', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    // initial data not staff only
+    mockUseCourseItemData.mockReturnValue({ data: { visibilityState: undefined, hideAfterDue: false } });
+    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+
+    const checkbox = await screen.findByRole('checkbox');
+    await user.click(checkbox);
+    await waitFor(async () => {
+      expect(onChange).toHaveBeenCalledWith({ hideAfterDue: true, isVisibleToStaffOnly: false });
+    });
+  });
+
+  it('hides checkbox when staff visible', async () => {
+    const onChange = jest.fn();
+    // when item is staff only, checkbox should not be present
+    mockUseCourseItemData.mockReturnValue({ data: { visibilityState: VisibilityTypes.STAFF_ONLY } });
+    render(<VisibilitySection {...defaultProps} onChange={onChange} />);
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+  });
+});

src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.test.tsx

@@ -0,0 +1,83 @@
+import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+import { initializeMocks, render, screen } from '@src/testUtils';
+import { useParams } from 'react-router-dom';
+import { UnitInfoSidebar } from './UnitInfoSidebar';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+jest.mock('@src/course-unit/data/selectors', () => ({
+  getCourseUnitData: jest.fn(),
+  getCourseVerticalChildren: jest.fn(),
+}));
+
+jest.mock('./PublishControls', () => ({ __esModule: true, default: () => <div>PublishControls</div> }));
+jest.mock('@src/generic/block-type-utils', () => ({
+  ...jest.requireActual('@src/generic/block-type-utils'),
+  ComponentCountSnippet: ({ componentData }: any) => <div>ComponentCount: {JSON.stringify(componentData)}</div>,
+  getItemIcon: () => () => null,
+}));
+jest.mock('@src/content-tags-drawer', () => ({ ContentTagsSnippet: ({ contentId }: any) => <div>ContentTags:{contentId}</div> }));
+jest.mock('@src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings', () => ({
+  __esModule: true,
+  GenericUnitInfoSettings: () => <div>GenericUnitInfoSettings</div>,
+}));
+
+jest.mock('../UnitSidebarContext', () => ({ useUnitSidebarContext: jest.fn() }));
+
+const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
+const selectors = jest.requireMock('@src/course-unit/data/selectors') as any;
+const unitSidebarContext = jest.requireMock('../UnitSidebarContext') as any;
+
+const renderComponent = () => {
+  render(
+    <IframeProvider>
+      <UnitInfoSidebar />
+    </IframeProvider>,
+  );
+};
+
+describe('UnitInfoSidebar', () => {
+  beforeEach(() => {
+    initializeMocks();
+    mockUseParams.mockReturnValue({ blockId: 'block-1' } as any);
+
+    selectors.getCourseUnitData.mockReturnValue({
+      displayName: 'Unit title',
+      id: 'block-1',
+      visibilityState: undefined,
+      discussionEnabled: false,
+      userPartitionInfo: null,
+    });
+
+    selectors.getCourseVerticalChildren.mockReturnValue({
+      children: [
+        { blockType: 'html' }, { blockType: 'problem' }, { blockType: 'html' },
+      ],
+    });
+  });
+
+  it('renders title and details components and sets default tab', () => {
+    const setCurrentTabKey = jest.fn();
+    unitSidebarContext.useUnitSidebarContext.mockReturnValue({ currentTabKey: 'details', setCurrentTabKey });
+
+    renderComponent();
+
+    expect(screen.getByText('Unit title')).toBeInTheDocument();
+    expect(screen.getByText(/ComponentCount/)).toBeInTheDocument();
+    expect(screen.getByText('ContentTags:block-1')).toBeInTheDocument();
+    // effect should set default tab to details
+    expect(setCurrentTabKey).toHaveBeenCalledWith('details');
+  });
+
+  it('renders settings tab content when active', () => {
+    const setCurrentTabKey = jest.fn();
+    unitSidebarContext.useUnitSidebarContext.mockReturnValue({ currentTabKey: 'settings', setCurrentTabKey });
+
+    renderComponent();
+
+    expect(screen.getByText('GenericUnitInfoSettings')).toBeInTheDocument();
+  });
+});