fix(web-awesome): fix group sorting by order/duration; add defaultSortBy option (#676)

Author: todti

packages/plugin-awesome/README.md

@@ -58,6 +58,27 @@ The plugin accepts the following options:
 | `groupBy`      | Grouping tests by labels or combining labels. By default, tests are grouped using the `titlePath` provided by the test framework. | `string`                                                      | `[]`(Grouping by `titlepath`) |
 | `appendTitlePath`| Special marker for `groupBy`. Forces a final grouping by `titlePath` after all label-based groups.                                                          | `boolean`                                                    | `false`                       |
 | `stepTreeExpansion` | Default expansion policy for step trees in test details. | `"collapsed" \| "expand_failed_only" \| "expanded"` | `"expand_failed_only"` |
+| `defaultSortBy` | Default sort order for the test tree. Accepted values: `order,asc`, `order,desc`, `duration,asc`, `duration,desc`, `name,asc`, `name,desc`, `status,asc`, `status,desc`. User's manual selection is preserved in `localStorage` and takes priority over this value. | `string` | `order,asc` |
+
+### Default sort order
+
+Use `defaultSortBy` to change the initial sort order of the test tree:
+
+```ts
+import { defineConfig } from "allure";
+
+export default defineConfig({
+  plugins: {
+    awesome: {
+      options: {
+        defaultSortBy: "name,asc",
+      },
+    },
+  },
+});
+```
+
+The user's last selected sort order is always preserved in `localStorage`, so once a user changes the sort manually, their preference takes priority over the configured default.
 
 ### Step tree expansion
 

packages/plugin-awesome/src/generators.ts

@@ -627,6 +627,7 @@ export const generateStaticFiles = async (
     defaultSection = "",
     ci,
     stepTreeExpansion,
+    defaultSortBy,
   } = payload;
   const manifest = await readTemplateManifest(payload.singleFile);
   const headTags: string[] = [];
@@ -690,6 +691,7 @@ export const generateStaticFiles = async (
     sections,
     defaultSection,
     stepTreeExpansion,
+    defaultSortBy,
   };
 
   try {

packages/plugin-awesome/src/model.ts

@@ -22,6 +22,7 @@ export type AwesomeOptions = {
   publish?: boolean;
   appendTitlePath?: boolean;
   stepTreeExpansion?: StepTreeExpansion;
+  defaultSortBy?: string;
 };
 
 export type TemplateManifest = Record<string, string>;

packages/web-awesome/src/components/TestResult/TrSteps/index.tsx

@@ -8,8 +8,6 @@ import { TrDropdown } from "@/components/TestResult/TrDropdown";
 import {
   collectExpandableStepNodes,
   getStepTreeExpansionPolicy,
-  hasFailedStepContext,
-  isOpenByDefaultForPolicy,
   isSubtreeFirstLevelOnlyOpened,
   type SubtreeNode,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
@@ -35,7 +33,7 @@ export type TrStepsProps = {
 export const TrSteps: FunctionalComponent<TrStepsProps> = ({ bodyItems, id }) => {
   const stepsId = typeof id === "string" ? `${id}-steps` : null;
   const policy = getStepTreeExpansionPolicy();
-  const isRootOpenedByDefault = isOpenByDefaultForPolicy(policy, hasFailedStepContext(bodyItems));
+  const isRootOpenedByDefault = true;
   const isOpened = stepsId !== null ? isTreeOpened(stepsId, isRootOpenedByDefault) : isRootOpenedByDefault;
   const expandableTreeNodes = collectExpandableStepNodes(bodyItems, policy);
   const hasChildren = stepsId !== null && bodyItems.length > 0;

packages/web-awesome/src/stores/treeSort.ts

@@ -1,6 +1,8 @@
-import { getParamValue, hasParam, setParams } from "@allurereport/web-commons";
+import { getParamValue, getReportOptions, hasParam, setParams } from "@allurereport/web-commons";
 import { computed, effect, signal } from "@preact/signals";
 
+import type { AwesomeReportOptions } from "../../types.js";
+
 export type SortByDirection = "asc" | "desc";
 export type SortByField = "order" | "duration" | "status" | "name";
 export type SortBy = `${SortByField},${SortByDirection}`;
@@ -34,6 +36,10 @@ const getInitialSortBy = (): SortBy => {
   if (stored && validateSortBy(stored.toLowerCase())) {
     return stored.toLowerCase() as SortBy;
   }
+  const { defaultSortBy } = getReportOptions<AwesomeReportOptions>() ?? {};
+  if (defaultSortBy && validateSortBy(defaultSortBy.toLowerCase())) {
+    return defaultSortBy.toLowerCase() as SortBy;
+  }
   return DEFAULT_SORT_BY;
 };
 

packages/web-awesome/src/utils/treeFilters.ts

@@ -1,4 +1,4 @@
-import type { Comparator, DefaultTreeGroup, Statistic, TestStatus, TreeLeaf } from "@allurereport/core-api";
+import type { Comparator, Statistic, TestStatus, TreeLeaf } from "@allurereport/core-api";
 import {
   alphabetically,
   andThen,
@@ -38,16 +38,18 @@ const leafComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<T
   }
 };
 
-const groupComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
-  const typedCompareBy = compareBy<DefaultTreeGroup>;
+const groupComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<AwesomeRecursiveTree> => {
+  const typedCompareBy = compareBy<AwesomeRecursiveTree>;
   switch (sortBy) {
     case "name,desc":
     case "name,asc":
       return typedCompareBy("name", alphabetically());
     case "order,desc":
     case "order,asc":
+      return typedCompareBy("groupOrder", ordinal());
     case "duration,desc":
     case "duration,asc":
+      return typedCompareBy("duration", ordinal());
     case "status,desc":
     case "status,asc":
       return typedCompareBy("statistic", byStatistic());
@@ -76,7 +78,7 @@ export const leafComparator = (sortBy: SortBy = "status,asc"): Comparator<TreeLe
   return withDirection(cmp, sortBy);
 };
 
-export const groupComparator = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
+export const groupComparator = (sortBy: SortBy = "status,asc"): Comparator<AwesomeRecursiveTree> => {
   const cmp = groupComparatorByTreeSortBy(sortBy);
 
   return withDirection(cmp, sortBy);
@@ -150,11 +152,20 @@ export const createRecursiveTree = (payload: {
     incrementStatistic(statistic, status);
   });
 
+  const duration =
+    leaves.reduce((acc, leaf) => acc + (leaf.duration ?? 0), 0) + trees.reduce((acc, rt) => acc + rt.duration, 0);
+
+  const leafMinOrder = leaves.reduce((acc, leaf) => Math.min(acc, leaf.groupOrder ?? Infinity), Infinity);
+  const treeMinOrder = trees.reduce((acc, rt) => Math.min(acc, rt.groupOrder), Infinity);
+  const groupOrder = Math.min(leafMinOrder, treeMinOrder);
+
   return {
     ...group,
     statistic,
     leaves,
     trees: trees.sort(groupComparator(sortBy)),
+    duration,
+    groupOrder: isFinite(groupOrder) ? groupOrder : 0,
   };
 };
 

packages/web-awesome/test/stores/treeSort.test.ts

@@ -0,0 +1,58 @@
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const STORAGE_KEY = "ALLURE_REPORT_SORT_BY";
+
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("sort");
+  await story("treeSort");
+  await label("coverage", "sort");
+});
+
+describe("stores > treeSort", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    localStorage.clear();
+    delete (globalThis as any).allureReportOptions;
+  });
+
+  it("defaults to order,asc when no config and no localStorage value", async () => {
+    const { sortBy } = await import("../../src/stores/treeSort.js");
+
+    expect(sortBy.value).toBe("order,asc");
+  });
+
+  it("uses defaultSortBy from reportOptions when localStorage is empty", async () => {
+    (globalThis as any).allureReportOptions = { defaultSortBy: "name,asc" };
+
+    const { sortBy } = await import("../../src/stores/treeSort.js");
+
+    expect(sortBy.value).toBe("name,asc");
+  });
+
+  it("is case-insensitive for defaultSortBy", async () => {
+    (globalThis as any).allureReportOptions = { defaultSortBy: "Name,ASC" };
+
+    const { sortBy } = await import("../../src/stores/treeSort.js");
+
+    expect(sortBy.value).toBe("name,asc");
+  });
+
+  it("ignores invalid defaultSortBy and falls back to order,asc", async () => {
+    (globalThis as any).allureReportOptions = { defaultSortBy: "invalid,value" };
+
+    const { sortBy } = await import("../../src/stores/treeSort.js");
+
+    expect(sortBy.value).toBe("order,asc");
+  });
+
+  it("localStorage takes priority over defaultSortBy from reportOptions", async () => {
+    localStorage.setItem(STORAGE_KEY, "duration,desc");
+    (globalThis as any).allureReportOptions = { defaultSortBy: "name,asc" };
+
+    const { sortBy } = await import("../../src/stores/treeSort.js");
+
+    expect(sortBy.value).toBe("duration,desc");
+  });
+});

