[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.
This commit is contained in:
Justin Kambic
GitHub
parent
b181f05141
commit
eb2018b642
|
|
@ -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'));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue