[Uptime] [Overview Page] Only render up/down drawer badges when items…

… > 1 (elastic#88524)

* Only render location status badge when there are actually locations to display.

* Add aria-label to describe location section.

* Update test data to reflect real-world data better. Refactor enzyme tests.

* Refactor component test.

* Fix test names.

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_drawer/monitor_status_list.test.tsx

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallowWithIntl } from '@kbn/test/jest';
 import React from 'react';
 import { MonitorStatusList } from './monitor_status_list';
 import { Ping } from '../../../../../common/runtime_types';
 import { mockMoment } from '../../../../lib/helper/test_helpers';
+import { render } from '../../../../lib/helper/rtl_helpers';
 
 describe('MonitorStatusList component', () => {
   let pings: Ping[];
@@ -34,42 +34,12 @@ describe('MonitorStatusList component', () => {
         },
         timestamp: '1570538236414',
       },
-      {
-        docId: '2',
-        monitor: {
-          ip: '151.101.194.217',
-          name: 'elastic',
-          status: 'up',
-          id: 'myMonitor',
-          type: 'icmp',
-          duration: { us: 123 },
-        },
-        observer: {
-          geo: {},
-        },
-        timestamp: '1570538236414',
-      },
-      {
-        docId: '3',
-        monitor: {
-          ip: '151.101.2.217',
-          name: 'elastic',
-          status: 'up',
-          id: 'myMonitor',
-          type: 'icmp',
-          duration: { us: 123 },
-        },
-        observer: {
-          geo: {},
-        },
-        timestamp: '1570538236414',
-      },
       {
         docId: '4',
         monitor: {
-          ip: '151.101.66.217',
+          ip: '2a04:4e42:200::729',
           name: 'elastic',
-          status: 'up',
+          status: 'down',
           id: 'myMonitor',
           type: 'icmp',
           duration: { us: 123 },
@@ -80,75 +50,168 @@ describe('MonitorStatusList component', () => {
         timestamp: '1570538236414',
       },
       {
-        docId: '4',
+        docId: '8',
         monitor: {
-          ip: '2a04:4e42:200::729',
-          name: 'elastic',
-          status: 'down',
-          id: 'myMonitor',
+          ip: '8c94:2b92::132',
+          name: 'upMonitor',
+          status: 'up',
+          id: 'myUpMonitor',
           type: 'icmp',
-          duration: { us: 123 },
+          duration: { us: 234 },
         },
         observer: {
-          geo: {},
+          geo: {
+            name: 'fairbanks',
+          },
         },
-        timestamp: '1570538236414',
+        timestamp: '1570538235890',
       },
+    ];
+  });
+
+  it.each(['up', 'down'])(
+    'renders call out for monitor location if monitors have no location',
+    (status) => {
+      const { getByRole, getByText } = render(
+        <MonitorStatusList
+          summaryPings={pings.map((ping) => {
+            // test only up, only down
+            ping.monitor.status = status;
+            return ping;
+          })}
+        />
+      );
+
+      getByText('Some heartbeat instances do not have a location defined.', {
+        // contains other elements/text
+        exact: false,
+      });
+      const docsLink = getByRole('link');
+      expect(docsLink.getAttribute('href')).toContain('https://www.elastic.co');
+    }
+  );
+
+  it('does not render call out for monitor location if all monitors have location', () => {
+    const { queryByRole, queryByText } = render(
+      <MonitorStatusList
+        summaryPings={pings.map((ping) => ({
+          ...ping,
+          ...{ observer: { geo: { name: 'test-name' } } },
+        }))}
+      />
+    );
+
+    expect(
+      queryByText('Some heartbeat instances do not have a location defined.', { exact: false })
+    ).toBeNull();
+    expect(queryByRole('link')).toBeNull();
+  });
+
+  it.each([
+    [
+      'up',
+      'Up',
+      'A list of locations with "up" status when last checked.',
+      'Down',
+      'A list of locations with "down" status when last checked.',
+    ],
+    [
+      'down',
+      'Down',
+      'A list of locations with "down" status when last checked.',
+      'Up',
+      'A list of locations with "up" status when last checked.',
+    ],
+  ])(
+    'renders only up badge when there are no down checks',
+    (
+      statusToFilter,
+      statusText,
+      expectedLabel,
+      expectedMissingStatusText,
+      expectedMissingLabel
+    ) => {
+      const { getByText, getByLabelText, queryByText, queryByLabelText } = render(
+        <MonitorStatusList
+          summaryPings={pings.filter(({ monitor: { status } }) => status === statusToFilter)}
+        />
+      );
+      expect(getByText(statusText));
+      expect(getByLabelText(expectedLabel));
+      expect(queryByText(expectedMissingStatusText)).toBeNull();
+      expect(queryByLabelText(expectedMissingLabel)).toBeNull();
+    }
+  );
+
+  it('displays badges for up and down locations when the results are mixed', () => {
+    const { getByText, getByLabelText } = render(<MonitorStatusList summaryPings={pings} />);
+    expect(getByText('Up'));
+    expect(getByLabelText('A list of locations with "up" status when last checked.'));
+    expect(getByText('fairbanks'));
+    expect(getByText('Down'));
+    expect(getByLabelText('A list of locations with "down" status when last checked.'));
+    expect(getByText('Unnamed-location'));
+  });
+
+  it('displays a location as "down" if any summary checks are down', () => {
+    const newlyUpPings = [
       {
-        docId: '5',
+        docId: '100',
         monitor: {
-          ip: '2a04:4e42:400::729',
-          name: 'elastic',
+          ip: '8c94:2b92::132',
+          name: 'monitor',
           status: 'down',
           id: 'myMonitor',
           type: 'icmp',
-          duration: { us: 123 },
+          duration: { us: 234 },
         },
         observer: {
-          geo: {},
+          geo: {
+            name: 'fairbanks',
+          },
         },
-        timestamp: '1570538236414',
+        timestamp: '1570538235890',
       },
       {
-        docId: '6',
+        docId: '101',
         monitor: {
-          ip: '2a04:4e42:600::729',
-          name: 'elastic',
+          ip: '8c94:2b92::132',
+          name: 'monitor',
           status: 'down',
           id: 'myMonitor',
           type: 'icmp',
-          duration: { us: 123 },
+          duration: { us: 234 },
         },
         observer: {
-          geo: {},
+          geo: {
+            name: 'fairbanks',
+          },
         },
-        timestamp: '1570538236414',
+        timestamp: '1570538236890',
       },
       {
-        docId: '5',
+        docId: '101',
         monitor: {
-          ip: '2a04:4e42::729',
-          name: 'elastic',
-          status: 'down',
+          ip: '8c94:2b92::132',
+          name: 'monitor',
+          status: 'up',
           id: 'myMonitor',
           type: 'icmp',
-          duration: { us: 123 },
+          duration: { us: 234 },
         },
         observer: {
-          geo: {},
+          geo: {
+            name: 'fairbanks',
+          },
         },
-        timestamp: '1570538236414',
+        timestamp: '1570538237890',
       },
     ];
-  });
-
-  it('renders checks', () => {
-    const component = shallowWithIntl(<MonitorStatusList summaryPings={pings} />);
-    expect(component).toMatchSnapshot();
-  });
-
-  it('renders null in place of child status with missing ip', () => {
-    const component = shallowWithIntl(<MonitorStatusList summaryPings={pings} />);
-    expect(component).toMatchSnapshot();
+    const { getByText, getByLabelText } = render(<MonitorStatusList summaryPings={newlyUpPings} />);
+    expect(getByText('Down'));
+    const locationContainer = getByLabelText(
+      'A list of locations with "down" status when last checked.'
+    );
+    expect(locationContainer.innerHTML).toBe('fairbanks');
   });
 });