@allurereport/web-awesome 3.7.0 → 3.8.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-c06dada6aab4e69b7f74.js"
+  "main.js": "app-71a9c3c616953bdbd06a.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -27,11 +27,11 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.7.0",
-    "@allurereport/core-api": "3.7.0",
-    "@allurereport/plugin-api": "3.7.0",
-    "@allurereport/web-commons": "3.7.0",
-    "@allurereport/web-components": "3.7.0",
+    "@allurereport/charts-api": "3.8.0",
+    "@allurereport/core-api": "3.8.0",
+    "@allurereport/plugin-api": "3.8.0",
+    "@allurereport/web-commons": "3.8.0",
+    "@allurereport/web-components": "3.8.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

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

@@ -13,13 +13,20 @@ export type TrDescriptionProps = {
   descriptionHtml: AwesomeTestResult["descriptionHtml"];
 };
 
-const MIN_HEIGHT = 120;
+const getIframeContentHeight = (iframe: HTMLIFrameElement) => {
+  const documentElement = iframe.contentDocument?.documentElement;
+  const body = iframe.contentDocument?.body;
+  const bodyRectHeight = body?.getBoundingClientRect().height ?? 0;
+  const scrollHeight = Math.max(body?.scrollHeight ?? 0, documentElement?.scrollHeight ?? 0);
+
+  return Math.ceil(Math.max(bodyRectHeight, scrollHeight));
+};
 
 export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ id, descriptionHtml }) => {
-  const descriptionId = id !== null ? `${id}-description` : null;
+  const descriptionId = typeof id === "string" ? `${id}-description` : null;
   const isOpen = !collapsedTrees.value.has(descriptionId);
   const [blobUrl, setBlobUrl] = useState("");
-  const [height, setHeight] = useState(MIN_HEIGHT);
+  const [height, setHeight] = useState(0);
   const currentTheme = themeStore.value.current;
 
   const sanitized = useMemo(() => (descriptionHtml ? sanitizeIframeHtml(descriptionHtml) : ""), [descriptionHtml]);
@@ -51,10 +58,7 @@ export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ id, des
 
   const handleLoad = (e: Event) => {
     const iframe = e.currentTarget as HTMLIFrameElement;
-    const documentElement = iframe.contentDocument?.documentElement;
-    const body = iframe.contentDocument?.body;
-    const scrollHeight = Math.max(documentElement?.scrollHeight ?? 0, body?.scrollHeight ?? 0);
-    setHeight(Math.max(scrollHeight, MIN_HEIGHT));
+    setHeight(getIframeContentHeight(iframe));
   };
 
   return (
@@ -74,6 +78,7 @@ export const TrDescription: FunctionalComponent<TrDescriptionProps> = ({ id, des
             {blobUrl && (
               <iframe
                 data-testid="test-result-description-frame"
+                title="Description"
                 src={blobUrl}
                 width="100%"
                 height={String(height)}

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

@@ -9,9 +9,7 @@ import {
   getNextSubtreeToggleState,
   getSubtreeToggleIcon,
   getStepTreeExpansionPolicy,
-  hasFailedStepContext,
   isSubtreeFirstLevelOnlyOpened,
-  isOpenByDefaultForPolicy,
   type SubtreeNode,
   type SubtreeToggleState,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
@@ -36,21 +34,23 @@ export type TrStepsProps = {
 export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
   const stepsId = typeof id === "string" ? `${id}-steps` : null;
   const policy = getStepTreeExpansionPolicy();
-  const openedByDefault = isOpenByDefaultForPolicy(policy, hasFailedStepContext(bodyItems));
-  const isOpened = stepsId !== null ? isTreeOpened(stepsId, openedByDefault) : openedByDefault;
+  const isRootOpenedByDefault = policy !== "collapsed";
+  const isOpened = stepsId !== null ? isTreeOpened(stepsId, isRootOpenedByDefault) : isRootOpenedByDefault;
   const expandableTreeNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasChildren = stepsId !== null && bodyItems.length > 0;
   const subtreeNodes: SubtreeNode[] = hasChildren
     ? [
-        { id: stepsId, openedByDefault, isRoot: true },
+        { id: stepsId, openedByDefault: isRootOpenedByDefault, isRoot: true },
         ...expandableTreeNodes.map((node) => ({ ...node, isRoot: false })),
       ]
     : [];
   const [lastSubtreeToggle, setLastSubtreeToggle] = useState<SubtreeToggleState | null>(null);
-  const isRootSubtreeOpened = stepsId !== null ? isTreeOpened(stepsId, openedByDefault) : false;
+  const isRootSubtreeOpened = stepsId !== null ? isTreeOpened(stepsId, isRootOpenedByDefault) : false;
   const isSubtreeCollapsedAll = !isRootSubtreeOpened;
   const isSubtreeFirstLevelOnly =
-    stepsId !== null ? isSubtreeFirstLevelOnlyOpened(stepsId, openedByDefault, subtreeNodes, isTreeOpened) : false;
+    stepsId !== null
+      ? isSubtreeFirstLevelOnlyOpened(stepsId, isRootOpenedByDefault, subtreeNodes, isTreeOpened)
+      : false;
   const isSubtreeExpandedAll = hasChildren && subtreeNodes.every((node) => isTreeOpened(node.id, node.openedByDefault));
   const hasOnlyLeafResults = hasChildren && subtreeNodes.every((node) => node.isRoot);
   const subtreeToggleIcon =
@@ -89,7 +89,7 @@ export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) =>
       return;
     }
     setLastSubtreeToggle(null);
-    toggleTree(stepsId, openedByDefault);
+    toggleTree(stepsId, isRootOpenedByDefault);
   };
 
   const { t } = useI18n("execution");

package/src/utils/treeFilters.ts

@@ -58,18 +58,28 @@ const groupComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<
   }
 };
 
+const withDirection = <T extends { name: string }>(cmp: Comparator<T>, sortBy: SortBy): Comparator<T> => {
+  const sortParams = sortBy.split(",");
+  const isStatusSort = sortParams.includes("status");
+  const isDescending = sortParams.includes("desc");
+  const nameComparator = compareBy<T>("name", alphabetically());
+
+  return andThen([
+    isDescending && !isStatusSort ? reverse(cmp) : cmp,
+    isDescending && isStatusSort ? reverse(nameComparator) : nameComparator,
+  ]);
+};
+
 export const leafComparator = (sortBy: SortBy = "status,asc"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
   const cmp = leafComparatorByTreeSortBy(sortBy);
-  const directional = sortBy.split(",")[1] === "asc" ? cmp : reverse(cmp);
-  // apply fallback sorting by name
-  return andThen([directional, compareBy("name", alphabetically())]);
+
+  return withDirection(cmp, sortBy);
 };
 
 export const groupComparator = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
   const cmp = groupComparatorByTreeSortBy(sortBy);
-  const directional = sortBy.split(",")[1] === "asc" ? cmp : reverse(cmp);
-  // apply fallback sorting by name
-  return andThen([directional, compareBy("name", alphabetically())]);
+
+  return withDirection(cmp, sortBy);
 };
 
 export const filterLeaves = (

package/test/utils/treeFilters.test.ts

@@ -138,7 +138,7 @@ describe("utils > treeFilters", () => {
     });
 
     it("sorts leaves by status in descending order", () => {
-      const leaves = ["a1", "b2", "c3", "d4", "e5"];
+      const leaves = ["a1", "b2", "c3", "d4", "e5", "f6", "z9"];
       const leavesById = {
         a1: {
           name: "a1",
@@ -160,15 +160,25 @@ describe("utils > treeFilters", () => {
           name: "e5",
           status: "skipped",
         } as AwesomeTestResult,
+        f6: {
+          name: "f6",
+          status: "failed",
+        } as AwesomeTestResult,
+        z9: {
+          name: "z9",
+          status: "passed",
+        } as AwesomeTestResult,
       };
       const result = filterLeaves(leaves, leavesById as any, alwaysTruePredicate, "status,desc");
 
       expect(result).toEqual([
-        expect.objectContaining({ name: "d4" }),
-        expect.objectContaining({ name: "e5" }),
-        expect.objectContaining({ name: "a1" }),
-        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "f6" }),
         expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "z9" }),
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "e5" }),
+        expect.objectContaining({ name: "d4" }),
       ]);
     });
 
