[9.0] [Unzyme] src/core/packages/apps (#217599)

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

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MetricTile } from './metric_tiles';
 import { Metric } from '../lib';
 
@@ -50,27 +50,41 @@ const metricWithMeta: Metric = {
 
 describe('MetricTile', () => {
   it('correct displays an untyped metric', () => {
-    const component = shallow(<MetricTile metric={untypedMetric} />);
-    expect(component).toMatchSnapshot();
+    render(<MetricTile metric={untypedMetric} />);
+    expect(screen.getByTestId('serverMetric-a-metric')).toBeInTheDocument();
+    expect(screen.getByText('A metric')).toBeInTheDocument();
+    expect(screen.getByText('1.80')).toBeInTheDocument();
   });
-
   it('correct displays a byte metric', () => {
-    const component = shallow(<MetricTile metric={byteMetric} />);
-    expect(component).toMatchSnapshot();
+    render(<MetricTile metric={byteMetric} />);
+    expect(screen.getByTestId('serverMetric-heap-total')).toBeInTheDocument();
+    expect(screen.getByText('Heap Total')).toBeInTheDocument();
+    expect(screen.getByText('1.40 GB')).toBeInTheDocument();
   });
 
   it('correct displays a float metric', () => {
-    const component = shallow(<MetricTile metric={floatMetric} />);
-    expect(component).toMatchSnapshot();
+    render(<MetricTile metric={floatMetric} />);
+    expect(screen.getByText('Load')).toBeInTheDocument();
+    expect(screen.getByText('4.05, 3.37, 3.12')).toBeInTheDocument();
   });
 
   it('correct displays a time metric', () => {
-    const component = shallow(<MetricTile metric={timeMetric} />);
-    expect(component).toMatchSnapshot();
+    const { getByTestId } = render(<MetricTile metric={timeMetric} />);
+    const card = getByTestId('serverMetric-response-time-max');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveTextContent('Response Time Max');
+    expect(card).toHaveTextContent('1234.00 ms');
   });
 
   it('correctly displays a metric with metadata', () => {
-    const component = shallow(<MetricTile metric={metricWithMeta} />);
-    expect(component).toMatchSnapshot();
+    const { getByTestId } = render(<MetricTile metric={metricWithMeta} />);
+    const card = getByTestId('serverMetric-delay');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveTextContent('Delay avg');
+    expect(card).toHaveTextContent('1.00 ms');
+    expect(card).toHaveTextContent('Percentiles');
+    expect(card).toHaveTextContent('50: 1.00 ms; 95: 5.00 ms; 99: 10.00 ms', {
+      normalizeWhitespace: true,
+    });
   });
 });

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

@@ -8,7 +8,9 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import type { StatusInfoServiceStatus as ServiceStatus } from '@kbn/core-status-common';
 import { StatusTable } from './status_table';
 
@@ -27,14 +29,63 @@ const createServiceStatus = (parts: Partial<ServiceStatus> = {}): ServiceStatus
 
 describe('StatusTable', () => {
   it('renders when statuses is provided', () => {
-    const component = shallow(
+    const component = mountWithIntl(
       <StatusTable statuses={[{ id: 'plugin:1', state, original: createServiceStatus() }]} />
     );
-    expect(component).toMatchSnapshot();
+    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');
   });
 
   it('renders empty when statuses is not provided', () => {
-    const component = shallow(<StatusTable />);
-    expect(component.isEmptyRender()).toBe(true);
+    const { container } = render(<StatusTable />);
+    expect(container.firstChild).toBeNull();
   });
 });