fix: fix discussions and some refactor

Author: filippovskii09

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

@@ -85,6 +85,8 @@ const SequenceNavigation = ({
     } else if (!shouldDisplayNotificationTriggerInSequence) {
       buttonText = intl.formatMessage(messages.nextButton);
     }
+
+    if (!buttonText) { return null; }
     return navigationDisabledNextSequence || (
       <NextUnitTopNavTriggerSlot
         {...{
@@ -106,7 +108,7 @@ const SequenceNavigation = ({
       data-testid="courseware-sequence-navigation"
       className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}
       style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
-      aria-label="course sequence tabs"
+      aria-label={intl.formatMessage(messages.sequenceNavLabel)}
     >
       {renderPreviousButton()}
       {renderUnitButtons()}

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

@@ -1,26 +1,18 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { breakpoints } from '@openedx/paragon';
 
 import {
   render, screen, fireEvent, getByText, initializeTestStore,
 } from '../../../../setupTest';
 import SequenceNavigation from './SequenceNavigation';
 import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild';
+import messages from './messages';
 
 // Mock the hook to avoid relying on its implementation and mocking `getBoundingClientRect`.
 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');
@@ -40,7 +32,19 @@ describe('Sequence Navigation', () => {
       onNavigate: () => {},
       nextHandler: () => {},
     };
-    useWindowSize.mockReturnValue({ width: 1024, height: 800 });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
   });
 
   it('is empty while loading', async () => {
@@ -223,20 +227,28 @@ describe('Sequence Navigation', () => {
   });
 
   it('shows previous button without label when screen is small', () => {
-    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth - 1 });
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: breakpoints.small.minWidth - 1,
+    });
 
-    render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
+    const { container } = render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
 
-    const prevButton = screen.getByRole('button');
-    expect(prevButton.textContent).toBe('2 of 3');
+    const prevButton = container.querySelector('.previous-btn');
+    expect(prevButton).toBeInTheDocument();
+    expect(screen.queryByText(messages.previousButton.defaultMessage)).not.toBeInTheDocument();
   });
 
   it('does not set width when screen is large', () => {
-    useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
-
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: breakpoints.small.minWidth,
+    });
     render(<SequenceNavigation {...mockData} />, { wrapWithRouter: true });
 
-    const nav = screen.getByRole('navigation', { name: /course sequence tabs/i });
+    const nav = screen.getByRole('navigation', { name: messages.sequenceNavLabel.defaultMessage });
     expect(nav).not.toHaveStyle({ width: '90%' });
   });
 });

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { Factory } from 'rosie';
 import { getAllByRole } from '@testing-library/dom';
 import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import {
   render, screen, fireEvent, initializeTestStore,
@@ -60,7 +62,7 @@ describe('Sequence Navigation Dropdown', () => {
     });
   });
 
-  it('handles the clicks', () => {
+  it('handles the clicks', async () => {
     const onNavigate = jest.fn();
     const { container } = render(
       <SequenceNavigationDropdown {...mockData} onNavigate={onNavigate} />,
@@ -72,7 +74,13 @@ describe('Sequence Navigation Dropdown', () => {
       fireEvent.click(dropdownToggle);
     });
     const dropdownMenu = container.querySelector('.dropdown-menu');
-    getAllByRole(dropdownMenu, 'tab', { hidden: true }).forEach(button => fireEvent.click(button));
+    const buttons = getAllByRole(dropdownMenu, 'tab', { hidden: true });
+
+    for (const button of buttons) {
+      // eslint-disable-next-line no-await-in-loop
+      await userEvent.click(button);
+    }
+
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
     unitBlocks.forEach((unit, index) => {
       expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import userEvent from '@testing-library/user-event';
+
 import {
-  fireEvent, initializeTestStore, render, screen,
-} from '../../../../setupTest';
+  initializeTestStore, render, screen,
+} from '@src/setupTest';
 import UnitButton from './UnitButton';
 
 jest.mock('react-router-dom', () => {
@@ -89,18 +91,18 @@ describe('Unit Button', () => {
     expect(bookmarkIcon.getAttribute('data-testid')).toBe('bookmark-icon');
   });
 
-  it('handles the click', () => {
+  it('handles the click', async () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-    fireEvent.click(screen.getByRole('tab'));
+    await userEvent.click(screen.getByRole('tab'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClick with correct unitId when clicked', () => {
+  it('calls onClick with correct unitId when clicked', async () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
 
-    fireEvent.click(screen.getByRole('tab'));
+    await userEvent.click(screen.getByRole('tab'));
 
     expect(onClick).toHaveBeenCalledWith(mockData.unitId);
   });

src/courseware/course/sequence/sequence-navigation/messages.ts

@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Previous',
     description: 'Button to return to the previous section',
   },
+  sequenceNavLabel: {
+    id: 'learn.sequence.navigation.aria.label',
+    defaultMessage: 'Course sequence tabs',
+    description: 'Accessibility label for the courseware sequence navigation bar',
+  },
 });
 
 export default messages;