feat: refactor tests

Author: vladislavkeblysh

src/course-home/live-tab/LiveTab.jsx

@@ -13,6 +13,7 @@ const LiveTab = () => {
   return (
     <div
       id="live_tab"
+      role="region"
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: liveModel[courseId]?.iframe }}
     />

src/course-home/live-tab/LiveTab.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+import LiveTab from './LiveTab';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+describe('LiveTab', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('renders iframe from liveModel using dangerouslySetInnerHTML', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed" src="about:blank"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe.src).toBe('about:blank');
+  });
+
+  it('adds classes to iframe after mount', () => {
+    document.body.innerHTML = `
+      <div id="live_tab">
+        <iframe id="lti-tab-embed" class=""></iframe>
+      </div>
+    `;
+
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe.className).toContain('vh-100');
+    expect(iframe.className).toContain('w-100');
+    expect(iframe.className).toContain('border-0');
+  });
+
+  it('does not throw if iframe is not found in DOM', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<div>No iframe here</div>',
+          },
+        },
+      },
+    }));
+
+    expect(() => render(<LiveTab />)).not.toThrow();
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeNull();
+  });
+});

src/courseware/course/sequence/sequence-navigation/SequenceNavigation.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 import {
   render, screen, fireEvent, getByText, initializeTestStore,
 } from '../../../../setupTest';
@@ -10,6 +11,15 @@ import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastV
 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
 
+jest.mock('@openedx/paragon', () => {
+  const original = jest.requireActual('@openedx/paragon');
+  return {
+    ...original,
+    breakpoints: original.breakpoints,
+    useWindowSize: jest.fn(),
+  };
+});
+
 describe('Sequence Navigation', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
@@ -29,6 +39,7 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextHandler: () => {},
     };
+    useWindowSize.mockReturnValue({ width: 1024, height: 800 });
   });
 
   it('is empty while loading', async () => {
@@ -209,4 +220,22 @@ describe('Sequence Navigation', () => {
     );
     expect(screen.queryByRole('link', { name: /next/i })).not.toBeInTheDocument();
   });
+
+  it('shows previous button without label when screen is small', () => {
+    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth - 1 });
+
+    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+
+    const prevButton = screen.getByRole('button');
+    expect(prevButton.textContent).toBe('2 of 3');
+  });
+
+  it('does not set width when screen is large', () => {
+    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
+
+    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+
+    const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });
+    expect(nav).not.toHaveStyle({ width: '90%' });
+  });
 });

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.test.jsx

@@ -6,10 +6,23 @@ import userEvent from '@testing-library/user-event';
 import { initializeTestStore, render, screen } from '../../../../setupTest';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
+import {
+  useIsSidebarOpen,
+  useIsOnXLDesktop,
+  useIsOnLargeDesktop,
+  useIsOnMediumDesktop,
+} from './hooks';
 
 // Mock the hook to avoid relying on its implementation and mocking `getBoundingClientRect`.
 jest.mock('../../../../generic/tabs/useIndexOfLastVisibleChild');
 
