Pkg update (#2063)

* Get Rid of react-router + minor updates

* jest update

* upgrade use-debounce & dayjs versions

* Refactor specs to reduce number of warnings

kafka-ui-react-app/package.json

@@ -10,13 +10,12 @@
     "@reduxjs/toolkit": "^1.8.1",
     "@rooks/use-outside-click-ref": "^4.10.1",
     "@testing-library/react": "^13.2.0",
-    "@types/eventsource": "^1.1.6",
     "@types/yup": "^0.29.13",
     "ace-builds": "^1.4.12",
     "ajv": "^8.6.3",
     "bulma": "^0.9.3",
     "classnames": "^2.2.6",
-    "dayjs": "^1.10.6",
+    "dayjs": "^1.11.2",
     "eslint-import-resolver-node": "^0.3.6",
     "eslint-import-resolver-typescript": "^2.7.1",
     "fetch-mock": "^9.11.0",
@@ -31,13 +30,12 @@
     "react-hook-form": "7.6.9",
     "react-multi-select-component": "^4.0.6",
     "react-redux": "^7.2.6",
-    "react-router": "^5.2.0",
     "react-router-dom": "^6.3.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sass": "^1.43.4",
     "styled-components": "^5.3.1",
-    "use-debounce": "^7.0.0",
+    "use-debounce": "^8.0.1",
     "uuid": "^8.3.1",
     "yup": "^0.32.9"
   },
