@allurereport/web-awesome 3.3.1 → 3.4.0

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

@@ -1,38 +1,22 @@
 import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
-import type { AwesomeTestResult, AwesomeTestStepResult } from "types";
+
+import type { TrBodyItem } 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 { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
-import * as styles from "./styles.scss";
 
-const typeMap = {
-  step: TrStep,
-  attachment: TrAttachment,
-} as const;
+import * as styles from "./styles.scss";
 
 export type TrStepsProps = {
-  steps: AwesomeTestResult["steps"];
+  bodyItems: TrBodyItem[];
   id?: string;
 };
 
-type StepComponentProps = FunctionalComponent<{
-  item?: AwesomeTestStepResult;
-  stepIndex?: number;
-}>;
-
-export const TrSteps: FunctionalComponent<TrStepsProps> = ({ steps, id }) => {
-  const stepsId = `${id}-steps`;
-  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(stepsId));
-  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
-
-  const handleClick = () => {
-    setIsOpen(!isOpened);
-    toggleTree(stepsId);
-  };
+export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
+  const stepsId = id !== null ? `${id}-steps` : null;
+  const isOpened = !collapsedTrees.value.has(stepsId);
 
   const { t } = useI18n("execution");
   return (
@@ -40,17 +24,13 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ steps, id }) => {
       <TrDropdown
         icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
-        setIsOpen={handleClick}
-        counter={steps?.length}
+        setIsOpen={() => stepsId !== null && toggleTree(stepsId)}
+        counter={bodyItems.length}
         title={t("body")}
       />
       {isOpened && (
-        <div className={styles["test-result-steps-root"]}>
-          {steps?.map((item: AwesomeTestStepResult, index) => {
-            const { type } = item;
-            const StepComponent: StepComponentProps = typeMap[type];
-            return StepComponent ? <StepComponent item={item} stepIndex={index + 1} key={index} /> : null;
-          })}
+        <div data-testid="test-result-steps-root" className={styles["test-result-steps-root"]}>
+          <TrBodyItems bodyItems={bodyItems} />
         </div>
       )}
     </div>

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

@@ -24,6 +24,10 @@
   border-top: 1px solid var(--on-border-muted);
 }
 
+.test-result-error-step-content {
+  padding-top: 8px;
+}
+
 .test-result-attachment-content {
   border-top: 1px solid var(--on-border-muted);
 }
@@ -196,6 +200,10 @@
   color: var(--bg-control-flat);
 }
 
