feat: refactor tests

Author: vladislavkeblysh

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import {
-  render, screen, waitFor,
-} from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelector } from 'react-redux';
 import { IntlProvider } from 'react-intl';
 
+import { fireEvent } from '@testing-library/dom';
 import GradeSummaryHeader from './GradeSummaryHeader';
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
@@ -19,7 +18,7 @@ jest.mock('../../../../generic/model-store', () => ({
 }));
 
 jest.mock('../../../../data/hooks', () => ({
-  useContextId: jest.fn(() => 'test-course-id'),
+  useContextId: () => 'test-course-id',
 }));
 
 describe('GradeSummaryHeader', () => {
@@ -34,25 +33,76 @@ describe('GradeSummaryHeader', () => {
     render(
       <IntlProvider locale="en" messages={messages}>
         <GradeSummaryHeader
-          intl={{ formatMessage: jest.fn((msg) => msg.defaultMessage) }}
           allOfSomeAssignmentTypeIsLocked={false}
           {...props}
         />
       </IntlProvider>,
     );
   };
 
-  it('visible the tooltip when Escape is pressed', async () => {
+  it('shows tooltip on icon button click', async () => {
     renderComponent();
 
     const iconButton = screen.getByRole('button', {
       name: messages.gradeSummaryTooltipAlt.defaultMessage,
     });
 
-    userEvent.click(iconButton);
+    await userEvent.click(iconButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('hides tooltip on mouse out', async () => {
+    renderComponent();
+
+    const iconButton = screen.getByRole('button', {
+      name: messages.gradeSummaryTooltipAlt.defaultMessage,
+    });
+
+    fireEvent.mouseOver(iconButton);
 
     await waitFor(() => {
       expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeVisible();
     });
+
+    fireEvent.mouseOut(iconButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeNull();
+    });
+  });
+
+  it('hides tooltip on blur and hover out (covering setShowTooltip(false))', async () => {
+    renderComponent();
+
+    const iconButton = screen.getByRole('button', {
+      name: messages.gradeSummaryTooltipAlt.defaultMessage,
+    });
+
+    await userEvent.hover(iconButton);
+    await userEvent.click(iconButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeInTheDocument();
+    });
+
+    const outside = document.createElement('div');
+    document.body.appendChild(outside);
+    await userEvent.unhover(iconButton);
+    await userEvent.hover(outside);
+
+    const otherButton = document.createElement('button');
+    otherButton.textContent = 'Other';
+    document.body.appendChild(otherButton);
+    otherButton.focus();
+
+    await waitFor(() => {
+      expect(screen.queryByText(messages.gradeSummaryTooltipBody.defaultMessage)).not.toBeInTheDocument();
+    });
+
+    document.body.removeChild(outside);
+    document.body.removeChild(otherButton);
   });
 });