feat: update tests

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,7 @@ 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);
   });
 });