From 665f7c6b84d53c527ac7b5b5fa687154626039ef Mon Sep 17 00:00:00 2001 From: "Christiane (Tina) Heiligers" Date: Wed, 9 Apr 2025 07:57:29 -0700 Subject: [PATCH] [Unzyme] src/core/packages/apps (#217599) ## Summary Fix https://github.com/elastic/kibana/issues/217589 Related to #217387 Migrates `metric_tiles` and `status_table` unit tests from `enzyme` snapshot tests to explicit assertions using `RTL`. Explicit assertions have the advantage of being more readable, targeted, reducing noise due to unrelated changes (e.g. EUI updates) and to make debugging easier. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios (cherry picked from commit 50ddab4418c7f53cdb5c3690e556dac79ab3c4eb) --- .../__snapshots__/metric_tiles.test.tsx.snap | 66 ----------------- .../__snapshots__/status_table.test.tsx.snap | 71 ------------------- .../status/components/metric_tiles.test.tsx | 38 ++++++---- .../status/components/status_table.test.tsx | 61 ++++++++++++++-- 4 files changed, 82 insertions(+), 154 deletions(-) delete mode 100644 src/core/packages/apps/browser-internal/src/status/components/__snapshots__/metric_tiles.test.tsx.snap delete mode 100644 src/core/packages/apps/browser-internal/src/status/components/__snapshots__/status_table.test.tsx.snap diff --git a/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/metric_tiles.test.tsx.snap b/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/metric_tiles.test.tsx.snap deleted file mode 100644 index cc4e27a6d6388..0000000000000 --- a/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/metric_tiles.test.tsx.snap +++ /dev/null @@ -1,66 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MetricTile correct displays a byte metric 1`] = ` - -`; - -exports[`MetricTile correct displays a float metric 1`] = ` - -`; - -exports[`MetricTile correct displays a time metric 1`] = ` - -`; - -exports[`MetricTile correct displays an untyped metric 1`] = ` - -`; - -exports[`MetricTile correctly displays a metric with metadata 1`] = ` - -`; diff --git a/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/status_table.test.tsx.snap b/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/status_table.test.tsx.snap deleted file mode 100644 index fe6d97825138d..0000000000000 --- a/src/core/packages/apps/browser-internal/src/status/components/__snapshots__/status_table.test.tsx.snap +++ /dev/null @@ -1,71 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StatusTable renders when statuses is provided 1`] = ` - - - , - "render": [Function], - "width": "40px", - }, - ] - } - data-test-subj="statusBreakdown" - itemId={[Function]} - itemIdToExpandedRowMap={Object {}} - items={ - Array [ - Object { - "id": "plugin:1", - "original": Object { - "level": "available", - "summary": "Ready", - }, - "state": Object { - "id": "available", - "message": "Ready", - "title": "green", - "uiColor": "success", - }, - }, - ] - } - rowProps={[Function]} - searchFormat="eql" - sorting={ - Object { - "sort": Object { - "direction": "asc", - "field": "state", - }, - } - } - tableLayout="fixed" -/> -`; diff --git a/src/core/packages/apps/browser-internal/src/status/components/metric_tiles.test.tsx b/src/core/packages/apps/browser-internal/src/status/components/metric_tiles.test.tsx index f9ab75e94b233..bc7a749074b84 100644 --- a/src/core/packages/apps/browser-internal/src/status/components/metric_tiles.test.tsx +++ b/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(); - expect(component).toMatchSnapshot(); + render(); + 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(); - expect(component).toMatchSnapshot(); + render(); + 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(); - expect(component).toMatchSnapshot(); + render(); + expect(screen.getByText('Load')).toBeInTheDocument(); + expect(screen.getByText('4.05, 3.37, 3.12')).toBeInTheDocument(); }); it('correct displays a time metric', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { getByTestId } = render(); + 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(); - expect(component).toMatchSnapshot(); + const { getByTestId } = render(); + 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, + }); }); }); diff --git a/src/core/packages/apps/browser-internal/src/status/components/status_table.test.tsx b/src/core/packages/apps/browser-internal/src/status/components/status_table.test.tsx index b9949a6decf44..26691bc840b7d 100644 --- a/src/core/packages/apps/browser-internal/src/status/components/status_table.test.tsx +++ b/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 describe('StatusTable', () => { it('renders when statuses is provided', () => { - const component = shallow( + const component = mountWithIntl( ); - 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 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(); - expect(component.isEmptyRender()).toBe(true); + const { container } = render(); + expect(container.firstChild).toBeNull(); }); });