packages/web-awesome/test/utils/treeFilters.test.ts

@@ -345,6 +345,110 @@ describe("utils > treeFilters", () => {
       );
     });
 
+    it("sorts groups by earliest leaf groupOrder when sorting by order ascending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", groupOrder: 5 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", groupOrder: 2 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", groupOrder: 8 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "order,asc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupB", "groupA", "groupC"]);
+    });
+
+    it("sorts groups by earliest leaf groupOrder when sorting by order descending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", groupOrder: 5 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", groupOrder: 2 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", groupOrder: 8 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "order,desc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupC", "groupA", "groupB"]);
+    });
+
+    it("sorts groups by aggregated duration when sorting by duration ascending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", duration: 3000 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", duration: 1000 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", duration: 5000 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "duration,asc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupB", "groupA", "groupC"]);
+    });
+
+    it("sorts groups by aggregated duration when sorting by duration descending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", duration: 3000 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", duration: 1000 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", duration: 5000 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "duration,desc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupC", "groupA", "groupB"]);
+    });
+
     it("keeps problem-heavy groups first when sorting by status in descending order", () => {
       const group = {
         leaves: [],

packages/web-awesome/types.d.ts

@@ -29,6 +29,7 @@ export type AwesomeReportOptions = {
   cacheKey: string;
   ci?: CiDescriptor;
   stepTreeExpansion?: StepTreeExpansion;
+  defaultSortBy?: string;
 };
 
 export type AwesomeFixtureResult = Omit<
@@ -122,6 +123,8 @@ export type AwesomeRecursiveTree = DefaultTreeGroup & {
   nodeId: string;
   leaves: AwesomeTreeLeaf[];
   trees: AwesomeRecursiveTree[];
+  duration: number;
+  groupOrder: number;
 };
 
 // TODO: maybe it should call `TestCase` instead of Group