fix: fix console errors

openedx · Oct 11, 2023 · 6fc6386 · 6fc6386
1 parent 71c31dc
commit 6fc6386
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 123 deletions.
diff --git a/src/Button/Button.test.jsx b/src/Button/Button.test.jsx
@@ -16,7 +16,7 @@ describe('<Button />', () => {
       expect(tree).toMatchSnapshot();
     });
     it('renders with correct class when variant is added', () => {
-      render(<Button variant="brand" />);
+      render(<Button variant="brand">Button</Button>);
       const button = screen.getByRole('button');
       expect(button.className).toContain('btn-brand');
     });

diff --git a/src/ChipCarousel/ChipCarousel.test.jsx b/src/ChipCarousel/ChipCarousel.test.jsx
@@ -1,38 +1,16 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import ChipCarousel from '.';
 
 const items = [
-  {
-    props: {
-      onClick: jest.fn(),
-      children: 'Item 1',
-      'data-testid': 'chip',
-    },
-  },
-  {
-    props: {
-      onClick: jest.fn(),
-      children: 'Item 2',
-      'data-testid': 'chip',
-    },
-  },
-  {
-    props: {
-      onClick: jest.fn(),
-      children: 'Item 3',
-      'data-testid': 'chip',
-    },
-  },
-  {
-    props: {
-      onClick: jest.fn(),
-      'data-testid': 'chip',
-    },
-  },
-  'Test string',
+  <div onClick={jest.fn()} data-testid="chip">Item 1</div>,
+  <div onClick={jest.fn()} data-testid="chip">Item 2</div>,
+  <div onClick={jest.fn()} data-testid="chip">Item 3</div>,
+  <div onClick={jest.fn()} data-testid="chip" />,
 ];
 
 const ariaLabel = 'Test aria label';
