@allurereport/web-awesome 3.0.1 → 3.1.0

package/src/utils/treeFilters.ts

@@ -11,103 +11,79 @@ import {
   ordinal,
   reverse,
 } from "@allurereport/core-api";
-import type { TreeFiltersState, TreeSortBy } from "@/stores/treeFilters";
+import type { SortBy } from "@/stores/treeSort";
 import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
 
-const matchesName = (name: string, query: string) => {
-  return name.toLocaleLowerCase().includes(query.toLocaleLowerCase());
-};
-
-const matchesNodeId = (nodeId: string, query: string) => {
-  return nodeId.toLowerCase() === query.toLocaleLowerCase();
-};
-
-export const isIncluded = (leaf: TreeLeaf<AwesomeTreeLeaf>, filterOptions: TreeFiltersState) => {
-  const queryMatched =
-    !filterOptions?.query ||
-    matchesName(leaf.name, filterOptions.query) ||
-    matchesNodeId(leaf.nodeId, filterOptions.query);
-
-  const statusMatched =
-    !filterOptions?.status || filterOptions?.status === "total" || leaf.status === filterOptions.status;
-  const flakyMatched = !filterOptions?.filter?.flaky || leaf.flaky;
-  const retryMatched = !filterOptions?.filter?.retry || leaf.retry;
-  const newMatched = !filterOptions?.filter?.new || leaf.transition === "new";
-  const fixedMatched = !filterOptions?.filter?.fixed || leaf.transition === "fixed";
-  const regressedMatched = !filterOptions?.filter?.regressed || leaf.transition === "regressed";
-  const malfunctionedMatched = !filterOptions?.filter?.malfunctioned || leaf.transition === "malfunctioned";
-
-  return [
-    queryMatched,
-    statusMatched,
-    flakyMatched,
-    retryMatched,
-    newMatched,
-    fixedMatched,
-    regressedMatched,
-    malfunctionedMatched,
-  ].every(Boolean);
-};
-
-const leafComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
+const leafComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
   const typedCompareBy = compareBy<TreeLeaf<AwesomeTreeLeaf>>;
   switch (sortBy) {
-    case "order":
+    case "order,asc":
+    case "order,desc":
       return typedCompareBy("groupOrder", ordinal());
-    case "duration":
+    case "duration,asc":
+    case "duration,desc":
       return typedCompareBy("duration", ordinal());
-    case "alphabet":
+    case "name,asc":
+    case "name,desc":
       return typedCompareBy("name", alphabetically());
-    case "status":
+    case "status,asc":
+    case "status,desc":
       return typedCompareBy("status", byStatus());
     default:
       // eslint-disable-next-line no-console
-      console.error(`unsupported comparator ${sortBy}`);
+      console.warn(`unsupported comparator ${sortBy as string}`);
       return () => 0;
   }
 };
 
-const groupComparatorByTreeSortBy = (sortBy: TreeSortBy = "status"): Comparator<DefaultTreeGroup> => {
+const groupComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<DefaultTreeGroup> => {
   const typedCompareBy = compareBy<DefaultTreeGroup>;
   switch (sortBy) {
-    case "alphabet":
+    case "name,desc":
+    case "name,asc":
       return typedCompareBy("name", alphabetically());
-    case "order":
-    case "duration":
-    case "status":
+    case "order,desc":
+    case "order,asc":
+    case "duration,desc":
+    case "duration,asc":
+    case "status,desc":
+    case "status,asc":
       return typedCompareBy("statistic", byStatistic());
     default:
       // eslint-disable-next-line no-console
-      console.error(`unsupported comparator ${sortBy}`);
+      console.warn(`unsupported comparator ${sortBy as string}`);
       return () => 0;
   }
 };
 
-export const leafComparator = (filterOptions: TreeFiltersState): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {
-  const cmp = leafComparatorByTreeSortBy(filterOptions.sortBy);
-  const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
+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())]);
 };
 