+.item-button-syntax-off {
+  opacity: 0.5;
+}
+
 .wrong-attachment-sign {
   display: flex;
   justify-content: center;

package/src/components/TestResult/TrSteps/wrongAttachment.tsx

@@ -1,6 +1,7 @@
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 import { useI18n } from "@/stores";
 
+import * as styles from "@/components/TestResult/TrSteps/styles.scss";
+
 export const EmptyComponent = () => {
   const { t } = useI18n("errors");
 

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

@@ -1,4 +1,5 @@
 import { type ComponentChildren } from "preact";
+
 import { NavTab, NavTabs, NavTabsList } from "@/components/NavTabs";
 import { navigateToTestResultTab } from "@/stores/router";
 import { currentTrId, trCurrentTab } from "@/stores/testResult";

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

@@ -2,13 +2,15 @@ import { allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import { TrAttachment } from "@/components/TestResult/TrSteps/TrAttachment";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
-import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 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,

package/src/components/TestResult/bodyItems.ts

@@ -0,0 +1,151 @@
+import type { AttachmentTestStepResult, DefaultTestStepResult, TestError, TestStatus } from "@allurereport/core-api";
+import type { AwesomeTestResult } from "types";
+
+export type TestLevelErrorItem = {
+  type: "error";
+  id: string;
+  title: string;
+  status: TestStatus;
+  error: TestError;
+};
+
+export type TrStepItem = {
+  type: "step";
+  item: DefaultTestStepResult;
+  bodyItems: TrBodyItem[];
+  suppressInlineError: boolean;
+};
+
+export type TrBodyItem = TrStepItem | AttachmentTestStepResult | TestLevelErrorItem;
+
+type TestErrorLike = Pick<TestError, "message" | "trace" | "actual" | "expected">;
+
+type BuildResult = {
+  bodyItems: TrBodyItem[];
+  didPlaceSyntheticError: boolean;
+};
+
+// Same pattern as @allurereport/web-commons stripAnsi — kept inline to avoid
+// module-resolution issues in the vitest/webpack dual environment.
+// eslint-disable-next-line no-control-regex
+const ansiRegex = /\x1B\[[0-9;?]*[ -/]*[@-~]/g;
+
+export const getTestLevelErrorId = (testResultId: string) => `__test-error__:${testResultId}`;
+
+const normalizeErrorText = (value?: string) => {
+  if (typeof value !== "string") {
+    return "";
+  }
+
+  return value.replace(ansiRegex, "").trim();
+};
+
+const getTestLevelErrorTitle = (message?: string) => {
+  return (
+    normalizeErrorText(message)
+      .split("\n")
+      .map((line) => line.trim())
+      .find((line) => line.length > 0) ?? ""
+  );
+};
+
+export const hasErrorDiff = (error?: TestErrorLike) =>
+  Boolean(error?.actual) && error.actual !== "undefined" && Boolean(error?.expected) && error.expected !== "undefined";
+
+export const hasTestLevelErrorContent = (error?: TestErrorLike) =>
+  Boolean(normalizeErrorText(error?.trace).length) || hasErrorDiff(error);
+
+const isDisplayableTestError = (error?: TestErrorLike) => {
+  return (
+    Boolean(normalizeErrorText(error?.message).length) ||
+    Boolean(normalizeErrorText(error?.trace).length) ||
+    hasErrorDiff(error)
+  );
+};
+
+const canHostSyntheticError = (step: DefaultTestStepResult, error: TestErrorLike) => {
+  if (step.status !== "failed" && step.status !== "broken") {
+    return false;
+  }
+
+  const stepMessage = normalizeErrorText(step.message);
+  const errorMessage = normalizeErrorText(error.message);
+
+  if (stepMessage && errorMessage) {
+    return stepMessage === errorMessage;
+  }
+
+  const stepTrace = normalizeErrorText(step.trace);
+  const errorTrace = normalizeErrorText(error.trace);
+
+  return Boolean(stepTrace) && Boolean(errorTrace) && stepTrace === errorTrace;
+};
+
+const createTestLevelErrorItem = (
+  testResultId: string,
+  status: TestStatus,
+  error: TestError,
+  fallbackTitle: string,
+): TestLevelErrorItem => ({
+  type: "error",
+  id: getTestLevelErrorId(testResultId),
+  title: getTestLevelErrorTitle(error.message) || fallbackTitle,
+  status,
+  error,
+});
+
+const buildStepBodyItems = (
+  steps: AwesomeTestResult["steps"],
+  syntheticErrorItem: TestLevelErrorItem | undefined,
+): BuildResult => {
+  const bodyItems: TrBodyItem[] = [];
+  let didPlaceSyntheticError = false;
+
+  for (const step of steps) {
+    if (step.type === "attachment") {
+      bodyItems.push(step);
+      continue;
+    }
+
+    const nestedResult = buildStepBodyItems(step.steps, syntheticErrorItem);
+    const shouldHostSyntheticError =
+      Boolean(syntheticErrorItem) &&
+      !nestedResult.didPlaceSyntheticError &&
+      canHostSyntheticError(step, syntheticErrorItem.error);
+
+    bodyItems.push({
+      type: "step",
+      item: step,
+      bodyItems: shouldHostSyntheticError ? [...nestedResult.bodyItems, syntheticErrorItem] : nestedResult.bodyItems,
+      suppressInlineError: shouldHostSyntheticError,
+    });
+
+    if (nestedResult.didPlaceSyntheticError || shouldHostSyntheticError) {
+      didPlaceSyntheticError = true;
+    }
+  }
+
+  return { bodyItems, didPlaceSyntheticError };
+};
+
+export const getBodyItems = (
+  testResult?: Pick<AwesomeTestResult, "id" | "status" | "steps" | "error">,
+  fallbackTitle = "Error",
+): TrBodyItem[] => {
+  if (!testResult) {
+    return [];
+  }
+
+  const syntheticErrorItem =
+    (testResult.status === "failed" || testResult.status === "broken") && isDisplayableTestError(testResult.error)
+      ? createTestLevelErrorItem(testResult.id, testResult.status, testResult.error, fallbackTitle)
+      : undefined;
+
+  const { bodyItems, didPlaceSyntheticError } = buildStepBodyItems(testResult.steps, syntheticErrorItem);
+
+  if (syntheticErrorItem && !didPlaceSyntheticError) {
+    return [...bodyItems, syntheticErrorItem];
+  }
+
+  return bodyItems;
+};

package/src/components/TestResult/index.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import type { FunctionComponent, FunctionalComponent } from "preact";
 import { useEffect } from "preact/hooks";
 import type { AwesomeTestResult } from "types";
+
 import { TrAttachmentView } from "@/components/TestResult/TrAttachmentsView";
 import TrEmpty from "@/components/TestResult/TrEmpty";
 import { TrEnvironmentsView } from "@/components/TestResult/TrEnvironmentsView";
@@ -14,6 +15,7 @@ import { TrTabs } from "@/components/TestResult/TrTabs";
 import { fetchTestEnvGroup } from "@/stores/env";
 import { isSplitMode } from "@/stores/layout";
 import { trCurrentTab } from "@/stores/testResult";
+
 import * as styles from "./styles.scss";
 
 export type TrViewProps = {

package/src/components/Timeline/index.tsx

@@ -1,16 +1,26 @@
 import { Timeline as AllureTimeline, Grid, GridItem, Loadable, PageLoader, Widget } from "@allurereport/web-components";
 import { computed } from "@preact/signals";
 import { useEffect, useMemo } from "preact/hooks";
+
 import { useI18n } from "@/stores";
-import { currentEnvironment } from "@/stores/env";
+import { currentEnvironment, environmentNameById } from "@/stores/env";
 import type { TimlineTr } from "@/stores/timeline";
 import { fetchTimelineData, timelineStore } from "@/stores/timeline";
+
 import * as styles from "./styles.scss";
 
 const getHosts = (tests: TimlineTr[]) => [...new Set(tests.map((test) => test.host))];
 
 const filterTestsByHost = (tests: TimlineTr[], host: string) => tests.filter((test) => test.host === host);
 
+const matchesSelectedEnvironment = (test: TimlineTr, environmentId: string) => {
+  if (test.environmentName !== undefined) {
+    return test.environment === environmentId;
+  }
+
+  return test.environment === environmentNameById(environmentId);
+};
+
 const currentTimelineData = computed(() => {
   const tests = timelineStore.value.data ?? [];
   if (!tests.length) {
@@ -18,7 +28,7 @@ const currentTimelineData = computed(() => {
   }
 
   if (currentEnvironment.value) {
-    const testsToEnv = tests.filter((test) => test.environment === currentEnvironment.value);
+    const testsToEnv = tests.filter((test) => matchesSelectedEnvironment(test, currentEnvironment.value));
     const hostsByEnv = getHosts(testsToEnv);
 
     return hostsByEnv.map((host) => ({

package/src/components/ToggleLayout/index.tsx

@@ -1,4 +1,5 @@
 import { IconButton, allureIcons } from "@allurereport/web-components";
+
 import { isSplitMode, toggleLayout } from "@/stores/layout";
 
 const ToggleLayout = () => {

package/src/components/Tree/index.tsx

@@ -1,14 +1,16 @@
 import { Button, Loadable, PageLoader, Text, Tree, TreeStatusBar } from "@allurereport/web-components";
 import { useMemo } from "preact/hooks";
+
 import { MetadataButton } from "@/components/MetadataButton";
 import { reportStatsStore, statsByEnvStore } from "@/stores";
-import { collapsedEnvironments, currentEnvironment, environmentsStore } from "@/stores/env";
+import { collapsedEnvironments, currentEnvironment, environmentNameById, environmentsStore } from "@/stores/env";
 import { useI18n } from "@/stores/locale";
 import { navigateToTestResult } from "@/stores/router";
 import { currentTrId } from "@/stores/testResult";
 import { collapsedTrees, filteredTree, noTests, noTestsFound, toggleTree, treeStore } from "@/stores/tree";
 import { clearTreeFilters, treeStatus } from "@/stores/treeFilters/store";
 import { createTreeLocalizer } from "@/utils/tree";
+
 import * as styles from "./styles.scss";
 
 const treeNavigateTo = (id: string) => {
@@ -131,7 +133,9 @@ export const TreeList = () => {
                     <MetadataButton
                       isOpened={isOpened}
                       setIsOpen={toggleEnv}
-                      title={`${tEnvironments("environment", { count: 1 })}: "${key}"`}
+                      title={`${tEnvironments("environment", { count: 1 })}: "${environmentNameById(key)}"`}
+                      titleTooltipText={`${tEnvironments("environment", { count: 1 })}: "${environmentNameById(key)}"`}
+                      truncateTitle
                       counter={total}
                       data-testid={"tree-section-env-button"}
                     />

package/src/components/Tree/styles.scss

@@ -197,4 +197,15 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 8px 0 6px;
+  min-width: 0;
+  gap: 8px;
+
+  > :first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  > :last-child {
+    flex: 0 0 auto;
+  }
 }

package/src/index.tsx

@@ -1,10 +1,12 @@
 import { ensureReportDataReady } from "@allurereport/web-commons";
 import { Spinner, SvgIcon, allureIcons } from "@allurereport/web-components";
+
 import "@allurereport/web-components/index.css";
 import { computed, useSignalEffect } from "@preact/signals";
 import clsx from "clsx";
 import { render } from "preact";
 import { useEffect, useState } from "preact/hooks";
+
 import "@/assets/scss/index.scss";
 import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
@@ -20,12 +22,14 @@ import { isLayoutLoading, layoutStore } from "@/stores/layout";
 import { fetchTestResult, fetchTestResultNav } from "@/stores/testResults";
 import { fetchEnvTreesData } from "@/stores/tree";
 import { isMac } from "@/utils/isMac";
+
 import { fetchQualityGateResults } from "./stores/qualityGate";
 import { rootTabRoute, testResultRoute } from "./stores/router";
 import { currentSection } from "./stores/sections";
 import { currentTrId } from "./stores/testResult";
 import { fetchTreeFiltersData } from "./stores/treeFilters/actions";
 import { migrateFilterParam } from "./stores/treeFilters/utils";
+
 import * as styles from "./styles.scss";
 
 const Loader = () => {
@@ -64,12 +68,14 @@ const App = () => {
     await waitForI18next;
     await Promise.all(fns.map((fn) => fn(currentEnvironment.value)));
 
+    const environmentIds = environmentsStore.value.data.map(({ id }) => id);
+
     if (currentEnvironment.value) {
       await fetchEnvTreesData([currentEnvironment.value]);
-      await fetchEnvStats(environmentsStore.value.data);
+      await fetchEnvStats(environmentIds);
     } else {
-      await fetchEnvTreesData(environmentsStore.value.data);
-      await fetchEnvStats(environmentsStore.value.data);
+      await fetchEnvTreesData(environmentIds);
+      await fetchEnvStats(environmentIds);
     }
 
     setPrefetched(true);