fix unit test errors (#2703)

* fix unit test errors

* bump

* last act wrap

resources/web/deployment.yaml

@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2705
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2703
           imagePullPolicy: Always
           resources:
             requests:

src/components/Extensibility/components/tests/Badge.test.js

@@ -28,14 +28,14 @@ describe('Badge', () => {
     const value = 'yes';
     const structure = {
       highlights: {
-        Success: ['yes', 'ok'],
+        success: ['yes', 'ok'],
       },
     };
 
     const wrapper = shallow(<Badge value={value} structure={structure} />);
     const status = wrapper.find(StatusBadge);
     const badgeProps = status.props();
-    expect(badgeProps.type).toEqual('Success');
+    expect(badgeProps.type).toEqual('success');
     expect(badgeProps.autoResolveType).toEqual(false);
     expect(status).toHaveLength(1);
   });

src/components/Extensibility/components/tests/Table.test.js

@@ -1,7 +1,7 @@
 import { TranslationBundleContext } from 'components/Extensibility/helpers';
 import { GenericList } from 'shared/components/GenericList/GenericList';
 import { mount } from 'testing/enzymeUtils';
-import { render, waitFor } from 'testing/reactTestingUtils';
+import { act, render, waitFor } from 'testing/reactTestingUtils';
 import { Table } from '../Table';
 import { ThemeProvider } from '@ui5/webcomponents-react';
 
@@ -20,7 +20,7 @@ const elements = [
 
 describe('Table', () => {
   // tests creating the title based on name & source
-  describe('title', () => {
+  describe('entries', () => {
     it('From name, translated', async () => {
       const component = render(
         <ThemeProvider>
@@ -37,7 +37,11 @@ describe('Table', () => {
         </ThemeProvider>,
       );
 
-      await component.findByText(/my-title/);
+      await waitFor(async () => {
+        await act(async () => {
+          component.findByText(/my-title/);
+        });
+      });
     });
 
     it('No name, fall back to source, translated', async () => {
@@ -51,55 +55,70 @@ describe('Table', () => {
         </ThemeProvider>,
       );
       await waitFor(async () => {
-        expect(
-          await component.queryByText('resource.array-data'),
-        ).not.toBeInTheDocument();
+        await act(async () => {
+          expect(
+            component.queryByText('resource.array-data'),
+          ).not.toBeInTheDocument();
+        });
       });
     });
 
     // tests "value-to-entries" edge cases
     describe('entries', () => {
-      it('passes array as entries', () => {
+      it('passes array as entries', async () => {
         const value = ['a'];
         const component = mount(
           <ThemeProvider>
             <Table value={value} structure={{}} />
           </ThemeProvider>,
         );
-        const list = component.find(GenericList);
-        expect(list).toHaveLength(1);
-
-        const { entries, notFoundMessage } = list.props();
-        expect(entries).toMatchObject(value);
-        expect(notFoundMessage).toBe(genericNotFoundMessage);
+        await waitFor(async () => {
+          await act(async () => {
+            const list = component.find(GenericList);
+            expect(list).toHaveLength(1);
+
+            const { entries, notFoundMessage } = list.props();
+            expect(entries).toMatchObject(value);
+            expect(notFoundMessage).toBe(genericNotFoundMessage);
+          });
+        });
       });
 
-      it('for nullish value defaults to empty array', () => {
+      it('for nullish value defaults to empty array', async () => {
         const component = mount(
           <ThemeProvider>
             <Table value={null} structure={{}} />
           </ThemeProvider>,
         );
-        const list = component.find(GenericList);
-        expect(list).toHaveLength(1);
 
-        const { entries, notFoundMessage } = list.props();
-        expect(entries).toMatchObject([]);
-        expect(notFoundMessage).toBe(genericNotFoundMessage);
+        await waitFor(async () => {
+          await act(async () => {
+            const list = component.find(GenericList);
+            expect(list).toHaveLength(1);
+
+            const { entries, notFoundMessage } = list.props();
+            expect(entries).toMatchObject([]);
+            expect(notFoundMessage).toBe(genericNotFoundMessage);
+          });
+        });
       });
 
-      it('for invalid value, renders "not-found" message', () => {
+      it('for invalid value, renders "not-found" message', async () => {
         const component = mount(
           <ThemeProvider>
             <Table value={-3} structure={{}} />
           </ThemeProvider>,
         );
-        const list = component.find(GenericList);
-        expect(list).toHaveLength(1);
-
-        const { entries, notFoundMessage } = list.props();
-        expect(entries).toMatchObject([-3]);
-        expect(notFoundMessage).toBe(genericNotFoundMessage);
+        await waitFor(async () => {
+          await act(async () => {
+            const list = component.find(GenericList);
+            expect(list).toHaveLength(1);
+
+            const { entries, notFoundMessage } = list.props();
+            expect(entries).toMatchObject([-3]);
+            expect(notFoundMessage).toBe(genericNotFoundMessage);
+          });
+        });
       });
     });
 
@@ -114,9 +133,10 @@ describe('Table', () => {
             <Table value={null} structure={structure} />
           </ThemeProvider>,
         );
-
-        await waitFor(() => {
-          expect(queryByLabelText('search-input')).not.toBeInTheDocument();
+        await waitFor(async () => {
+          await act(async () => {
+            expect(queryByLabelText('search-input')).not.toBeInTheDocument();
+          });
         });
       });
 
@@ -131,8 +151,12 @@ describe('Table', () => {
           </ThemeProvider>,
         );
 
-        expect(await component.findByLabelText('search-input'));
-        expect(await component.findByText('extensibility::first'));
+        await waitFor(async () => {
+          await act(async () => {
+            expect(component.findByLabelText('search-input'));
+            expect(component.findByText('extensibility::first'));
+          });
+        });
       });
     });
 

src/components/Extensibility/components/tests/Widget.copyable.test.js

@@ -1,6 +1,7 @@
 import copyToClipboard from 'copy-to-clipboard';
 import { act, render, waitFor } from 'testing/reactTestingUtils';
 import { ExtensibilityTestWrapper } from './helpers';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 // those tests are in separate file as we need to mock the `widgets` collection from `./../index.js`...
 // ... which originals in turn are required in other `Widget.test.js`

src/components/HelmReleases/tests/ReleaseDataPanel.test.js

@@ -1,10 +1,9 @@
-import React from 'react';
-import { render } from 'testing/reactTestingUtils';
+import { act, render, waitFor } from 'testing/reactTestingUtils';
 import { ReleaseDataPanel } from '../ReleaseDataPanel';
 import { ThemeProvider } from '@ui5/webcomponents-react';
 
 describe('ReleaseDataPanel', () => {
-  it('Renders release data', () => {
+  it('Renders release data', async () => {
     const release = {
       name: 'mock-release',
       version: '8',
@@ -25,9 +24,12 @@ describe('ReleaseDataPanel', () => {
         <ReleaseDataPanel release={release} />
       </ThemeProvider>,
     );
-
-    expect(queryByText('mock-chart-name')).toBeInTheDocument();
-    expect(queryByText('mock-chart-description')).toBeInTheDocument();
-    expect(queryByText('mock-chart-version')).toBeInTheDocument();
+    await waitFor(async () => {
+      await act(async () => {
+        expect(queryByText('mock-chart-name')).toBeInTheDocument();
+        expect(queryByText('mock-chart-description')).toBeInTheDocument();
+        expect(queryByText('mock-chart-version')).toBeInTheDocument();
+      });
+    });
   });
 });

src/shared/components/CopiableText/test/CopiableText.test.js

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import { CopiableText } from 'shared/components/CopiableText/CopiableText';
 import copyToClipboard from 'copy-to-clipboard';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 jest.mock('copy-to-clipboard');
 

src/shared/components/GenericList/Pagination/test/Pagination.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
 import { Pagination } from 'shared/components/GenericList/Pagination/Pagination';
 import { ThemeProvider } from '@ui5/webcomponents-react';
+import '@ui5/webcomponents-icons/dist/AllIcons.js';
 
 describe('Pagination', () => {
   it('Renders valid count of pages', () => {
@@ -39,7 +40,7 @@ describe('Pagination', () => {
     expect(queryByText('4')).not.toBeInTheDocument();
   });
 
-  it('Fire events', () => {
+  it('Fire events', async () => {
     const callback = jest.fn();
     const { getByText, getByLabelText } = render(
       <ThemeProvider>
@@ -51,14 +52,19 @@ describe('Pagination', () => {
         />
       </ThemeProvider>,
     );
-    fireEvent.click(getByText('6'));
-    expect(callback).toHaveBeenCalledWith(6);
 
-    fireEvent.click(getByLabelText('Next page'));
-    expect(callback).toHaveBeenCalledWith(6);
+    await waitFor(async () => {
+      await act(async () => {
+        fireEvent.click(getByText('6'));
+        expect(callback).toHaveBeenCalledWith(6);
 
-    fireEvent.click(getByLabelText('Previous page'));
-    expect(callback).toHaveBeenCalledWith(4);
+        fireEvent.click(getByLabelText('Next page'));
+        expect(callback).toHaveBeenCalledWith(6);
+
+        fireEvent.click(getByLabelText('Previous page'));
+        expect(callback).toHaveBeenCalledWith(4);
+      });
+    });
   });
 
   it('Disables correct links', () => {