[9.0] [Unzyme] Migrates status_table of enzyme completely (#218361)

src/core/packages/apps/browser-internal/src/status/components/status_table.test.tsx

@@ -8,8 +8,7 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { render } from '@testing-library/react';
+import { renderReactTestingLibraryWithI18n } from '@kbn/test-jest-helpers';
 import '@testing-library/jest-dom';
 import type { StatusInfoServiceStatus as ServiceStatus } from '@kbn/core-status-common';
 import { StatusTable } from './status_table';
@@ -20,6 +19,12 @@ const state = {
   message: 'Ready',
   title: 'green',
 };
+const state2 = {
+  id: 'degraded' as const,
+  uiColor: 'warning',
+  message: 'Not ready',
+  title: 'yellow',
+};
 
 const createServiceStatus = (parts: Partial<ServiceStatus> = {}): ServiceStatus => ({
   level: 'available',
@@ -29,63 +34,55 @@ const createServiceStatus = (parts: Partial<ServiceStatus> = {}): ServiceStatus
 
 describe('StatusTable', () => {
   it('renders when statuses is provided', () => {
-    const component = mountWithIntl(
-      <StatusTable statuses={[{ id: 'plugin:1', state, original: createServiceStatus() }]} />
+    const { getByTestId, getByText } = renderReactTestingLibraryWithI18n(
+      <StatusTable
+        statuses={[
+          { id: 'plugin:1', state, original: createServiceStatus() },
+          {
+            id: 'plugin:2',
+            state: state2,
+            original: createServiceStatus({ level: 'degraded', summary: 'Not ready' }),
+          },
+        ]}
+      />
     );
-    const table = component.find('EuiInMemoryTable');
-    expect(table.prop('columns')).toEqual([
-      {
-        align: 'center',
-        field: 'state',
-        name: 'Status',
-        render: expect.any(Function),
-        sortable: expect.any(Function),
-        width: '100px',
-      },
-      {
-        field: 'id',
-        name: 'ID',
-        sortable: true,
-      },
-      {
-        field: 'state',
-        name: 'Status summary',
-        render: expect.any(Function),
-      },
-      {
-        align: 'right',
-        isExpander: true,
-        name: expect.any(Object), // Matches the <EuiScreenReaderOnly> component
-        render: expect.any(Function),
-        width: '40px',
-      },
-    ]);
-    expect(table.prop('items')).toEqual([
-      {
-        id: 'plugin:1',
-        original: {
-          level: 'available',
-          summary: 'Ready',
-        },
-        state: {
-          id: 'available',
-          message: 'Ready',
-          title: 'green',
-          uiColor: 'success',
-        },
-      },
-    ]);
-    expect(table.prop('sorting')).toEqual({
-      sort: {
-        direction: 'asc',
-        field: 'state',
-      },
-    });
-    expect(table.prop('data-test-subj')).toBe('statusBreakdown');
+
+    const table = getByTestId('statusBreakdown');
+
+    // Verify table exists
+    expect(table).toBeInTheDocument();
+
+    // Verify columns
+    expect(getByText('Status')).toBeInTheDocument();
+    expect(getByText('ID')).toBeInTheDocument();
+    expect(getByText('Status summary')).toBeInTheDocument();
+
+    // Verify items
+    expect(getByText('plugin:1')).toBeInTheDocument();
+    expect(getByText('Ready')).toBeInTheDocument();
+
+    // Verify header row contents
+    const headerRow = table.querySelector('thead tr');
+    expect(headerRow).toBeInTheDocument();
+    expect(headerRow).toHaveTextContent('Status');
+    expect(headerRow).toHaveTextContent('ID');
+    expect(headerRow).toHaveTextContent('Status summary');
+    expect(headerRow).toHaveTextContent('Expand row');
+
+    // Verify sorting by checking row order
+    const rows = table.querySelectorAll('tr');
+    expect(rows).toHaveLength(3); // 1 header row + 2 data rows
+    expect(rows[1]).toHaveTextContent('plugin:2');
+    expect(rows[1]).toHaveTextContent('Not ready');
+    expect(rows[1].className).toContain('status-table-row-warning');
+
+    expect(rows[2]).toHaveTextContent('plugin:1');
+    expect(rows[2]).toHaveTextContent('Ready');
+    expect(rows[2].className).toContain('status-table-row-success');
   });
 
   it('renders empty when statuses is not provided', () => {
-    const { container } = render(<StatusTable />);
+    const { container } = renderReactTestingLibraryWithI18n(<StatusTable />);
     expect(container.firstChild).toBeNull();
   });
 });