export function TestResult()

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>
  );
}