@allurereport/web-awesome 3.9.0 → 3.10.0

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/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");
+  });
+});

package/test/components/ReportMetadata.test.tsx

@@ -0,0 +1,131 @@
+import { getReportOptions } from "@allurereport/web-commons";
+import { cleanup, render, screen } from "@testing-library/preact";
+import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ReportMetadata } from "@/components/ReportMetadata";
+
+vi.mock("@allurereport/web-commons", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getReportOptions: vi.fn(),
+}));
+
+vi.mock("@allurereport/web-components", () => {
+  const Menu = Object.assign(
+    (props: { children: unknown; menuTrigger: (props: { onClick: () => void }) => unknown }) => (
+      <>
+        {props.menuTrigger({ onClick: vi.fn() })}
+        {props.children}
+      </>
+    ),
+    {
+      Section: (props: { children: unknown }) => <>{props.children}</>,
+    },
+  );
+
+  return {
+    ArrowButton: () => <span />,
+    Button: (props: { text?: string; onClick?: () => void }) => <button onClick={props.onClick}>{props.text}</button>,
+    ButtonLink: (props: { href: string; text?: string }) => <a href={props.href}>{props.text}</a>,
+    Counter: (props: { count: number }) => <span>{props.count}</span>,
+    Loadable: (props: {
+      source: { value?: { data?: unknown } };
+      transformData?: (data: unknown) => unknown;
+      renderData: (data: unknown) => unknown;
+    }) =>
+      props.renderData(props.transformData ? props.transformData(props.source.value?.data) : props.source.value?.data),
+    Menu,
+    SvgIcon: () => <span />,
+    Text: (props: { children: unknown }) => <span>{props.children}</span>,
+    TooltipWrapper: (props: { children: unknown }) => props.children,
+    allureIcons: {
+      lineGeneralCopy3: "copy",
+      lineGeneralLinkExternal: "external",
+    },
+    useElementTruncation: () => ({ ref: { current: null }, isTruncated: false }),
+  };
+});
+
+vi.mock("@/stores", () => ({
+  reportStatsStore: { value: { data: undefined } },
+  statsByEnvStore: { value: { data: {} } },
+  useI18n: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("@/stores/env", () => ({
+  currentEnvironment: { value: undefined },
+}));
+
+vi.mock("@/stores/envInfo", () => ({
+  envInfoStore: { value: { data: [] } },
+}));
+
+vi.mock("@/stores/tree", () => ({
+  collapsedTrees: { value: new Set() },
+  toggleTree: vi.fn(),
+}));
+
+vi.mock("@/stores/variables", () => ({
+  fetchVariables: vi.fn(),
+  variables: { value: { data: { default: {} } } },
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+describe("components > ReportMetadata", () => {
+  it("should render executor metadata as a clickable build link", () => {
+    (getReportOptions as Mock).mockReturnValue({
+      executor: {
+        name: "TeamCity",
+        buildName: "Wrike #123",
+        url: "https://teamcity.example",
+        reportUrl: "https://teamcity.example/report/123",
+        buildUrl: "https://teamcity.example/build/123",
+      },
+    });
+
+    render(<ReportMetadata />);
+
+    expect(screen.getByText("executor")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "TeamCity · Wrike #123" })).toHaveAttribute(
+      "href",
+      "https://teamcity.example/build/123",
+    );
+  });
+
+  it("should fall back to report url when executor build url is missing", () => {
+    (getReportOptions as Mock).mockReturnValue({
+      executor: {
+        name: "TeamCity",
+        buildName: "Wrike #123",
+        reportUrl: "https://teamcity.example/report/123",
+      },
+    });
+
+    render(<ReportMetadata />);
+
+    expect(screen.getByRole("link", { name: "TeamCity · Wrike #123" })).toHaveAttribute(
+      "href",
+      "https://teamcity.example/report/123",
+    );
+  });
+
+  it("should render executor metadata as plain text when url is unsafe", () => {
+    (getReportOptions as Mock).mockReturnValue({
+      executor: {
+        name: "TeamCity",
+        buildName: "Wrike #123",
+        buildUrl: "javascript:alert(1)",
+      },
+    });
+
+    render(<ReportMetadata />);
+
+    expect(screen.queryByRole("link", { name: "TeamCity · Wrike #123" })).not.toBeInTheDocument();
+    expect(screen.getByTestId("metadata-item")).toHaveTextContent("TeamCity · Wrike #123");
+  });
+});

package/test/components/TestResult/TrRetriesItem.test.tsx

@@ -0,0 +1,163 @@
+import { fireEvent, render, screen } from "@testing-library/preact";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TrRetriesItem } from "@/components/TestResult/TrRetriesView/TrRetriesItem";
+
+import type { AwesomeTestResult } from "../../../types";
+
+vi.mock("@allurereport/web-components", () => ({
+  ArrowButton: () => <button data-testid="test-result-retries-item-arrow-button" type="button" />,
+  IconButton: (props: { "onClick": () => void; "data-testid"?: string }) => (
+    <button data-testid={props["data-testid"]} type="button" onClick={props.onClick} />
+  ),
+  Text: (props: { "children": unknown; "data-testid"?: string }) => (
+    <span data-testid={props["data-testid"]}>{props.children}</span>
+  ),
+  TreeItemIcon: () => <span data-testid="retry-status" />,
+  allureIcons: {
+    lineArrowsChevronDown: "chevron",
+    lineGeneralLinkExternal: "external",
+  },
+}));
+
+vi.mock("@/components/TestResult/TrError", () => ({
+  TrError: (props: { message?: string; trace?: string; actual?: string; expected?: string }) => (
+    <div data-testid="test-result-error">{props.message || props.trace || `${props.actual} ${props.expected}`}</div>
+  ),
+}));
+
+vi.mock("@/stores/locale", () => ({
+  useI18n: (namespace: string) =>
+    namespace === "controls"
+      ? {
+          t: (key: string) => (key === "comparison" ? "Comparison" : key),
+        }
+      : {
+          t: (_key: string, params: { attempt: number; total: number }) =>
+            `Attempt ${params.attempt} of ${params.total}`,
+        },
+}));
+
+vi.mock("@/stores/router", () => ({
+  navigateToTestResult: vi.fn(),
+}));
+
+vi.mock("@/utils/time", () => ({
+  timestampToDate: (value: number) => `date:${value}`,
+}));
+
+const makeRetry = (overrides: Partial<AwesomeTestResult> = {}): AwesomeTestResult =>
+  ({
+    id: "retry-id",
+    name: "retry",
+    status: "failed",
+    fullName: "retry.fullName",
+    flaky: false,
+    muted: false,
+    known: false,
+    isRetry: true,
+    labels: [],
+    groupedLabels: {},
+    parameters: [],
+    links: [],
+    steps: [],
+    error: undefined,
+    environment: "default",
+    setup: [],
+    teardown: [],
+    history: [],
+    retries: [],
+    breadcrumbs: [],
+    titlePath: [],
+    attachments: [],
+    ...overrides,
+  }) as AwesomeTestResult;
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("components > TestResult > TrRetriesItem", () => {
+  it("should render retry error message preview without expanding details", () => {
+    render(
+      <TrRetriesItem
+        attempt={1}
+        totalAttempts={2}
+        testResultItem={makeRetry({
+          stop: 1000,
+          duration: 500,
+          error: {
+            message: "Expected true to be false",
+            trace: "stack trace",
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("test-result-retries-item-error-preview")).toHaveTextContent("Expected true to be false");
+    expect(screen.queryByTestId("test-result-error")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("test-result-retries-item-arrow-button"));
+
+    expect(screen.getByTestId("test-result-error")).toHaveTextContent("Expected true to be false");
+  });
+
+  it("should use first meaningful trace line when message is missing", () => {
+    render(
+      <TrRetriesItem
+        attempt={1}
+        totalAttempts={2}
+        testResultItem={makeRetry({
+          error: {
+            trace: "\n\nAssertionError: timeout\n    at test.ts:1",
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("test-result-retries-item-error-preview")).toHaveTextContent("AssertionError: timeout");
+  });
+
+  it("should use trace preview when message is only whitespace", () => {
+    render(
+      <TrRetriesItem
+        attempt={1}
+        totalAttempts={2}
+        testResultItem={makeRetry({
+          error: {
+            message: "   ",
+            trace: "\nAssertionError: retry failed",
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("test-result-retries-item-arrow-button")).toBeInTheDocument();
+    expect(screen.getByTestId("test-result-retries-item-error-preview")).toHaveTextContent(
+      "AssertionError: retry failed",
+    );
+  });
+
+  it("should render diff-only retry preview and keep details expandable", () => {
+    render(
+      <TrRetriesItem
+        attempt={1}
+        totalAttempts={2}
+        testResultItem={makeRetry({
+          error: {
+            actual: "actual value",
+            expected: "expected value",
+          },
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("test-result-retries-item-arrow-button")).toBeInTheDocument();
+    expect(screen.getByTestId("test-result-retries-item-error-preview")).toHaveTextContent("Comparison");
+    expect(screen.queryByTestId("test-result-error")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("test-result-retries-item-arrow-button"));
+
+    expect(screen.getByTestId("test-result-error")).toHaveTextContent("actual value expected value");
+  });
+});

package/test/components/TestResult/TrSteps.test.tsx

@@ -19,9 +19,25 @@ vi.hoisted(() => {
 
 import type { TrBodyItem } from "@/components/TestResult/bodyItems";
 import { TrSteps } from "@/components/TestResult/TrSteps";
+import { TrStep } from "@/components/TestResult/TrSteps/TrStep";
 import { collapsedTrees, expandedTrees } from "@/stores/tree";
 
-const passedStep = {
+const nestedPassedStep = {
+  type: "step",
+  item: {
+    stepId: "nested-passed-step",
+    name: "nested passed step",
+    status: "passed",
+    parameters: [],
+    message: "",
+    trace: "",
+    hasSimilarErrorInSubSteps: false,
+  },
+  suppressInlineError: false,
+  bodyItems: [],
+} satisfies TrBodyItem;
+
+const passedStepWithContent = {
   type: "step",
   item: {
     stepId: "passed-step",
@@ -33,10 +49,10 @@ const passedStep = {
     hasSimilarErrorInSubSteps: false,
   },
   suppressInlineError: false,
-  bodyItems: [],
+  bodyItems: [nestedPassedStep],
 } satisfies TrBodyItem;
 
-const failedStep = {
+const failedStepWithContent = {
   type: "step",
   item: {
     stepId: "failed-step",
@@ -48,7 +64,7 @@ const failedStep = {
     hasSimilarErrorInSubSteps: false,
   },
   suppressInlineError: false,
-  bodyItems: [],
+  bodyItems: [nestedPassedStep],
 } satisfies TrBodyItem;
 
 describe("components > TestResult > TrSteps", () => {
@@ -59,15 +75,34 @@ describe("components > TestResult > TrSteps", () => {
     globalThis.allureReportOptions = { stepTreeExpansion: "expand_failed_only" } as any;
   });
 
-  it("collapses passed-only root steps by default with expand_failed_only", () => {
-    const view = render(<TrSteps id="passed-test" bodyItems={[passedStep]} />);
+  it("always shows the steps root container regardless of step status", () => {
+    const view = render(<TrSteps id="test" bodyItems={[passedStepWithContent]} />);
 
-    expect(view.queryByTestId("test-result-steps-root")).not.toBeInTheDocument();
+    expect(view.getByTestId("test-result-steps-root")).toBeInTheDocument();
   });
 
-  it("opens root steps by default when expand_failed_only finds failed context", () => {
-    const view = render(<TrSteps id="failed-test" bodyItems={[passedStep, failedStep]} />);
+  it("opens top-level passed steps by default even with expand_failed_only", () => {
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
 
-    expect(view.getByTestId("test-result-steps-root")).toBeInTheDocument();
+    expect(view.getByTestId("test-result-step-content")).toBeInTheDocument();
+  });
+
+  it("collapses top-level steps when policy is collapsed", () => {
+    globalThis.allureReportOptions = { stepTreeExpansion: "collapsed" } as any;
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
+
+    expect(view.queryByTestId("test-result-step-content")).not.toBeInTheDocument();
+  });
+
+  it("opens top-level failed steps by default with expand_failed_only", () => {
+    const view = render(<TrSteps id="failed-test" bodyItems={[failedStepWithContent]} />);
+
+    expect(view.getByTestId("test-result-step-content")).toBeInTheDocument();
+  });
+
+  it("collapses nested passed steps by default with expand_failed_only", () => {
+    const view = render(<TrStep item={passedStepWithContent} stepIndex={1} isTopLevel={true} />);
+
+    expect(view.queryAllByTestId("test-result-step-content")).toHaveLength(1);
   });
 });

package/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");
+  });
+});

package/test/utils/time.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { timestampToDate } from "@/utils/time";
+
+const numericDateTimeOptions: Intl.DateTimeFormatOptions = {
+  month: "numeric",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  hour12: false,
+};
+
+vi.mock("@/stores/locale", () => ({
+  currentLocale: { value: "en" },
+  currentLocaleIso: { value: "en-US" },
+  useI18n: () => ({
+    t: (key: string) => (key === "at" ? "at" : key),
+  }),
+}));
+
+vi.mock("@allurereport/web-commons", async (importOriginal) => ({
+  ...(await importOriginal()),
+  getLocaleDateTimeOverride: () => undefined,
+}));
+
+describe("utils > timestampToDate", () => {
+  it("should keep Intl-provided at separator for long English dates", () => {
+    const timestamp = 1527776360360;
+    const options: Intl.DateTimeFormatOptions = {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+    };
+    const intlFormatted = new Intl.DateTimeFormat("en-US", options).format(new Date(timestamp));
+    const formatted = timestampToDate(timestamp, options);
+
+    expect(formatted).toBe(intlFormatted);
+    expect(formatted).not.toContain("May 31 at 2018 at");
+  });
+
+  it("should add at separator when Intl returns comma-separated date and time", () => {
+    const timestamp = 1779887536194;
+    const intlFormatted = new Intl.DateTimeFormat("en-US", numericDateTimeOptions).format(new Date(timestamp));
+
+    expect(timestampToDate(timestamp, numericDateTimeOptions)).toBe(intlFormatted.replace(",", " at"));
+  });
+});