@allurereport/web-awesome 3.8.2 → 3.10.0

package/src/utils/flattenTestResultOverview.ts

@@ -0,0 +1,182 @@
+import type { FlatTreeNode } from "@allurereport/web-commons";
+
+import type { TrBodyItem } from "@/components/TestResult/bodyItems";
+import { hasTestLevelErrorContent } from "@/components/TestResult/bodyItems";
+import {
+  getStepTreeExpansionPolicy,
+  hasStepContent,
+  isStepOpenedByDefault,
+  type StepTreeExpansion,
+} from "@/components/TestResult/TrSteps/stepTreeExpansion";
+
+export type FlattenTestResultOverviewInput = {
+  testResultId: string;
+  hasSetup: boolean;
+  setupBodyItems: TrBodyItem[];
+  bodyItems: TrBodyItem[];
+  hasTeardown: boolean;
+  teardownBodyItems: TrBodyItem[];
+  isGroupOpened: (id: string, openedByDefault: boolean) => boolean;
+  stepExpansionPolicy?: StepTreeExpansion;
+};
+
+const sectionId = (testResultId: string, section: string) => `${testResultId}-${section}`;
+
+const pushSection = (
+  result: FlatTreeNode[],
+  options: {
+    id: string;
+    depth: number;
+    parentId?: string;
+    openedByDefault?: boolean;
+    isGroupOpened: FlattenTestResultOverviewInput["isGroupOpened"];
+  },
+) => {
+  const openedByDefault = options.openedByDefault ?? true;
+  const isExpanded = options.isGroupOpened(options.id, openedByDefault);
+
+  result.push({
+    kind: "group",
+    id: options.id,
+    nodeId: options.id,
+    depth: options.depth,
+    parentId: options.parentId,
+    hasChildren: true,
+    isExpanded,
+    openedByDefault,
+  });
+};
+
+const flattenBodyItems = (
+  bodyItems: TrBodyItem[],
+  depth: number,
+  parentId: string,
+  policy: StepTreeExpansion,
+  isGroupOpened: FlattenTestResultOverviewInput["isGroupOpened"],
+): FlatTreeNode[] => {
+  const result: FlatTreeNode[] = [];
+
+  for (const bodyItem of bodyItems) {
+    if (bodyItem.type === "step") {
+      const stepId = bodyItem.item.stepId;
+      const openedByDefault = isStepOpenedByDefault(policy, bodyItem.item.status, bodyItem.bodyItems);
+      const hasContent = hasStepContent(bodyItem);
+      const isExpanded = isGroupOpened(stepId, openedByDefault);
+
+      result.push({
+        kind: hasContent ? "group" : "leaf",
+        id: stepId,
+        nodeId: stepId,
+        depth,
+        parentId,
+        hasChildren: hasContent,
+        isExpanded: hasContent ? isExpanded : undefined,
+        openedByDefault,
+      });
+
+      if (hasContent && isExpanded) {
+        result.push(...flattenBodyItems(bodyItem.bodyItems, depth + 1, stepId, policy, isGroupOpened));
+      }
+
+      continue;
+    }
+
+    if (bodyItem.type === "error" && hasTestLevelErrorContent(bodyItem.error)) {
+      const openedByDefault = policy !== "collapsed";
+      const isExpanded = isGroupOpened(bodyItem.id, openedByDefault);
+
+      result.push({
+        kind: "group",
+        id: bodyItem.id,
+        nodeId: bodyItem.id,
+        depth,
+        parentId,
+        hasChildren: true,
+        isExpanded,
+        openedByDefault,
+      });
+      continue;
+    }
+
+    if (bodyItem.type === "attachment") {
+      const attachmentTreeId = `attachment-${bodyItem.link.id}`;
+
+      result.push({
+        kind: "leaf",
+        id: bodyItem.link.id,
+        nodeId: attachmentTreeId,
+        depth,
+        parentId,
+        openedByDefault: false,
+      });
+    }
+  }
+
+  return result;
+};
+
+export const flattenTestResultOverview = (input: FlattenTestResultOverviewInput): FlatTreeNode[] => {
+  const { testResultId, hasSetup, setupBodyItems, bodyItems, hasTeardown, teardownBodyItems, isGroupOpened } = input;
+  const policy = input.stepExpansionPolicy ?? getStepTreeExpansionPolicy();
+  const result: FlatTreeNode[] = [];
+  let lastSectionId: string | undefined;
+
+  const appendSection = (section: string, openedByDefault = true) => {
+    const id = sectionId(testResultId, section);
+    pushSection(result, {
+      id,
+      depth: 0,
+      parentId: lastSectionId,
+      openedByDefault,
+      isGroupOpened,
+    });
+    lastSectionId = id;
+    return id;
+  };
+
+  if (hasSetup) {
+    const setupId = appendSection("setup");
+
+    if (isGroupOpened(setupId, true) && setupBodyItems.length > 0) {
+      const setupSteps = flattenBodyItems(setupBodyItems, 1, setupId, policy, isGroupOpened);
+      result.push(...setupSteps);
+
+      if (setupSteps.length > 0) {
+        lastSectionId = setupSteps[setupSteps.length - 1]!.id;
+      }
+    }
+  }
+
+  if (bodyItems.length > 0) {
+    const stepsId = sectionId(testResultId, "steps");
+    const stepsOpenedByDefault = policy !== "collapsed";
+    const stepsExpanded = isGroupOpened(stepsId, stepsOpenedByDefault);
+
+    pushSection(result, {
+      id: stepsId,
+      depth: 0,
+      parentId: lastSectionId,
+      openedByDefault: stepsOpenedByDefault,
+      isGroupOpened,
+    });
+    lastSectionId = stepsId;
+
+    if (stepsExpanded) {
+      const stepNodes = flattenBodyItems(bodyItems, 1, stepsId, policy, isGroupOpened);
+      result.push(...stepNodes);
+      if (stepNodes.length > 0) {
+        lastSectionId = stepNodes[stepNodes.length - 1]!.id;
+      }
+    }
+  }
+
+  if (hasTeardown) {
+    const teardownId = appendSection("teardown");
+
+    if (isGroupOpened(teardownId, true) && teardownBodyItems.length > 0) {
+      result.push(...flattenBodyItems(teardownBodyItems, 1, teardownId, policy, isGroupOpened));
+    }
+  }
+
+  return result;
+};

