@allurereport/web-awesome 3.8.2 → 3.9.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/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/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/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 = {

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/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/TestResult/PwTraceButton.test.tsx

@@ -1,6 +1,14 @@
 import { fireEvent, render, screen, waitFor } 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("PwTraceButton");
+  await label("coverage", "ui-components");
+});
+
 type SetupOptions = {
   canOpenInNewTab: boolean;
   failFetch?: boolean;

package/test/components/TestResult/TrErrorStep.test.tsx

@@ -1,6 +1,14 @@
 import { cleanup, fireEvent, render } 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("TrErrorStep");
+  await label("coverage", "ui-components");
+});
+
 const { matchMediaMock } = vi.hoisted(() => {
   const matchMediaMock = vi.fn().mockImplementation(() => ({
     matches: false,

package/test/components/TestResult/TrOverview.test.tsx

@@ -1,7 +1,15 @@
 import { cleanup, render, screen } from "@testing-library/preact";
+import { epic, feature, label, story } from "allure-js-commons";
 import type { AwesomeTestResult } from "types";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("TrOverview");
+  await label("coverage", "ui-components");
+});
+
 import { TrOverview } from "@/components/TestResult/TrOverview";
 
 vi.mock("@/components/TestResult/TestStepsEmpty", () => ({
@@ -12,32 +20,36 @@ vi.mock("@/components/TestResult/TrSteps", () => ({
   TrSteps: () => <div data-testid="tr-steps" />,
 }));
 
+vi.mock("@/components/TestResult/TrError", () => ({
+  TrError: () => <div data-testid="test-result-error" />,
+}));
+
 vi.mock("@/components/TestResult/TrDescription", () => ({
-  TrDescription: () => null,
+  TrDescription: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrLinks", () => ({
-  TrLinks: () => null,
+  TrLinks: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrMetadata", () => ({
-  TrMetadata: () => null,
+  TrMetadata: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrParameters", () => ({
-  TrParameters: () => null,
+  TrParameters: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrPwTraces", () => ({
-  TrPwTraces: () => null,
+  TrPwTraces: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrSetup", () => ({
-  TrSetup: () => null,
+  TrSetup: () => null as any,
 }));
 
 vi.mock("@/components/TestResult/TrTeardown", () => ({
-  TrTeardown: () => null,
+  TrTeardown: () => null as any,
 }));
 
 vi.mock("@/stores/locale", () => ({
@@ -48,6 +60,7 @@ vi.mock("@/stores/locale", () => ({
 
 vi.mock("@/stores/testResult", () => ({
   currentTrId: { value: "current-test-result-id" },
+  trCurrentTab: { value: "overview" },
 }));
 
 const makeTestResult = (overrides: Partial<AwesomeTestResult> = {}): AwesomeTestResult =>
@@ -59,7 +72,7 @@ const makeTestResult = (overrides: Partial<AwesomeTestResult> = {}): AwesomeTest
     flaky: false,
     muted: false,
     known: false,
-    hidden: false,
+    isRetry: false,
     labels: [],
     groupedLabels: {},
     parameters: [],
@@ -98,8 +111,15 @@ describe("components > TestResult > TrOverview", () => {
     expect(screen.queryByTestId("test-steps-empty")).not.toBeInTheDocument();
   });
 
-  it("should render TrSteps when the test has an error", () => {
-    render(<TrOverview testResult={makeTestResult({ error: { message: "boom" } })} />);
+  it("should render TrSteps when the test has steps and an error", () => {
+    render(
+      <TrOverview
+        testResult={makeTestResult({
+          error: { message: "boom" },
+          steps: [{ type: "step", name: "step", status: "passed", parameters: [], steps: [] }],
+        })}
+      />,
+    );
 
     expect(screen.getByTestId("tr-steps")).toBeInTheDocument();
     expect(screen.queryByTestId("test-steps-empty")).not.toBeInTheDocument();

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

@@ -0,0 +1,73 @@
+import { cleanup, render } from "@testing-library/preact";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.hoisted(() => {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn().mockImplementation(() => ({
+      matches: false,
+      media: "",
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+});
+
+import type { TrBodyItem } from "@/components/TestResult/bodyItems";
+import { TrSteps } from "@/components/TestResult/TrSteps";
+import { collapsedTrees, expandedTrees } from "@/stores/tree";
+
+const passedStep = {
+  type: "step",
+  item: {
+    stepId: "passed-step",
+    name: "passed step",
+    status: "passed",
+    parameters: [],
+    message: "",
+    trace: "",
+    hasSimilarErrorInSubSteps: false,
+  },
+  suppressInlineError: false,
+  bodyItems: [],
+} satisfies TrBodyItem;
+
+const failedStep = {
+  type: "step",
+  item: {
+    stepId: "failed-step",
+    name: "failed step",
+    status: "failed",
+    parameters: [],
+    message: "failed",
+    trace: "trace",
+    hasSimilarErrorInSubSteps: false,
+  },
+  suppressInlineError: false,
+  bodyItems: [],
+} satisfies TrBodyItem;
+
+describe("components > TestResult > TrSteps", () => {
+  beforeEach(() => {
+    cleanup();
+    collapsedTrees.value = new Set();
+    expandedTrees.value = new Set();
+    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]} />);
+
+    expect(view.queryByTestId("test-result-steps-root")).not.toBeInTheDocument();
+  });
+
+  it("opens root steps by default when expand_failed_only finds failed context", () => {
+    const view = render(<TrSteps id="failed-test" bodyItems={[passedStep, failedStep]} />);
+
+    expect(view.getByTestId("test-result-steps-root")).toBeInTheDocument();
+  });
+});

package/test/components/TestResult/bodyItems.test.ts

@@ -1,6 +1,14 @@
 import type { AttachmentTestStepResult, DefaultTestStepResult } from "@allurereport/core-api";
+import { epic, feature, label, story } from "allure-js-commons";
 import type { AwesomeFixtureResult, AwesomeTestResult } from "types";
-import { describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
+
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("bodyItems");
+  await label("coverage", "ui-components");
+});
 
 import {
   fixtureResultToTrStepItem,

package/test/components/TestResult/openPwTraceInNewTab.test.ts

@@ -1,5 +1,13 @@
+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("openPwTraceInNewTab");
+  await label("coverage", "ui-components");
+});
+
 describe("components > TestResult > openPlaywrightTraceInNewTab", () => {
   beforeEach(() => {
     vi.resetModules();

package/test/components/TestResult/stepTreeExpansion.test.ts

@@ -1,14 +1,22 @@
-import { describe, expect, it } from "vitest";
+import { getNextSubtreeToggleState } from "@allurereport/web-commons";
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import type { TrBodyItem } from "@/components/TestResult/bodyItems";
 import {
   collectExpandableStepNodes,
-  getNextSubtreeToggleState,
   hasFailedStepContext,
   isOpenByDefaultForPolicy,
   isStepOpenedByDefault,
 } from "@/components/TestResult/TrSteps/stepTreeExpansion";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("ui-components");
+  await story("stepTreeExpansion");
+  await label("coverage", "ui-components");
+});
+
 describe("components > TestResult > stepTreeExpansion", () => {
   it("should detect failed context in nested steps", () => {
     const bodyItems = [

package/test/components/Timeline.test.tsx

@@ -1,12 +1,20 @@
 import { signal } from "@preact/signals";
 import { cleanup, render, screen } 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("Timeline");
+  await label("coverage", "ui-components");
+});
+
 type TimelineTestResult = {
   id: string;
   name: string;
   status: "passed" | "failed";
-  hidden: boolean;
+  isRetry: boolean;
   environment: string;
   environmentName?: string;
   host: string;
@@ -30,11 +38,11 @@ const setup = async (timelineData: TimelineTestResult[]) => {
     Timeline: ({ data, dataId }: { data: TimelineTestResult[]; dataId: string }) => (
       <div data-testid={`timeline-${dataId}`}>{data.map(({ id }) => id).join(",")}</div>
     ),
-    Grid: ({ children }: { children: unknown }) => <div>{children}</div>,
-    GridItem: ({ children }: { children: unknown }) => <div>{children}</div>,
-    Loadable: ({ renderData }: { renderData: () => JSX.Element }) => renderData(),
+    Grid: ({ children }: { children: unknown }) => <div>{children as any}</div>,
+    GridItem: ({ children }: { children: unknown }) => <div>{children as any}</div>,
+    Loadable: ({ renderData }: { renderData: () => any }) => renderData(),
     PageLoader: () => <div>loading</div>,
-    Widget: ({ children }: { children: unknown }) => <div>{children}</div>,
+    Widget: ({ children }: { children: unknown }) => <div>{children as any}</div>,
   }));
   vi.doMock("@/stores", () => ({
     useI18n: () => ({
@@ -76,7 +84,7 @@ describe("components > Timeline", () => {
         id: "tr-qa-a",
         name: "qa a test",
         status: "passed",
-        hidden: false,
+        isRetry: false,
         environment: "qa_a",
         environmentName: "QA",
         host: "shared-host",
@@ -88,7 +96,7 @@ describe("components > Timeline", () => {
         id: "tr-qa-b",
         name: "qa b test",
         status: "failed",
-        hidden: false,
+        isRetry: false,
         environment: "qa_b",
         environmentName: "QA",
         host: "shared-host",