wip:awesome: show test errors in tr's tree

packages/plugin-awesome/src/generators.ts

@@ -178,7 +178,7 @@ export const generateTree = async (
   const tree = createTreeByLabels<AwesomeTestResult, AwesomeTreeLeaf, AwesomeTreeGroup>(
     visibleTests,
     labels,
-    ({ id, name, status, duration, flaky, start, retries }) => {
+    ({ id, name, status, duration, flaky, start, retries ,error}) => {
       return {
         nodeId: id,
         retry: !!retries?.length,
@@ -187,6 +187,7 @@ export const generateTree = async (
         duration,
         flaky,
         start,
+        error
       };
     },
     undefined,

packages/sandbox/test/legacy.spec.ts

@@ -1,5 +1,5 @@
 /// <reference types="allure-vitest" />
-import { it } from "vitest";
+import { expect, it } from "vitest";
 
 it("sample test", async () => {
   await allure.owner("John Doe x");
@@ -9,5 +9,15 @@ it("sample test", async () => {
       await allure.attachment("text attachment", "some data", "text/plain");
     });
   });
-  await allure.step("step 2", async () => {});
+  await allure.step("step 2", async () => {
+    await allure.step("step 2.2", async () => {
+      await allure.step("step 2.3", async () => {
+        try {
+          await allure.step("step 2.3-1", async () => {
+            expect(true).toBe(false);
+          });
+        } catch (err) {}
+      });
+    });
+  });
 });

packages/web-awesome/src/components/Tree/index.tsx

@@ -2,6 +2,7 @@ import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allure
 import type { AwesomeStatus } from "types";
 import { MetadataButton } from "@/components/MetadataButton";
 import { useTabsContext } from "@/components/Tabs";
+import { TrError } from "@/components/TestResult/TrError";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
 import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
@@ -70,6 +71,7 @@ export const TreeList = () => {
                 navigateTo={navigateTo}
                 tree={filteredTree.value.default}
                 statusFilter={currentTab as AwesomeStatus}
+                ErrorComponent={TrError}
                 root
               />
             </div>
@@ -89,6 +91,7 @@ export const TreeList = () => {
                 navigateTo={navigateTo}
                 tree={currentTree}
                 statusFilter={currentTab as AwesomeStatus}
+                ErrorComponent={TrError}
                 root
               />
             </div>
@@ -139,6 +142,7 @@ export const TreeList = () => {
                         statusFilter={currentTab}
                         navigateTo={navigateTo}
                         tree={value}
+                        ErrorComponent={TrError}
                         root
                       />
                     </div>

packages/web-components/src/components/Tree/Tree.tsx

@@ -1,7 +1,7 @@
 import type { Statistic } from "@allurereport/core-api";
 import cx from "clsx";
 import type { RecursiveTree, Status } from "global";
-import type { FunctionalComponent } from "preact";
+import type { FunctionComponent, FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { TreeItem } from "@/components/Tree/TreeItem";
 import { TreeHeader } from "./TreeHeader";
@@ -18,6 +18,7 @@ interface TreeProps {
   toggleTree: (id: string) => void;
   navigateTo: (id: string) => void;
   routeId?: string;
+  ErrorComponent: FunctionComponent;
 }
 
 export const Tree: FunctionalComponent<TreeProps> = ({
@@ -31,6 +32,7 @@ export const Tree: FunctionalComponent<TreeProps> = ({
   toggleTree,
   routeId,
   navigateTo,
+  ErrorComponent,
 }) => {
   const isEarlyCollapsed = collapsedTrees.has(tree.nodeId as string);
   const haveFailedSteps = statistic === undefined || !!statistic?.failed || !!statistic?.broken;
@@ -65,6 +67,7 @@ export const Tree: FunctionalComponent<TreeProps> = ({
           toggleTree={toggleTree}
           routeId={routeId}
           navigateTo={navigateTo}
+          ErrorComponent={ErrorComponent}
         />
       ))}
       {tree?.leaves?.map?.((leaf) => (
@@ -78,6 +81,8 @@ export const Tree: FunctionalComponent<TreeProps> = ({
           duration={leaf.duration}
           marked={leaf.nodeId === routeId}
           navigateTo={navigateTo}
+          error={leaf.error}
+          ErrorComponent={ErrorComponent}
         />
       ))}
     </div>

packages/web-components/src/components/Tree/TreeItem.tsx

@@ -1,4 +1,5 @@
-import { type TestStatus, formatDuration } from "@allurereport/core-api";
+import type { TestError, TestStatus } from "@allurereport/core-api";
+import { formatDuration } from "@allurereport/core-api";
 import clsx from "clsx";
 import type { FunctionComponent } from "preact";
 import { TreeItemIcon } from "@/components/Tree/TreeItemIcon";
@@ -13,6 +14,8 @@ interface TreeItemProps {
   groupOrder: number;
   marked?: boolean;
   navigateTo: (id: string) => void;
+  error?: TestError;
+  ErrorComponent: FunctionComponent<TestError & { status?: TestStatus }>;
 }
 
 export const TreeItem: FunctionComponent<TreeItemProps> = ({
@@ -23,27 +26,31 @@ export const TreeItem: FunctionComponent<TreeItemProps> = ({
   id,
   marked,
   navigateTo,
+  error,
+  ErrorComponent,
   ...rest
 }) => {
   const formattedDuration = formatDuration(duration);
 
   return (
-    <div
-      {...rest}
-      className={clsx(styles["tree-item"], marked ? styles["tree-item-marked"] : "")}
-      onClick={() => navigateTo(id)}
-      id={id}
-    >
-      <TreeItemIcon status={status} />
-      <Code data-testid="tree-leaf-order" size={"s"} className={styles.order}>
-        {groupOrder}
-      </Code>
-      <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
-        {name}
-      </Text>
-      <Text data-testid="tree-leaf-duration" type="ui" size={"m"} className={styles["item-time"]}>
-        {formattedDuration}
-      </Text>
+    <div {...rest}>
+      <div
+        className={clsx(styles["tree-item"], marked ? styles["tree-item-marked"] : "")}
+        id={id}
+        onClick={() => navigateTo(id)}
+      >
+        <TreeItemIcon status={status} />
+        <Code data-testid="tree-leaf-order" size={"s"} className={styles.order}>
+          {groupOrder}
+        </Code>
+        <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
+          {name}
+        </Text>
+        <Text data-testid="tree-leaf-duration" type="ui" size={"m"} className={styles["item-time"]}>
+          {formattedDuration}
+        </Text>
+      </div>
+      <div>{error?.message && ErrorComponent && <ErrorComponent {...error} status={status} />}</div>
     </div>
   );
 };