+jest.mock('./hooks', () => ({
+  useIsSidebarOpen: jest.fn(),
+  useIsOnXLDesktop: jest.fn(),
+  useIsOnLargeDesktop: jest.fn(),
+  useIsOnMediumDesktop: jest.fn(),
+}));
+
 describe('Sequence Navigation Tabs', () => {
   let mockData;
 
@@ -54,7 +67,7 @@ describe('Sequence Navigation Tabs', () => {
     const booyah = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
 
     // wait for links to appear so we aren't testing an empty div
-    await screen.findAllByRole('link');
+    await screen.findAllByRole('tab');
 
     container = booyah.container;
 
@@ -67,4 +80,72 @@ describe('Sequence Navigation Tabs', () => {
     expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
       .toHaveClass('dropdown-toggle');
   });
+
+  it('adds class navigation-tab-width-xl when isOnXLDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(true);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(false);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-xl');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('adds class navigation-tab-width-large when isOnLargeDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(true);
+    useIsOnMediumDesktop.mockReturnValue(false);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-large');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('adds class navigation-tab-width-medium when isOnMediumDesktop and sidebar is open', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(true);
+    useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
+
+    const { container } = render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const wrapperDiv = container.querySelector('.navigation-tab-width-medium');
+    expect(wrapperDiv).toBeInTheDocument();
+  });
+
+  it('applies invisibleStyle when shouldDisplayDropdown is true', () => {
+    useIsSidebarOpen.mockReturnValue(true);
+    useIsOnXLDesktop.mockReturnValue(false);
+    useIsOnLargeDesktop.mockReturnValue(false);
+    useIsOnMediumDesktop.mockReturnValue(false);
+
+    useIndexOfLastVisibleChild.mockReturnValue([
+      0,
+      null,
+      {
+        position: 'absolute',
+        left: '0px',
+        pointerEvents: 'none',
+        visibility: 'hidden',
+        maxWidth: '100%',
+      },
+    ]);
+
+    render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
+
+    const tabList = screen.getByRole('tablist');
+
+    expect(tabList.style.position).toBe('absolute');
+    expect(tabList.style.left).toBe('0px');
+    expect(tabList.style.pointerEvents).toBe('none');
+    expect(tabList.style.visibility).toBe('hidden');
+    expect(tabList.style.maxWidth).toBe('100%');
+  });
 });

src/courseware/course/sequence/sequence-navigation/UnitButton.test.jsx

@@ -5,6 +5,14 @@ import {
 } from '../../../../setupTest';
 import UnitButton from './UnitButton';
 
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useLocation: () => ({ pathname: '/preview/anything' }),
+  };
+});
+
 describe('Unit Button', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
@@ -31,6 +39,10 @@ describe('Unit Button', () => {
     };
   });
 
+  afterEach(() => {
+    jest.resetModules();
+  });
+
   it('hides title by default', () => {
     render(<UnitButton {...mockData} />, { wrapWithRouter: true });
     expect(screen.getByRole('tab')).not.toHaveTextContent(unit.display_name);
@@ -82,4 +94,36 @@ describe('Unit Button', () => {
     fireEvent.click(screen.getByRole('tab'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('calls onClick with correct unitId when clicked', () => {
+    const onClick = jest.fn();
+    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
+
+    fireEvent.click(screen.getByRole('tab'));
+
+    expect(onClick).toHaveBeenCalledWith(mockData.unitId);
+  });
+
+  it('renders with no unitId and does not crash', async () => {
+    render(<UnitButton unitId={undefined} onClick={jest.fn()} contentType="video" title="Unit" />, {
+      wrapWithRouter: true,
+    });
+
+    expect(screen.getByRole('tab')).toBeInTheDocument();
+  });
+
+  it('prepends /preview to the unit path if in preview mode', () => {
+    const onClick = jest.fn();
+
+    render(
+      <UnitButton {...mockData} onClick={onClick} />,
+      {
+        wrapWithRouter: true,
+        initialEntries: ['/preview/some/path'],
+      },
+    );
+
+    const button = screen.getByRole('tab');
+    expect(button.closest('a')).toHaveAttribute('href', expect.stringContaining('/preview/course/'));
+  });
 });

src/courseware/course/share/ShareButton.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import ShareButton from './ShareButton';
+import messages from './messages';
+
+describe('ShareButton', () => {
+  const url = 'https://example.com/course';
+
+  const renderComponent = () => render(
+    <IntlProvider locale="en" messages={{}}>
+      <ShareButton url={url} />
+    </IntlProvider>,
+  );
+
+  it('renders the button with correct text', () => {
+    renderComponent();
+    expect(screen.getByText(messages.shareButton.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders the Twitter icon', () => {
+    renderComponent();
+    const svg = screen.getByText(messages.shareButton.defaultMessage).querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+});