package/src/utils/time.ts

@@ -1,6 +1,7 @@
 import { getLocaleDateTimeOverride } from "@allurereport/web-commons";
 
 import { currentLocale, currentLocaleIso, useI18n } from "@/stores/locale";
+import { ensureAtSeparator } from "@/utils/atSeparator";
 
 const defaultOptions: Intl.DateTimeFormatOptions = {
   month: "numeric",
@@ -29,5 +30,5 @@ export const timestampToDate = (timestamp: number, options = defaultOptions) =>
     return formatted.replace(",", "");
   }
 
-  return formatted.replace(",", ` ${t("at")}`);
+  return ensureAtSeparator(formatted, t("at"));
 };

package/src/utils/trOverviewFocus.ts

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+
+import { testResultFocusId } from "@/stores/testResultOverviewNav";
+
+import * as styles from "@/components/TestResult/trOverviewFocus.scss";
+
+export const isTrOverviewFocused = (id: string | null | undefined) => Boolean(id && testResultFocusId.value === id);
+
+/** Focus ring for a section/step header row only (pass as `className` on the header control). */
+export const trOverviewHeaderFocusClass = (id: string | null | undefined, className?: string) =>
+  clsx(className, isTrOverviewFocused(id) && styles["tr-overview-focused"]);
+
+export const trOverviewFocusAttrs = (id: string | null | undefined) =>
+  id
+    ? {
+        "data-tr-focus-id": id,
+      }
+    : {};

package/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,
   };
 };
 

package/test/components/EnvironmentPicker.test.tsx

@@ -1,6 +1,14 @@
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/preact";
+import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/preact";
+import { epic, feature, label, story } from "allure-js-commons";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("EnvironmentPicker");
+  await label("coverage", "ui-components");
+});
+
 import { currentEnvironment, environmentsStore } from "@/stores/env";
 
 const longEnvironmentName = "я".repeat(64);