@@ -52,8 +30,8 @@ describe('<ChipCarousel />', () => {
     expect(carousel).toBeTruthy();
 
     const chipItems = screen.queryAllByTestId('chip');
-    expect(chipItems).toHaveLength(items.length - 2);
-    for (let i = 0; i < chipItems.length - 2; i++) {
+    expect(chipItems).toHaveLength(items.length - 1);
+    for (let i = 0; i < chipItems.length - 1; i++) {
       expect(chipItems[i].textContent).toBe(items[i].props.children);
     }
   });

diff --git a/src/ChipCarousel/index.tsx b/src/ChipCarousel/index.tsx
@@ -99,12 +99,13 @@ const ChipCarousel = React.forwardRef(({
               </>
               <div ref={setOverflowRef} className="d-flex">
                 <OverflowScroll.Items>
-                  {items?.map(item => {
+                  {items?.map((item, id) => {
                     const { children } = item?.props || {};
                     if (!children) {
                       return null;
                     }
-                    return React.createElement(Chip, item.props);
+                    // eslint-disable-next-line react/no-array-index-key
+                    return React.createElement(Chip, { ...item.props, key: id });
                   })}
                 </OverflowScroll.Items>
               </div>

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 } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 
 import ColorPicker from '.';
 
@@ -30,7 +30,9 @@ describe('picker works as expected', () => {
   const setColor = jest.fn();
   it('validates hex color', async () => {
     const { rerender } = render(<ColorPicker color={color} setColor={setColor} />);
-    await userEvent.click(screen.getByRole('button'));
+    await act(async () => {
+      await userEvent.click(screen.getByRole('button'));
+    });
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
     rerender(<ColorPicker color="#32116c" setColor={setColor} />);

diff --git a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
@@ -27,64 +27,76 @@ describe('<MultiSelectDropdownFilter />', () => {
   });
   it('renders a list of checkboxes', async () => {
     render(<MultiSelectDropdownFilter {...props} />);
-    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
-      const checkboxes = screen.getAllByRole('checkbox');
-      expect(checkboxes.length).toEqual(3);
+      await userEvent.click(screen.getByText(props.column.Header));
     });
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes.length).toEqual(3);
   });
   it('renders a title', () => {
     render(<MultiSelectDropdownFilter {...props} />);
     expect(screen.getByText(props.column.Header)).toBeInTheDocument();
   });
   it('sets a filter - no initial filters', async () => {
     render(<MultiSelectDropdownFilter {...props} />);
-    await userEvent.click(screen.getByText(props.column.Header));
+    await act(async () => {
+      await userEvent.click(screen.getByText(props.column.Header));
+    });
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    await act(async () => {
+      await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    });
     expect(setFilterMock).toHaveBeenCalledWith([palomino.value]);
   });
   it('sets a filter - initial filters', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    await userEvent.click(screen.getByText(props.column.Header));
+    await act(async () => {
+      await userEvent.click(screen.getByText(props.column.Header));
+    });
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    await act(async () => {
+      await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    });
     expect(setFilterMock).toHaveBeenCalledWith([roan.value, palomino.value]);
   });
   it('removes a filter', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [palomino.value] }} />);
-    await userEvent.click(screen.getByText(props.column.Header));
+    await act(async () => {
+      await userEvent.click(screen.getByText(props.column.Header));
+    });
     const checkbox = screen.getAllByRole('checkbox')[1];
-    await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    await act(async () => {
+      await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
+    });
     expect(setFilterMock).toHaveBeenCalledWith([]);
   });
   it('renders checkbox label with filter name', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
-      const label = screen.getByText(roan.name);
-      expect(label).toBeInTheDocument();
+      await userEvent.click(screen.getByText(props.column.Header));
     });
+    const label = screen.getByText(roan.name);
+    expect(label).toBeInTheDocument();
   });
   it('renders checkbox label with number - with badge', async () => {
     render(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
-    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
-      const label = screen.getByText(roan.name);
-      expect(label).toBeInTheDocument();
-      const badge = screen.getByText(roan.number.toString());
-      expect(badge).toBeInTheDocument();
+      await userEvent.click(screen.getByText(props.column.Header));
     });
+    const label = screen.getByText(roan.name);
+    expect(label).toBeInTheDocument();
+    const badge = screen.getByText(roan.number.toString());
+    expect(badge).toBeInTheDocument();
   });
   it('renders checkbox label with number - without badge', async () => {
     render(
       <MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />,
     );
-    await userEvent.click(screen.getByText(props.column.Header));
     await act(async () => {
-      const label = screen.getByText(palomino.name);
-      expect(label).toBeInTheDocument();
-      expect(label.querySelector('.badge')).toBeNull();
+      await userEvent.click(screen.getByText(props.column.Header));
     });
+    const label = screen.getByText(palomino.name);
+    expect(label).toBeInTheDocument();
+    expect(label.querySelector('.badge')).toBeNull();
   });
 });
diff --git a/src/DataTable/tests/BulkActions.test.jsx b/src/DataTable/tests/BulkActions.test.jsx
@@ -57,15 +57,13 @@ function ExtraAction({ text }) {
   );
 }
 
