[TNL-7268] refactor tests to use factories

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

@@ -1,39 +1,53 @@
 import React from 'react';
+import { Factory } from 'rosie';
+import { getAllByRole } from '@testing-library/dom';
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import {
-  initialState, render, screen, testUnits, fireEvent,
+  render, screen, fireEvent, initializeTestStore,
 } from '../../../../setupTest';
 
 describe('Sequence Navigation Dropdown', () => {
-  const mockData = {
-    unitId: '1',
-    onNavigate: () => {},
-    showCompletion: false,
-    unitIds: testUnits,
-  };
+  let mockData;
+  const courseMetadata = Factory.build('courseMetadata');
+  const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
+    'block',
+    { type: 'vertical' },
+    { courseId: courseMetadata.id },
+  ));
+
+  beforeAll(async () => {
+    await initializeTestStore({ courseMetadata, unitBlocks });
+    mockData = {
+      unitId: unitBlocks[1].id,
+      unitIds: unitBlocks.map(block => block.id),
+      showCompletion: false,
+      onNavigate: () => {},
+    };
+  });
 
   it('renders correctly without units', () => {
     render(<SequenceNavigationDropdown {...mockData} unitIds={[]} />);
     expect(screen.getByRole('button')).toHaveTextContent('0 of 0');
   });
 
-  testUnits.forEach(unitId => {
-    it(`displays proper text for unit ${unitId} on mobile`, () => {
-      render(<SequenceNavigationDropdown {...mockData} unitId={unitId} />, { initialState });
-      expect(screen.getByRole('button')).toHaveTextContent(`${unitId} of ${testUnits.length}`);
+  unitBlocks.forEach((unit, index) => {
+    it(`displays proper text for unit ${index + 1} on mobile`, () => {
+      render(<SequenceNavigationDropdown {...mockData} unitId={unit.id} />);
+      expect(screen.getByRole('button')).toHaveTextContent(`${index + 1} of ${unitBlocks.length}`);
     });
   });
 
-  testUnits.forEach(unitId => {
-    it(`marks unit ${unitId} as active`, () => {
-      render(<SequenceNavigationDropdown {...mockData} unitId={unitId} />, { initialState });
+  unitBlocks.forEach((unit, indedx) => {
+    it(`marks unit ${indedx + 1} as active`, () => {
+      const { container } = render(<SequenceNavigationDropdown {...mockData} unitId={unit.id} />);
 
+      const dropdownMenu = container.querySelector('.dropdown-menu');
       // Only the current unit should be marked as active.
-      screen.getAllByText(/^\d$/).forEach(element => {
-        if (element.textContent === unitId) {
-          expect(element.parentElement).toHaveClass('active');
+      getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => {
+        if (button.textContent === unit.display_name) {
+          expect(button).toHaveClass('active');
         } else {
-          expect(element.parentElement).not.toHaveClass('active');
+          expect(button).not.toHaveClass('active');
         }
       });
     });
@@ -41,12 +55,13 @@ describe('Sequence Navigation Dropdown', () => {
 
   it('handles the clicks', () => {
     const onNavigate = jest.fn();
-    render(<SequenceNavigationDropdown {...mockData} onNavigate={onNavigate} />, { initialState });
+    const { container } = render(<SequenceNavigationDropdown {...mockData} onNavigate={onNavigate} />);
 
-    screen.getAllByText(/^\d+$/).forEach(element => fireEvent.click(element));
-    expect(onNavigate).toHaveBeenCalledTimes(testUnits.length);
-    testUnits.forEach(unit => {
-      expect(onNavigate).toHaveBeenNthCalledWith(Number(unit), unit);
+    const dropdownMenu = container.querySelector('.dropdown-menu');
+    getAllByRole(dropdownMenu, 'button', { hidden: true }).forEach(button => fireEvent.click(button));
+    expect(onNavigate).toHaveBeenCalledTimes(unitBlocks.length);
+    unitBlocks.forEach((unit, index) => {
+      expect(onNavigate).toHaveBeenNthCalledWith(index + 1, unit.id);
     });
   });
 });