in src/components/TestResult/TestResult.tsx [37:99]
export function TestResult() {
const { steps } = useContext(StepsContext);
const { isResultFlyoutVisible, result, setResult, setIsResultFlyoutVisible } =
useContext(TestContext);
const { electronAPI } = useContext(CommunicationContext);
const [stepCodeToDisplay, setStepCodeToDisplay] = useState('');
/**
* This effect will fetch the code for the failed step in the most recent result,
* if there is a failure.
*/
useEffect(() => {
async function fetchCodeForFailure(r: Result) {
// index of failed step will equal number of successful items
const failedStep = steps[r.succeeded];
if (failedStep == null) {
setStepCodeToDisplay('');
return;
}
const failedCode = await getCodeFromActions(electronAPI, [failedStep], 'inline');
setStepCodeToDisplay(failedCode);
}
// skip procedure when there are no failed steps
if (isResultFlyoutVisible && steps.length && result?.failed) {
fetchCodeForFailure(result);
}
}, [electronAPI, result, setResult, steps, isResultFlyoutVisible]);
const maxLineLength = useMemo(
() => stepCodeToDisplay.split('\n').reduce((prev, cur) => Math.max(prev, cur.length), 0),
[stepCodeToDisplay]
);
// flyout should not show without result data
if (!isResultFlyoutVisible || !result) return null;
// flyout should not show if there are no results
const total = result.succeeded + result.skipped + result.failed;
if (total === 0) return null;
return (
<EuiFlyout
aria-labelledby={FLYOUT_TITLE}
onClose={() => setIsResultFlyoutVisible(false)}
size={result.failed === 0 ? 's' : maxLineLength > 60 ? 'l' : 'm'}
>
<TestResultFlyoutHeader id={FLYOUT_TITLE} title="Journey Test Result" />
<EuiFlyoutBody>
{result.journey.steps.map((step: JourneyStep, stepIndex: number) => (
<ResultFlyoutItem
code={stepCodeToDisplay}
key={`result-step-${stepIndex}`}
step={step}
stepIndex={stepIndex}
/>
))}
</EuiFlyoutBody>
</EuiFlyout>
);
}