@allurereport/web-classic 3.0.0-beta.10

package/test/utils/treeFilters.test.ts

@@ -0,0 +1,448 @@
+import { describe, expect, it } from "vitest";
+import { createRecursiveTree, filterLeaves } from "../../src/utils/treeFilters.js";
+import type { AwesomeTestResult } from "../../types.js";
+
+describe("utils > treeFilters", () => {
+  describe("filterLeaves", () => {
+    it("returns the leaves as is when no filter options are provided", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate + 2000,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        query: "",
+        status: "total",
+        filter: {
+          flaky: false,
+          retry: false,
+          new: false,
+        },
+        sortBy: "order",
+        direction: "asc",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+      ]);
+    });
+
+    it("returns the leaves only matched the status filter", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          status: "passed",
+          start: baseDate,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          status: "failed",
+          start: baseDate + 1000,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          status: "passed",
+          start: baseDate + 2000,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        query: "",
+        status: "passed",
+        filter: {
+          flaky: false,
+          retry: false,
+          new: false,
+        },
+        sortBy: "order",
+        direction: "asc",
+      });
+
+      expect(result).toEqual([expect.objectContaining({ name: "a1" }), expect.objectContaining({ name: "c3" })]);
+    });
+
+    it("returns the flaky leaves", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate,
+          flaky: true,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+          flaky: false,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate + 2000,
+          flaky: true,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        query: "",
+        status: "total",
+        filter: {
+          flaky: true,
+          retry: false,
+          new: false,
+        },
+        sortBy: "order",
+        direction: "asc",
+      });
+
+      expect(result).toEqual([expect.objectContaining({ name: "a1" }), expect.objectContaining({ name: "c3" })]);
+    });
+
+    it("returns leaves which contains retries", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate,
+          retry: true,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+          retry: false,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate + 2000,
+          retry: false,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        filter: {
+          retry: true,
+        },
+      });
+
+      expect(result).toEqual([expect.objectContaining({ name: "a1" })]);
+    });
+
+    it("sorts leave by duration in ascending order", () => {
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          duration: 1000,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          duration: 2000,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          duration: 3000,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "asc",
+        sortBy: "duration",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+      ]);
+    });
+
+    it("sorts leave by duration in descending order", () => {
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          duration: 1000,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          duration: 2000,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          duration: 3000,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "desc",
+        sortBy: "duration",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "a1" }),
+      ]);
+    });
+
+    it("sorts leaves by title in ascending order", () => {
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "asc",
+        sortBy: "alphabet",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+      ]);
+    });
+
+    it("sorts leaves by title in descending order", () => {
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "desc",
+        sortBy: "alphabet",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "a1" }),
+      ]);
+    });
+
+    it("sorts leaves by status in ascending order", () => {
+      const leaves = ["a1", "b2", "c3", "d4", "e5"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          status: "passed",
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          status: "failed",
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          status: "broken",
+        } as AwesomeTestResult,
+        d4: {
+          name: "d4",
+          status: "unknown",
+        } as AwesomeTestResult,
+        e5: {
+          name: "e5",
+          status: "skipped",
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "asc",
+        sortBy: "status",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "e5" }),
+        expect.objectContaining({ name: "d4" }),
+      ]);
+    });
+
+    it("sorts leaves by status in descending order", () => {
+      const leaves = ["a1", "b2", "c3", "d4", "e5"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          status: "passed",
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          status: "failed",
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          status: "broken",
+        } as AwesomeTestResult,
+        d4: {
+          name: "d4",
+          status: "unknown",
+        } as AwesomeTestResult,
+        e5: {
+          name: "e5",
+          status: "skipped",
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "desc",
+        sortBy: "status",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "d4" }),
+        expect.objectContaining({ name: "e5" }),
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "b2" }),
+      ]);
+    });
+
+    it("sorts leaves by order number in ascending order", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate + 2000,
+          groupOrder: 3,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+          groupOrder: 2,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate,
+          groupOrder: 1,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "asc",
+        sortBy: "order",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "c3" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "a1" }),
+      ]);
+    });
+
+    it("sorts leaves by order number in descending order", () => {
+      const baseDate = Date.now();
+      const leaves = ["a1", "b2", "c3"];
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate + 2000,
+          groupOrder: 3,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+          groupOrder: 2,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate,
+          groupOrder: 1,
+        } as AwesomeTestResult,
+      };
+      const result = filterLeaves(leaves, leavesById, {
+        direction: "desc",
+        sortBy: "order",
+      });
+
+      expect(result).toEqual([
+        expect.objectContaining({ name: "a1" }),
+        expect.objectContaining({ name: "b2" }),
+        expect.objectContaining({ name: "c3" }),
+      ]);
+    });
+  });
+
+  describe("createRecursiveTree", () => {
+    it("creates recursive tree with filtered and sorted leaves objects", () => {
+      const baseDate = Date.now();
+      const group = {
+        leaves: ["a1"],
+        groups: ["a1"],
+      };
+      const leavesById = {
+        a1: {
+          name: "a1",
+          start: baseDate,
+        } as AwesomeTestResult,
+        b2: {
+          name: "b2",
+          start: baseDate + 1000,
+        } as AwesomeTestResult,
+        c3: {
+          name: "c3",
+          start: baseDate + 2000,
+        } as AwesomeTestResult,
+      };
+      const groupsById = {
+        a1: {
+          leaves: ["b2"],
+          groups: ["b2"],
+        },
+        b2: {
+          leaves: ["c3"],
+          groups: [],
+        },
+      };
+      const result = createRecursiveTree({
+        group,
+        leavesById,
+        groupsById,
+        filterOptions: {
+          sortBy: "alphabet",
+          direction: "asc",
+        },
+      });
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          leaves: [expect.objectContaining({ name: "a1" })],
+          trees: [
+            expect.objectContaining({
+              leaves: [expect.objectContaining({ name: "b2" })],
+              trees: [
+                expect.objectContaining({
+                  leaves: [expect.objectContaining({ name: "c3" })],
+                  trees: [],
+                }),
+              ],
+            }),
+          ],
+        }),
+      );
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+    },
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "jsxImportSource": "preact",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "useUnknownInCatchVariables": false,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["ES2019", "dom"],
+    // node types should not be used in web-commons
+    "types": []
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

