[Uptime] Add client-side unit tests for remaining synthetics code (#8…

…0215)

* Test remaining branches in synthetics components.

* Fix TS errors.

* PR feedback.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/browser_expanded_row.test.tsx

@@ -28,7 +28,7 @@ describe('BrowserExpandedRowComponent', () => {
 
   it('returns empty step state when no journey', () => {
     expect(shallowWithIntl(<BrowserExpandedRowComponent />)).toMatchInlineSnapshot(
-      `<EmptyStepState />`
+      `<EmptyJourney />`
     );
   });
 
@@ -43,7 +43,7 @@ describe('BrowserExpandedRowComponent', () => {
           }}
         />
       )
-    ).toMatchInlineSnapshot(`<EmptyStepState />`);
+    ).toMatchInlineSnapshot(`<EmptyJourney />`);
   });
 
   it('displays loading spinner when loading', () => {
@@ -111,6 +111,27 @@ describe('BrowserExpandedRowComponent', () => {
     `);
   });
 
+  it('handles case where synth type is somehow missing', () => {
+    expect(
+      shallowWithIntl(
+        <BrowserExpandedRowComponent
+          journey={{
+            checkGroup: 'check_group',
+            loading: false,
+            steps: [
+              {
+                ...defStep,
+                synthetics: {
+                  type: undefined,
+                },
+              },
+            ],
+          }}
+        />
+      )
+    ).toMatchInlineSnapshot(`""`);
+  });
+
   it('renders console output step list when only console steps are present', () => {
     expect(
       shallowWithIntl(

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_event.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { ConsoleEvent } from '../console_event';
+
+describe('ConsoleEvent component', () => {
+  it('renders danger color for errors', () => {
+    expect(
+      shallowWithIntl(
+        <ConsoleEvent
+          event={{
+            timestamp: '123',
+            docId: '1',
+            monitor: {
+              id: 'MONITOR_ID',
+              duration: {
+                us: 123,
+              },
+              type: 'browser',
+              status: 'down',
+            },
+            synthetics: {
+              payload: {
+                message: 'catastrophic error',
+              },
+              type: 'stderr',
+            },
+          }}
+        />
+      )
+    ).toMatchInlineSnapshot(`
+      <EuiFlexGroup>
+        <EuiFlexItem
+          grow={false}
+        >
+          123
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          style={
+            Object {
+              "color": "#bd271e",
+            }
+          }
+        >
+          stderr
+        </EuiFlexItem>
+        <EuiFlexItem>
+          catastrophic error
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    `);
+  });
+
+  it('uses default color for non-errors', () => {
+    expect(
+      shallowWithIntl(
+        <ConsoleEvent
+          event={{
+            timestamp: '123',
+            docId: '1',
+            monitor: {
+              id: 'MONITOR_ID',
+              duration: {
+                us: 123,
+              },
+              type: 'browser',
+              status: 'down',
+            },
+            synthetics: {
+              payload: {
+                message: 'not a catastrophic error',
+              },
+              type: 'cmd/status',
+            },
+          }}
+        />
+      )
+    ).toMatchInlineSnapshot(`
+      <EuiFlexGroup>
+        <EuiFlexItem
+          grow={false}
+        >
+          123
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
+        >
+          cmd/status
+        </EuiFlexItem>
+        <EuiFlexItem>
+          not a catastrophic error
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    `);
+  });
+});

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/console_output_event_list.test.tsx

@@ -0,0 +1,150 @@
+/*
+ * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { ConsoleOutputEventList } from '../console_output_event_list';
+
+describe('ConsoleOutputEventList component', () => {
+  it('renders a component per console event', () => {
+    expect(
+      shallowWithIntl(
+        <ConsoleOutputEventList
+          journey={{
+            checkGroup: 'check_group',
+            loading: false,
+            // 4 steps, three console, one step/end
+            steps: [
+              {
+                timestamp: '123',
+                docId: '1',
+                monitor: {
+                  id: 'MON_ID',
+                  duration: {
+                    us: 10,
+                  },
+                  status: 'down',
+                  type: 'browser',
+                },
+                synthetics: {
+                  type: 'stderr',
+                },
+              },
+              {
+                timestamp: '124',
+                docId: '2',
+                monitor: {
+                  id: 'MON_ID',
+                  duration: {
+                    us: 10,
+                  },
+                  status: 'down',
+                  type: 'browser',
+                },
+                synthetics: {
+                  type: 'cmd/status',
+                },
+              },
+              {
+                timestamp: '124',
+                docId: '2',
+                monitor: {
+                  id: 'MON_ID',
+                  duration: {
+                    us: 10,
+                  },
+                  status: 'down',
+                  type: 'browser',
+                },
+                synthetics: {
+                  type: 'step/end',
+                },
+              },
+              {
+                timestamp: '125',
+                docId: '3',
+                monitor: {
+                  id: 'MON_ID',
+                  duration: {
+                    us: 10,
+                  },
+                  status: 'down',
+                  type: 'browser',
+                },
+                synthetics: {
+                  type: 'stdout',
+                },
+              },
+            ],
+          }}
+        />
+      ).find('EuiCodeBlock')
+    ).toMatchInlineSnapshot(`
+      <EuiCodeBlock>
+        <ConsoleEvent
+          event={
+            Object {
+              "docId": "1",
+              "monitor": Object {
+                "duration": Object {
+                  "us": 10,
+                },
+                "id": "MON_ID",
+                "status": "down",
+                "type": "browser",
+              },
+              "synthetics": Object {
+                "type": "stderr",
+              },
+              "timestamp": "123",
+            }
+          }
+          key="1_console-event-row"
+        />
+        <ConsoleEvent
+          event={
+            Object {
+              "docId": "2",
+              "monitor": Object {
+                "duration": Object {
+                  "us": 10,
+                },
+                "id": "MON_ID",
+                "status": "down",
+                "type": "browser",
+              },
+              "synthetics": Object {
+                "type": "cmd/status",
+              },
+              "timestamp": "124",
+            }
+          }
+          key="2_console-event-row"
+        />
+        <ConsoleEvent
+          event={
+            Object {
+              "docId": "3",
+              "monitor": Object {
+                "duration": Object {
+                  "us": 10,
+                },
+                "id": "MON_ID",
+                "status": "down",
+                "type": "browser",
+              },
+              "synthetics": Object {
+                "type": "stdout",
+              },
+              "timestamp": "125",
+            }
+          }
+          key="3_console-event-row"
+        />
+      </EuiCodeBlock>
+    `);
+  });
+});

x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/empty_journey.test.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { EmptyJourney } from '../empty_journey';
+
+describe('EmptyJourney component', () => {
+  it('omits check group element when undefined', () => {
+    expect(shallowWithIntl(<EmptyJourney />)).toMatchInlineSnapshot(`
+      <EuiEmptyPrompt
+        body={
+          <React.Fragment>
+            <p>
+              <FormattedMessage
+                defaultMessage="This journey did not contain any steps."
+                id="xpack.uptime.synthetics.emptyJourney.message.heading"
+                values={Object {}}
+              />
+            </p>
+            <p>
+              <FormattedMessage
+                defaultMessage="There is no further information to display."
+                id="xpack.uptime.synthetics.emptyJourney.message.footer"
+                values={Object {}}
+              />
+            </p>
+          </React.Fragment>
+        }
+        iconType="cross"
+        title={
+          <h2>
+            <FormattedMessage
+              defaultMessage="There are no steps for this journey"
+              id="xpack.uptime.synthetics.emptyJourney.title"
+              values={Object {}}
+            />
+          </h2>
+        }
+      />
+    `);
+  });
+
+  it('includes check group element when present', () => {
+    expect(shallowWithIntl(<EmptyJourney checkGroup="check_group" />)).toMatchInlineSnapshot(`
+      <EuiEmptyPrompt
+        body={
+          <React.Fragment>
+            <p>
+              <FormattedMessage
+                defaultMessage="This journey did not contain any steps."
+                id="xpack.uptime.synthetics.emptyJourney.message.heading"
+                values={Object {}}
+              />
+            </p>
+            <p>
+              <FormattedMessage
+                defaultMessage="The journey's check group is {codeBlock}."
+                id="xpack.uptime.synthetics.emptyJourney.message.checkGroupField"
+                values={
+                  Object {
+                    "codeBlock": <code>
+                      check_group
+                    </code>,
+                  }
+                }
+              />
+            </p>
+            <p>
+              <FormattedMessage
+                defaultMessage="There is no further information to display."
+                id="xpack.uptime.synthetics.emptyJourney.message.footer"
+                values={Object {}}
+              />
+            </p>
+          </React.Fragment>
+        }
+        iconType="cross"
+        title={
+          <h2>
+            <FormattedMessage
+              defaultMessage="There are no steps for this journey"
+              id="xpack.uptime.synthetics.emptyJourney.title"
+              values={Object {}}
+            />
+          </h2>
+        }
+      />
+    `);
+  });
+});