Fix tests for Explore - ErrorContainer, MetaInfoText & cleanup (#46744)

* Move ErrorContainer.test.tsx to RTL

* Remove snapshots and unnecessary tests, change enzyme tests to RTL

* Add fixes to tests

.betterer.results

@@ -227,21 +227,9 @@ exports[`no enzyme tests`] = {
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:2556927610": [
       [1, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/explore/ErrorContainer.test.tsx:2082593062": [
-      [2, 19, 13, "RegExp match", "2409514259"]
-    ],
-    "public/app/features/explore/Explore.test.tsx:2684077338": [
-      [11, 19, 13, "RegExp match", "2409514259"]
-    ],
-    "public/app/features/explore/ExploreDrawer.test.tsx:2094071178": [
-      [1, 17, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/explore/LiveLogs.test.tsx:1667605379": [
       [2, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/explore/MetaInfoText.test.tsx:802018588": [
-      [1, 27, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/explore/RichHistory/RichHistory.test.tsx:409631018": [
       [1, 17, 13, "RegExp match", "2409514259"]
     ],

public/app/features/explore/ErrorContainer.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { DataQueryError } from '@grafana/data';
+import { render, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import { ErrorContainer, ErrorContainerProps } from './ErrorContainer';
-import { ErrorContainer } from './ErrorContainer';
 
-const makeError = (propOverrides?: DataQueryError): DataQueryError => {
+describe('ErrorContainer', () => {
-  const queryError: DataQueryError = {
+  it('should render component and show message', () => {
+    const props: ErrorContainerProps = {
+      queryError: {
         data: {
           message: 'Error data message',
           error: 'Error data content',
@@ -13,23 +14,41 @@ const makeError = (propOverrides?: DataQueryError): DataQueryError => {
         status: 'Error status',
         statusText: 'Error status text',
         refId: 'A',
+      },
     };
-  Object.assign(queryError, propOverrides);
+    render(<ErrorContainer {...props} />);
-  return queryError;
+    const alertEl = screen.getByRole('alert');
-};
+    expect(alertEl).toBeInTheDocument();
+    expect(alertEl).toHaveTextContent(/query error/i);
+    expect(alertEl).toHaveTextContent('Error message');
+  });
 
-const setup = (propOverrides?: object) => {
+  it('should render component and show message if message is in data only', () => {
-  const props = {
+    const props: ErrorContainerProps = {
-    queryError: makeError(propOverrides),
+      queryError: {
+        data: {
+          message: 'Error data message',
+          error: 'Error data content',
+        },
+        status: 'Error status',
+        statusText: 'Error status text',
+        refId: 'A',
+      },
     };
+    render(<ErrorContainer {...props} />);
 
-  const wrapper = shallow(<ErrorContainer {...props} />);
+    const alertEl = screen.getByRole('alert');
-  return wrapper;
+    expect(alertEl).toBeInTheDocument();
-};
+    expect(alertEl).toHaveTextContent(/query error/i);
+    expect(alertEl).toHaveTextContent('Error data message');
+  });
 
-describe('ErrorContainer', () => {
+  it('should have hidden unknown error if prop is not passed in', () => {
-  it('should render component', () => {
+    const props: ErrorContainerProps = {};
-    const wrapper = setup();
+    render(<ErrorContainer {...props} />);
-    expect(wrapper).toMatchSnapshot();
+
+    const alertEl = screen.getByRole('alert', { hidden: true });
+    expect(alertEl).toBeInTheDocument();
+    expect(alertEl).toHaveTextContent('Unknown error');
   });
 });

public/app/features/explore/Explore.test.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import {
-  DataSourceApi,
-  LoadingState,
-  toUtc,
-  DataQueryError,
-  DataQueryRequest,
-  CoreApp,
-  createTheme,
-} from '@grafana/data';
-import { ExploreId } from 'app/types/explore';
-import { shallow } from 'enzyme';
-import { Explore, Props } from './Explore';
-import { scanStopAction } from './state/query';
-import { SecondaryActions } from './SecondaryActions';
-
-const dummyProps: Props = {
-  logsResult: undefined,
-  changeSize: jest.fn(),
-  datasourceInstance: {
-    meta: {
-      metrics: true,
-      logs: true,
-    },
-    components: {
-      QueryEditorHelp: {},
-    },
-  } as DataSourceApi,
-  datasourceMissing: false,
-  exploreId: ExploreId.left,
-  loading: false,
-  modifyQueries: jest.fn(),
-  scanStart: jest.fn(),
-  scanStopAction: scanStopAction,
-  setQueries: jest.fn(),
-  queryKeys: [],
-  isLive: false,
-  syncedTimes: false,
-  updateTimeRange: jest.fn(),
-  makeAbsoluteTime: jest.fn(),
-  graphResult: [],
-  absoluteRange: {
-    from: 0,
-    to: 0,
-  },
-  timeZone: 'UTC',
-  queryResponse: {
-    state: LoadingState.NotStarted,
-    series: [],
-    request: {
-      requestId: '1',
-      dashboardId: 0,
-      interval: '1s',
-      panelId: 1,
-      scopedVars: {
-        apps: {
-          value: 'value',
-        },
-      },
-      targets: [
-        {
-          refId: 'A',
-        },
-      ],
-      timezone: 'UTC',
-      app: CoreApp.Explore,
-      startTime: 0,
-    } as unknown as DataQueryRequest,
-    error: {} as DataQueryError,
-    timeRange: {
-      from: toUtc('2019-01-01 10:00:00'),
-      to: toUtc('2019-01-01 16:00:00'),
-      raw: {
-        from: 'now-6h',
-        to: 'now',
-      },
-    },
-    graphFrames: [],
-    logsFrames: [],
-    tableFrames: [],
-    traceFrames: [],
-    nodeGraphFrames: [],
-    graphResult: null,
-    logsResult: null,
-    tableResult: null,
-  },
-  addQueryRow: jest.fn(),
-  theme: createTheme(),
-  showMetrics: true,
-  showLogs: true,
-  showTable: true,
-  showTrace: true,
-  showNodeGraph: true,
-  splitOpen: (() => {}) as any,
-  logsVolumeData: undefined,
-  loadLogsVolumeData: () => {},
-  changeGraphStyle: () => {},
-  graphStyle: 'lines',
-};
-
-describe('Explore', () => {
-  it('should render component', () => {
-    const wrapper = shallow(<Explore {...dummyProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('renders SecondaryActions and add row button', () => {
-    const wrapper = shallow(<Explore {...dummyProps} />);
-    expect(wrapper.find(SecondaryActions)).toHaveLength(1);
-    expect(wrapper.find(SecondaryActions).props().addQueryRowButtonHidden).toBe(false);
-  });
-});

public/app/features/explore/ExploreDrawer.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { ExploreDrawer } from './ExploreDrawer';
-
-describe('<ExploreDrawer />', () => {
-  it('renders child element', () => {
-    const childElement = <div>Child element</div>;
-    const wrapper = mount(<ExploreDrawer width={400}>{childElement}</ExploreDrawer>);
-    expect(wrapper.text()).toBe('Child element');
-  });
-});

public/app/features/explore/MetaInfoText.test.tsx

@@ -1,34 +1,26 @@
 import React from 'react';
-import { shallow, render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { MetaInfoText, MetaItemProps } from './MetaInfoText';
 describe('MetaInfoText', () => {
-  it('should render component', () => {
+  it('should render component and items', () => {
-    const items: MetaItemProps[] = [
-      { label: 'label', value: 'value' },
-      { label: 'label2', value: 'value2' },
-    ];
-    const wrapper = shallow(<MetaInfoText metaItems={items} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render items', () => {
     const items: MetaItemProps[] = [
       { label: 'label', value: 'value' },
       { label: 'label2', value: 'value2' },
     ];
 
-    const wrapper = render(<MetaInfoText metaItems={items} />);
+    render(<MetaInfoText metaItems={items} />);
-    expect(wrapper.find('label')).toBeTruthy();
+    expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1);
-    expect(wrapper.find('value')).toBeTruthy();
+    expect(screen.getAllByTestId('meta-info-text-item')).toHaveLength(2);
-    expect(wrapper.find('label2')).toBeTruthy();
+    expect(screen.getByText('label:')).toBeInTheDocument();
-    expect(wrapper.find('value2')).toBeTruthy();
+    expect(screen.getByText('label2:')).toBeInTheDocument();
+    expect(screen.getByText(/^value$/)).toBeInTheDocument();
+    expect(screen.getByText(/^value2$/)).toBeInTheDocument();
   });
 
-  it('should render no items when the array is empty', () => {
+  it('should render component with no items when the array is empty', () => {
     const items: MetaItemProps[] = [];
-
+    render(<MetaInfoText metaItems={items} />);
-    const wrapper = shallow(<MetaInfoText metaItems={items} />);
+    expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1);
-    expect(wrapper.find('div').exists()).toBeTruthy();
+    expect(screen.queryByTestId('meta-info-text-item')).toBeNull();
-    expect(wrapper.find('div').children()).toHaveLength(0);
   });
 });

public/app/features/explore/MetaInfoText.tsx

@@ -43,7 +43,7 @@ const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
   const { label, value } = props;
 
   return (
-    <div className={style.metaItem}>
+    <div data-testid="meta-info-text-item" className={style.metaItem}>
       {label && <span className={style.metaLabel}>{label}:</span>}
       <span className={style.metaValue}>{value}</span>
     </div>
@@ -59,7 +59,7 @@ export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps)
   const { metaItems } = props;
 
   return (
-    <div className={style.metaContainer}>
+    <div className={style.metaContainer} data-testid="meta-info-text">
       {metaItems.map((item, index) => (
         <MetaInfoItem key={`${index}-${item.label}`} label={item.label} value={item.value} />
       ))}

public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ErrorContainer should render component 1`] = `
-<FadeIn
-  duration={100}
-  in={true}
->
-  <Alert
-    className="css-x7g5ai"
-    severity="error"
-    title="Query error"
-  >
-    Error message
-  </Alert>
-</FadeIn>
-`;

public/app/features/explore/__snapshots__/Explore.test.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Explore should render component 1`] = `
-<CustomScrollbar
-  autoHeightMin="100%"
-  scrollRefCallback={[Function]}
->
-  <Connect(UnConnectedExploreToolbar)
-    exploreId="left"
-    onChangeTime={[Function]}
-    topOfExploreViewRef={
-      Object {
-        "current": null,
-      }
-    }
-  />
-  <div
-    className="explore-container"
-  >
-    <div
-      className="panel-container css-18dr9jf-queryContainer"
-    >
-      <QueryRows
-        exploreId="left"
-      />
-      <SecondaryActions
-        addQueryRowButtonDisabled={false}
-        addQueryRowButtonHidden={false}
-        onClickAddQueryRowButton={[Function]}
-        onClickQueryInspectorButton={[Function]}
-        onClickRichHistoryButton={[Function]}
-        queryInspectorButtonActive={false}
-        richHistoryButtonActive={false}
-      />
-      <ResponseErrorContainer
-        exploreId="left"
-      />
-    </div>
-    <AutoSizer
-      disableHeight={true}
-      disableWidth={false}
-      onResize={[Function]}
-      style={Object {}}
-    >
-      <Component />
-    </AutoSizer>
-  </div>
-</CustomScrollbar>
-`;

public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MetaInfoText should render component 1`] = `
-<div
-  className="css-mecrmv"
->
-  <Memo(MetaInfoItem)
-    key="0-label"
-    label="label"
-    value="value"
-  />
-  <Memo(MetaInfoItem)
-    key="1-label2"
-    label="label2"
-    value="value2"
-  />
-</div>
-`;