package/types.d.ts

@@ -0,0 +1,85 @@
+import type {
+  AttachmentTestStepResult,
+  DefaultTreeGroup,
+  HistoryTestResult,
+  TestFixtureResult,
+  TestResult,
+  TestStatus,
+  TestStepResult,
+  TreeData,
+  WithChildren,
+} from "@allurereport/core-api";
+
+export type Allure2ReportOptions = {
+  reportName?: string;
+  reportLanguage?: string;
+  createdAt: number;
+};
+
+export type AwesomeReportOptions = {
+  reportName?: string;
+  logo?: string;
+  theme?: "light" | "dark";
+  groupBy?: string[];
+  reportLanguage?: "en" | "ru";
+  createdAt: number;
+  reportUuid: string;
+};
+
+export type AwesomeFixtureResult = Omit<
+  TestFixtureResult,
+  "testResultIds" | "start" | "stop" | "sourceMetadata" | "steps"
+> & {
+  steps: AwesomeTestStepResult[];
+};
+
+export type AwesomeStatus = TestStatus | "total";
+
+export type AwesomeTestStepResult = TestStepResult;
+
+type AwesomeBreadcrumbItem = string[] | string[][];
+
+export type AwesomeTestResult = Omit<
+  TestResult,
+  | "runSelector"
+  | "sourceMetadata"
+  | "expectedResult"
+  | "expectedResultHtml"
+  | "precondition"
+  | "preconditionHtml"
+  | "steps"
+> & {
+  setup: AwesomeFixtureResult[];
+  teardown: AwesomeFixtureResult[];
+  steps: AwesomeTestStepResult[];
+  history: HistoryTestResult[];
+  retries?: TestResult[];
+  groupedLabels: Record<string, string[]>;
+  attachments?: AttachmentTestStepResult[];
+  breadcrumbs: AwesomeBreadcrumbItem[];
+  order?: number;
+  groupOrder?: number;
+  retry: boolean;
+  time?: Record<string, string[]>;
+  extra?: { severity: string };
+};
+
+export type AwesomeTreeLeaf = Pick<
+  AwesomeTestResult,
+  "duration" | "name" | "start" | "status" | "groupOrder" | "flaky" | "retry"
+> & {
+  nodeId: string;
+};
+
+export type AwesomeTreeGroup = WithChildren & DefaultTreeGroup & { nodeId: string };
+
+export type AwesomeTree = TreeData<AwesomeTreeLeaf, AwesomeTreeGroup>;
+
+/**
+ * Tree which contains tree leaves instead of their IDs and recursive trees structure instead of groups
+ */
+export type AwesomeRecursiveTree = DefaultTreeGroup & {
+  nodeId: string;
+  leaves: AwesomeTreeLeaf[];
+  trees: AwesomeRecursiveTree[];
+};

