Update webcomponents to latest (#2598)

* update webcomponents to latest

* bumps

* fix unit tests

* fix unit tests

* potenital fix of Namespacesettings unit test

* Use chromium (#2601)

* Try using chromium

* fix local

* fix unit tests

* fix jobs test

---------

Co-authored-by: chriskari <chriskari@gmx.de>
Co-authored-by: Piotr Halama <piotr.halama@sap.com>

package.json

@@ -58,10 +58,10 @@
     "@types/jsonpath": "^0.2.0",
     "@types/pluralize": "^0.0.29",
     "@ui-schema/ui-schema": "^0.4.0-beta.1",
-    "@ui5/webcomponents": "~1.15.1",
-    "@ui5/webcomponents-fiori": "~1.15.1",
-    "@ui5/webcomponents-icons": "~1.15.1",
-    "@ui5/webcomponents-react": "~1.17.2",
+    "@ui5/webcomponents": "^1.17.2",
+    "@ui5/webcomponents-fiori": "^1.17.2",
+    "@ui5/webcomponents-icons": "^1.17.2",
+    "@ui5/webcomponents-react": "~1.19.0",
     "buffer": "^6.0.3",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",

resources/backend/deployment.yaml

@@ -20,7 +20,7 @@ spec:
     spec:
       containers:
         - name: backend
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2554
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-backend:PR-2598
           imagePullPolicy: Always
           resources:
             limits:

resources/web/deployment.yaml

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

src/components/Preferences/test/NamespaceSettings.test.tsx

@@ -1,23 +1,16 @@
 import { showHiddenNamespacesState } from 'state/preferences/showHiddenNamespacesAtom';
-import { render, fireEvent, waitFor } from 'testing/reactTestingUtils';
+import { render } from 'testing/reactTestingUtils';
 import NamespaceSettings from '../NamespaceSettings';
 
 describe('NamespaceSettings', () => {
-  it('Sends custom message on toggle', async () => {
-    const { getByLabelText } = render(<NamespaceSettings />, {
+  it('Check ui5 switch checked', () => {
+    const { container } = render(<NamespaceSettings />, {
       initializeState: snapshot =>
         snapshot.set(showHiddenNamespacesState, true),
     });
 
-    const toggle = getByLabelText('settings.clusters.showHiddenNamespaces');
-    const toggleSwitch = toggle.shadowRoot?.querySelector('[role="switch"]');
+    const toggle = container.querySelector('ui5-switch');
 
-    expect(toggleSwitch).toHaveAttribute('aria-checked', 'true');
-
-    if (toggleSwitch) fireEvent.click(toggleSwitch);
-
-    await waitFor(() => {
-      expect(toggleSwitch).toHaveAttribute('aria-checked', 'false');
-    });
+    expect(toggle).toHaveAttribute('checked', 'true');
   });
 });

src/shared/components/StatusBadge/test/StatusBadge.test.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';
 import { render } from '@testing-library/react';
+import { ThemeProvider } from '@ui5/webcomponents-react';
 
 describe('StatusBadge', () => {
   it('renders status text with proper role', () => {
-    const { queryByRole } = render(<StatusBadge>INITIAL</StatusBadge>);
+    const { queryByRole } = render(
+      <ThemeProvider>
+        <StatusBadge>INITIAL</StatusBadge>
+      </ThemeProvider>,
+    );
 
     const status = queryByRole('status');
     expect(status).toBeInTheDocument();
@@ -15,9 +20,11 @@ describe('StatusBadge', () => {
     console.warn = jest.fn();
 
     render(
-      <StatusBadge autoResolveType>
-        <small>Status</small>
-      </StatusBadge>,
+      <ThemeProvider>
+        <StatusBadge autoResolveType>
+          <small>Status</small>
+        </StatusBadge>
+      </ThemeProvider>,
     );
 
     expect(console.warn.mock.calls[0]).toMatchSnapshot();
@@ -26,7 +33,11 @@ describe('StatusBadge', () => {
   it('renders status text with DEFAULT_STATUSES_PATH', () => {
     const DEFAULT_STATUSES_PATH = 'common.statuses.initial';
     // 'common.statuses.initial,common.statuses.initial,fallback';
-    const { queryByRole } = render(<StatusBadge>Initial</StatusBadge>);
+    const { queryByRole } = render(
+      <ThemeProvider>
+        <StatusBadge>Initial</StatusBadge>
+      </ThemeProvider>,
+    );
     const status = queryByRole('status');
     expect(status).toBeInTheDocument();
     expect(status).toHaveTextContent(DEFAULT_STATUSES_PATH);
@@ -36,7 +47,9 @@ describe('StatusBadge', () => {
     const RESOURCE_KIND = 'resource';
     const RESOURCE_STATUSES_PATH = 'resource.statuses.initial';
     const { queryByRole } = render(
-      <StatusBadge resourceKind={RESOURCE_KIND}>Initial</StatusBadge>,
+      <ThemeProvider>
+        <StatusBadge resourceKind={RESOURCE_KIND}>Initial</StatusBadge>
+      </ThemeProvider>,
     );
     const status = queryByRole('status');
     expect(status).toBeInTheDocument();
@@ -45,14 +58,20 @@ describe('StatusBadge', () => {
 
   it('renders status text without tooltip', () => {
     const { getByTestId } = render(
-      <StatusBadge noTooltip>Initial</StatusBadge>,
+      <ThemeProvider>
+        <StatusBadge noTooltip>Initial</StatusBadge>
+      </ThemeProvider>,
     );
     const status = getByTestId('no-tooltip');
     expect(status).toBeInTheDocument();
   });
 
   it('renders status text with tooltip', () => {
-    const { getByTestId } = render(<StatusBadge>Initial</StatusBadge>);
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <StatusBadge>Initial</StatusBadge>
+      </ThemeProvider>,
+    );
     const status = getByTestId('has-tooltip');
     expect(status).toBeInTheDocument();
   });

tests/integration/tests/namespace/test-jobs.spec.js

@@ -101,7 +101,7 @@ context('Test Jobs', () => {
     // status
     cy.get('[role="status"]', { timeout: 75 * 1000 })
       .first()
-      .should('have.text', 'Completed');
+      .contains('Completed');
 
     // check logs
     checkJobLogs({