@allurereport/web-awesome 3.8.2 → 3.10.0

package/test/stores/search.test.ts

@@ -0,0 +1,143 @@
+import type { AwesomeSearchDocument } from "types";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { fetchReportJsonDataMock } = vi.hoisted(() => ({
+  fetchReportJsonDataMock: vi.fn(),
+}));
+
+vi.mock("@allurereport/web-commons", async () => {
+  const actual = await vi.importActual<typeof import("@allurereport/web-commons")>("@allurereport/web-commons");
+
+  return {
+    ...actual,
+    fetchReportJsonData: fetchReportJsonDataMock,
+  };
+});
+
+import { ReportFetchError } from "@allurereport/web-commons";
+
+import {
+  createSearchIndex,
+  fetchEnvSearchIndexes,
+  resetSearchIndexes,
+  searchIndexesStore,
+  searchNodeIds,
+} from "../../src/stores/search.js";
+
+const documents: AwesomeSearchDocument[] = [
+  {
+    id: "tr-1",
+    nodeId: "tr-1",
+    name: "renders request form",
+    fullName: "forms.RequestWithDatesFormTest.shouldRender",
+    historyId: "history-request-form",
+    owner: "Igor Martynov",
+    labels: "feature:Forms Forms",
+    tags: "smoke",
+    parameters: "browser:chromium browser chromium",
+    categories: "Product defects",
+    statusMessage: "Date format assertion failed",
+    links: "ISSUE-42 https://example.com/ISSUE-42 issue",
+  },
+  {
+    id: "tr-2",
+    nodeId: "tr-2",
+    name: "submits checkout",
+    fullName: "checkout.SubmitCheckoutTest.shouldSubmit",
+    owner: "Jane Smith",
+    labels: "feature:Checkout Checkout",
+    tags: "regression",
+    parameters: "region:eu region eu",
+    categories: "Infrastructure",
+    statusMessage: "Network timeout",
+    links: "PAYMENTS-932 https://example.com/PAYMENTS-932 issue",
+  },
+];
+
+type SearchCase = [string, AwesomeSearchDocument[], string, string[]];
+type SearchFindCase = [string, string[]];
+
+describe("stores > search", () => {
+  beforeEach(() => {
+    fetchReportJsonDataMock.mockReset();
+    resetSearchIndexes();
+  });
+
+  it.each<SearchFindCase>([
+    ["RequestWithDatesFormTest", ["tr-1"]],
+    ["history-request-form", ["tr-1"]],
+    ["Igor Martynov", ["tr-1"]],
+    ["smoke", ["tr-1"]],
+    ["browser:chromium", ["tr-1"]],
+    ["region eu", ["tr-2"]],
+    ["Product defects", ["tr-1"]],
+    ["Date format assertion", ["tr-1"]],
+    ["PAYMENTS-932", ["tr-2"]],
+  ])("should find tests by %s", (query, expectedNodeIds) => {
+    const searchIndex = createSearchIndex(documents);
+
+    expect(searchNodeIds(searchIndex, query)).toEqual(new Set(expectedNodeIds));
+  });
+
+  it.each<SearchCase>([
+    ["empty index", [], "anything", []],
+    ["empty query", documents, "", []],
+    ["blank query", documents, "   ", []],
+    ["no-match query", documents, "does-not-exist", []],
+    ["prefix query", documents, "subm", ["tr-2"]],
+    ["fuzzy query", documents, "chekout", ["tr-2"]],
+    ["case-insensitive query", documents, "igor martynov", ["tr-1"]],
+  ])("should support %s", (_caseName, sourceDocuments, query, expectedNodeIds) => {
+    const searchIndex = createSearchIndex(sourceDocuments);
+
+    expect(searchNodeIds(searchIndex, query)).toEqual(new Set(expectedNodeIds));
+  });
+
+  it("should not retry missing environment index fetches on later calls", async () => {
+    fetchReportJsonDataMock.mockRejectedValue(
+      new ReportFetchError("missing search index", new Response(null, { status: 404, statusText: "Not Found" })),
+    );
+
+    await fetchEnvSearchIndexes(["missing-env"]);
+    await fetchEnvSearchIndexes(["missing-env"]);
+
+    expect(fetchReportJsonDataMock).toHaveBeenCalledOnce();
+    expect(searchIndexesStore.value.data).toEqual({});
+    expect(searchIndexesStore.value.error).toContain("missing search index");
+  });
+
+  it("should retry transient environment index fetch failures on later calls", async () => {
+    fetchReportJsonDataMock.mockRejectedValueOnce(new Error("temporary search index error")).mockResolvedValueOnce([]);
+
+    await fetchEnvSearchIndexes(["unstable-env"]);
+    await fetchEnvSearchIndexes(["unstable-env"]);
+
+    expect(fetchReportJsonDataMock).toHaveBeenCalledTimes(2);
+    expect(searchIndexesStore.value.data?.["unstable-env"]).toBeDefined();
+    expect(searchIndexesStore.value.error).toBeUndefined();
+  });
+
+  it("should preserve indexes loaded by overlapping fetches", async () => {
+    let resolveFirstFetch: (documents: AwesomeSearchDocument[]) => void = () => {};
+    let resolveSecondFetch: (documents: AwesomeSearchDocument[]) => void = () => {};
+    const firstFetch = new Promise<AwesomeSearchDocument[]>((resolve) => {
+      resolveFirstFetch = resolve;
+    });
+    const secondFetch = new Promise<AwesomeSearchDocument[]>((resolve) => {
+      resolveSecondFetch = resolve;
+    });
+
+    fetchReportJsonDataMock.mockReturnValueOnce(firstFetch).mockReturnValueOnce(secondFetch);
+
+    const firstIndexFetch = fetchEnvSearchIndexes(["env-a"]);
+    const secondIndexFetch = fetchEnvSearchIndexes(["env-b"]);
+
+    resolveSecondFetch([documents[1]]);
+    await secondIndexFetch;
+    resolveFirstFetch([documents[0]]);
+    await firstIndexFetch;
+
+    expect(searchIndexesStore.value.data?.["env-a"]).toBeDefined();
+    expect(searchIndexesStore.value.data?.["env-b"]).toBeDefined();
+  });
+});

