Categories awesome implementation

packages/plugin-api/src/utils/tree.ts

@@ -181,7 +181,18 @@ export const createTreeByCategories = <T = TestResult, L = DefaultTreeLeaf, G =
 };
 
 export const byCategories = (item: TestResult): string[][] => {
-  return [item.categories?.map((category: any) => category.name)];
+  const categories = item.categories ?? [];
+  const result: string[][] = [];
+
+  for (const category of categories) {
+    result.push([category.name]);
+  }
+
+  if (item.error?.message) {
+    result.push([item.error?.message]);
+  }
+
+  return result;
 };
 
 /**

packages/plugin-awesome/src/categories.ts

@@ -0,0 +1,55 @@
+import type { TestStatus } from "@allurereport/core-api";
+import type { AwesomeCategory } from "./model.js";
+
+const productDefects: AwesomeCategory = {
+  name: "Product defects",
+  matchedStatuses: ["failed"],
+};
+
+const testDefects: AwesomeCategory = {
+  name: "Test defects",
+  matchedStatuses: ["broken"],
+};
+
+export const matchCategories = (
+  categories: AwesomeCategory[],
+  result: { message?: string; trace?: string; status: TestStatus; flaky: boolean },
+) => {
+  const matched = categories.filter((category) => categoryMatch(category, result));
+
+  if (matched.length === 0 && categoryMatch(productDefects, result)) {
+    matched.push(productDefects);
+  }
+  if (matched.length === 0 && categoryMatch(testDefects, result)) {
+    matched.push(testDefects);
+  }
+  return matched;
+};
+
+const categoryMatch = (
+  category: AwesomeCategory,
+  result: { message?: string; trace?: string; status: TestStatus; flaky: boolean },
+): boolean => {
+  const { status, message, trace, flaky } = result;
+  const matchesStatus =
+    !category.matchedStatuses || category.matchedStatuses.length === 0 || category.matchedStatuses.includes(status);
+  const matchesMessage = match(category.messageRegex, message);
+  const matchesTrace = match(category.traceRegex, trace);
+  const matchesFlaky = (category.flaky ?? flaky) === flaky;
+
+  return matchesStatus && matchesMessage && matchesTrace && matchesFlaky;
+};
+
+const match = (regex?: string, value?: string): boolean => {
+  if (!regex) {
+    return true;
+  }
+  if (!value) {
+    return false;
+  }
+  try {
+    return new RegExp(regex, "s").test(value);
+  } catch (ignored) {
+    return false;
+  }
+};

packages/sandbox/vitest.config.ts

@@ -26,11 +26,11 @@ export default defineConfig({
           },
           categories: [
             {
-              name: "kek",
+              name: "Failed tests",
               matchedStatuses: [Status.FAILED],
             },
             {
-              name: "kek-lol",
+              name: "Passed",
               matchedStatuses: [Status.PASSED],
             },
           ],

packages/web-awesome/src/components/Categories/index.tsx

@@ -0,0 +1,82 @@
+import { Button, Loadable, PageLoader, Text, Tree } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { AwesomeStatus } from "types";
+import { statsStore } from "@/stores";
+import {
+  categoriesStore,
+  clearCategoriesFilters,
+  fetchCategoriesData,
+  filteredCategories,
+  noTests,
+  noTestsFound,
+} from "@/stores/categories";
+import { useI18n } from "@/stores/locale";
+import { navigateTo, route } from "@/stores/router";
+import { currentTab } from "@/stores/tabs";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+import { treeFiltersStore } from "@/stores/treeFilters";
+import * as styles from "./styles.scss";
+
+const Categories = () => {
+  const { t } = useI18n("empty");
+  const { id } = route.value;
+
+  useEffect(() => {
+    fetchCategoriesData();
+  }, []);
+
+  return (
+    <Loadable
+      source={categoriesStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (noTests.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearCategoriesFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree
+              collapsedTrees={collapsedTrees.value}
+              toggleTree={toggleTree}
+              treeFiltersStore={treeFiltersStore}
+              navigateTo={navigateTo}
+              statsStore={statsStore}
+              tree={filteredCategories.value}
+              statusFilter={currentTab.value as AwesomeStatus}
+              routeId={id}
+              root
+            />
+          </div>
+        );
+      }}
+    />
+  );
+};
+export default Categories;

packages/web-awesome/src/components/Categories/styles.scss

@@ -0,0 +1,196 @@
+.suites {
+  padding: 8px;
+}
+.suites-title {
+  display: flex;
+  margin-bottom: 24px;
+}
+.wrapper {
+  display: flex;
+}
+
+.tree {
+  position: relative;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-list {
+  min-height: 128px;
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.tree-header-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.tree-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.tree-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+}
+
+.tree-count {
+  display: flex;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 6px 6px;
+  transition: background-color 300ms;
+  gap: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+.tree-item-marked {
+  background: var(--bg-base-secondary);
+}
+
+.item-title {
+  display: flex;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+}
+
+.test-count {
+  display: flex;
+  margin-left: auto;
+}
+
+.tree-content:not(.root) {
+  display: block;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-icon {
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.tree-header-bar {
+  display: inline-flex;
+  font-family: var(--font-family);
+  max-width: 140px;
+  min-width: 46px;
+  border-radius: 4px;
+  height: 12px;
+  background: var(--on-text-hint);
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: var(--font-weight-extra-bold);
+  line-height: 12px;
+  overflow: hidden;
+}
+
+.tree-header-bar-item {
+  display: flex;
+  min-width: 16px;
+  justify-content: center;
+  text-align: center;
+  padding: 0 6px;
+  flex-grow: 1;
+
+  &.passed {
+    background-color: var(--bg-support-castor);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.failed {
+    background-color: var(--bg-support-capella);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.broken {
+    background-color: var(--bg-support-atlas);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.skipped {
+    background-color: var(--bg-support-rau);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.unknown {
+    background-color: var(--bg-support-skat);
+    color: var(--constant-on-text-primary);
+  }
+}
+
+.tree-empty-results {
+  padding: 44px 24px;
+  text-align: center;
+}
+
+.tree-empty-results-title {
+  color: var(--on-text-secondary);
+}
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+  width: 24px;
+}