From eb2018b642cd986b0f7fec9c1825452e341d9e75 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Wed, 13 Jan 2021 12:24:52 -0500
Subject: [PATCH] [Uptime] Unskip jest tests for `ExecutedStep` component
 (#88105)

* Revise skipped tests to use RTL.

* Rename a test.

* Add a test covering default status badge text.

* Refactor a test to remove redundant code.
---
 .../monitor/synthetics/executed_step.test.tsx | 407 ++----------------
 1 file changed, 37 insertions(+), 370 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx
index 5f40b60420f8..c0ac5d959bda 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/executed_step.test.tsx
@@ -7,11 +7,9 @@
 import React from 'react';
 import { ExecutedStep } from './executed_step';
 import { Ping } from '../../../../common/runtime_types';
-import { mountWithRouter } from '../../../lib';
 import { render } from '../../../lib/helper/rtl_helpers';
 
-// FLAKY: https://github.com/elastic/kibana/issues/85899
-describe.skip('ExecutedStep', () => {
+describe('ExecutedStep', () => {
   let step: Ping;
 
   beforeEach(() => {
@@ -42,105 +40,28 @@ describe.skip('ExecutedStep', () => {
   });
 
   it('renders a link to the step detail view', () => {
-    expect(
-      mountWithRouter(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />).find(
-        'StepDetailLink'
-      )
-    ).toMatchInlineSnapshot(`
-      <StepDetailLink
-        checkGroupId="fake-group"
-        stepIndex={4}
-      >
-        <EuiLink>
-          <button
-            className="euiLink euiLink--primary"
-            disabled={false}
-            type="button"
-          >
-            <Link
-              data-test-subj="step-detail-link"
-              to="/journey/fake-group/step/4"
-            >
-              <LinkAnchor
-                data-test-subj="step-detail-link"
-                href="/journey/fake-group/step/4"
-                navigate={[Function]}
-              >
-                <a
-                  data-test-subj="step-detail-link"
-                  href="/journey/fake-group/step/4"
-                  onClick={[Function]}
-                >
-                  <EuiText>
-                    <div
-                      className="euiText euiText--medium"
-                    >
-                      <strong>
-                        <FormattedMessage
-                          defaultMessage="{stepNumber}. {stepName}"
-                          id="xpack.uptime.synthetics.executedStep.stepName"
-                          values={
-                            Object {
-                              "stepName": "STEP_NAME",
-                              "stepNumber": 4,
-                            }
-                          }
-                        >
-                          4. STEP_NAME
-                        </FormattedMessage>
-                      </strong>
-                    </div>
-                  </EuiText>
-                </a>
-              </LinkAnchor>
-            </Link>
-          </button>
-        </EuiLink>
-      </StepDetailLink>
-    `);
+    const { getByRole, getByText } = render(
+      <ExecutedStep index={3} step={step} checkGroup={'fake-group'} />
+    );
+    expect(getByRole('link')).toHaveAttribute('href', '/journey/fake-group/step/4');
+    expect(getByText('4. STEP_NAME'));
   });
 
-  it('supplies status badge correct status', () => {
+  it.each([
+    ['succeeded', 'Succeeded'],
+    ['failed', 'Failed'],
+    ['skipped', 'Skipped'],
+    ['somegarbage', '4.'],
+  ])('supplies status badge correct status', (status, expectedStatus) => {
     step.synthetics = {
-      payload: { status: 'THE_STATUS' },
+      payload: { status },
     };
-    expect(
-      mountWithRouter(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />).find(
-        'StatusBadge'
-      )
-    ).toMatchInlineSnapshot(`
-      <StatusBadge
-        status="THE_STATUS"
-      >
-        <EuiBadge
-          color="default"
-        >
-          <EuiInnerText>
-            <span
-              className="euiBadge euiBadge--iconLeft"
-              style={
-                Object {
-                  "backgroundColor": "#d3dae6",
-                  "color": "#000",
-                }
-              }
-            >
-              <span
-                className="euiBadge__content"
-              />
-            </span>
-          </EuiInnerText>
-        </EuiBadge>
-      </StatusBadge>
-    `);
+    const { getByText } = render(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />);
+    expect(getByText(expectedStatus));
   });
 
-  it('renders accordions for step, error message, and error stack script', () => {
+  it('renders accordion for step', () => {
     step.synthetics = {
-      error: {
-        message: 'There was an error executing the step.',
-        stack: 'some.stack.trace.string',
-      },
       payload: {
         source: 'const someVar = "the var"',
       },
@@ -150,280 +71,26 @@ describe.skip('ExecutedStep', () => {
       },
     };
 
-    expect(
-      mountWithRouter(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />).find(
-        'CodeBlockAccordion'
-      )
-    ).toMatchInlineSnapshot(`
-      Array [
-        <CodeBlockAccordion
-          buttonContent="Step script"
-          id="STEP_NAME3"
-          language="javascript"
-          overflowHeight={360}
-        >
-          <EuiAccordion
-            arrowDisplay="left"
-            buttonContent="Step script"
-            id="STEP_NAME3"
-            initialIsOpen={false}
-            isLoading={false}
-            isLoadingMessage={false}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion"
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="STEP_NAME3"
-                  aria-expanded={false}
-                  className="euiAccordion__button"
-                  id="generated-id"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    Step script
-                  </span>
-                </button>
-              </div>
-              <div
-                className="euiAccordion__childWrapper"
-                id="STEP_NAME3"
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <EuiCodeBlock
-                        isCopyable={true}
-                        language="javascript"
-                        overflowHeight={360}
-                      >
-                        <EuiCodeBlockImpl
-                          inline={false}
-                          isCopyable={true}
-                          language="javascript"
-                          overflowHeight={360}
-                        >
-                          <div>
-                            <pre>
-                              <code>
-                                const someVar = "the var"
-                              </code>
-                            </pre>
-                          </div>
-                        </EuiCodeBlockImpl>
-                      </EuiCodeBlock>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </CodeBlockAccordion>,
-        <CodeBlockAccordion
-          buttonContent="Error"
-          id="STEP_NAME_error"
-          language="html"
-          overflowHeight={360}
-        >
-          <EuiAccordion
-            arrowDisplay="left"
-            buttonContent="Error"
-            id="STEP_NAME_error"
-            initialIsOpen={false}
-            isLoading={false}
-            isLoadingMessage={false}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion"
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="STEP_NAME_error"
-                  aria-expanded={false}
-                  className="euiAccordion__button"
-                  id="generated-id"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    Error
-                  </span>
-                </button>
-              </div>
-              <div
-                className="euiAccordion__childWrapper"
-                id="STEP_NAME_error"
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <EuiCodeBlock
-                        isCopyable={true}
-                        language="html"
-                        overflowHeight={360}
-                      >
-                        <EuiCodeBlockImpl
-                          inline={false}
-                          isCopyable={true}
-                          language="html"
-                          overflowHeight={360}
-                        >
-                          <div>
-                            <pre>
-                              <code>
-                                There was an error executing the step.
-                              </code>
-                            </pre>
-                          </div>
-                        </EuiCodeBlockImpl>
-                      </EuiCodeBlock>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </CodeBlockAccordion>,
-        <CodeBlockAccordion
-          buttonContent="Stack trace"
-          id="STEP_NAME_stack"
-          language="html"
-          overflowHeight={360}
-        >
-          <EuiAccordion
-            arrowDisplay="left"
-            buttonContent="Stack trace"
-            id="STEP_NAME_stack"
-            initialIsOpen={false}
-            isLoading={false}
-            isLoadingMessage={false}
-            paddingSize="none"
-          >
-            <div
-              className="euiAccordion"
-            >
-              <div
-                className="euiAccordion__triggerWrapper"
-              >
-                <button
-                  aria-controls="STEP_NAME_stack"
-                  aria-expanded={false}
-                  className="euiAccordion__button"
-                  id="generated-id"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
-                  >
-                    Stack trace
-                  </span>
-                </button>
-              </div>
-              <div
-                className="euiAccordion__childWrapper"
-                id="STEP_NAME_stack"
-              >
-                <EuiResizeObserver
-                  onResize={[Function]}
-                >
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <EuiCodeBlock
-                        isCopyable={true}
-                        language="html"
-                        overflowHeight={360}
-                      >
-                        <EuiCodeBlockImpl
-                          inline={false}
-                          isCopyable={true}
-                          language="html"
-                          overflowHeight={360}
-                        >
-                          <div>
-                            <pre>
-                              <code>
-                                some.stack.trace.string
-                              </code>
-                            </pre>
-                          </div>
-                        </EuiCodeBlockImpl>
-                      </EuiCodeBlock>
-                    </div>
-                  </div>
-                </EuiResizeObserver>
-              </div>
-            </div>
-          </EuiAccordion>
-        </CodeBlockAccordion>,
-      ]
-    `);
+    const { getByText } = render(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />);
+
+    expect(getByText('4. STEP_NAME'));
+    expect(getByText('Step script'));
+    expect(getByText(`const someVar = "the var"`));
+  });
+
+  it('renders accordions for error message, and stack trace', () => {
+    step.synthetics = {
+      error: {
+        message: 'There was an error executing the step.',
+        stack: 'some.stack.trace.string',
+      },
+    };
+
+    const { getByText } = render(<ExecutedStep index={3} step={step} checkGroup={'fake-group'} />);
+
+    expect(getByText('4.'));
+    expect(getByText('Error'));
+    expect(getByText('There was an error executing the step.'));
+    expect(getByText('some.stack.trace.string'));
   });
 });