[Lens] rewrite some tests to testing library (#187637)

## Summary Rewrites some tests to testing-library/react. The style is not always ideal (I mean, I could limit usage of `getByTestId` more often or write more abstracted methods for repetitive parts of the tests) but I am aiming for improvement here, not perfection.
elastic · Jul 15, 2024 · 369b3a9 · 369b3a9
1 parent e5fa5c6
commit 369b3a9
Show file tree

Hide file tree

Showing 22 changed files with 774 additions and 1,404 deletions.
diff --git a/.../plugins/lens/public/app_plugin/__snapshots__/get_application_user_messages.test.tsx.snap b/.../plugins/lens/public/app_plugin/__snapshots__/get_application_user_messages.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.test.tsx
@@ -8,16 +8,24 @@
 import React from 'react';
 
 import { CoreStart } from '@kbn/core/public';
-import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
-import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { shallow } from 'enzyme';
 import { Visualization } from '..';
 import { DataViewsState } from '../state_management';
 import { Datasource, UserMessage } from '../types';
 import {
+  UserMessageGetterProps,
   filterAndSortUserMessages,
   getApplicationUserMessages,
 } from './get_application_user_messages';
+import { cleanup, render, screen } from '@testing-library/react';
+import { I18nProvider } from '@kbn/i18n-react';
+
+jest.mock('@kbn/shared-ux-link-redirect-app', () => {
+  const original = jest.requireActual('@kbn/shared-ux-link-redirect-app');
+  return {
+    ...original,
+    RedirectAppLinks: () => <a>RedirectAppLinks</a>,
+  };
+});
 
 describe('application-level user messages', () => {
   it('should generate error if vis type is not provided', () => {
@@ -139,70 +147,57 @@ describe('application-level user messages', () => {
       return core;
     }
 
-    const irrelevantProps = {
-      dataViews: {} as DataViewsState,
-      visualization: {} as Visualization,
-      visualizationState: { activeId: 'foo', state: {} },
+    const renderApplicationUserMessages = (propsOverrides?: Partial<UserMessageGetterProps>) => {
+      const props = {
+        visualizationType: '123',
+        activeDatasource: {
+          checkIntegrity: jest.fn(() => ['missing_pattern']),
+        } as unknown as Datasource,
+        activeDatasourceState: { isLoading: false, state: {} },
+        // user can go to management, but indexPatterns management is not accessible
+        core: createCoreStartWithPermissions({
+          navLinks: { management: true },
+          management: { kibana: { indexPatterns: false } },
+        }),
+        // irrelevantProps
+        dataViews: {} as DataViewsState,
+        visualization: {} as Visualization,
+        visualizationState: { activeId: 'foo', state: {} },
+      };
+      const rtlRender = render(
+        <I18nProvider>
+          {
+            getApplicationUserMessages({
+              ...props,
+              ...propsOverrides,
+            })[0].longMessage
+          }
+        </I18nProvider>
+      );
+      return rtlRender;
     };
 
     it('generates error if missing an index pattern', () => {
-      expect(
-        getApplicationUserMessages({
-          visualizationType: '123',
-          activeDatasource: {
-            checkIntegrity: jest.fn(() => ['missing_pattern']),
-          } as unknown as Datasource,
-          activeDatasourceState: { isLoading: false, state: {} },
-          core: createCoreStartWithPermissions(),
-          ...irrelevantProps,
-        })
-      ).toMatchSnapshot();
+      renderApplicationUserMessages({
+        core: createCoreStartWithPermissions(),
+      });
+
+      expect(screen.queryByText('RedirectAppLinks')).toBeInTheDocument();
+      expect(screen.getByTestId('missing-refs-failure')).toHaveTextContent('Data view not found');
     });
 
     it('doesnt show a recreate link if user has no access', () => {
-      expect(
-        mountWithIntl(
-          <div>
-            {
-              getApplicationUserMessages({
-                visualizationType: '123',
-                activeDatasource: {
-                  checkIntegrity: jest.fn(() => ['missing_pattern']),
-                } as unknown as Datasource,
-                activeDatasourceState: { isLoading: false, state: {} },
-                // user can go to management, but indexPatterns management is not accessible
-                core: createCoreStartWithPermissions({
-                  navLinks: { management: true },
-                  management: { kibana: { indexPatterns: false } },
-                }),
-                ...irrelevantProps,
-              })[0].longMessage
-            }
-          </div>
-        ).exists(RedirectAppLinks)
-      ).toBeFalsy();
+      renderApplicationUserMessages();
+      expect(screen.queryByText('RedirectAppLinks')).not.toBeInTheDocument();
+      cleanup();
+      renderApplicationUserMessages({
+        core: createCoreStartWithPermissions({
+          navLinks: { management: false },
+          management: { kibana: { indexPatterns: true } },
+        }),
+      });
 
-      expect(
-        shallow(
-          <div>
-            {
-              getApplicationUserMessages({
-                visualizationType: '123',
-                activeDatasource: {
-                  checkIntegrity: jest.fn(() => ['missing_pattern']),
-                } as unknown as Datasource,
-                activeDatasourceState: { isLoading: false, state: {} },
-                // user can't go to management at all
-                core: createCoreStartWithPermissions({
-                  navLinks: { management: false },
-                  management: { kibana: { indexPatterns: true } },
-                }),
-                ...irrelevantProps,
-              })[0].longMessage
-            }
-          </div>
-        ).exists(RedirectAppLinks)
-      ).toBeFalsy();
+      expect(screen.queryByText('RedirectAppLinks')).not.toBeInTheDocument();
     });
   });
 });

diff --git a/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx b/x-pack/plugins/lens/public/app_plugin/get_application_user_messages.tsx
@@ -36,6 +36,16 @@ import {
   EDITOR_UNKNOWN_VIS_TYPE,
 } from '../user_messages_ids';
 
+export interface UserMessageGetterProps {
+  visualizationType: string | null | undefined;
+  visualization: Visualization | undefined;
+  visualizationState: VisualizationState | undefined;
+  activeDatasource: Datasource | null | undefined;
+  activeDatasourceState: { isLoading: boolean; state: unknown } | null;
+  dataViews: DataViewsState;
+  core: CoreStart;
+}
+
 /**
  * Provides a place to register general user messages that don't belong in the datasource or visualization objects
  */
@@ -47,15 +57,7 @@ export const getApplicationUserMessages = ({
   activeDatasourceState,
   dataViews,
   core,
-}: {
-  visualizationType: string | null | undefined;
-  visualization: Visualization | undefined;
-  visualizationState: VisualizationState | undefined;
-  activeDatasource: Datasource | null | undefined;
-  activeDatasourceState: { isLoading: boolean; state: unknown } | null;
-  dataViews: DataViewsState;
-  core: CoreStart;
-}): UserMessage[] => {
+}: UserMessageGetterProps): UserMessage[] => {
   const messages: UserMessage[] = [];
 
   if (!visualizationType) {