test: update test cases

openedx · Jan 9, 2025 · 8c3f5ff · 8c3f5ff
1 parent 102ac5c
commit 8c3f5ff
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 159 deletions.
diff --git a/src/Collapsible/Collapsible.test.jsx b/src/Collapsible/Collapsible.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
 
@@ -75,17 +75,23 @@ describe('<Collapsible />', () => {
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
       );
     });
-    it('opens on .open()', () => {
+    it('opens on .open()', async () => {
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
     });
 
-    it('closes on .close()', () => {
+    it('closes on .close()', async() => {
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       ref.current.close();
-      expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      });
     });
 
     it('correct behavior with unmountOnExit', () => {
@@ -127,7 +133,9 @@ describe('<Collapsible />', () => {
 
     it('closes on trigger click', async () => {
       collapsible.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       await userEvent.click(screen.getAllByRole('button')[0]); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });

diff --git a/src/ColorPicker/ColorPicker.test.jsx b/src/ColorPicker/ColorPicker.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import ColorPicker from '.';
 
@@ -29,33 +29,26 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
+    const user = userEvent.setup();
     render(<ColorPicker color={color} setColor={setColor} />);
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button'));
-    });
+    await user.click(screen.getByRole('button'));
     expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
-    });
+    await user.clear(screen.getByTestId('hex-input')); // clear() will keep focus on the element, so we can paste
+    await user.paste('32116c');
     expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('yuk');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('#fad');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();

diff --git a/src/DataTable/tests/BulkActions.test.jsx b/src/DataTable/tests/BulkActions.test.jsx
@@ -10,7 +10,6 @@ import {
 } from '../CollapsibleButtonGroup';
 import { useWindowSize, Button } from '../..';
 import DataTableContext from '../DataTableContext';
-import { waitForComponentToPaint } from './utils';
 
 jest.mock('../../hooks/useWindowSize');
 useWindowSize.mockReturnValue({ width: 800 });
@@ -199,8 +198,7 @@ describe('<BulkActions />', () => {
     });
 
     it('displays the user\'s second button as an outline button', () => {
-      const { container } = render(<BulkActionsWrapper />);
-      waitForComponentToPaint(container);
+      render(<BulkActionsWrapper />);
       const buttons = screen.getAllByTestId('action');
       expect(buttons[0].textContent).toBe(SECOND_ACTION);
     });

diff --git a/src/DataTable/tests/utils.js b/src/DataTable/tests/utils.js
diff --git a/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap b/src/Dropzone/tests/__snapshots__/Dropzone.test.jsx.snap
@@ -21,7 +21,16 @@ exports[`<Dropzone /> successfully renders 1`] = `
     onClick={[Function]}
     style={
       {
-        "display": "none",
+        "border": 0,
+        "clip": "rect(0, 0, 0, 0)",
+        "clipPath": "inset(50%)",
+        "height": "1px",
+        "margin": "0 -1px -1px 0",
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "whiteSpace": "nowrap",
+        "width": "1px",
       }
     }
     tabIndex={-1}