feat: update test

Author: vladislavkeblysh

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

@@ -76,7 +76,7 @@ describe('Sequence Navigation', () => {
     const onNavigate = jest.fn();
     render(<SequenceNavigation {...mockData} {...{ onNavigate }} />, { wrapWithRouter: true });
 
-    const unitButtons = screen.getAllByRole('link', { name: /\d+/ });
+    const unitButtons = screen.getAllByRole('tabpanel', { name: /\d+/ });
     expect(unitButtons).toHaveLength(unitButtons.length);
     unitButtons.forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitButtons.length);

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

@@ -50,7 +50,7 @@ describe('Sequence Navigation Dropdown', () => {
       });
       const dropdownMenu = container.querySelector('.dropdown-menu');
       // Only the current unit should be marked as active.
-      getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => {
+      getAllByRole(dropdownMenu, 'tabpanel', { hidden: true }).forEach(button => {
         if (button.textContent === unit.display_name) {
           expect(button).toHaveClass('active');
         } else {
@@ -72,7 +72,7 @@ describe('Sequence Navigation Dropdown', () => {
       fireEvent.click(dropdownToggle);
     });
     const dropdownMenu = container.querySelector('.dropdown-menu');
-    getAllByRole(dropdownMenu, 'link', { hidden: true }).forEach(button => fireEvent.click(button));
+    getAllByRole(dropdownMenu, 'tabpanel', { hidden: true }).forEach(button => fireEvent.click(button));
     expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
     unitBlocks.forEach((unit, index) => {
       expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);

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

@@ -43,7 +43,7 @@ describe('Sequence Navigation Tabs', () => {
     useIndexOfLastVisibleChild.mockReturnValue([0, null, null]);
     render(<SequenceNavigationTabs {...mockData} />, { wrapWithRouter: true });
 
-    expect(screen.getAllByRole('link')).toHaveLength(unitBlocks.length);
+    expect(screen.getAllByRole('tabpanel')).toHaveLength(unitBlocks.length);
   });
 
   it('renders unit buttons and dropdown button', async () => {
@@ -60,7 +60,7 @@ describe('Sequence Navigation Tabs', () => {
       await fireEvent.click(dropdownToggle);
     });
     const dropdownMenu = container.querySelector('.dropdown');
-    const dropdownButtons = getAllByRole(dropdownMenu, 'link');
+    const dropdownButtons = getAllByRole(dropdownMenu, 'tabpanel');
     expect(dropdownButtons).toHaveLength(unitBlocks.length);
     expect(screen.getByRole('button', { name: `${activeBlockNumber} of ${unitBlocks.length}` }))
       .toHaveClass('dropdown-toggle');

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

@@ -75,6 +75,7 @@ const UnitButton = ({
       {bookmarked ? (
         <BookmarkFilledIcon
           className="unit-filled-bookmark text-primary small position-absolute"
+          data-testid="bookmark-icon"
           style={{
             top: '-3px', right: '2px', height: '20px', width: '20px',
           }}

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

@@ -34,24 +34,24 @@ describe('Unit Button', () => {
 
   it('hides title by default', () => {
     render(<UnitButton {...mockData} />, { wrapWithRouter: true });
-    expect(screen.getByRole('link')).not.toHaveTextContent(unit.display_name);
+    expect(screen.getByRole('tabpanel')).not.toHaveTextContent(unit.display_name);
   });
 
   it('shows title', () => {
-    render(<UnitButton {...mockData} showTitle />);
+    render(<UnitButton {...mockData} showTitle />, { wrapWithRouter: true });
     expect(screen.getByRole('tabpanel')).toHaveTextContent(unit.display_name);
   });
 
   it('check button attributes', () => {
-    render(<UnitButton {...mockData} showTitle />);
+    render(<UnitButton {...mockData} showTitle />, { wrapWithRouter: true });
     expect(screen.getByRole('tabpanel')).toHaveAttribute('id', `${unit.display_name}-${courseMetadata.id}`);
     expect(screen.getByRole('tabpanel')).toHaveAttribute('aria-controls', unit.display_name);
     expect(screen.getByRole('tabpanel')).toHaveAttribute('aria-labelledby', unit.display_name);
     expect(screen.getByRole('tabpanel')).toHaveAttribute('tabindex', '-1');
   });
 
   it('button with isActive prop has tabindex 0', () => {
-    render(<UnitButton {...mockData} isActive />);
+    render(<UnitButton {...mockData} isActive />, { wrapWithRouter: true });
     expect(screen.getByRole('tabpanel')).toHaveAttribute('tabindex', '0');
   });
 
@@ -93,7 +93,33 @@ describe('Unit Button', () => {
   it('handles the click', () => {
     const onClick = jest.fn();
     render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-    fireEvent.click(screen.getByRole('link'));
+    fireEvent.click(screen.getByRole('tabpanel'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('handles keydown events for Enter and Space and focuses bookmark button', async () => {
+    const onClick = jest.fn();
+    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
+
+    const button = screen.getByRole('tabpanel');
+
+    fireEvent.keyDown(button, { key: 'Enter' });
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(button, { key: ' ' });
+    expect(onClick).toHaveBeenCalledTimes(2);
+
+    const bookmarkButton = document.createElement('button');
+    bookmarkButton.id = 'bookmark-button';
+    document.body.appendChild(bookmarkButton);
+
+    fireEvent.keyDown(button, { key: 'Enter' });
+
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+    expect(document.activeElement).toBe(bookmarkButton);
+
+    document.body.removeChild(bookmarkButton);
+  });
 });

src/generic/hooks.test.jsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { useScrollToContent, useEventListener, useIFrameHeight } from './hooks';
 
 global.scrollTo = jest.fn();
+global.console.warn = jest.fn();
 
 describe('Hooks', () => {
   test('useEventListener', async () => {
@@ -93,5 +94,40 @@ describe('Hooks', () => {
       });
       expect(targetContent.focus).toHaveBeenCalled();
     });
+
+    test('should warn if element is not focusable', async () => {
+      render(<TestComponent />);
+
+      const skipLink = screen.getByRole('link', { name: /skip to content/i });
+      const targetContent = screen.getByTestId('target-content');
+
+      delete targetContent.focus;
+
+      userEvent.click(skipLink);
+
+      await waitFor(() => {
+        expect(global.scrollTo).toHaveBeenCalledWith({
+          top: expect.any(Number), behavior: 'smooth',
+        });
+      });
+
+      // eslint-disable-next-line no-console
+      expect(console.warn).toHaveBeenCalledWith('Element with ID "main-content" exists but is not focusable.');
+    });
+
+    test('should warn if target element is not found', async () => {
+      render(<TestComponent />);
+
+      const skipLink = screen.getByRole('link', { name: /skip to content/i });
+
+      document.getElementById('main-content').remove();
+
+      userEvent.click(skipLink);
+
+      await waitFor(() => {
+        // eslint-disable-next-line no-console
+        expect(console.warn).toHaveBeenCalledWith('Element with ID "main-content" not found.');
+      });
+    });
   });
 });