-const selectedFlatRows = [{ id: 1 }, { id: 2 }];
-
 const twoActions = [
   <FirstAction data-testid="action" />,
   <SecondAction data-testid="action" />,
 ];
 
 const instance = {
-  selectedFlatRows,
+  selectedFlatRows: [{ id: 1 }, { id: 2 }],
   controlledTableSelections: [
     {
       selectedRows: [],
@@ -82,10 +80,10 @@ const instance = {
 };
 
 // eslint-disable-next-line react/prop-types
-function BulkActionsWrapper({ value = instance, ...rest }) {
+function BulkActionsWrapper({ value = instance }) {
   return (
     <DataTableContext.Provider value={value}>
-      <BulkActions {...rest} />
+      <BulkActions />
     </DataTableContext.Provider>
   );
 }

diff --git a/src/DataTable/tests/TableActions.test.jsx b/src/DataTable/tests/TableActions.test.jsx
@@ -54,15 +54,13 @@ function ExtraAction({ text }) {
   );
 }
 
-const selectedFlatRows = [{ id: 1 }, { id: 2 }];
-
 const twoActions = [
   <FirstAction data-testid="action-btn" />,
   <SecondAction data-testid="action-btn" />,
 ];
 
 const instance = {
-  selectedFlatRows,
+  selectedFlatRows: [{ id: 1 }, { id: 2 }],
   controlledTableSelections: [
     {
       selectedRows: [],

diff --git a/src/DataTable/tests/TableHeaderCell.test.jsx b/src/DataTable/tests/TableHeaderCell.test.jsx
@@ -15,17 +15,13 @@ const props = {
 };
 
 // eslint-disable-next-line react/prop-types
-function FakeTable({ children }) {
-  return <table><thead><tr>{children}</tr></thead></table>;
+function FakeTable({ ...rest }) {
+  return <table><thead><tr><TableHeaderCell {...rest} /></tr></thead></table>;
 }
 
 describe('<TableHeaderCell />', () => {
   describe('unsorted', () => {
-    render(
-      <FakeTable>
-        <TableHeaderCell {...props} />
-      </FakeTable>,
-    );
+    render(<FakeTable {...props} />);
     const cell = screen.getByRole('columnheader');
     const innerCell = cell.firstChild;
 
@@ -44,26 +40,26 @@ describe('<TableHeaderCell />', () => {
 
   describe('with sorting', () => {
     it('renders a sortable indicator if sorting is available', () => {
-      render(<TableHeaderCell {...props} canSort />);
+      render(<FakeTable {...props} canSort />);
       const sortIndicator = screen.getByTestId('arrow-drop-up-down');
       expect(sortIndicator).toBeInTheDocument();
     });
 
     it('renders a sorted ascending indicator when sorted ascending', () => {
-      render(<TableHeaderCell {...props} canSort isSorted />);
+      render(<FakeTable {...props} canSort isSorted />);
       const sortIndicator = screen.getByTestId('arrow-drop-up');
       expect(sortIndicator).toBeInTheDocument();
     });
 
     it('renders a sorted descending indicator when sorted descending', () => {
-      render(<TableHeaderCell {...props} canSort isSorted isSortedDesc />);
+      render(<FakeTable {...props} canSort isSorted isSortedDesc />);
       const sortIndicator = screen.getByTestId('arrow-drop-down');
       expect(sortIndicator).toBeInTheDocument();
     });
 
     it('adds the toggle props to the header props if toggle props are available', () => {
       const headerPropsSpy = jest.fn().mockReturnValueOnce({});
-      render(<TableHeaderCell {...props} canSort getHeaderProps={headerPropsSpy} />);
+      render(<FakeTable {...props} canSort getHeaderProps={headerPropsSpy} />);
       expect(headerPropsSpy).toHaveBeenCalledWith(sortByToggleProps);
     });
   });

diff --git a/src/DataTable/tests/TablePagination.test.jsx b/src/DataTable/tests/TablePagination.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -32,12 +32,15 @@ describe('<TablePagination />', () => {
       const { getAllByTestId, getByRole } = render(<PaginationWrapper value={instance} />);
       const dropdownButton = getByRole('button', { name: /2 of 3/i });
       expect(dropdownButton).toBeInTheDocument();
-
-      await userEvent.click(dropdownButton);
+      await act(async () => {
+        await userEvent.click(dropdownButton);
+      });
 
       const dropdownChoices = getAllByTestId('pagination-dropdown-item');
       expect(dropdownChoices.length).toEqual(instance.pageCount);
-      await userEvent.click(dropdownChoices[1], undefined, { skipPointerEventsCheck: true });
+      await act(async () => {
+        await userEvent.click(dropdownChoices[1], undefined, { skipPointerEventsCheck: true });
+      });
 
       expect(instance.gotoPage).toHaveBeenCalledTimes(1);
       expect(instance.gotoPage).toHaveBeenCalledWith(1);