package/vitest.config.ts

@@ -0,0 +1,18 @@
+import { createRequire } from "node:module";
+import { defineConfig } from "vitest/config";
+
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  test: {
+    include: ["./test/**/*.test.ts"],
+    setupFiles: [require.resolve("allure-vitest/setup")],
+    reporters: [
+      "default",
+      [
+        "allure-vitest/reporter",
+        { resultsDir: "./out/allure-results", globalLabels: [{ name: "module", value: "web-awesome" }] },
+      ],
+    ],
+  },
+});

package/webpack.config--old.js

@@ -0,0 +1,127 @@
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import { dirname, join } from "node:path";
+import { env } from "node:process";
+import { fileURLToPath } from "node:url";
+import SpriteLoaderPlugin from "svg-sprite-loader/plugin.js";
+import webpack from "webpack";
+import { WebpackManifestPlugin } from "webpack-manifest-plugin";
+import * as utils from "./webpack/utils.js";
+
+const { SINGLE_FILE_MODE } = env;
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default (env, argv) => {
+  const config = {
+    entry: "./src/index.js",
+    output: {
+      path: join(__dirname, SINGLE_FILE_MODE ? "dist/single" : "dist/multi"),
+      filename: "app-[hash:8].js",
+      assetModuleFilename: `[name]-[hash:8][ext]`,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(ts|js)x?$/,
+          use: "babel-loader",
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, "css-loader"]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: "css-loader",
+              // TODO: uncomment when we'll start migration to preact
+              // options: {
+              //   modules: true,
+              // },
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                api: "modern",
+              }
+            },
+          ],
+        },
+        {
+          test: /\.hbs$/,
+          use: {
+            loader: "handlebars-loader",
+            options: {
+              helperDirs: [
+                utils.root("src/helpers"),
+                utils.root("src/blocks"),
+              ],
+            },
+          },
+        },
+        {
+          test: /translations\/\D+\.json$/,
+          type: "asset/source",
+        },
+        // FIXME: how can we solve the problem with svg in css?
+        // {
+        //   test: /\.svg$/,
+        //   type: "asset/inline",
+        //   resourceQuery: /inline/,
+        // },
+        {
+          test: /\.svg$/,
+          loader: "svg-sprite-loader",
+        },
+        {
+          test: /\.(ico)(\?.*)?$/,
+          loader: "file-loader",
+        },
+        {
+          test: /\.(png|jpe?g|gif|woff2?|otf|ttf|eot)$/i,
+          type: SINGLE_FILE_MODE ? "asset/inline" : "asset/resource",
+        },
+      ],
+    },
+    devServer: {
+      open: true,
+      hot: true,
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        "DEVELOPMENT": argv?.mode === "development",
+        "process.env": {
+          DEBUG_INFO_ENABLED: argv?.mode === "development",
+        },
+      }),
+      new MiniCssExtractPlugin({
+        filename: "styles-[hash:8].css",
+      }),
+      new SpriteLoaderPlugin(),
+      new WebpackManifestPlugin({
+        publicPath: "",
+      }),
+    ],
+    resolve: {
+      modules: ["node_modules"],
+      extensions: [".js", ".json"],
+      alias: {
+        "@": join(__dirname, "src"),
+      },
+    },
+  };
+
+  if (SINGLE_FILE_MODE) {
+    config.optimization = {
+      splitChunks: false,
+    }
+    config.plugins.push(
+      new webpack.optimize.LimitChunkCountPlugin({
+        maxChunks: 1,
+      }),
+    );
+  }
+
+  return config;
+};