@@ -77,12 +75,13 @@
     ]
   },
   "devDependencies": {
-    "@jest/types": "^27.0.6",
+    "@jest/types": "^28.1.0",
     "@openapitools/openapi-generator-cli": "^2.5.1",
     "@testing-library/dom": "^8.11.1",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.0.2",
+    "@types/eventsource": "^1.1.8",
+    "@types/jest": "^27.5.1",
     "@types/lodash": "^4.14.172",
     "@types/node": "^16.4.13",
     "@types/react": "^18.0.9",
@@ -94,31 +93,31 @@
     "@types/styled-components": "^5.1.13",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "dotenv": "^16.0.1",
     "eslint": "^8.15.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest-dom": "^4.0.1",
+    "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "fetch-mock-jest": "^1.5.1",
     "history": "^5.0.0",
-    "http-proxy-middleware": "^2.0.1",
+    "http-proxy-middleware": "^2.0.6",
     "husky": "^7.0.1",
     "jest-sonar-reporter": "^2.0.0",
-    "jest-styled-components": "^7.0.6",
+    "jest-styled-components": "^7.0.8",
     "lint-staged": "^12.1.2",
     "prettier": "^2.3.1",
     "react-scripts": "5.0.1",
     "redux-mock-store": "^1.5.4",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.4",
-    "ts-node": "^10.2.0",
+    "ts-jest": "^28.0.3",
+    "ts-node": "^10.8.0",
     "typescript": "^4.3.5"
   },
   "engines": {

kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx

@@ -30,7 +30,7 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
-const renderComponent = (path: string, store = storeMock) =>
+const renderComponent = (path: string, store = storeMock) => {
   render(
     <Routes>
       <Route
@@ -55,6 +55,7 @@ const renderComponent = (path: string, store = storeMock) =>
     </Routes>,
     { initialEntries: [path] }
   );
+};
 
 describe('New', () => {
   beforeEach(() => {
@@ -66,31 +67,29 @@ describe('New', () => {
   });
 
   it('checks header for create new', async () => {
-    renderComponent(clusterTopicNewPath(clusterName));
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
+
     expect(
       screen.getByRole('heading', { name: 'Create new Topic' })
     ).toHaveTextContent('Create new Topic');
   });
 
   it('checks header for copy', async () => {
-    renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`);
+    await act(() =>
+      renderComponent(`${clusterTopicCopyPath(clusterName)}?name=test`)
+    );
     expect(
       screen.getByRole('heading', { name: 'Copy Topic' })
     ).toHaveTextContent('Copy Topic');
   });
 
   it('validates form', async () => {
-    renderComponent(clusterTopicNewPath(clusterName));
-
-    await waitFor(() => {
-      userEvent.click(screen.getByText(/submit/i));
-    });
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
+    userEvent.click(screen.getByText(/submit/i));
     await waitFor(() => {
       expect(screen.getByText('name is a required field')).toBeInTheDocument();
     });
-    await waitFor(() => {
-      expect(mockNavigate).not.toHaveBeenCalled();
-    });
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it('submits valid form', async () => {
@@ -100,20 +99,13 @@ describe('New', () => {
     })) as jest.Mock;
     useDispatchSpy.mockReturnValue(useDispatchMock);
 
-    await act(() => {
-      renderComponent(clusterTopicNewPath(clusterName));
-    });
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
 
-    await waitFor(() => {
-      userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
-      userEvent.click(screen.getByText(/submit/i));
-    });
-
-    await waitFor(() => {
-      expect(mockNavigate).toBeCalledTimes(1);
-      expect(mockNavigate).toHaveBeenLastCalledWith(`../${topicName}`);
-    });
+    userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
+    userEvent.click(screen.getByText(/submit/i));
 
+    await waitFor(() => expect(mockNavigate).toBeCalledTimes(1));
+    expect(mockNavigate).toHaveBeenLastCalledWith(`../${topicName}`);
     expect(useDispatchMock).toHaveBeenCalledTimes(1);
   });
 
@@ -124,27 +116,20 @@ describe('New', () => {
     })) as jest.Mock;
 
     useDispatchSpy.mockReturnValue(useDispatchMock);
-
-    await act(() => {
-      renderComponent(clusterTopicNewPath(clusterName));
-    });
-
-    await waitFor(() => {
-      userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
-      userEvent.click(screen.getByText(/submit/i));
-    });
-
-    await waitFor(() => {
-      expect(mockNavigate).not.toHaveBeenCalled();
-    });
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
+    await act(() =>
+      userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName)
+    );
+    await act(() => userEvent.click(screen.getByText(/submit/i)));
+    expect(mockNavigate).not.toHaveBeenCalled();
   });
 
   it('submits valid form that result in an error', async () => {
     const useDispatchSpy = jest.spyOn(redux, 'useDispatch');
     const useDispatchMock = jest.fn();
     useDispatchSpy.mockReturnValue(useDispatchMock);
-    renderComponent(clusterTopicNewPath(clusterName));
 
+    await act(() => renderComponent(clusterTopicNewPath(clusterName)));
     await act(() => {
       userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName);
       userEvent.click(screen.getByText(/submit/i));

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts

@@ -117,7 +117,7 @@ export const ListItem = styled.li`
   color: ${({ theme }) => theme.table.td.color.normal};
 `;
 
-export const InfoParagraph = styled.p`
+export const InfoParagraph = styled.div`
   font-size: 12px;
   font-weight: 400;
   line-height: 1.5;

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/AddFilter.spec.tsx

@@ -29,38 +29,44 @@ const renderComponent = (props: Partial<FilterModalProps> = {}) =>
   );
 
 describe('AddFilter component', () => {
-  it('should test click on Saved Filters redirects to Saved components', () => {
-    renderComponent();
-    userEvent.click(screen.getByRole('savedFilterText'));
-    expect(screen.getByText('Saved filters')).toBeInTheDocument();
-    expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
-  });
+  describe('', () => {
+    beforeEach(async () => {
+      await act(() => {
+        renderComponent();
+      });
+    });
 
-  it('info button to be in the document', () => {
-    renderComponent();
-    expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument();
-  });
+    it('should test click on Saved Filters redirects to Saved components', () => {
+      userEvent.click(screen.getByRole('savedFilterText'));
+      expect(screen.getByText('Saved filters')).toBeInTheDocument();
+      expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
+    });
 
-  it('renders InfoModal', () => {
-    renderComponent();
-    userEvent.click(screen.getByRole('button', { name: 'info' }));
-    expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument();
-    expect(screen.getByRole('list', { name: 'info-list' })).toBeInTheDocument();
-  });
+    it('info button to be in the document', () => {
+      expect(screen.getByRole('button', { name: 'info' })).toBeInTheDocument();
+    });
 
-  it('should test click on return to custom filter redirects to Add filters', async () => {
-    renderComponent();
-    userEvent.click(screen.getByRole('savedFilterText'));
+    it('renders InfoModal', () => {
+      userEvent.click(screen.getByRole('button', { name: 'info' }));
+      expect(screen.getByRole('button', { name: 'Ok' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('list', { name: 'info-list' })
+      ).toBeInTheDocument();
+    });
 
-    expect(screen.getByText('Saved filters')).toBeInTheDocument();
-    expect(screen.queryByRole('savedFilterText')).not.toBeInTheDocument();
-    expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
+    it('should test click on return to custom filter redirects to Add filters', async () => {
+      userEvent.click(screen.getByRole('savedFilterText'));
 
-    await act(() =>
-      userEvent.click(screen.getByText(/back to custom filters/i))
-    );
-    expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
-    expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
+      expect(screen.getByText('Saved filters')).toBeInTheDocument();
+      expect(screen.queryByRole('savedFilterText')).not.toBeInTheDocument();
+      expect(screen.getAllByRole('savedFilter')).toHaveLength(2);
+
+      await act(() =>
+        userEvent.click(screen.getByText(/back to custom filters/i))
+      );
+      expect(screen.queryByText('Saved filters')).not.toBeInTheDocument();
+      expect(screen.getByRole('savedFilterText')).toBeInTheDocument();
+    });
   });
 
   describe('Add new filter', () => {

kafka-ui-react-app/src/lib/testHelpers.tsx

@@ -1,5 +1,10 @@
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import {
+  MemoryRouter,
+  MemoryRouterProps,
+  Route,
+  Routes,
+} from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import theme from 'theme/theme';
@@ -9,7 +14,6 @@ import { RootState } from 'redux/interfaces';
 import { configureStore } from '@reduxjs/toolkit';
 import rootReducer from 'redux/reducers';
 import mockStoreCreator from 'redux/store/configureStore/mockStoreCreator';
-import { MemoryRouterProps } from 'react-router';
 
 interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
   preloadedState?: Partial<RootState>;