-export const groupComparator = (filterOptions: TreeFiltersState): Comparator<DefaultTreeGroup> => {
-  const cmp = groupComparatorByTreeSortBy(filterOptions.sortBy);
-  const directional = filterOptions.direction === "asc" ? cmp : reverse(cmp);
+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())]);
 };
 
 export const filterLeaves = (
-  leaves: string[] = [],
+  leafIds: string[] = [],
   leavesById: AwesomeTree["leavesById"],
-  filterOptions: TreeFiltersState,
+  filterPredicate: (item: AwesomeTreeLeaf) => boolean,
+  sortBy: SortBy = "status,asc",
 ) => {
-  const filteredLeaves = [...leaves]
-    .map((leafId) => leavesById[leafId])
-    .filter((leaf: TreeLeaf<AwesomeTreeLeaf>) => isIncluded(leaf, filterOptions));
+  let leaves = [...leafIds].map((leafId) => leavesById[leafId]);
 
-  const comparator = leafComparator(filterOptions);
-  return filteredLeaves.sort(comparator);
+  if (filterPredicate) {
+    leaves = leaves.filter(filterPredicate);
+  }
+
+  const comparator = leafComparator(sortBy);
+  return leaves.sort(comparator);
 };
 
 /**
@@ -119,12 +95,14 @@ export const createRecursiveTree = (payload: {
   group: AwesomeTreeGroup;
   groupsById: AwesomeTree["groupsById"];
   leavesById: AwesomeTree["leavesById"];
-  filterOptions?: TreeFiltersState;
+  filterPredicate: (item: AwesomeTreeLeaf) => boolean;
+  sortBy: SortBy;
 }): AwesomeRecursiveTree => {
-  const { group, groupsById, leavesById, filterOptions } = payload;
+  const { group, groupsById, leavesById, filterPredicate, sortBy } = payload;
   const groupLeaves: string[] = group.leaves ?? [];
 
-  const leaves = filterLeaves(groupLeaves, leavesById, filterOptions);
+  const leaves = filterLeaves(groupLeaves, leavesById, filterPredicate, sortBy);
+
   const trees =
     group.groups
       ?.map((groupId) =>
@@ -132,20 +110,24 @@ export const createRecursiveTree = (payload: {
           group: groupsById[groupId],
           groupsById,
           leavesById,
-          filterOptions,
+          filterPredicate,
+          sortBy,
         }),
       )
       ?.filter((rt) => !isRecursiveTreeEmpty(rt)) ?? [];
 
   const statistic: Statistic = emptyStatistic();
+
   trees.forEach((rt: AwesomeRecursiveTree) => {
     if (rt.statistic) {
       const additional: Statistic = rt.statistic;
+
       mergeStatistic(statistic, additional);
     }
   });
   leaves.forEach((leaf) => {
     const status: TestStatus = leaf.status;
+
     incrementStatistic(statistic, status);
   });
 
@@ -153,7 +135,7 @@ export const createRecursiveTree = (payload: {
     ...group,
     statistic,
     leaves,
-    trees: trees.sort(groupComparator(filterOptions)),
+    trees: trees.sort(groupComparator(sortBy)),
   };
 };
 

package/test/components/Header.test.tsx

@@ -1,10 +1,11 @@
-import { getReportOptions } from "@allurereport/web-commons";
+import * as webCommons from "@allurereport/web-commons";
+import { signal } from "@preact/signals";
 import { cleanup, render, screen } from "@testing-library/preact";
-import { Mock, beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Header } from "@/components/Header";
 import { CiInfo } from "@/components/Header/CiInfo";
-import { route } from "@/stores/router";
-import { availableSections } from "@/stores/sections";
+import type * as routerModule from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
 
 const fixtures = {
   ci: {
@@ -12,64 +13,60 @@ const fixtures = {
   },
 };
 
-vi.mock("@allurereport/web-commons", () => ({
-  getReportOptions: vi.fn().mockReturnValue({}),
-}));
-vi.mock("@/stores/router", async () => {
-  const { signal } = await import("@preact/signals");
+// Create a controllable route signal
+const mockRouteParams = signal<{ testResultId?: string; tab?: string }>({});
 
-  return {
-    route: signal({}),
-  };
-});
-vi.mock("@/stores/sections", async () => {
-  const { signal } = await import("@preact/signals");
-
-  return {
-    availableSections: signal([]),
-  };
-});
+// Mock UI components to simplify tests
 vi.mock("@/components/HeaderControls", () => ({
-  HeaderControls: () => <div data-testid="header-controls"></div>,
+  HeaderControls: () => <div data-testid="header-controls" />,
 }));
+
 vi.mock("@/components/SectionPicker", () => ({
-  SectionPicker: () => <div data-testid="section-picker"></div>,
+  SectionPicker: () => <div data-testid="section-picker" />,
 }));
+
 vi.mock("@/components/TestResult/TrHeader/TrBreadcrumbs", () => ({
-  TrBreadcrumbs: () => <div data-testid="breadcrumbs"></div>,
+  TrBreadcrumbs: () => <div data-testid="breadcrumbs" />,
 }));
+
 vi.mock("@/components/Header/CiInfo", () => ({
-  // CiInfo: vi.fn().mockReturnValue(<div data-testid="ci-info"></div>),
-  CiInfo: vi.fn().mockImplementation(() => <div data-testid="ci-info"></div>),
+  CiInfo: vi.fn().mockImplementation(() => <div data-testid="ci-info" />),
 }));
 
+// Mock router module with controllable testResultRoute
+vi.mock("@/stores/router", async (importOriginal) => {
+  const actual = await importOriginal<typeof routerModule>();
+  const { computed: computedFn } = await import("@preact/signals");
+
+  return {
+    ...actual,
+    testResultRoute: computedFn(() => {
+      const params = mockRouteParams.value;
+      const hasTestResultId = params.testResultId !== undefined;
+      return {
+        matches: hasTestResultId,
+        params: params || {},
+      };
+    }),
+  };
+});
+
 beforeEach(() => {
   vi.clearAllMocks();
   cleanup();
-  route.value = {};
-  availableSections.value = [];
+  mockRouteParams.value = {};
+  testResultStore.value = {
+    loading: false,
+    error: undefined,
+    data: undefined,
+  };
+  vi.spyOn(webCommons, "getReportOptions").mockReturnValue({});
 });
 
 describe("components > Header", () => {
-  it("should render sections picker when there are sections available", () => {
-    availableSections.value = ["section1", "section2"];
-
-    render(<Header />);
-
-    expect(screen.getByTestId("section-picker")).toBeInTheDocument();
-  });
-
-  it("shouldn't render sections picker when there are no sections available", () => {
-    render(<Header />);
-
-    expect(screen.queryByTestId("section-picker")).not.toBeInTheDocument();
-  });
-
   it("should render ci info only when testResultId route parameter doesn't exists and ci report option is available", () => {
-    route.value = {
-      params: {},
-    };
-    (getReportOptions as Mock).mockReturnValue({
+    mockRouteParams.value = {};
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -80,12 +77,10 @@ describe("components > Header", () => {
   });
 
   it("shouldn't render ci info when testResultId route parameter exists", () => {
-    route.value = {
-      params: {
-        testResultId: "1",
-      },
+    mockRouteParams.value = {
+      testResultId: "1",
     };
-    (getReportOptions as Mock).mockReturnValue({
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -96,12 +91,10 @@ describe("components > Header", () => {
   });
 
   it("should render breadcrumbs when testResultId route parameter exists", () => {
-    route.value = {
-      params: {
-        testResultId: "1",
-      },
+    mockRouteParams.value = {
+      testResultId: "1",
     };
-    (getReportOptions as Mock).mockReturnValue({
+    vi.spyOn(webCommons, "getReportOptions").mockReturnValue({
       ci: fixtures.ci,
     });
 
@@ -111,9 +104,7 @@ describe("components > Header", () => {
   });
 
   it("shouldn't render breadcrumbs when testResultId route parameter doesn't exists", () => {
-    route.value = {
-      params: {},
-    };
+    mockRouteParams.value = {};
 
     render(<Header />);