@@ -65,6 +73,7 @@ describe("components > EnvironmentPicker", () => {
   let restoreElementSizeMocks: () => void;
 
   beforeEach(() => {
+    vi.useFakeTimers();
     vi.stubGlobal(
       "matchMedia",
       vi.fn().mockImplementation(() => ({
@@ -96,6 +105,8 @@ describe("components > EnvironmentPicker", () => {
     restoreElementSizeMocks();
     vi.unstubAllGlobals();
     cleanup();
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
   });
 
   it("should show tooltip on hover after resize truncates selected value", async () => {
@@ -108,14 +119,21 @@ describe("components > EnvironmentPicker", () => {
 
     expect(queryTooltip()).not.toBeInTheDocument();
 
-    setNarrowViewport(true);
-    await waitFor(() => {
+    await act(async () => {
+      setNarrowViewport(true);
       fireEvent(window, new Event("resize"));
+      vi.advanceTimersByTime(16);
+    });
+
+    await waitFor(() => {
       expect(getTooltipTrigger().childElementCount).toBe(2);
     });
 
     const tooltipTrigger = getTooltipTrigger();
     fireEvent.mouseEnter(tooltipTrigger);
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+    });
     await waitFor(() => {
       expect(queryTooltip()).toBeInTheDocument();
     });

package/test/components/Footer.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/preact";
+import { describe, expect, it, vi } from "vitest";
+
+import { Footer } from "@/components/Footer";
+
+vi.mock("@/components/Footer/FooterLogo", () => ({
+  FooterLogo: () => <div data-testid="footer-logo" />,
+}));
+
+vi.mock("@allurereport/web-components", () => ({
+  LanguagePicker: () => <div data-testid="footer-language-picker" />,
+}));
+
+vi.mock("@/components/Footer/FooterVersion", () => ({
+  FooterVersion: () => <div data-testid="footer-version">Generated May 10, 2026 Ver: 3.8.2</div>,
+}));
+
+describe("components > Footer", () => {
+  it("should render language picker near generated time and version", () => {
+    render(<Footer />);
+
+    expect(screen.getByTestId("footer-logo")).toBeInTheDocument();
+    expect(screen.getByTestId("footer-language-picker")).toBeInTheDocument();
+    expect(screen.getByTestId("footer-version")).toHaveTextContent("Generated");
+  });
+});

package/test/components/Header/CiInfo.test.tsx

@@ -1,9 +1,17 @@
 import { CiType } from "@allurereport/core-api";
 import { getReportOptions } from "@allurereport/web-commons";
 import { cleanup, render, screen } from "@testing-library/preact";
+import { epic, feature, label, story } from "allure-js-commons";
 import { h } from "preact";
 import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("CiInfo");
+  await label("coverage", "ui-components");
+});
+
 import { CiInfo } from "@/components/Header/CiInfo";
 
 const fixtures = {
@@ -189,4 +197,52 @@ describe("components > Header > CiInfo", () => {
 
     expect(screen.getByRole("link")).toHaveTextContent(fixtures.jobRunName);
   });
+
+  it("should not render executor metadata in the header", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      executor: {
+        name: "TeamCity",
+        type: "teamcity",
+        buildName: "Wrike #123",
+        buildUrl: "https://teamcity.example/build/123",
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.queryByText("TeamCity · Wrike #123")).not.toBeInTheDocument();
+  });
+
+  it("should render ci label as plain text when ci has a name but no link", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobName: "Nightly Build",
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText("Nightly Build")).toBeInTheDocument();
+  });
+
+  it("should ignore executor metadata when ci has no link", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        jobName: "Nightly Build",
+      },
+      executor: {
+        name: "TeamCity",
+        buildName: "Wrike #123",
+        buildUrl: "https://teamcity.example/build/123",
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    expect(screen.getByText("Nightly Build")).toBeInTheDocument();
+    expect(screen.queryByText("TeamCity · Wrike #123")).not.toBeInTheDocument();
+  });
 });

package/test/components/Header.test.tsx

@@ -1,8 +1,16 @@
 import * as webCommons from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import { cleanup, render, screen } from "@testing-library/preact";
+import { epic, feature, label, story } from "allure-js-commons";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("Header");
+  await label("coverage", "ui-components");
+});
+
 import { Header } from "@/components/Header";
 import { CiInfo } from "@/components/Header/CiInfo";
 import type * as routerModule from "@/stores/router";

package/test/components/HeaderControls.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/preact";
+import { describe, expect, it, vi } from "vitest";
+
+import { HeaderControls } from "@/components/HeaderControls";
+
+vi.mock("@/components/EnvironmentPicker", () => ({
+  EnvironmentPicker: () => <div data-testid="environment-picker" />,
+}));
+
+vi.mock("@/components/ToggleLayout", () => ({
+  default: () => <div data-testid="toggle-layout" />,
+}));
+
+vi.mock("@allurereport/web-components", () => ({
+  ThemeButton: () => <button data-testid="theme-button" type="button" />,
+  LanguagePicker: () => <button data-testid="language-picker" type="button" />,
+}));
+
+describe("components > HeaderControls", () => {
+  it("should keep frequent controls in header and omit language picker", () => {
+    render(<HeaderControls />);
+
+    expect(screen.getByTestId("environment-picker")).toBeInTheDocument();
+    expect(screen.getByTestId("toggle-layout")).toBeInTheDocument();
+    expect(screen.getByTestId("theme-button")).toBeInTheDocument();
+    expect(screen.queryByTestId("language-picker")).not.toBeInTheDocument();
+  });
+});

package/test/components/ReportGlobals.test.tsx

@@ -1,6 +1,14 @@
 import { signal } from "@preact/signals";
 import { cleanup, render, screen } from "@testing-library/preact";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { epic, feature, label, story } from "allure-js-commons";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("ReportGlobals");
+  await label("coverage", "ui-components");
+});
 
 const environmentNames: Record<string, string> = {
   prod_env: "Prod",

package/test/components/ReportHeader.test.tsx

@@ -0,0 +1,77 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { render, screen } from "@testing-library/preact";
+import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ReportHeader } from "@/components/ReportHeader";
+
+vi.mock("@allurereport/web-commons", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getReportOptions: vi.fn(),
+}));
+
+vi.mock("@allurereport/web-components", () => ({
+  Heading: (props: { children: string }) => <h2>{props.children}</h2>,
+  Loadable: (props: { renderData: (data: unknown) => unknown }) => props.renderData({}),
+  Text: (props: { "children": unknown; "data-testid"?: string }) => (
+    <span data-testid={props["data-testid"]}>{props.children}</span>
+  ),
+  TooltipWrapper: (props: { children: unknown }) => props.children,
+}));
+
+vi.mock("@/components/ReportHeader/ReportHeaderLogo", () => ({
+  ReportHeaderLogo: () => <div data-testid="report-logo" />,
+}));
+
+vi.mock("@/components/ReportHeader/ReportHeaderPie", () => ({
+  ReportHeaderPie: () => <div data-testid="report-pie" />,
+}));
+
+vi.mock("@/components/TestResult/TrStatus", () => ({
+  TrStatus: () => <div data-testid="tr-status" />,
+}));
+
+vi.mock("@/stores", () => ({
+  useI18n: () => ({
+    t: (key: string, params: Record<string, unknown>) => `${key}: ${params.formattedCreatedAt}`,
+  }),
+}));
+
+vi.mock("@/utils/time", () => ({
+  timestampToDate: (value: number, options?: Intl.DateTimeFormatOptions) =>
+    `${options?.month === "long" ? "long" : "default"}:${value}`,
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("components > ReportHeader", () => {
+  it("should render launch start time and duration when run summary is available", () => {
+    (getReportOptions as Mock).mockReturnValue({
+      reportName: "Wrike report",
+      createdAt: 42,
+      runSummary: {
+        start: 1000,
+        stop: 2500,
+        duration: 1500,
+      },
+    });
+
+    render(<ReportHeader />);
+
+    expect(screen.getByTestId("report-data")).toHaveTextContent("long:1000");
+    expect(screen.getByTestId("report-data")).not.toHaveTextContent("long:2500");
+    expect(screen.getByTestId("report-data")).not.toHaveTextContent("long:42");
+  });
+
+  it("should fall back to generated time when run summary is missing", () => {
+    (getReportOptions as Mock).mockReturnValue({
+      reportName: "Wrike report",
+      createdAt: 10,
+    });
+
+    render(<ReportHeader />);
+
+    expect(screen.getByTestId("report-data")).toHaveTextContent("long:10");
+  });
+});