[9.1] [Discover][Enzyme Test Migration] Migrate discover plugin unit tests to RTL (#231693)

src/platform/plugins/shared/discover/public/application/context/components/context_error_message/context_error_message.test.tsx

@@ -8,38 +8,60 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import type { ReactWrapper } from 'enzyme';
 import { ContextErrorMessage } from './context_error_message';
 import { FailureReason, LoadingStatus } from '../../services/context_query_state';
-import { findTestSubject } from '@elastic/eui/lib/test';
+import { render, screen } from '@testing-library/react';
+import { renderWithI18n } from '@kbn/test-jest-helpers';
 
-describe('loading spinner', function () {
-  let component: ReactWrapper;
+const DEFAULT_BODY =
+  'Please reload or go back to the document list to select a valid anchor document.';
+const DEFAULT_TITLE = 'Failed to load the anchor document';
 
+describe('loading spinner', () => {
   it('ContextErrorMessage does not render on loading', () => {
-    component = mountWithIntl(<ContextErrorMessage status={{ value: LoadingStatus.LOADING }} />);
-    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
+    render(<ContextErrorMessage status={{ value: LoadingStatus.LOADING }} />);
+
+    expect(screen.queryByTestId('contextErrorMessageTitle')).not.toBeInTheDocument();
   });
 
   it('ContextErrorMessage does not render on success loading', () => {
-    component = mountWithIntl(<ContextErrorMessage status={{ value: LoadingStatus.LOADED }} />);
-    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(0);
+    render(<ContextErrorMessage status={{ value: LoadingStatus.LOADED }} />);
+
+    expect(screen.queryByTestId('contextErrorMessageTitle')).not.toBeInTheDocument();
+  });
+
+  it('ContextErrorMessage does not render on uninitialized loading', () => {
+    render(<ContextErrorMessage status={{ value: LoadingStatus.UNINITIALIZED }} />);
+
+    expect(screen.queryByTestId('contextErrorMessageTitle')).not.toBeInTheDocument();
   });
 
   it('ContextErrorMessage renders just the title if the reason is not specifically handled', () => {
-    component = mountWithIntl(<ContextErrorMessage status={{ value: LoadingStatus.FAILED }} />);
-    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
-    expect(findTestSubject(component, 'contextErrorMessageBody').text()).toBe('');
+    renderWithI18n(<ContextErrorMessage status={{ value: LoadingStatus.FAILED }} />);
+
+    expect(screen.getByText(DEFAULT_TITLE)).toBeVisible();
+    expect(screen.queryByText(DEFAULT_BODY)).not.toBeInTheDocument();
+  });
+
+  it('ContextErrorMessage does not render the reason for invalid tiebreaker errors', () => {
+    renderWithI18n(
+      <ContextErrorMessage
+        status={{ value: LoadingStatus.FAILED, reason: FailureReason.INVALID_TIEBREAKER }}
+      />
+    );
+
+    expect(screen.getByText(DEFAULT_TITLE)).toBeVisible();
+    expect(screen.queryByText(DEFAULT_BODY)).not.toBeInTheDocument();
   });
 
   it('ContextErrorMessage renders the reason for unknown errors', () => {
-    component = mountWithIntl(
+    renderWithI18n(
       <ContextErrorMessage
         status={{ value: LoadingStatus.FAILED, reason: FailureReason.UNKNOWN }}
       />
     );
-    expect(findTestSubject(component, 'contextErrorMessageTitle').length).toBe(1);
-    expect(findTestSubject(component, 'contextErrorMessageBody').length).toBe(1);
+
+    expect(screen.getByText(DEFAULT_TITLE)).toBeVisible();
+    expect(screen.getByText(DEFAULT_BODY)).toBeVisible();
   });
 });

src/platform/plugins/shared/discover/public/application/doc/components/doc.test.tsx

@@ -7,45 +7,34 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { throwError, of } from 'rxjs';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import type { ReactWrapper } from 'enzyme';
-import { findTestSubject } from '@elastic/eui/lib/test';
-import type { DocProps } from './doc';
-import { Doc } from './doc';
-import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
-import { setUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/plugin';
-import { mockUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/__mocks__';
 import type { UnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/types';
+import React from 'react';
 import { createDiscoverServicesMock } from '../../../__mocks__/services';
+import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import { DiscoverTestProvider } from '../../../__mocks__/test_provider';
+import { Doc } from './doc';
+import { ElasticRequestState } from '@kbn/unified-doc-viewer';
+import { getDataTableRecordMock } from '@kbn/discover-utils/src/__mocks__';
+import { mockUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/__mocks__';
+import { setUnifiedDocViewerServices } from '@kbn/unified-doc-viewer-plugin/public/plugin';
+import { render, screen } from '@testing-library/react';
+import { useEsDocSearch } from '@kbn/unified-doc-viewer-plugin/public';
 
+const INDEX_NAME = 'index1';
 const services = createDiscoverServicesMock();
 const mockSearchApi = jest.fn();
 
-beforeEach(() => {
-  jest.clearAllMocks();
-});
+jest.mock('@kbn/unified-doc-viewer-plugin/public', () => ({
+  useEsDocSearch: jest.fn(),
+}));
 
-const waitForPromises = async () =>
-  act(async () => {
-    await new Promise((resolve) => setTimeout(resolve));
-  });
+const mockUseDocSearch = jest.mocked(useEsDocSearch);
 
-/**
- * this works but logs ugly error messages until we're using React 16.9
- * should be adapted when we upgrade
- */
-async function mountDoc(update = false) {
-  const props = {
-    id: '1',
-    index: 'index1',
-    dataView: dataViewMock,
-    referrer: 'mock-referrer',
-  } as DocProps;
-  let comp!: ReactWrapper;
+jest.mock('./single_doc_viewer', () => ({
+  SingleDocViewer: () => <div data-test-subj="singleDocViewerMock" />,
+}));
+
+function setupDoc() {
   setUnifiedDocViewerServices({
     ...mockUnifiedDocViewerServices,
     data: {
@@ -54,44 +43,70 @@ async function mountDoc(update = false) {
       },
     },
   } as unknown as UnifiedDocViewerServices);
-  await act(async () => {
-    comp = mountWithIntl(
-      <DiscoverTestProvider services={services}>
-        <Doc {...props} />
-      </DiscoverTestProvider>
-    );
-    if (update) comp.update();
-  });
-  if (update) {
-    await waitForPromises();
-    comp.update();
-  }
-  return comp;
+
+  return render(
+    <DiscoverTestProvider services={services}>
+      <Doc dataView={dataViewMock} id="1" index={INDEX_NAME} referrer="mock-referrer" />
+    </DiscoverTestProvider>
+  );
 }
 
 describe('Test of <Doc /> of Discover', () => {
-  test('renders loading msg', async () => {
-    const comp = await mountDoc();
-    expect(findTestSubject(comp, 'doc-msg-loading').length).toBe(1);
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
-  test('renders notFound msg', async () => {
-    mockSearchApi.mockImplementation(() => throwError({ status: 404 }));
-    const comp = await mountDoc(true);
-    expect(findTestSubject(comp, 'doc-msg-notFound').length).toBe(1);
+  it('renders Loading msg', () => {
+    mockUseDocSearch.mockReturnValue([ElasticRequestState.Loading, null, jest.fn()]);
+
+    setupDoc();
+
+    expect(screen.getByText(/single document - #1/i)).toBeVisible();
+    expect(screen.getByRole('progressbar', { name: /loading/i })).toBeVisible();
+    expect(screen.getByText(/loading…/i)).toBeVisible();
   });
 
-  test('renders error msg', async () => {
-    mockSearchApi.mockImplementation(() => throwError({ error: 'something else' }));
-    const comp = await mountDoc(true);
-    expect(findTestSubject(comp, 'doc-msg-error').length).toBe(1);
+  it('renders NotFound msg', () => {
+    mockUseDocSearch.mockReturnValue([ElasticRequestState.NotFound, null, jest.fn()]);
+
+    setupDoc();
+
+    expect(screen.getByText(/single document - #1/i)).toBeVisible();
+    expect(screen.getByText(/cannot find document/i)).toBeVisible();
+    expect(screen.getByText(/no documents match that ID./i)).toBeVisible();
   });
 
-  test('renders elasticsearch hit ', async () => {
-    mockSearchApi.mockImplementation(() =>
-      of({ rawResponse: { hits: { total: 1, hits: [{ _id: 1, _source: { test: 1 } }] } } })
-    );
-    const comp = await mountDoc(true);
-    expect(findTestSubject(comp, 'doc-hit').length).toBe(1);
+  it('renders NotFoundDataView msg', () => {
+    mockUseDocSearch.mockReturnValue([ElasticRequestState.NotFoundDataView, null, jest.fn()]);
+
+    setupDoc();
+
+    expect(screen.getByText(/single document - #1/i)).toBeVisible();
+    expect(screen.getByText(/no data view matches id/i)).toBeVisible();
+  });
+
+  it('renders Error msg', () => {
+    mockUseDocSearch.mockReturnValue([ElasticRequestState.Error, null, jest.fn()]);
+
+    setupDoc();
+
+    expect(screen.getByText(/single document - #1/i)).toBeVisible();
+    expect(screen.getByText(/cannot run search/i)).toBeVisible();
+    expect(screen.getByText(`${INDEX_NAME} is missing.`)).toBeVisible();
+    expect(screen.getByText(/please ensure the index exists./i)).toBeVisible();
+  });
+
+  it('renders elasticsearch hit', () => {
+    mockUseDocSearch.mockReturnValue([
+      ElasticRequestState.Found,
+      getDataTableRecordMock(),
+      jest.fn(),
+    ]);
+
+    setupDoc();
+
+    expect(screen.getByText(/single document - #1/i)).toBeVisible();
+    expect(screen.getByTestId('doc-hit')).toBeVisible();
+    expect(screen.getByTestId('singleDocViewerMock')).toBeVisible();
   });
 });

src/platform/plugins/shared/discover/public/application/main/components/loading_spinner/loading_spinner.test.tsx

@@ -8,22 +8,19 @@
  */
 
 import React from 'react';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import type { ReactWrapper } from 'enzyme';
-import { LoadingSpinner } from './loading_spinner';
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { DiscoverTestProvider } from '../../../../__mocks__/test_provider';
+import { LoadingSpinner } from './loading_spinner';
+import { render, screen } from '@testing-library/react';
 
-describe('loading spinner', function () {
-  let component: ReactWrapper;
-
-  it('LoadingSpinner renders a Searching text and a spinner', () => {
-    component = mountWithIntl(
+describe('Loading spinner', function () {
+  it('renders "Searching" text and a spinner', () => {
+    render(
       <DiscoverTestProvider>
         <LoadingSpinner />
       </DiscoverTestProvider>
     );
-    expect(findTestSubject(component, 'loadingSpinnerText').text()).toBe('Searching');
-    expect(findTestSubject(component, 'loadingSpinner').length).toBe(1);
+
+    expect(screen.getByText(/searching/i)).toBeVisible();
+    expect(screen.getByRole('progressbar')).toBeVisible();
   });
 });