feat: improved accessibility skipping to main content

Author: vladislavkeblysh

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import userEvent from '@testing-library/user-event';
 import { act, waitFor } from '@testing-library/react';
 import {
   fireEvent, initializeTestStore, render, screen,
@@ -32,6 +31,10 @@ describe('Unit Button', () => {
       onClick: () => {},
       unitIndex: courseMetadata.id,
     };
+
+    global.requestAnimationFrame = jest.fn((cb) => {
+      setImmediate(cb);
+    });
   });
 
   it('hides title by default', () => {
@@ -99,53 +102,61 @@ describe('Unit Button', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('calls onClick when Enter key is pressed', async () => {
-    const onClick = jest.fn();
-    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
-
-    await act(async () => {
-      await userEvent.keyboard('{Enter}');
-    });
+  it('focuses the bookmark button after key press', async () => {
+    jest.useFakeTimers();
 
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(mockData.unitId);
-  });
+    const { container } = render(
+      <>
+        <UnitButton {...mockData} />
+        <button id="bookmark-button" type="button">Bookmark</button>
+      </>,
+      { wrapWithRouter: true },
+    );
+    const unitButton = container.querySelector('[role="tabpanel"]');
 
-  it('calls onClick when Space key is pressed', async () => {
-    const onClick = jest.fn();
-    render(<UnitButton {...mockData} onClick={onClick} />, { wrapWithRouter: true });
+    fireEvent.keyDown(unitButton, { key: 'Enter' });
 
     await act(async () => {
-      await userEvent.keyboard(' ');
+      jest.runAllTimers();
     });
 
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(mockData.unitId);
-  });
+    await waitFor(() => {
+      expect(document.activeElement).toBe(document.getElementById('bookmark-button'));
+    });
 
-  const Component = () => (
-    <>
-      <UnitButton {...mockData} onClick={jest.fn()} />
-      <button id="bookmark-button" type="button">Bookmark</button>
-    </>
-  );
+    jest.useRealTimers();
+  });
 
-  it('focuses the bookmark button after key press', async () => {
-    jest.useFakeTimers();
+  it('calls onClick and focuses bookmark button on Enter or Space key press', async () => {
+    const onClick = jest.fn();
+    const { container } = render(
+      <>
+        <UnitButton {...mockData} onClick={onClick} />
+        <button id="bookmark-button" type="button">Bookmark</button>
+      </>,
+      { wrapWithRouter: true },
+    );
 
-    const { container } = render(<Component />, { wrapWithRouter: true });
     const unitButton = container.querySelector('[role="tabpanel"]');
 
-    fireEvent.keyDown(unitButton, { key: 'Enter' });
-
     await act(async () => {
-      jest.runAllTimers();
+      fireEvent.keyDown(unitButton, { key: 'Enter' });
     });
 
     await waitFor(() => {
+      expect(requestAnimationFrame).toHaveBeenCalledTimes(2);
+      expect(onClick).toHaveBeenCalledTimes(1);
       expect(document.activeElement).toBe(document.getElementById('bookmark-button'));
     });
 
-    jest.useRealTimers();
+    await act(async () => {
+      fireEvent.keyDown(unitButton, { key: ' ' });
+    });
+
+    await waitFor(() => {
+      expect(requestAnimationFrame).toHaveBeenCalledTimes(4);
+      expect(onClick).toHaveBeenCalledTimes(2);
+      expect(document.activeElement).toBe(document.getElementById('bookmark-button'));
+    });
   });
 });