package/test/stores/treeFilters/actions.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-state");
+  await story("actions");
+  await label("coverage", "ui-state");
+});
+
 const { fetchReportJsonDataMock, setParamsMock } = vi.hoisted(() => ({
   fetchReportJsonDataMock: vi.fn(),
   setParamsMock: vi.fn(),

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/flattenTestResultOverview.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { flattenTestResultOverview } from "@/utils/flattenTestResultOverview";
+
+describe("flattenTestResultOverview", () => {
+  it("skips metadata sections and lists execution blocks with nested steps", () => {
+    const flat = flattenTestResultOverview({
+      testResultId: "tr-1",
+      hasSetup: false,
+      setupBodyItems: [],
+      bodyItems: [
+        {
+          type: "step",
+          item: {
+            stepId: "step-a",
+            name: "Step A",
+            status: "passed",
+          },
+          bodyItems: [],
+          suppressInlineError: false,
+        },
+      ],
+      hasTeardown: false,
+      teardownBodyItems: [],
+      isGroupOpened: () => true,
+      stepExpansionPolicy: "expanded",
+    });
+
+    expect(flat.map((node) => node.id)).toEqual(["tr-1-steps", "step-a"]);
+  });
+
+  it("hides nested steps when the steps block is collapsed", () => {
+    const flat = flattenTestResultOverview({
+      testResultId: "tr-2",
+      hasSetup: false,
+      setupBodyItems: [],
+      bodyItems: [
+        {
+          type: "step",
+          item: {
+            stepId: "step-b",
+            name: "Step B",
+            status: "passed",
+          },
+          bodyItems: [],
+          suppressInlineError: false,
+        },
+      ],
+      hasTeardown: false,
+      teardownBodyItems: [],
+      isGroupOpened: () => false,
+      stepExpansionPolicy: "collapsed",
+    });
+
+    expect(flat.map((node) => node.id)).toEqual(["tr-2-steps"]);
+  });
+});

package/test/utils/ownerAddress.test.ts

@@ -1,7 +1,15 @@
-import { describe, expect, it } from "vitest";
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import { parseOwnerAddress } from "../../src/utils/ownerAddress.js";
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("labels-and-tags");
+  await story("ownerAddress");
+  await label("coverage", "labels-and-tags");
+});
+
 describe("utils > ownerAddress", () => {
   describe("parseOwnerAddress", () => {
     it("returns none type with empty displayName for null input", () => {

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

package/test/utils/treeFilters.test.ts

@@ -1,4 +1,5 @@
-import { describe, expect, it } from "vitest";
+import { epic, feature, label, story } from "allure-js-commons";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import { createRecursiveTree, filterLeaves } from "../../src/utils/treeFilters.js";
 import type { AwesomeTestResult } from "../../types.js";
@@ -6,6 +7,13 @@ import type { AwesomeTestResult } from "../../types.js";
 // Predicate that always returns true (no filtering)
 const alwaysTruePredicate = () => true;
 
+beforeEach(async () => {
+  await epic("coverage");
+  await feature("filters");
+  await story("treeFilters");
+  await label("coverage", "filters");
+});
+
 describe("utils > treeFilters", () => {
   describe("filterLeaves", () => {
     it("sorts leave by duration in ascending order", () => {
@@ -337,6 +345,110 @@ describe("utils > treeFilters", () => {
       );
     });
 
+    it("sorts groups by earliest leaf groupOrder when sorting by order ascending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", groupOrder: 5 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", groupOrder: 2 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", groupOrder: 8 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "order,asc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupB", "groupA", "groupC"]);
+    });
+
+    it("sorts groups by earliest leaf groupOrder when sorting by order descending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", groupOrder: 5 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", groupOrder: 2 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", groupOrder: 8 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "order,desc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupC", "groupA", "groupB"]);
+    });
+
+    it("sorts groups by aggregated duration when sorting by duration ascending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", duration: 3000 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", duration: 1000 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", duration: 5000 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "duration,asc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupB", "groupA", "groupC"]);
+    });
+
+    it("sorts groups by aggregated duration when sorting by duration descending", () => {
+      const group = {
+        leaves: [],
+        groups: ["groupA", "groupB", "groupC"],
+      };
+      const leavesById = {
+        t1: { name: "t1", status: "passed", duration: 3000 } as AwesomeTestResult,
+        t2: { name: "t2", status: "passed", duration: 1000 } as AwesomeTestResult,
+        t3: { name: "t3", status: "passed", duration: 5000 } as AwesomeTestResult,
+      };
+      const groupsById = {
+        groupA: { name: "groupA", leaves: ["t1"], groups: [] as string[] },
+        groupB: { name: "groupB", leaves: ["t2"], groups: [] as string[] },
+        groupC: { name: "groupC", leaves: ["t3"], groups: [] as string[] },
+      };
+      const result = createRecursiveTree({
+        group: group as any,
+        leavesById: leavesById as any,
+        groupsById: groupsById as any,
+        filterPredicate: alwaysTruePredicate,
+        sortBy: "duration,desc",
+      });
+
+      expect(result.trees.map((t) => t.name)).toEqual(["groupC", "groupA", "groupB"]);
+    });
+
     it("keeps problem-heavy groups first when sorting by status in descending order", () => {
       const group = {
         leaves: [],

package/types.d.ts

@@ -14,6 +14,23 @@ import type {
 export type Layout = "base" | "split";
 export type StepTreeExpansion = "collapsed" | "expand_failed_only" | "expanded";
 
+export type AwesomeRunSummary = {
+  start: number;
+  stop: number;
+  duration: number;
+};
+
+export type AwesomeExecutorInfo = {
+  name?: string;
+  type?: string;
+  url?: string;
+  buildOrder?: number;
+  buildName?: string;
+  buildUrl?: string;
+  reportName?: string;
+  reportUrl?: string;
+};
+
 export type AwesomeReportOptions = {
   allureVersion: string;
   reportName?: string;
@@ -28,7 +45,10 @@ export type AwesomeReportOptions = {
   sections?: string[];
   cacheKey: string;
   ci?: CiDescriptor;
+  executor?: AwesomeExecutorInfo;
+  runSummary?: AwesomeRunSummary;
   stepTreeExpansion?: StepTreeExpansion;
+  defaultSortBy?: string;
 };
 
 export type AwesomeFixtureResult = Omit<
@@ -67,6 +87,7 @@ export type AwesomeTestResult = Omit<
   | "steps"
   | "environment"
 > & {
+  isRetry: boolean;
   setup: AwesomeFixtureResult[];
   teardown: AwesomeFixtureResult[];
   steps: AwesomeTestStepResult[];
@@ -98,6 +119,22 @@ export type AwesomeTreeLeaf = Pick<
 export type AwesomeTreeGroup = WithChildren & DefaultTreeGroup & { nodeId: string };
 
 export type AwesomeTree = TreeData<AwesomeTreeLeaf, AwesomeTreeGroup>;
+
+export type AwesomeSearchDocument = {
+  id: string;
+  nodeId: string;
+  name: string;
+  fullName?: string;
+  historyId?: string;
+  labels?: string;
+  owner?: string;
+  tags?: string;
+  parameters?: string;
+  categories?: string;
+  statusMessage?: string;
+  links?: string;
+};
+
 /**
  * Tree which contains tree leaves instead of their IDs and recursive trees structure instead of groups
  */
@@ -105,6 +142,8 @@ export type AwesomeRecursiveTree = DefaultTreeGroup & {
   nodeId: string;
   leaves: AwesomeTreeLeaf[];
   trees: AwesomeRecursiveTree[];
+  duration: number;
+  groupOrder: number;
 };
 
 // TODO: maybe it should call `TestCase` instead of Group

package/webpack.config.js

@@ -1,14 +1,16 @@
+import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import { env } from "node:process";
 import { fileURLToPath } from "node:url";
 
-import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import SpriteLoaderPlugin from "svg-sprite-loader/plugin.js";
-import TerserPlugin from "terser-webpack-plugin";
-import webpack from "webpack";
-import { WebpackManifestPlugin } from "webpack-manifest-plugin";
+const require = createRequire(import.meta.url);
+const ForkTsCheckerPlugin = require("fork-ts-checker-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 
 const { SINGLE_FILE_MODE } = env;
 const baseDir = dirname(fileURLToPath(import.meta.url));
@@ -24,6 +26,7 @@ export default (env, argv) => {
       path: join(baseDir, SINGLE_FILE_MODE ? "dist/single" : "dist/multi"),
       filename: devMode ? "app.js" : "app-[fullhash].js",
       assetModuleFilename: "[name][ext]",
+      publicPath: devMode ? "auto" : undefined,
     },
     devtool: devMode ? "eval-source-map" : false,
     optimization: {
@@ -146,6 +149,8 @@ export default (env, argv) => {
     config.plugins.push(
       new HtmlWebpackPlugin({
         template: "src/index.html",
+        inject: "body",
+        scriptLoading: "defer",
       }),
     );
   }

package/CONTRIBUTING.md

@@ -1,34 +0,0 @@
-# Contributing
-
-## Development
-
-If you want to develop the report directly, using webpack with hot module replacement feature, follow the next steps:
-
-### 1. Install the dependencies:
-
-```bash
-$ yarn install
-```
-
-### 2. Copy generated Allure Awesome data files
-
-Copy `data` and `widgets` directories from the previously generated Allure Awesome report to `out/dev` directory.
-
-If you don't have one, you can generate Allure Awesome report in the sandbox package:
-
-```bash
-# cd to the web-awesome package
-yarn workspace @allurereport/sandbox t
-yarn workspace @allurereport/sandbox report
-mkdir -p out/dev
-cp -rf ../sandbox/allure-report/awesome/data out/dev
-cp -rf ../sandbox/allure-report/awesome/widgets out/dev  
-```
-
-### 3. Run dev script
-
-```bash
-yarn workspace @allurereport/web-awesome dev
-```
-
-Open the started report in the browser: http://localhost:8080.