@allurereport/web-awesome 3.8.2 → 3.10.0

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

@@ -8,6 +8,7 @@ import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { useI18n } from "@/stores/locale";
 import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -17,19 +18,24 @@ export type TrSetupProps = {
 };
 
 export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
-  const teardownId = `${id}-setup`;
-  const isEarlyCollapsed = Boolean(!collapsedTrees.value.has(teardownId));
+  const setupId = id ? `${id}-setup` : null;
+  const isEarlyCollapsed = setupId ? Boolean(!collapsedTrees.value.has(setupId)) : true;
   const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
 
   const handleClick = () => {
     setIsOpen(!isOpened);
-    toggleTree(teardownId);
+
+    if (setupId) {
+      toggleTree(setupId);
+    }
   };
   const { t } = useI18n("execution");
 
   return (
     <div className={styles["test-result-steps"]}>
       <TrDropdown
+        className={trOverviewHeaderFocusClass(setupId)}
+        {...trOverviewFocusAttrs(setupId)}
         icon={allureIcons.lineTimeClockStopwatch}
         isOpened={isOpened}
         setIsOpen={handleClick}
@@ -40,7 +46,7 @@ export const TrSetup: FunctionalComponent<TrSetupProps> = ({ setup, id }) => {
         <div className={styles["test-result-steps-root"]}>
           {setup?.map((fixture, key) => (
             <div className={styles["test-result-step-root"]} key={fixture.id}>
-              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} />
+              <TrStep item={fixtureResultToTrStepItem(fixture)} stepIndex={key + 1} isTopLevel={true} />
             </div>
           ))}
         </div>

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

@@ -2,29 +2,29 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .test-result-severity-text {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .severity-blocker {
-  color: var(--on-support-capella);
+  color: var(--color-intent-danger-text);
 }
 
 .severity-critical {
-  color: var(--on-support-atlas);
+  color: var(--color-intent-warning-text);
 }
 
 .severity-normal {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .severity-minor {
-  color: var(--on-support-aldebaran);
+  color: var(--color-intent-primary-text);
 }
 
 .severity-trivial {
-  color: var(--on-support-castor);
+  color: var(--color-intent-success-text);
 }

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

@@ -1,36 +1,3 @@
-.test-result-status {
-  padding: 2px;
-  display: flex;
-  border-radius: 100px;
-  color: var(--constant-on-text-primary);
-  height: max-content;
-}
+@import "~@allurereport/web-components/mixins.scss";
 
-.test-result-status-text {
-  padding: 0 4px;
-}
-
-.test-result-status-icon {
-  color: var(--constant-on-text-primary);
-  padding: 0;
-}
-
-.status-passed {
-  background-color: var(--bg-support-castor);
-}
-
-.status-failed {
-  background-color: var(--bg-support-capella);
-}
-
-.status-broken {
-  background-color: var(--bg-support-atlas);
-}
-
-.status-skipped {
-  background-color: var(--bg-support-rau);
-}
-
-.status-unknown {
-  background-color: var(--bg-support-skat);
-}
+@include status-label-shape("test-result-status", "test-result-status-icon", "test-result-status-text");

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

@@ -1,5 +1,5 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { attachmentType, isPreviewableContentType, isSyntaxHighlightSupported } from "@allurereport/web-commons";
+import { attachmentType, isSyntaxHighlightSupported } from "@allurereport/web-commons";
 import { ArrowButton, Attachment, Code, SvgIcon, Text, allureIcons } from "@allurereport/web-components";
 import cx from "clsx";
 import type { FunctionComponent } from "preact";
@@ -9,6 +9,7 @@ import { TrAttachmentInfo } from "@/components/TestResult/TrSteps/TrAttachmentIn
 import { useI18n } from "@/stores";
 import { openModal } from "@/stores/modal";
 import { isTreeOpened, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -52,75 +53,112 @@ const iconMap: Record<string, string> = {
   "video/mp4": lineImagesImage,
   "application/vnd.allure.image.diff": lineImagesImage,
   "application/vnd.allure.playwright-trace": playwrightLogo,
+  "application/vnd.allure.http+json": lineFilesFileAttachment2,
 };
 
-const HAS_PREVIEW_COMPONENT = new Set(["html"]);
+const HAS_PREVIEW_COMPONENT = new Set(["html", "markdown"]);
+const DEFAULT_PREVIEW_TYPES = new Set(["markdown", "html"]);
 
 export const TrAttachment: FunctionComponent<{
   item: AttachmentTestStepResult;
   stepIndex?: number;
   className?: string;
 }> = ({ item, stepIndex }) => {
+  const { link } = item;
   const attachmentTreeId = item.link?.id !== null ? `attachment-${item.link.id}` : null;
   const isOpened = attachmentTreeId !== null ? isTreeOpened(attachmentTreeId, false) : false;
-  const [showPreview, setShowPreview] = useState(false);
+  const componentTypeForPreview = attachmentType(link.contentType);
+  const [showPreview, setShowPreview] = useState(() => DEFAULT_PREVIEW_TYPES.has(componentTypeForPreview ?? ""));
   const [highlightCode, setHighlightCode] = useState(true);
   const { t: tAttachments } = useI18n("attachments");
-  const { link } = item;
   const { missed } = link;
-  const componentType = attachmentType(link.contentType);
+  const componentType = componentTypeForPreview;
   const isValidComponentType = !["archive", null].includes(componentType);
   const isPreviewable = HAS_PREVIEW_COMPONENT.has(componentType ?? "");
-  const isCodeView = (componentType === "code" || componentType === "text") && (!isPreviewable || !showPreview);
+  const isImageAttachment = componentType === "image";
   const isSyntaxHighlightable = isSyntaxHighlightSupported({
     contentType: link.contentType,
     ext: link.ext,
     name: link.name,
     originalFileName: link.originalFileName,
   });
+  const supportsSyntaxHighlightToggle =
+    isSyntaxHighlightable &&
+    (componentType === "code" || componentType === "text" || componentType === "markdown" || componentType === "html");
 
-  const expandAttachment = (event: Event) => {
+  const handleHighlightToggle = () => {
+    if (isPreviewable && showPreview) {
+      setShowPreview(false);
+    }
+    setHighlightCode((highlight) => !highlight);
+  };
+
+  const toggleAttachment = (event: Event) => {
     event.stopPropagation();
-    if (componentType !== "image") {
-      return;
+    if (attachmentTreeId !== null) {
+      toggleTree(attachmentTreeId, false);
     }
+  };
+
+  const expandAttachment = (event: Event) => {
+    event.stopPropagation();
     openModal({
       data: item,
       component: <Attachment item={item} previewable={true} />,
     });
   };
 
+  const content = (
+    <Attachment
+      item={item}
+      previewable={showPreview}
+      highlightCode={highlightCode}
+      i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
+    />
+  );
+
+  const attachmentHeaderContent = (
+    <>
+      {isValidComponentType ? (
+        <ArrowButton isOpened={isOpened} tag="span" />
+      ) : (
+        <span className={styles["test-result-strut"]} />
+      )}
+      <span className={styles["test-result-attachment-icon"]}>
+        <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
+      </span>
+
+      <Code size="s" className={styles["test-result-step-number"]}>
+        {stepIndex}
+      </Code>
+      <Text className={styles["test-result-attachment-text"]}>{link.name || link.originalFileName}</Text>
+      {missed && (
+        <Text
+          size={"s"}
+          className={styles["test-result-attachment-missed"]}
+          data-testid={"test-result-attachment-missed"}
+        >
+          missed
+        </Text>
+      )}
+    </>
+  );
+
   return (
     <div data-testid={"test-result-attachment"} className={styles["test-result-step"]}>
       <div
         data-testid={"test-result-attachment-header"}
-        className={cx(styles["test-result-attachment-header"], {
+        className={cx(styles["test-result-attachment-header"], trOverviewHeaderFocusClass(item.link.id), {
           [styles.empty]: !isValidComponentType,
         })}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (attachmentTreeId !== null) {
-            toggleTree(attachmentTreeId, false);
-          }
-        }}
+        {...trOverviewFocusAttrs(item.link.id)}
       >
-        {isValidComponentType ? <ArrowButton isOpened={isOpened} /> : <div className={styles["test-result-strut"]} />}
-        <div className={styles["test-result-attachment-icon"]}>
-          <SvgIcon size="s" id={iconMap[link.contentType] ?? lineFilesFileAttachment2} />
-        </div>
-
-        <Code size="s" className={styles["test-result-step-number"]}>
-          {stepIndex}
-        </Code>
-        <Text className={styles["test-result-attachment-text"]}>{link.name || link.originalFileName}</Text>
-        {missed && (
-          <Text
-            size={"s"}
-            className={styles["test-result-attachment-missed"]}
-            data-testid={"test-result-attachment-missed"}
-          >
-            missed
-          </Text>
+        {isValidComponentType ? (
+          <button className={styles["test-result-attachment-toggle"]} onClick={toggleAttachment} type="button">
+            {attachmentHeaderContent}
+          </button>
+        ) : (
+          attachmentHeaderContent
         )}
         <div>
           <TrAttachmentInfo
@@ -129,22 +167,20 @@ export const TrAttachment: FunctionComponent<{
             isPreviewable={isPreviewable}
             showPreview={showPreview}
             onPreviewToggle={isPreviewable ? () => setShowPreview((p) => !p) : undefined}
-            isCodeView={isCodeView && isSyntaxHighlightable}
             highlightCode={highlightCode}
-            onHighlightToggle={isCodeView && isSyntaxHighlightable ? () => setHighlightCode((h) => !h) : undefined}
+            onHighlightToggle={supportsSyntaxHighlightToggle ? handleHighlightToggle : undefined}
           />
         </div>
       </div>
       {isOpened && isValidComponentType && (
         <div className={styles["test-result-attachment-content-wrapper"]}>
-          <div className={styles["test-result-attachment-content"]} role={"button"} onClick={expandAttachment}>
-            <Attachment
-              item={item}
-              previewable={showPreview}
-              highlightCode={highlightCode}
-              i18n={{ imageDiff: (key: string) => tAttachments(`imageDiff.${key}`) }}
-            />
-          </div>
+          {isImageAttachment ? (
+            <button className={styles["test-result-attachment-content"]} onClick={expandAttachment} type="button">
+              {content}
+            </button>
+          ) : (
+            <div className={styles["test-result-attachment-content"]}>{content}</div>
+          )}
         </div>
       )}
     </div>

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

@@ -18,7 +18,6 @@ interface TrAttachmentInfo {
   isPreviewable?: boolean;
   showPreview?: boolean;
   onPreviewToggle?: () => void;
-  isCodeView?: boolean;
   highlightCode?: boolean;
   onHighlightToggle?: () => void;
 }
@@ -29,7 +28,6 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
   isPreviewable,
   showPreview,
   onPreviewToggle,
-  isCodeView,
   highlightCode = true,
   onHighlightToggle,
 }) => {
@@ -81,28 +79,57 @@ export const TrAttachmentInfo: FunctionalComponent<TrAttachmentInfo> = ({
       <div className={styles["item-buttons"]}>
         {isPwTrace && <PwTraceButton link={item.link} />}
         {isPreviewable && onPreviewToggle && (
-          <TooltipWrapper tooltipText={tooltip(showPreview ? "viewCode" : "previewAttachment")}>
-            <IconButton
-              className={styles["item-button"]}
-              style={"ghost"}
-              size={"s"}
-              iconSize={"s"}
-              icon={showPreview ? allureIcons.viewOff : allureIcons.view}
-              onClick={(e: Event) => {
-                e.stopPropagation();
-                onPreviewToggle();
-              }}
-            />
-          </TooltipWrapper>
+          <>
+            <TooltipWrapper tooltipText={tooltip("previewAttachment")}>
+              <IconButton
+                className={cx(styles["item-button"], showPreview && styles["item-button-active"])}
+                style={"ghost"}
+                size={"s"}
+                iconSize={"s"}
+                isActive={showPreview}
+                icon={allureIcons.view}
+                aria-pressed={showPreview}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  if (!showPreview) {
+                    onPreviewToggle();
+                  }
+                }}
+              />
+            </TooltipWrapper>
+            <TooltipWrapper tooltipText={tooltip("viewCode")}>
+              <IconButton
+                className={cx(styles["item-button"], !showPreview && styles["item-button-active"])}
+                style={"ghost"}
+                size={"s"}
+                iconSize={"s"}
+                isActive={!showPreview}
+                icon={allureIcons.lineFilesFileAttachment2}
+                aria-pressed={!showPreview}
+                onClick={(e: Event) => {
+                  e.stopPropagation();
+                  if (showPreview) {
+                    onPreviewToggle();
+                  }
+                }}
+              />
+            </TooltipWrapper>
+          </>
         )}
-        {isCodeView && onHighlightToggle && (
+        {onHighlightToggle && (
           <TooltipWrapper tooltipText={tooltip("syntaxHighlight")}>
             <IconButton
-              className={cx(styles["item-button"], !highlightCode && styles["item-button-syntax-off"])}
+              className={cx(
+                styles["item-button"],
+                highlightCode && styles["item-button-active"],
+                !highlightCode && styles["item-button-syntax-off"],
+              )}
               style={"ghost"}
               size={"s"}
               iconSize={"s"}
+              isActive={highlightCode}
               icon={allureIcons.lineDevCodeSquare}
+              aria-pressed={highlightCode}
               onClick={(e: Event) => {
                 e.stopPropagation();
                 onHighlightToggle();

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

@@ -20,15 +20,18 @@ const getBodyItemKey = (item: TrBodyItem, index: number) => {
 
 export type TrBodyItemsProps = {
   bodyItems: TrBodyItem[];
+  isTopLevel?: boolean;
 };
 
-export const TrBodyItems: FunctionalComponent<TrBodyItemsProps> = ({ bodyItems }) => {
+export const TrBodyItems: FunctionalComponent<TrBodyItemsProps> = ({ bodyItems, isTopLevel }) => {
   return (
     <>
       {bodyItems.map((item, index) => {
         switch (item.type) {
           case "step":
-            return <TrStep item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
+            return (
+              <TrStep item={item} stepIndex={index + 1} isTopLevel={isTopLevel} key={getBodyItemKey(item, index)} />
+            );
           case "attachment":
             return <TrAttachment item={item} stepIndex={index + 1} key={getBodyItemKey(item, index)} />;
           case "error":

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

@@ -9,6 +9,7 @@ import {
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
 import { isTreeOpened, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -26,6 +27,8 @@ export const TrErrorStep: FunctionComponent<TrErrorStepProps> = ({ item, stepInd
   return (
     <div data-testid="test-result-step" className={styles["test-result-step"]}>
       <TrStepHeader
+        className={trOverviewHeaderFocusClass(item.id)}
+        {...trOverviewFocusAttrs(item.id)}
         title={item.title}
         status={item.status}
         stepIndex={stepIndex}

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

@@ -1,3 +1,9 @@
+import {
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  isSubtreeFirstLevelOnlyOpened,
+  type SubtreeToggleState,
+} from "@allurereport/web-commons";
 import { IconButton, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -10,17 +16,15 @@ import {
   collectExpandableStepNodes,
   hasStepContent,
   getStepTreeExpansionPolicy,
-  getNextSubtreeToggleState,
-  getSubtreeToggleIcon,
-  isSubtreeFirstLevelOnlyOpened,
+  isOpenByDefaultForPolicy,
   isStepOpenedByDefault,
   type SubtreeNode,
-  type SubtreeToggleState,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
 import { TrStepHeader } from "@/components/TestResult/TrSteps/TrStepHeader";
 import { TrStepInfo } from "@/components/TestResult/TrSteps/TrStepInfo";
 import { isTreeOpened, setTreeOpened, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
 
@@ -67,7 +71,8 @@ export const TrStepsContent = (props: { item: TrStepItem }) => {
 export const TrStep: FunctionComponent<{
   item: TrStepItem;
   stepIndex?: number;
-}> = ({ item, stepIndex }) => {
+  isTopLevel?: boolean;
+}> = ({ item, stepIndex, isTopLevel }) => {
   const { item: stepData, bodyItems, suppressInlineError } = item;
   const inlineError = {
     message: stepData.message ?? stepData.error?.message,
@@ -82,7 +87,9 @@ export const TrStep: FunctionComponent<{
   );
   const policy = getStepTreeExpansionPolicy();
   const hasContent = hasStepContent(item);
-  const openedByDefault = isStepOpenedByDefault(policy, stepData.status, bodyItems);
+  const openedByDefault = isTopLevel
+    ? isOpenByDefaultForPolicy(policy, true)
+    : isStepOpenedByDefault(policy, stepData.status, bodyItems);
   const isOpened = isTreeOpened(stepData.stepId, openedByDefault);
   const expandableDescendantNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasExpandableDescendants = expandableDescendantNodes.length > 0;
@@ -143,6 +150,8 @@ export const TrStep: FunctionComponent<{
   return (
     <div data-testid={"test-result-step"} className={styles["test-result-step"]}>
       <TrStepHeader
+        className={trOverviewHeaderFocusClass(stepData.stepId)}
+        {...trOverviewFocusAttrs(stepData.stepId)}
         title={stepData.name}
         status={stepData.status}
         stepIndex={stepIndex}

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

@@ -1,5 +1,6 @@
 import type { TestStatus } from "@allurereport/core-api";
-import { ArrowButton, Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import { ArrowButton, Code, LinkifiedText, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import clsx from "clsx";
 import type { FunctionComponent } from "preact";
 
 import * as styles from "@/components/TestResult/TrSteps/styles.scss";
@@ -13,6 +14,7 @@ export type TrStepHeaderProps = {
   onToggle: () => void;
   extra?: preact.ComponentChildren;
   subtreeToggle?: preact.ComponentChildren;
+  className?: string;
 };
 
 export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
@@ -24,11 +26,14 @@ export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
   onToggle,
   extra,
   subtreeToggle,
+  className,
+  ...rest
 }) => (
   <div
     data-testid="test-result-step-header"
-    className={styles["test-result-step-header"]}
+    className={clsx(styles["test-result-step-header"], className)}
     onClick={hasContent ? onToggle : undefined}
+    {...rest}
   >
     {!hasContent ? (
       <div className={styles["test-result-strut"]} />
@@ -44,9 +49,7 @@ export const TrStepHeader: FunctionComponent<TrStepHeaderProps> = ({
     <Code size="s" className={styles["test-result-step-number"]}>
       {stepIndex}
     </Code>
-    <Text data-testid="test-result-step-title" className={styles["test-result-header-text"]}>
-      {title}
-    </Text>
+    <LinkifiedText data-testid="test-result-step-title" className={styles["test-result-header-text"]} text={title} />
     {subtreeToggle}
     {extra}
   </div>

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

@@ -1,3 +1,4 @@
+import { getNextSubtreeToggleState, getSubtreeToggleIcon, type SubtreeToggleState } from "@allurereport/web-commons";
 import { IconButton, allureIcons } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
@@ -6,16 +7,15 @@ import type { TrBodyItem } from "@/components/TestResult/bodyItems";
 import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import {
   collectExpandableStepNodes,
-  getNextSubtreeToggleState,
-  getSubtreeToggleIcon,
   getStepTreeExpansionPolicy,
+  isOpenByDefaultForPolicy,
   isSubtreeFirstLevelOnlyOpened,
   type SubtreeNode,
-  type SubtreeToggleState,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
 import { TrBodyItems } from "@/components/TestResult/TrSteps/TrBodyItems";
 import { useI18n } from "@/stores/locale";
 import { isTreeOpened, setTreeOpened, toggleTree } from "@/stores/tree";
+import { trOverviewFocusAttrs, trOverviewHeaderFocusClass } from "@/utils/trOverviewFocus";
 
 import * as styles from "./styles.scss";
 
@@ -34,7 +34,7 @@ export type TrStepsProps = {
 export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
   const stepsId = typeof id === "string" ? `${id}-steps` : null;
   const policy = getStepTreeExpansionPolicy();
-  const isRootOpenedByDefault = policy !== "collapsed";
+  const isRootOpenedByDefault = isOpenByDefaultForPolicy(policy, true);
   const isOpened = stepsId !== null ? isTreeOpened(stepsId, isRootOpenedByDefault) : isRootOpenedByDefault;
   const expandableTreeNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasChildren = stepsId !== null && bodyItems.length > 0;
@@ -96,6 +96,8 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) =>
   return (
     <div className={styles["test-result-steps"]}>
       <TrDropdown
+        className={trOverviewHeaderFocusClass(stepsId)}
+        {...trOverviewFocusAttrs(stepsId)}
         icon={allureIcons.lineHelpersPlayCircle}
         isOpened={isOpened}
         setIsOpen={toggleRoot}
@@ -115,7 +117,7 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) =>
       />
       {isOpened && (
         <div data-testid="test-result-steps-root" className={styles["test-result-steps-root"]}>
-          <TrBodyItems bodyItems={bodyItems} />
+          <TrBodyItems bodyItems={bodyItems} isTopLevel={true} />
         </div>
       )}
     </div>

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

@@ -1,12 +1,5 @@
 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 { getReportOptions, type SubtreeNodeState } from "@allurereport/web-commons";
 
 import { hasTestLevelErrorContent, type TrBodyItem, type TrStepItem } from "@/components/TestResult/bodyItems";
 
@@ -54,6 +47,26 @@ export type ExpandableStepNode = {
 
 export type SubtreeNode = SubtreeNodeState;
 
+export const findStepBodyItems = (bodyItems: TrBodyItem[], stepId: string): TrBodyItem[] | null => {
+  for (const bodyItem of bodyItems) {
+    if (bodyItem.type !== "step") {
+      continue;
+    }
+
+    if (bodyItem.item.stepId === stepId) {
+      return bodyItem.bodyItems;
+    }
+
+    const nested = findStepBodyItems(bodyItem.bodyItems, stepId);
+
+    if (nested) {
+      return nested;
+    }
+  }
+
+  return null;
+};
+
 export const collectExpandableStepNodes = (
   bodyItems: TrBodyItem[],
   policy: StepTreeExpansion,
@@ -83,7 +96,12 @@ export const collectExpandableStepNodes = (
   return nodes;
 };
 
-export { getNextSubtreeToggleState, getSubtreeToggleIcon, isSubtreeFirstLevelOnlyOpened, type SubtreeToggleState };
+export {
+  getNextSubtreeToggleState,
+  getSubtreeToggleIcon,
+  isSubtreeFirstLevelOnlyOpened,
+  type SubtreeToggleState,
+} from "@allurereport/web-commons";
 
 export const getStepTreeExpansionPolicy = (): StepTreeExpansion =>
   getReportOptions<AwesomeReportOptions>()?.stepTreeExpansion ?? DEFAULT_STEP_TREE_EXPANSION_POLICY;