@allurereport/web-awesome 3.3.0 → 3.4.0

package/src/stores/variables.ts

@@ -1,5 +1,6 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
+
 import type { StoreSignalState } from "@/stores/types";
 
 export type Variables = Record<string, any>;

package/src/utils/time.ts

@@ -1,4 +1,5 @@
 import { getLocaleDateTimeOverride } from "@allurereport/web-commons";
+
 import { currentLocale, currentLocaleIso, useI18n } from "@/stores/locale";
 
 const defaultOptions: Intl.DateTimeFormatOptions = {

package/src/utils/treeFilters.ts

@@ -11,7 +11,9 @@ import {
   ordinal,
   reverse,
 } from "@allurereport/core-api";
+
 import type { SortBy } from "@/stores/treeSort";
+
 import type { AwesomeRecursiveTree, AwesomeTree, AwesomeTreeGroup, AwesomeTreeLeaf } from "../../types";
 
 const leafComparatorByTreeSortBy = (sortBy: SortBy = "status,asc"): Comparator<TreeLeaf<AwesomeTreeLeaf>> => {

package/test/components/EnvironmentPicker.test.tsx

@@ -0,0 +1,133 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/preact";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { currentEnvironment, environmentsStore } from "@/stores/env";
+
+const longEnvironmentName = "я".repeat(64);
+
+const setElementSizeMocks = () => {
+  let isNarrowViewport = false;
+  const clientWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "clientWidth");
+  const scrollWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "scrollWidth");
+
+  Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+    configurable: true,
+    get() {
+      const textContent = this.textContent ?? "";
+
+      if (textContent.includes(longEnvironmentName)) {
+        return isNarrowViewport ? 120 : 420;
+      }
+
+      return 200;
+    },
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+    configurable: true,
+    get() {
+      const textContent = this.textContent ?? "";
+
+      if (textContent.includes(longEnvironmentName)) {
+        return 300;
+      }
+
+      return 200;
+    },
+  });
+
+  const setNarrowViewport = (isNarrow: boolean) => {
+    isNarrowViewport = isNarrow;
+  };
+
+  const restore = () => {
+    if (clientWidthDescriptor) {
+      Object.defineProperty(HTMLElement.prototype, "clientWidth", clientWidthDescriptor);
+    } else {
+      delete (HTMLElement.prototype as Partial<HTMLElement>).clientWidth;
+    }
+
+    if (scrollWidthDescriptor) {
+      Object.defineProperty(HTMLElement.prototype, "scrollWidth", scrollWidthDescriptor);
+    } else {
+      delete (HTMLElement.prototype as Partial<HTMLElement>).scrollWidth;
+    }
+  };
+
+  return {
+    setNarrowViewport,
+    restore,
+  };
+};
+
+describe("components > EnvironmentPicker", () => {
+  let setNarrowViewport: (isNarrow: boolean) => void;
+  let restoreElementSizeMocks: () => void;
+
+  beforeEach(() => {
+    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(),
+      })),
+    );
+    const controls = setElementSizeMocks();
+    setNarrowViewport = controls.setNarrowViewport;
+    restoreElementSizeMocks = controls.restore;
+    currentEnvironment.value = "long-environment";
+    environmentsStore.value = {
+      loading: false,
+      error: undefined,
+      data: [
+        { id: "default", name: "default" },
+        { id: "long-environment", name: longEnvironmentName },
+      ],
+    };
+  });
+
+  afterEach(() => {
+    restoreElementSizeMocks();
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it("should show tooltip on hover after resize truncates selected value", async () => {
+    const { EnvironmentPicker } = await import("@/components/EnvironmentPicker");
+
+    render(<EnvironmentPicker />);
+    const getPickerButton = () => screen.getByTestId("environment-picker-button");
+    const getTooltipTrigger = () => getPickerButton().parentElement?.parentElement as HTMLElement;
+    const queryTooltip = () => screen.queryByTestId("environment-picker-selected-tooltip");
+
+    expect(queryTooltip()).not.toBeInTheDocument();
+
+    setNarrowViewport(true);
+    await waitFor(() => {
+      fireEvent(window, new Event("resize"));
+      expect(getTooltipTrigger().childElementCount).toBe(2);
+    });
+
+    const tooltipTrigger = getTooltipTrigger();
+    fireEvent.mouseEnter(tooltipTrigger);
+    await waitFor(() => {
+      expect(queryTooltip()).toBeInTheDocument();
+    });
+
+    fireEvent.mouseLeave(tooltipTrigger);
+    await waitFor(() => {
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+
+    fireEvent.click(getPickerButton());
+    fireEvent.mouseEnter(getTooltipTrigger());
+
+    expect(queryTooltip()).not.toBeInTheDocument();
+  }, 15000);
+});

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

@@ -3,6 +3,7 @@ import { getReportOptions } from "@allurereport/web-commons";
 import { cleanup, render, screen } from "@testing-library/preact";
 import { h } from "preact";
 import { type Mock, beforeEach, describe, expect, it, vi } from "vitest";
+
 import { CiInfo } from "@/components/Header/CiInfo";
 
 const fixtures = {
@@ -106,6 +107,7 @@ describe("components > Header > CiInfo", () => {
     render(<CiInfo />);
 
     expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.pullRequestUrl);
+    expect(screen.getByRole("link")).toHaveAttribute("rel", "noopener noreferrer");
   });
 
   it("should presence use job run url as href when provided", () => {
@@ -133,6 +135,19 @@ describe("components > Header > CiInfo", () => {
     expect(screen.getByRole("link")).toHaveAttribute("href", fixtures.jobRunUrl);
   });
 
+  it("should not render a clickable link when ci url has unsafe protocol", () => {
+    (getReportOptions as Mock).mockReturnValueOnce({
+      ci: {
+        pullRequestUrl: "javascript:alert(1)",
+        pullRequestName: fixtures.pullRequestName,
+      },
+    });
+
+    render(<CiInfo />);
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+
   it("should presence pull request name as text when provided", () => {
     (getReportOptions as Mock).mockReturnValueOnce({
       ci: {

package/test/components/Header.test.tsx

@@ -2,6 +2,7 @@ import * as webCommons from "@allurereport/web-commons";
 import { signal } from "@preact/signals";
 import { cleanup, render, screen } from "@testing-library/preact";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+
 import { Header } from "@/components/Header";
 import { CiInfo } from "@/components/Header/CiInfo";
 import type * as routerModule from "@/stores/router";

package/test/components/TestResult/PwTraceButton.test.tsx

@@ -0,0 +1,104 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/preact";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+type SetupOptions = {
+  canOpenInNewTab: boolean;
+  failFetch?: boolean;
+};
+
+const setup = async ({ canOpenInNewTab, failFetch }: SetupOptions) => {
+  vi.resetModules();
+
+  const fetchFromUrl = failFetch
+    ? vi.fn().mockRejectedValue(new Error("fetch failed"))
+    : vi.fn().mockResolvedValue({
+        blob: vi.fn().mockResolvedValue(new Blob(["trace"])),
+      });
+  const openModal = vi.fn();
+  const closeModal = vi.fn();
+  const openPlaywrightTraceInNewTab = vi.fn().mockReturnValue(canOpenInNewTab);
+
+  vi.doMock("@allurereport/web-commons", () => ({
+    fetchFromUrl,
+  }));
+  vi.doMock("@allurereport/web-components", () => ({
+    Button: ({ onClick, text }: { onClick?: () => void; text?: string }) => <button onClick={onClick}>{text}</button>,
+    Text: ({ children }: { children: unknown }) => <div>{children}</div>,
+    TooltipWrapper: ({ children }: { children: unknown }) => <div>{children}</div>,
+    IconButton: ({ onClick }: { onClick?: () => void }) => <button onClick={onClick}>open trace</button>,
+    allureIcons: { lineArrowsExpand3: "lineArrowsExpand3" },
+  }));
+  vi.doMock("@/stores", () => ({
+    useI18n: () => ({ t: (key: string) => key }),
+  }));
+  vi.doMock("@/stores/modal", () => ({
+    openModal,
+    closeModal,
+  }));
+  vi.doMock("@/components/TestResult/TrPwTraces/openPwTraceInNewTab", () => ({ openPlaywrightTraceInNewTab }));
+
+  const { PwTraceButton } = await import("@/components/TestResult/TrPwTraces/PwTraceButton");
+
+  render(
+    <PwTraceButton
+      link={{
+        id: "trace-id",
+        ext: ".zip",
+        name: "trace",
+        contentType: "application/vnd.allure.playwright-trace",
+      }}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole("button", { name: "open trace" }));
+
+  return { fetchFromUrl, openModal, closeModal, openPlaywrightTraceInNewTab };
+};
+
+describe("components > TestResult > PwTraceButton", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("opens trace viewer in new tab and does not open modal", async () => {
+    const { openModal, openPlaywrightTraceInNewTab } = await setup({
+      canOpenInNewTab: true,
+    });
+
+    await waitFor(() => {
+      expect(openPlaywrightTraceInNewTab).toHaveBeenCalledTimes(1);
+    });
+
+    expect(openModal).not.toHaveBeenCalled();
+  });
+
+  it("shows popup-blocked modal when new tab cannot be opened", async () => {
+    const { openModal, openPlaywrightTraceInNewTab } = await setup({
+      canOpenInNewTab: false,
+    });
+
+    await waitFor(() => {
+      expect(openModal).toHaveBeenCalledTimes(1);
+    });
+
+    expect(openPlaywrightTraceInNewTab).toHaveBeenCalledTimes(1);
+    expect(openModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Playwright Trace Viewer | trace.zip",
+      }),
+    );
+  });
+
+  it("shows error modal when trace attachment fetch fails", async () => {
+    const { openModal, openPlaywrightTraceInNewTab } = await setup({
+      canOpenInNewTab: true,
+      failFetch: true,
+    });
+
+    await waitFor(() => {
+      expect(openModal).toHaveBeenCalledTimes(1);
+    });
+
+    expect(openPlaywrightTraceInNewTab).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,127 @@
+import { cleanup, fireEvent, render } from "@testing-library/preact";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { matchMediaMock } = vi.hoisted(() => {
+  const matchMediaMock = vi.fn().mockImplementation(() => ({
+    matches: false,
+    media: "",
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+
+  vi.stubGlobal("matchMedia", matchMediaMock);
+
+  return { matchMediaMock };
+});
+
+import { TrErrorStep } from "@/components/TestResult/TrSteps/TrErrorStep";
+import { collapsedTrees } from "@/stores/tree";
+
+const mockTrError = vi.fn(({ message }: { message?: string }) => <div data-testid="error-content">{message}</div>);
+
+vi.mock("@/components/TestResult/TrError", () => ({
+  TrError: (props: { message?: string; showMessage?: boolean }) => mockTrError(props),
+}));
+
+describe("components > TestResult > TrErrorStep", () => {
+  beforeEach(() => {
+    cleanup();
+    mockTrError.mockClear();
+    matchMediaMock.mockClear();
+    collapsedTrees.value = new Set();
+  });
+
+  it("should render the title and pass showMessage=false to TrError", () => {
+    const view = render(
+      <TrErrorStep
+        stepIndex={2}
+        item={{
+          type: "error",
+          id: "__test-error__:test-result-id",
+          title: "boom",
+          status: "failed",
+          error: {
+            message: "boom\nsecond line",
+            trace: "error trace",
+          },
+        }}
+      />,
+    );
+
+    expect(view.getByTestId("test-result-step-title")).toHaveTextContent("boom");
+    expect(mockTrError.mock.calls[0]?.[0]).toMatchObject({
+      message: "boom\nsecond line",
+      trace: "error trace",
+      showMessage: false,
+      status: "failed",
+    });
+  });
+
+  it("should be expanded by default when the error has trace or diff content", () => {
+    const view = render(
+      <TrErrorStep
+        stepIndex={1}
+        item={{
+          type: "error",
+          id: "expanded-test-id",
+          title: "error with trace",
+          status: "failed",
+          error: {
+            message: "error with trace",
+            trace: "error trace",
+          },
+        }}
+      />,
+    );
+
+    expect(view.getByTestId("test-result-step-content")).toBeInTheDocument();
+  });
+
+  it("should collapse the content when the header is clicked", () => {
+    const view = render(
+      <TrErrorStep
+        stepIndex={1}
+        item={{
+          type: "error",
+          id: "collapsible-test-id",
+          title: "collapsible error",
+          status: "broken",
+          error: {
+            message: "collapsible error",
+            trace: "some trace",
+          },
+        }}
+      />,
+    );
+
+    expect(view.getByTestId("error-content")).toBeInTheDocument();
+
+    fireEvent.click(view.getByTestId("test-result-step-header"));
+
+    expect(view.queryByTestId("error-content")).not.toBeInTheDocument();
+  });
+
+  it("shouldn't render an arrow or content when the error has only a message", () => {
+    const view = render(
+      <TrErrorStep
+        stepIndex={1}
+        item={{
+          type: "error",
+          id: "no-content-id",
+          title: "only message",
+          status: "failed",
+          error: {
+            message: "only message",
+          },
+        }}
+      />,
+    );
+
+    expect(view.queryByTestId("test-result-step-arrow-button")).not.toBeInTheDocument();
+    expect(view.queryByTestId("test-result-step-content")).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,114 @@
+import { cleanup, render, screen } from "@testing-library/preact";
+import type { AwesomeTestResult } from "types";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TrOverview } from "@/components/TestResult/TrOverview";
+
+vi.mock("@/components/TestResult/TestStepsEmpty", () => ({
+  default: () => <div data-testid="test-steps-empty" />,
+}));
+
+vi.mock("@/components/TestResult/TrSteps", () => ({
+  TrSteps: () => <div data-testid="tr-steps" />,
+}));
+
+vi.mock("@/components/TestResult/TrDescription", () => ({
+  TrDescription: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrLinks", () => ({
+  TrLinks: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrMetadata", () => ({
+  TrMetadata: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrParameters", () => ({
+  TrParameters: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrPwTraces", () => ({
+  TrPwTraces: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrSetup", () => ({
+  TrSetup: () => null,
+}));
+
+vi.mock("@/components/TestResult/TrTeardown", () => ({
+  TrTeardown: () => null,
+}));
+
+vi.mock("@/stores/locale", () => ({
+  useI18n: () => ({
+    t: (key: string) => (key === "error" ? "Error" : key),
+  }),
+}));
+
+vi.mock("@/stores/testResult", () => ({
+  currentTrId: { value: "current-test-result-id" },
+}));
+
+const makeTestResult = (overrides: Partial<AwesomeTestResult> = {}): AwesomeTestResult =>
+  ({
+    id: "test-result-id",
+    name: "test",
+    status: "failed",
+    fullName: "test.fullName",
+    flaky: false,
+    muted: false,
+    known: false,
+    hidden: false,
+    labels: [],
+    groupedLabels: {},
+    parameters: [],
+    links: [],
+    steps: [],
+    error: undefined,
+    descriptionHtml: undefined,
+    testCase: undefined,
+    environment: "default",
+    setup: [],
+    teardown: [],
+    history: [],
+    retries: [],
+    breadcrumbs: [],
+    retry: false,
+    titlePath: [],
+    attachments: [],
+    ...overrides,
+  }) as AwesomeTestResult;
+
+describe("components > TestResult > TrOverview", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("should render TrSteps when the test has steps", () => {
+    render(
+      <TrOverview
+        testResult={makeTestResult({
+          steps: [{ type: "step", name: "step", status: "passed", parameters: [], steps: [] }],
+        })}
+      />,
+    );
+
+    expect(screen.getByTestId("tr-steps")).toBeInTheDocument();
+    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" } })} />);
+
+    expect(screen.getByTestId("tr-steps")).toBeInTheDocument();
+    expect(screen.queryByTestId("test-steps-empty")).not.toBeInTheDocument();
+  });
+
+  it("should render the empty state when there are no body items", () => {
+    render(<TrOverview testResult={makeTestResult()} />);
+
+    expect(screen.getByTestId("test-steps-empty")).toBeInTheDocument();
+    expect(screen.queryByTestId("tr-steps")).not.toBeInTheDocument();
+  });
+});