@allurereport/web-awesome 3.5.0 → 3.6.1

package/src/components/TestResult/TrSteps/stepTreeExpansion.ts

@@ -0,0 +1,101 @@
+import type { TestStatus } from "@allurereport/core-api";
+import { getReportOptions } from "@allurereport/web-commons";
+import {
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  isSubtreeFirstLevelOnlyOpened,
+  type SubtreeNodeState,
+  type SubtreeToggleState,
+} from "@allurereport/web-commons";
+
+import { hasTestLevelErrorContent, type TrBodyItem, type TrStepItem } from "@/components/TestResult/bodyItems";
+
+import type { AwesomeReportOptions, StepTreeExpansion } from "../../../../types";
+
+const DEFAULT_STEP_TREE_EXPANSION_POLICY: StepTreeExpansion = "expand_failed_only";
+
+const isFailedStatus = (status: TestStatus) => status === "failed" || status === "broken";
+
+export const hasFailedStepContext = (bodyItems: TrBodyItem[]): boolean =>
+  bodyItems.some((bodyItem) => {
+    if (bodyItem.type === "step") {
+      return isFailedStatus(bodyItem.item.status) || hasFailedStepContext(bodyItem.bodyItems);
+    }
+
+    if (bodyItem.type === "error") {
+      return isFailedStatus(bodyItem.status);
+    }
+
+    return false;
+  });
+
+const hasInlineStepError = (stepItem: TrStepItem) => {
+  const { item: stepData, suppressInlineError } = stepItem;
+  return Boolean((stepData.message || stepData.trace) && !stepData.hasSimilarErrorInSubSteps && !suppressInlineError);
+};
+
+export const hasStepContent = (stepItem: TrStepItem): boolean => {
+  return Boolean(stepItem.bodyItems.length || stepItem.item.parameters?.length || hasInlineStepError(stepItem));
+};
+
+export const isStepOpenedByDefault = (
+  policy: StepTreeExpansion,
+  status: TestStatus,
+  bodyItems: TrBodyItem[],
+): boolean => {
+  const hasFailedContext = status === "failed" || status === "broken" || hasFailedStepContext(bodyItems);
+  return isOpenByDefaultForPolicy(policy, hasFailedContext);
+};
+
+export type ExpandableStepNode = {
+  id: string;
+  openedByDefault: boolean;
+};
+
+export type SubtreeNode = SubtreeNodeState;
+
+export const collectExpandableStepNodes = (
+  bodyItems: TrBodyItem[],
+  policy: StepTreeExpansion,
+): ExpandableStepNode[] => {
+  const nodes: ExpandableStepNode[] = [];
+
+  bodyItems.forEach((bodyItem) => {
+    if (bodyItem.type === "step") {
+      if (hasStepContent(bodyItem)) {
+        nodes.push({
+          id: bodyItem.item.stepId,
+          openedByDefault: isStepOpenedByDefault(policy, bodyItem.item.status, bodyItem.bodyItems),
+        });
+      }
+      nodes.push(...collectExpandableStepNodes(bodyItem.bodyItems, policy));
+      return;
+    }
+
+    if (bodyItem.type === "error" && hasTestLevelErrorContent(bodyItem.error)) {
+      nodes.push({
+        id: bodyItem.id,
+        openedByDefault: isOpenByDefaultForPolicy(policy, bodyItem.status === "failed" || bodyItem.status === "broken"),
+      });
+    }
+  });
+
+  return nodes;
+};
+
+export { getNextSubtreeToggleState, getSubtreeToggleIcon, isSubtreeFirstLevelOnlyOpened, type SubtreeToggleState };
+
+export const getStepTreeExpansionPolicy = (): StepTreeExpansion =>
+  getReportOptions<AwesomeReportOptions>()?.stepTreeExpansion ?? DEFAULT_STEP_TREE_EXPANSION_POLICY;
+
+export const isOpenByDefaultForPolicy = (policy: StepTreeExpansion, hasFailedContext: boolean): boolean => {
+  if (policy === "expanded") {
+    return true;
+  }
+
+  if (policy === "collapsed") {
+    return false;
+  }
+
+  return hasFailedContext;
+};

