[APM] useFetcher (II): Add react-testing-library to better test hooks

x-pack/package.json

@@ -256,6 +256,7 @@
     "react-shortcuts": "^2.0.0",
     "react-sticky": "^6.0.3",
     "react-syntax-highlighter": "^5.7.0",
+    "react-testing-library": "^6.0.0",
     "react-vis": "^1.8.1",
     "recompose": "^0.26.0",
     "reduce-reducers": "^0.4.3",

x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx

@@ -5,15 +5,13 @@
  */
 
 import { connect } from 'react-redux';
-import { getServiceDetails } from 'x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails';
 import { IReduxState } from 'x-pack/plugins/apm/public/store/rootReducer';
 import { selectIsMLAvailable } from 'x-pack/plugins/apm/public/store/selectors/license';
 import { ServiceIntegrationsView } from './view';
 
 function mapStateToProps(state = {} as IReduxState) {
   return {
-    mlAvailable: selectIsMLAvailable(state),
-    serviceDetails: getServiceDetails(state).data
+    mlAvailable: selectIsMLAvailable(state)
   };
 }
 

x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx

@@ -22,9 +22,7 @@ import { WatcherFlyout } from './WatcherFlyout';
 export interface ServiceIntegrationProps {
   mlAvailable: boolean;
   location: Location;
-  serviceDetails: {
-    types: string[];
-  };
+  transactionTypes: string[];
   urlParams: IUrlParams;
 }
 interface ServiceIntegrationState {

x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx

@@ -7,52 +7,55 @@
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { Location } from 'history';
 import React from 'react';
-import { ServiceDetailsRequest } from 'x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
+import { useFetcher } from '../../../hooks/useFetcher';
+import { loadServiceDetails } from '../../../services/rest/apm/services';
 // @ts-ignore
 import { FilterBar } from '../../shared/FilterBar';
 import { ServiceDetailTabs } from './ServiceDetailTabs';
 import { ServiceIntegrations } from './ServiceIntegrations';
 
-interface ServiceDetailsProps {
+interface Props {
   urlParams: IUrlParams;
   location: Location;
 }
 
-export class ServiceDetailsView extends React.Component<ServiceDetailsProps> {
-  public render() {
-    const { urlParams, location } = this.props;
-    return (
-      <React.Fragment>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>{urlParams.serviceName}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ServiceIntegrations
-              location={this.props.location}
-              urlParams={urlParams}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer />
-
-        <FilterBar />
-
-        <ServiceDetailsRequest
-          urlParams={urlParams}
-          render={({ data }) => (
-            <ServiceDetailTabs
-              location={location}
-              urlParams={urlParams}
-              transactionTypes={data.types}
-            />
-          )}
-        />
-      </React.Fragment>
-    );
+export function ServiceDetailsView({ urlParams, location }: Props) {
+  const { serviceName, start, end, kuery } = urlParams;
+  const { data: serviceDetailsData } = useFetcher(loadServiceDetails, [
+    { serviceName, start, end, kuery }
+  ]);
+
+  if (!serviceDetailsData) {
+    return null;
   }
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h1>{urlParams.serviceName}</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ServiceIntegrations
+            transactionTypes={serviceDetailsData.types}
+            location={location}
+            urlParams={urlParams}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <FilterBar />
+
+      <ServiceDetailTabs
+        location={location}
+        urlParams={urlParams}
+        transactionTypes={serviceDetailsData.types}
+      />
+    </React.Fragment>
+  );
 }

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx

@@ -16,7 +16,7 @@ import { asDecimal, asMillis } from '../../../../utils/formatters';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 
 interface Props {
-  items: IServiceListItem[];
+  items?: IServiceListItem[];
   noItemsMessage?: React.ReactNode;
 }
 

x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx

@@ -0,0 +1,132 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, wait, waitForElement } from 'react-testing-library';
+import 'react-testing-library/cleanup-after-each';
+import * as apmRestServices from 'x-pack/plugins/apm/public/services/rest/apm/services';
+// @ts-ignore
+import configureStore from 'x-pack/plugins/apm/public/store/config/configureStore';
+import * as statusCheck from '../../../../services/rest/apm/status_check';
+import { ServiceOverview } from '../view';
+
+function Comp() {
+  const store = configureStore();
+
+  return (
+    <Provider store={store}>
+      <ServiceOverview urlParams={{}} />
+    </Provider>
+  );
+}
+
+describe('Service Overview -> View', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  // Suppress warnings about "act" until async/await syntax is supported: https://github.com/facebook/react/issues/14769
+  /* tslint:disable:no-console */
+  const originalError = console.error;
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+  afterAll(() => {
+    console.error = originalError;
+  });
+
+  it('should render services, when list is not empty', async () => {
+    // mock rest requests
+    const spy1 = jest
+      .spyOn(statusCheck, 'loadAgentStatus')
+      .mockResolvedValue(true);
+    const spy2 = jest
+      .spyOn(apmRestServices, 'loadServiceList')
+      .mockResolvedValue([
+        {
+          serviceName: 'My Python Service',
+          agentName: 'python',
+          transactionsPerMinute: 100,
+          errorsPerMinute: 200,
+          avgResponseTime: 300
+        },
+        {
+          serviceName: 'My Go Service',
+          agentName: 'go',
+          transactionsPerMinute: 400,
+          errorsPerMinute: 500,
+          avgResponseTime: 600
+        }
+      ]);
+
+    const { container, getByText } = render(<Comp />);
+
+    // wait for requests to be made
+    await wait(
+      () =>
+        expect(spy1).toHaveBeenCalledTimes(1) &&
+        expect(spy2).toHaveBeenCalledTimes(1)
+    );
+
+    await waitForElement(() => getByText('My Python Service'));
+
+    expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
+  });
+
+  it('should render getting started message, when list is empty and no historical data is found', async () => {
+    // mock rest requests
+    const spy1 = jest
+      .spyOn(statusCheck, 'loadAgentStatus')
+      .mockResolvedValue(false);
+
+    const spy2 = jest
+      .spyOn(apmRestServices, 'loadServiceList')
+      .mockResolvedValue([]);
+
+    const { container, getByText } = render(<Comp />);
+
+    // wait for requests to be made
+    await wait(
+      () =>
+        expect(spy1).toHaveBeenCalledTimes(1) &&
+        expect(spy2).toHaveBeenCalledTimes(1)
+    );
+
+    // wait for elements to be rendered
+    await waitForElement(() =>
+      getByText(
+        "Looks like you don't have any APM services installed. Let's add some!"
+      )
+    );
+
+    expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
+  });
+
+  it('should render empty message, when list is empty and historical data is found', async () => {
+    // mock rest requests
+    const spy1 = jest
+      .spyOn(statusCheck, 'loadAgentStatus')
+      .mockResolvedValue(true);
+    const spy2 = jest
+      .spyOn(apmRestServices, 'loadServiceList')
+      .mockResolvedValue([]);
+
+    const { container, getByText } = render(<Comp />);
+
+    // wait for requests to be made
+    await wait(
+      () =>
+        expect(spy1).toHaveBeenCalledTimes(1) &&
+        expect(spy2).toHaveBeenCalledTimes(1)
+    );
+
+    // wait for elements to be rendered
+    await waitForElement(() => getByText('No services found'));
+
+    expect(container.querySelectorAll('.euiTableRow')).toMatchSnapshot();
+  });
+});