@@ -326,5 +336,74 @@ describe("utils > treeFilters", () => {
         }),
       );
     });
+
+    it("keeps problem-heavy groups first when sorting by status in descending order", () => {
+      const group = {
+        leaves: [],
+        groups: ["passedHeavy", "failedAlpha", "brokenGroup", "failedZulu"],
+      };
+      const leavesById = {
+        failedAlphaTest: {
+          name: "failedAlphaTest",
+          status: "failed",
+        } as AwesomeTestResult,
+        failedZuluTest: {
+          name: "failedZuluTest",
+          status: "failed",
+        } as AwesomeTestResult,
+        brokenTest1: {
+          name: "brokenTest1",
+          status: "broken",
+        } as AwesomeTestResult,
+        brokenTest2: {
+          name: "brokenTest2",
+          status: "broken",
+        } as AwesomeTestResult,
+        passedTest1: {
+          name: "passedTest1",
+          status: "passed",
+        } as AwesomeTestResult,
+        passedTest2: {
+          name: "passedTest2",
+          status: "passed",
+        } as AwesomeTestResult,
+      };
+      const groupsById = {
+        passedHeavy: {
+          name: "passedHeavy",
+          leaves: ["passedTest1", "passedTest2"],
+          groups: [] as string[],
+        },
+        brokenGroup: {
+          name: "brokenGroup",
+          leaves: ["brokenTest1", "brokenTest2"],
+          groups: [] as string[],
+        },
+        failedAlpha: {
+          name: "failedAlpha",
+          leaves: ["failedAlphaTest"],
+          groups: [] as string[],
+        },
+        failedZulu: {
+          name: "failedZulu",
+          leaves: ["failedZuluTest"],
+          groups: [] as string[],
+        },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "status,desc",
+      });
+
+      expect(result.trees).toEqual([
+        expect.objectContaining({ name: "failedZulu" }),
+        expect.objectContaining({ name: "failedAlpha" }),
+        expect.objectContaining({ name: "brokenGroup" }),
+        expect.objectContaining({ name: "passedHeavy" }),
+      ]);
+    });
   });
 });