package/src/components/TestResult/TrSteps/styles.scss

@@ -54,6 +54,18 @@
   }
 }
 
+.test-result-step-subtree-toggle {
+  flex: 0 0 auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms;
+}
+
+.test-result-step-header:hover .test-result-step-subtree-toggle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .test-result-header-text {
   padding-left: 4px;
   word-break: break-word;

package/src/components/TestResult/TrTeardown/index.tsx

@@ -3,21 +3,14 @@ import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
 
+import { fixtureResultToTrStepItem } from "@/components/TestResult/bodyItems";
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
-import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
-const typeMap = {
-  before: TrStep,
-  after: TrStep,
-  step: TrStep,
-  attachment: TrAttachment,
-};
-
 export type TrTeardownProps = {
   teardown: AwesomeTestResult["teardown"];
   id: string;
@@ -46,14 +39,11 @@ export const TrTeardown: FunctionalComponent<TrTeardownProps> = ({ teardown, id
       />
       {isOpened && (
         <div className={styles["test-result-steps-root"]}>
-          {teardown?.map((item, key) => {
-            const StepComponent = typeMap[item.type];
-            return StepComponent ? (
-              // FIXME: use proper type in the StepComponent component
-              // @ts-ignore
-              <StepComponent item={item} stepIndex={key + 1} key={key} className={styles["test-result-step-root"]} />
-            ) : null;
-          })}
+          {teardown?.map((fixture, key) => (
+            <div className={styles["test-result-step-root"]} key={fixture.id}>
+              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} />
+            </div>
+          ))}
         </div>
       )}
     </div>

package/src/components/TestResult/bodyItems.ts

@@ -1,5 +1,5 @@
 import type { AttachmentTestStepResult, DefaultTestStepResult, TestError, TestStatus } from "@allurereport/core-api";
-import type { AwesomeTestResult } from "types";
+import type { AwesomeFixtureResult, AwesomeTestResult } from "types";
 
 export type TestLevelErrorItem = {
   type: "error";
@@ -128,6 +128,31 @@ const buildStepBodyItems = (
   return { bodyItems, didPlaceSyntheticError };
 };
 
+export const getStepBodyItems = (steps: AwesomeTestResult["steps"]): TrBodyItem[] =>
+  buildStepBodyItems(steps, undefined).bodyItems;
+
+export const fixtureResultToTrStepItem = (fixture: AwesomeFixtureResult): TrStepItem => {
+  const err = fixture.error;
+
+  return {
+    type: "step",
+    item: {
+      type: "step",
+      name: fixture.name,
+      status: fixture.status,
+      parameters: [],
+      steps: fixture.steps,
+      stepId: fixture.id,
+      duration: fixture.duration,
+      message: err?.message,
+      trace: err?.trace,
+      error: err,
+    },
+    bodyItems: getStepBodyItems(fixture.steps),
+    suppressInlineError: false,
+  };
+};
+
 export const getBodyItems = (
   testResult?: Pick<AwesomeTestResult, "id" | "status" | "steps" | "error">,
   fallbackTitle = "Error",

package/src/components/Tree/index.tsx

@@ -72,15 +72,20 @@ export const TreeList = () => {
 
         // render single tree for single environment
         if (environmentsStore.value.data.length === 1) {
+          const soleId = environmentsStore.value.data[0]!.id;
+          const soleStatistic = currentEnvironment.value
+            ? statsByEnvStore.value.data[currentEnvironment.value]
+            : statsByEnvStore.value.data[soleId];
+
           return (
             <div>
               <Tree
                 reportStatistic={reportStatsStore.value.data}
-                statistic={statsByEnvStore.value.data[currentEnvironment.value]}
+                statistic={soleStatistic}
                 collapsedTrees={collapsedTrees.value}
                 toggleTree={toggleTree}
                 navigateTo={treeNavigateTo}
-                tree={treeLocalizer(filteredTree.value.default)}
+                tree={treeLocalizer(filteredTree.value[soleId])}
                 statusFilter={currentTreeStatus}
                 routeId={trId}
                 root

package/src/components/Tree/styles.scss

@@ -201,8 +201,8 @@
   gap: 8px;
 
   > :first-child {
-    flex: 1 1 auto;
     min-width: 0;
+    width: max-content;
   }
 
   > :last-child {

package/src/index.tsx

@@ -68,7 +68,7 @@ const App = () => {
     await waitForI18next;
     await Promise.all(fns.map((fn) => fn(currentEnvironment.value)));
 
-    const environmentIds = environmentsStore.value.data.map(({ id }) => id);
+    const environmentIds = environmentsStore.value.data.map(({ id }) => id).filter((id): id is string => Boolean(id));
 
     if (currentEnvironment.value) {
       await fetchEnvTreesData([currentEnvironment.value]);
@@ -83,7 +83,18 @@ const App = () => {
 
   useEffect(() => {
     prefetchData();
-  }, [currentEnvironment.value]);
+  }, []);
+
+  useSignalEffect(() => {
+    const envId = currentEnvironment.value;
+
+    if (!prefetched || !envId) {
+      return;
+    }
+
+    fetchEnvTreesData([envId]);
+    fetchEnvStats([envId]);
+  });
 
   useSignalEffect(() => {
     const testResultId = currentTrId.value;

package/src/stores/env.ts

@@ -1,8 +1,10 @@
 import { type EnvironmentIdentity, type TestEnvGroup } from "@allurereport/core-api";
 import {
   environmentNameById as resolveEnvironmentNameById,
+  errorMessageFromUnknown,
   fetchReportJsonData,
   migrateStoredEnvironmentSelection,
+  normalizeEnvironmentsWidget,
 } from "@allurereport/web-commons";
 import { effect, signal } from "@preact/signals";
 
@@ -40,7 +42,8 @@ export const fetchEnvironments = async () => {
   };
 
   try {
-    const res = await fetchReportJsonData<EnvironmentIdentity[]>("widgets/environments.json", { bustCache: true });
+    const raw = await fetchReportJsonData<unknown>("widgets/environments.json", { bustCache: true });
+    const res = normalizeEnvironmentsWidget(raw);
 
     environmentsStore.value = {
       data: res,
@@ -52,7 +55,7 @@ export const fetchEnvironments = async () => {
   } catch (e) {
     environmentsStore.value = {
       ...environmentsStore.peek(),
-      error: e.message,
+      error: errorMessageFromUnknown(e),
       loading: false,
     };
   }
@@ -83,7 +86,7 @@ export const fetchTestEnvGroup = async (id: string) => {
   } catch (e) {
     testEnvGroupsStore.value = {
       ...testEnvGroupsStore.peek(),
-      error: e.message,
+      error: errorMessageFromUnknown(e),
       loading: false,
     };
   }

package/src/stores/envInfo.ts

@@ -1,5 +1,5 @@
 import type { EnvironmentItem } from "@allurereport/core-api";
-import { fetchReportJsonData } from "@allurereport/web-commons";
+import { errorMessageFromUnknown, fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 
 import type { StoreSignalState } from "@/stores/types";
@@ -28,7 +28,7 @@ export const fetchEnvInfo = async () => {
   } catch (e) {
     envInfoStore.value = {
       ...envInfoStore.peek(),
-      error: e.message,
+      error: errorMessageFromUnknown(e),
       loading: false,
     };
   }

package/src/stores/sections.ts

@@ -25,7 +25,9 @@ const onInit = () => {
 
 onInit();
 
-export const currentSection = computed(() => sectionRoute.value.params.section ?? "default");
+export const currentSection = computed(() =>
+  sectionRoute.value.matches ? (sectionRoute.value.params.section ?? "default") : "default",
+);
 
 effect(() => {
   const section = currentSection.value;

package/src/stores/stats.ts

@@ -1,5 +1,5 @@
 import type { Statistic } from "@allurereport/core-api";
-import { fetchReportJsonData } from "@allurereport/web-commons";
+import { errorMessageFromUnknown, fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 
 import type { StoreSignalState } from "@/stores/types";
@@ -38,7 +38,7 @@ export const fetchReportStats = async () => {
   } catch (err) {
     reportStatsStore.value = {
       data: { total: 0 },
-      error: err.message,
+      error: errorMessageFromUnknown(err),
       loading: false,
     };
   }
@@ -80,7 +80,7 @@ export const fetchEnvStats = async (envs: string[]) => {
   } catch (err) {
     statsByEnvStore.value = {
       ...statsByEnvStore.peek(),
-      error: err.message,
+      error: errorMessageFromUnknown(err),
       loading: false,
     };
   }

package/src/stores/tree.ts

@@ -1,4 +1,4 @@
-import { buildFilterPredicate, fetchReportJsonData } from "@allurereport/web-commons";
+import { buildFilterPredicate, errorMessageFromUnknown, fetchReportJsonData } from "@allurereport/web-commons";
 import type { RecursiveTree } from "@allurereport/web-components/global";
 import { computed, effect, signal } from "@preact/signals";
 import type { AwesomeTree, AwesomeTreeGroup } from "types";
@@ -23,19 +23,51 @@ export const noTests = computed(() => {
 });
 
 export const collapsedTrees = signal(new Set(loadFromLocalStorage<string[]>("collapsedTrees", [])));
+export const expandedTrees = signal(new Set(loadFromLocalStorage<string[]>("expandedTrees", [])));
 
 effect(() => {
   localStorage.setItem("collapsedTrees", JSON.stringify([...collapsedTrees.value]));
 });
 
-export const toggleTree = (id: string) => {
-  const newSet = new Set(collapsedTrees.value);
-  if (newSet.has(id)) {
-    newSet.delete(id);
+effect(() => {
+  localStorage.setItem("expandedTrees", JSON.stringify([...expandedTrees.value]));
+});
+
+export const isTreeOpened = (id: string, openedByDefault = true): boolean => {
+  if (openedByDefault) {
+    return !collapsedTrees.value.has(id);
+  }
+
+  return expandedTrees.value.has(id);
+};
+
+const setTreeStoredState = (id: string, shouldBeOpened: boolean, openedByDefault: boolean) => {
+  if (openedByDefault) {
+    const nextCollapsedTrees = new Set(collapsedTrees.value);
+    if (shouldBeOpened) {
+      nextCollapsedTrees.delete(id);
+    } else {
+      nextCollapsedTrees.add(id);
+    }
+    collapsedTrees.value = nextCollapsedTrees;
+    return;
+  }
+
+  const nextExpandedTrees = new Set(expandedTrees.value);
+  if (shouldBeOpened) {
+    nextExpandedTrees.add(id);
   } else {
-    newSet.add(id);
+    nextExpandedTrees.delete(id);
   }
-  collapsedTrees.value = newSet;
+  expandedTrees.value = nextExpandedTrees;
+};
+
+export const toggleTree = (id: string, openedByDefault = true) => {
+  setTreeStoredState(id, !isTreeOpened(id, openedByDefault), openedByDefault);
+};
+
+export const setTreeOpened = (id: string, shouldBeOpened: boolean, openedByDefault = true) => {
+  setTreeStoredState(id, shouldBeOpened, openedByDefault);
 };
 
 export const fetchEnvTreesData = async (envs: string[]) => {
@@ -74,7 +106,7 @@ export const fetchEnvTreesData = async (envs: string[]) => {
   } catch (e) {
     treeStore.value = {
       ...treeStore.peek(),
-      error: e.message,
+      error: errorMessageFromUnknown(e),
       loading: false,
     };
   }

package/test/components/TestResult/bodyItems.test.ts

@@ -1,8 +1,13 @@
 import type { AttachmentTestStepResult, DefaultTestStepResult } from "@allurereport/core-api";
-import type { AwesomeTestResult } from "types";
+import type { AwesomeFixtureResult, AwesomeTestResult } from "types";
 import { describe, expect, it } from "vitest";
 
-import { getBodyItems, getTestLevelErrorId } from "@/components/TestResult/bodyItems";
+import {
+  fixtureResultToTrStepItem,
+  getBodyItems,
+  getStepBodyItems,
+  getTestLevelErrorId,
+} from "@/components/TestResult/bodyItems";
 
 const sampleStep: DefaultTestStepResult = {
   type: "step",
@@ -191,4 +196,22 @@ describe("components > TestResult > bodyItems", () => {
       },
     ]);
   });
+
+  it("fixtureResultToTrStepItem builds TrStepItem from setup or teardown fixture", () => {
+    const fixture: AwesomeFixtureResult = {
+      id: "fixture-before-1",
+      type: "before",
+      name: "before suite",
+      status: "passed",
+      steps: [sampleStep],
+    };
+
+    const wrapped = fixtureResultToTrStepItem(fixture);
+
+    expect(wrapped.type).toBe("step");
+    expect(wrapped.item.name).toBe("before suite");
+    expect(wrapped.item.stepId).toBe("fixture-before-1");
+    expect(wrapped.item.type).toBe("step");
+    expect(wrapped.bodyItems).toEqual(getStepBodyItems([sampleStep]));
+  });
 });

package/test/components/TestResult/stepTreeExpansion.test.ts

@@ -0,0 +1,179 @@
+import { describe, expect, it } from "vitest";
+
+import type { TrBodyItem } from "@/components/TestResult/bodyItems";
+import {
+  collectExpandableStepNodes,
+  getNextSubtreeToggleState,
+  hasFailedStepContext,
+  isOpenByDefaultForPolicy,
+  isStepOpenedByDefault,
+} from "@/components/TestResult/TrSteps/stepTreeExpansion";
+
+describe("components > TestResult > stepTreeExpansion", () => {
+  it("should detect failed context in nested steps", () => {
+    const bodyItems = [
+      {
+        type: "step",
+        item: {
+          name: "top-level step",
+          status: "passed",
+        },
+        suppressInlineError: false,
+        bodyItems: [
+          {
+            type: "step",
+            item: {
+              name: "failed nested step",
+              status: "failed",
+            },
+            suppressInlineError: false,
+            bodyItems: [],
+          },
+        ],
+      },
+    ] as TrBodyItem[];
+
+    expect(hasFailedStepContext(bodyItems)).toBe(true);
+  });
+
+  it("should not detect failed context for only passed steps and attachments", () => {
+    const bodyItems = [
+      {
+        type: "step",
+        item: {
+          name: "top-level step",
+          status: "passed",
+        },
+        suppressInlineError: false,
+        bodyItems: [],
+      },
+      {
+        type: "attachment",
+        link: {
+          id: "attachment-1",
+          source: "attachment-1.txt",
+          name: "attachment",
+          type: "text/plain",
+        },
+      },
+    ] as TrBodyItem[];
+
+    expect(hasFailedStepContext(bodyItems)).toBe(false);
+  });
+
+  it("should resolve default expansion state according to policy", () => {
+    expect(isOpenByDefaultForPolicy("expanded", false)).toBe(true);
+    expect(isOpenByDefaultForPolicy("collapsed", true)).toBe(false);
+    expect(isOpenByDefaultForPolicy("expand_failed_only", true)).toBe(true);
+    expect(isOpenByDefaultForPolicy("expand_failed_only", false)).toBe(false);
+  });
+
+  it("should resolve step default opening according to status and nested failures", () => {
+    const failedBodyItems = [
+      {
+        type: "step",
+        item: {
+          name: "nested failed step",
+          status: "failed",
+        },
+        suppressInlineError: false,
+        bodyItems: [],
+      },
+    ] as TrBodyItem[];
+
+    expect(isStepOpenedByDefault("expand_failed_only", "passed", failedBodyItems)).toBe(true);
+    expect(isStepOpenedByDefault("expand_failed_only", "passed", [])).toBe(false);
+  });
+
+  it("should collect expandable step and error nodes with correct defaults", () => {
+    const bodyItems = [
+      {
+        type: "step",
+        item: {
+          stepId: "parent-step",
+          name: "parent step",
+          status: "passed",
+          parameters: [],
+          message: "",
+          trace: "",
+          hasSimilarErrorInSubSteps: false,
+        },
+        suppressInlineError: false,
+        bodyItems: [
+          {
+            type: "step",
+            item: {
+              stepId: "failed-child-step",
+              name: "failed child step",
+              status: "failed",
+              parameters: [],
+              message: "child failed",
+              trace: "trace",
+              hasSimilarErrorInSubSteps: false,
+            },
+            suppressInlineError: false,
+            bodyItems: [],
+          },
+          {
+            type: "error",
+            id: "test-error",
+            title: "Error",
+            status: "failed",
+            error: {
+              message: "failure",
+              trace: "trace",
+            },
+          },
+        ],
+      },
+    ] as TrBodyItem[];
+
+    expect(collectExpandableStepNodes(bodyItems, "expand_failed_only")).toEqual([
+      { id: "parent-step", openedByDefault: true },
+      { id: "failed-child-step", openedByDefault: true },
+      { id: "test-error", openedByDefault: true },
+    ]);
+  });
+
+  it("should calculate next subtree toggle state like categories", () => {
+    expect(
+      getNextSubtreeToggleState({
+        hasOnlyLeafResults: false,
+        isSubtreeCollapsedAll: true,
+        isSubtreeFirstLevelOnly: false,
+        isSubtreeExpandedAll: false,
+        lastSubtreeToggle: null,
+      }),
+    ).toBe("first");
+
+    expect(
+      getNextSubtreeToggleState({
+        hasOnlyLeafResults: false,
+        isSubtreeCollapsedAll: false,
+        isSubtreeFirstLevelOnly: true,
+        isSubtreeExpandedAll: false,
+        lastSubtreeToggle: null,
+      }),
+    ).toBe("all");
+
+    expect(
+      getNextSubtreeToggleState({
+        hasOnlyLeafResults: false,
+        isSubtreeCollapsedAll: false,
+        isSubtreeFirstLevelOnly: true,
+        isSubtreeExpandedAll: false,
+        lastSubtreeToggle: "all",
+      }),
+    ).toBe("none");
+
+    expect(
+      getNextSubtreeToggleState({
+        hasOnlyLeafResults: true,
+        isSubtreeCollapsedAll: false,
+        isSubtreeFirstLevelOnly: false,
+        isSubtreeExpandedAll: true,
+        lastSubtreeToggle: "all",
+      }),
+    ).toBe("none");
+  });
+});

package/types.d.ts

@@ -12,6 +12,7 @@ import type {
 } from "@allurereport/core-api";
 
 export type Layout = "base" | "split";
+export type StepTreeExpansion = "collapsed" | "expand_failed_only" | "expanded";
 
 export type AwesomeReportOptions = {
   allureVersion: string;
@@ -27,6 +28,7 @@ export type AwesomeReportOptions = {
   sections?: string[];
   cacheKey: string;
   ci?: CiDescriptor;
+  stepTreeExpansion?: StepTreeExpansion;
 };
 
 export type AwesomeFixtureResult = Omit<