update tests after changes in core-ui

Author: JeanMarcMilletScality

shell-ui/src/navbar/NotificationCenter.spec.tsx

@@ -1,19 +1,20 @@
-import React, { PropsWithChildren } from 'react';
 import { act, screen, waitFor, within } from '@testing-library/react';
-import NotificationCenterProvider, {
-  InternalNotification,
-  Notification,
-} from '../NotificationCenterProvider';
-import NotificationCenter from './NotificationCenter';
 import userEvent from '@testing-library/user-event';
+import { PropsWithChildren } from 'react';
 import { QueryClient } from 'react-query';
-import { prepareRenderMultipleHooks } from './__TESTS__/testMultipleHooks';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { ShellHistoryProvider } from '../initFederation/ShellHistoryProvider';
-import { useNotificationCenter } from '../useNotificationCenter';
+import NotificationCenterProvider, {
+  InternalNotification,
+  Notification,
+} from '../NotificationCenterProvider';
 import { QueryClientProvider } from '../QueryClientProvider';
+import { useNotificationCenter } from '../useNotificationCenter';
+import { prepareRenderMultipleHooks } from './__TESTS__/testMultipleHooks';
+import NotificationCenter from './NotificationCenter';
+import {debug} from "jest-preview";
 
-export const notificationCenterSelectors = {
+const notificationCenterSelectors = {
   notificationCenterButton: () =>
     screen.getByRole('button', { name: /notification center/i }),
   emptyNotificationCenterIcon: () =>
@@ -175,21 +176,23 @@ describe('NotificationCenter', () => {
     //E open again the notification center
     userEvent.click(notificationCenterSelectors.notificationCenterButton());
     //V the notification are marked as read
+    debug();
+  
     expect(
       within(screen.getAllByRole('option')[0]).queryByRole('img', {
-        name: /unread notification mark/i,
-      }),
-    ).toBeNull();
+          name: /unread notification mark/i,
+        }),
+      ).not.toBeVisible();
     expect(
       within(screen.getAllByRole('option')[1]).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
     expect(
       within(screen.getAllByRole('option')[2]).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
   });
 
   it('can be navigated with the keyboard', async () => {
@@ -241,7 +244,7 @@ describe('NotificationCenter', () => {
       within(lastNotification).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
   });
 
   it('should not display notifications with the same ID', async () => {
@@ -267,17 +270,17 @@ describe('NotificationCenter', () => {
       within(screen.getAllByRole('option')[0]).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
     expect(
       within(screen.getAllByRole('option')[1]).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
     expect(
       within(screen.getAllByRole('option')[2]).queryByRole('img', {
         name: /unread notification mark/i,
       }),
-    ).toBeNull();
+    ).not.toBeVisible();
     //E
     userEvent.click(notificationCenterSelectors.notificationCenterButton());
     //V

ui/src/components/DashboardInventory.test.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
 import { screen } from '@testing-library/react';
 import DashboardInventory from './DashboardInventory';
 import { waitForLoadingToFinish, render } from './__TEST__/util';
-import type { Alert } from '../services/alertUtils';
 import { useHighestSeverityAlerts } from '../containers/AlertProvider';
 import {
   getNodesCountQuery,
@@ -63,10 +61,10 @@ describe('the dashboard inventory panel', () => {
     await waitForLoadingToFinish();
     // Verify
     expect(
-      screen.getAllByLabelText(`Node-backend ${STATUS_CRITICAL}`).length,
+      screen.getAllByLabelText(`Nodes status is ${STATUS_CRITICAL}`).length,
     ).toEqual(1);
     expect(
-      screen.getAllByLabelText(`Volume-backend ${STATUS_CRITICAL}`).length,
+      screen.getAllByLabelText(`Volumes status is ${STATUS_CRITICAL}`).length,
     ).toEqual(1);
   });
   test('displays properly the status WARNING for nodes and volumes', async () => {
@@ -78,10 +76,10 @@ describe('the dashboard inventory panel', () => {
     await waitForLoadingToFinish();
     // Verify
     expect(
-      screen.getAllByLabelText(`Node-backend ${STATUS_WARNING}`).length,
+      screen.getAllByLabelText(`Nodes status is ${STATUS_WARNING}`).length,
     ).toEqual(1);
     expect(
-      screen.getAllByLabelText(`Volume-backend ${STATUS_WARNING}`).length,
+      screen.getAllByLabelText(`Volumes status is ${STATUS_WARNING}`).length,
     ).toEqual(1);
   });
   test('displays properly the status HEALTHY for nodes and volumes', async () => {
@@ -93,10 +91,10 @@ describe('the dashboard inventory panel', () => {
     await waitForLoadingToFinish();
     // Verify
     expect(
-      screen.getAllByLabelText(`Node-backend ${STATUS_HEALTH}`).length,
+      screen.getAllByLabelText(`Nodes status is ${STATUS_HEALTH}`).length,
     ).toEqual(1);
     expect(
-      screen.getAllByLabelText(`Volume-backend ${STATUS_HEALTH}`).length,
+      screen.getAllByLabelText(`Volumes status is ${STATUS_HEALTH}`).length,
     ).toEqual(1);
   });
   test('displays the loader if the query does not return a result', async () => {

ui/src/components/DashboardPlane.test.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
 import { screen } from '@testing-library/react';
+import { STATUS_CRITICAL, STATUS_HEALTH, STATUS_WARNING } from '../constants';
+import { useHighestSeverityAlerts } from '../containers/AlertProvider';
 import DashboardPlaneHealth from './DashboardPlaneHealth';
 import { render } from './__TEST__/util';
-import type { Alert } from '../services/alertUtils';
-import { useHighestSeverityAlerts } from '../containers/AlertProvider';
-import { STATUS_WARNING, STATUS_CRITICAL, STATUS_HEALTH } from '../constants';
 const alertsCritical = [
   {
     id: 'alert1',
@@ -49,7 +47,7 @@ describe("the dashboard network's plane panel", () => {
     (useHighestSeverityAlerts as any).mockImplementation(() => noAlerts);
     render(<DashboardPlaneHealth />);
     expect(
-      screen.getAllByLabelText(`Check-circle status ${STATUS_HEALTH}`),
+      screen.getAllByLabelText(`status ${STATUS_HEALTH}`),
     ).toHaveLength(NB_ITEMS);
   });
   test('displays 2 warning statuses when warning alerts are present as well as link to the alerts page', async () => {
@@ -59,7 +57,7 @@ describe("the dashboard network's plane panel", () => {
     render(<DashboardPlaneHealth />);
     // Verify
     expect(
-      screen.getAllByLabelText(`Exclamation-circle status ${STATUS_WARNING}`),
+      screen.getAllByLabelText(`status ${STATUS_WARNING}`),
     ).toHaveLength(NB_ITEMS);
     expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS);
   });
@@ -70,7 +68,7 @@ describe("the dashboard network's plane panel", () => {
     render(<DashboardPlaneHealth />);
     // Verify
     expect(
-      screen.getAllByLabelText(`Times-circle status ${STATUS_CRITICAL}`),
+      screen.getAllByLabelText(`status ${STATUS_CRITICAL}`),
     ).toHaveLength(NB_ITEMS);
     expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS);
   });

ui/src/components/DashboardServices.test.tsx

@@ -48,7 +48,7 @@ describe('the dashboard inventory panel', () => {
     render(<DashboardServices />);
     // Verify
     expect(
-      screen.getAllByLabelText(`Check-circle status ${STATUS_HEALTH}`),
+      screen.getAllByLabelText(`status ${STATUS_HEALTH}`),
     ).toHaveLength(8);
   });
   test('displays the services panel and display all 8 warning statuses when warning alerts are present as well as link to the alerts page', async () => {
@@ -58,7 +58,7 @@ describe('the dashboard inventory panel', () => {
     render(<DashboardServices />);
     // Verify
     expect(
-      screen.getAllByLabelText(`Exclamation-circle status ${STATUS_WARNING}`),
+      screen.getAllByLabelText(`status ${STATUS_WARNING}`),
     ).toHaveLength(8);
     expect(screen.getAllByTestId('alert-link')).toHaveLength(8);
   });
@@ -69,7 +69,7 @@ describe('the dashboard inventory panel', () => {
     render(<DashboardServices />);
     // Verify
     expect(
-      screen.getAllByLabelText(`Times-circle status ${STATUS_CRITICAL}`),
+      screen.getAllByLabelText(`status ${STATUS_CRITICAL}`),
     ).toHaveLength(8);
     expect(screen.getAllByTestId('alert-link')).toHaveLength(8);
   });

ui/src/components/NodePartitionTable.test.tsx

@@ -350,7 +350,7 @@ describe('the system partition table', () => {
     );
     // Verify
     expect(
-      screen.getByLabelText('Exclamation-circle status warning'),
+      screen.getByLabelText('status warning'),
     ).toBeInTheDocument();
     expect(screen.getByLabelText('97%')).toBeInTheDocument();
     expect(screen.getByText('/mnt/testpart')).toBeInTheDocument();