fix(web-awesome): restore test-level error display in overview header (fixes #695, via #696)

Author: todti

packages/e2e/test/allure-awesome/test/testResult.test.ts

@@ -377,7 +377,7 @@ test.describe("allure-awesome", () => {
       expect(clipboardContent).toEqual("sample.js#0 sample passed test");
     });
 
-    test("failed test renders its test-level error in the body section", async () => {
+    test("failed test renders its test-level error in the overview header and body section", async () => {
       await treePage.openTestResultByTitle("1 sample failed test");
 
       const errorStep = testResultPage.getStepByName("Assertion error: Expected 1 to be 2");
@@ -387,26 +387,26 @@ test.describe("allure-awesome", () => {
         "Assertion error: Expected 1 to be 2",
       );
       await expect(testResultPage.page.getByText("No test steps information available")).not.toBeVisible();
-      expect(await countStandaloneOverviewErrors(testResultPage)).toBe(0);
+      expect(await countStandaloneOverviewErrors(testResultPage)).toBe(1);
 
       await testResultPage.expandStepByTitle("Assertion error: Expected 1 to be 2");
 
       await expect(errorStep.stepDetailsLocator.getByTestId("test-result-error-message")).toHaveCount(0);
       await expect(errorStep.stepTraceLocator).toHaveText("failed test trace");
-      await expect(testResultPage.errorDiffButtonLocator).toBeVisible();
-      await testResultPage.errorDiffButtonLocator.click();
+      await expect(errorStep.stepDetailsLocator.getByTestId("test-result-diff-button")).toBeVisible();
+      await errorStep.stepDetailsLocator.getByTestId("test-result-diff-button").click();
       await expect(testResultPage.errorDiffLocator).toBeVisible();
     });
 
-    test("broken test renders its test-level error in the body section", async () => {
+    test("broken test renders its test-level error in the overview header and body section", async () => {
       await treePage.openTestResultByTitle("2 sample broken test");
 
       const errorStep = testResultPage.getStepByName("An unexpected error");
 
       await expect(errorStep.locator).toBeVisible();
       await expect(errorStep.locator.getByTestId("test-result-step-title")).toHaveText("An unexpected error");
       await expect(testResultPage.page.getByText("No test steps information available")).not.toBeVisible();
-      expect(await countStandaloneOverviewErrors(testResultPage)).toBe(0);
+      expect(await countStandaloneOverviewErrors(testResultPage)).toBe(1);
 
       await testResultPage.expandStepByTitle("An unexpected error");
 

packages/web-awesome/src/components/TestResult/TrOverview.tsx

@@ -1,9 +1,10 @@
 import type { FunctionalComponent } from "preact";
 import type { AwesomeTestResult } from "types";
 
-import { getBodyItems } from "@/components/TestResult/bodyItems";
+import { getBodyItems, isDisplayableTestError } from "@/components/TestResult/bodyItems";
 import TestStepsEmpty from "@/components/TestResult/TestStepsEmpty";
 import { TrDescription } from "@/components/TestResult/TrDescription";
+import { TrError } from "@/components/TestResult/TrError";
 import { TrLinks } from "@/components/TestResult/TrLinks";
 import { TrMetadata } from "@/components/TestResult/TrMetadata";
 import { TrParameters } from "@/components/TestResult/TrParameters";
@@ -23,17 +24,23 @@ export type TrOverviewProps = {
 
 export const TrOverview: FunctionalComponent<TrOverviewProps> = ({ testResult }) => {
   useTestResultOverviewFocusScroll();
-  const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id } = testResult || {};
+  const { parameters, groupedLabels, links, descriptionHtml, setup, teardown, id, error, status } = testResult || {};
   const testResultId = id ?? currentTrId.value;
   const { t } = useI18n("ui");
   const bodyItems = getBodyItems(testResult, t("error"));
   const isNoSteps = !setup?.length && !bodyItems.length && !teardown?.length;
   const pwTraces = testResult?.attachments?.filter(
     (attachment) => attachment.link.contentType === "application/vnd.allure.playwright-trace",
   );
+  const showTopError = (status === "failed" || status === "broken") && isDisplayableTestError(error);
 
   return (
     <>
+      {showTopError && (
+        <div className={styles["test-result-errors"]}>
+          <TrError {...error} status={status} />
+        </div>
+      )}
       {Boolean(pwTraces?.length) && <TrPwTraces pwTraces={pwTraces} />}
       {Boolean(parameters?.length) && <TrParameters id={testResultId} parameters={parameters} />}
       {Boolean(groupedLabels && Object.keys(groupedLabels || {})?.length) && (