Explore: Follow up NoData work (#47745)

* Use theme styles and add basic test for rendering

* Use util function for response

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import { DataSourceApi, LoadingState, CoreApp, createTheme } from '@grafana/data';
+import { render, screen } from '@testing-library/react';
+import { ExploreId } from 'app/types/explore';
+import { Explore, Props } from './Explore';
+import { scanStopAction } from './state/query';
+import { Provider } from 'react-redux';
+import { configureStore } from 'app/store/configureStore';
+import { AutoSizerProps } from 'react-virtualized-auto-sizer';
+import { createEmptyQueryResponse } from './state/utils';
+
+const makeEmptyQueryResponse = (loadingState: LoadingState) => {
+  const baseEmptyResponse = createEmptyQueryResponse();
+
+  baseEmptyResponse.request = {
+    requestId: '1',
+    intervalMs: 0,
+    interval: '1s',
+    dashboardId: 0,
+    panelId: 1,
+    range: baseEmptyResponse.timeRange,
+    scopedVars: {
+      apps: {
+        value: 'value',
+        text: 'text',
+      },
+    },
+    targets: [
+      {
+        refId: 'A',
+      },
+    ],
+    timezone: 'UTC',
+    app: CoreApp.Explore,
+    startTime: 0,
+  };
+
+  baseEmptyResponse.state = loadingState;
+
+  return baseEmptyResponse;
+};
+
+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: makeEmptyQueryResponse(LoadingState.NotStarted),
+  addQueryRow: jest.fn(),
+  theme: createTheme(),
+  showMetrics: true,
+  showLogs: true,
+  showTable: true,
+  showTrace: true,
+  showNodeGraph: true,
+  splitOpen: (() => {}) as any,
+  logsVolumeData: undefined,
+  loadLogsVolumeData: () => {},
+  changeGraphStyle: () => {},
+  graphStyle: 'lines',
+};
+
+jest.mock('@grafana/runtime/src/services/dataSourceSrv', () => {
+  return {
+    getDataSourceSrv: () => ({
+      get: () => Promise.resolve({}),
+      getList: () => [],
+      getInstanceSettings: () => {},
+    }),
+  };
+});
+
+// for the AutoSizer component to have a width
+jest.mock('react-virtualized-auto-sizer', () => {
+  return ({ children }: AutoSizerProps) => children({ height: 1, width: 1 });
+});
+
+const setup = (overrideProps?: Partial<Props>) => {
+  const store = configureStore();
+  const exploreProps = { ...dummyProps, ...overrideProps };
+
+  return render(
+    <Provider store={store}>
+      <Explore {...exploreProps} />
+    </Provider>
+  );
+};
+
+describe('Explore', () => {
+  it('should not render no data with not started loading state', () => {
+    setup();
+    expect(screen.queryByTestId('explore-no-data')).not.toBeInTheDocument();
+  });
+
+  it('should render no data with done loading state', async () => {
+    const queryResp = makeEmptyQueryResponse(LoadingState.Done);
+    setup({ queryResponse: queryResp });
+    expect(screen.getByTestId('explore-no-data')).toBeInTheDocument();
+  });
+});

public/app/features/explore/NoData.tsx

@@ -9,7 +9,7 @@ export const NoData = () => {
   const css = useStyles2(getStyles);
   return (
     <>
-      <div className={cx([css.wrapper, 'panel-container'])}>
+      <div data-testid="explore-no-data" className={cx([css.wrapper, 'panel-container'])}>
         <span className={cx([css.message])}>{'No data'}</span>
       </div>
     </>
@@ -29,9 +29,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flex-grow: 1;
   `,
   message: css`
-    margin-bottom: ${theme.spacing(3)};
-    font-size: 2em;
-    padding: 6em 1em;
+    font-size: ${theme.typography.h2.fontSize};
+    padding: ${theme.spacing(4)};
     color: ${theme.colors.text.disabled};
   `,
 });