@allurereport/web-awesome 3.0.0-beta.4 → 3.0.0-beta.6

package/src/stores/testResults.ts

@@ -9,6 +9,30 @@ export const testResultStore = signal<StoreSignalState<Record<string, AllureAwes
   data: undefined,
 });
 
+export const testResultNavStore = signal<StoreSignalState<string[]>>({
+  loading: true,
+  error: undefined,
+  data: undefined,
+});
+
+export const fetchTestResultNav = async () => {
+  try {
+    const data = await fetchReportJsonData<string[]>("widgets/nav.json");
+
+    testResultNavStore.value = {
+      data,
+      error: undefined,
+      loading: false,
+    };
+  } catch (err) {
+    testResultNavStore.value = {
+      ...testResultNavStore.value,
+      error: err.message,
+      loading: false,
+    };
+  }
+};
+
 export const fetchTestResult = async (testResultId: string) => {
   if (!testResultId || testResultStore.value.data?.[testResultId]) {
     return;
@@ -18,12 +42,10 @@ export const fetchTestResult = async (testResultId: string) => {
     ...testResultStore.value,
     loading: true,
     error: undefined,
-  }
+  };
 
   try {
-    const data = await fetchReportJsonData<AllureAwesomeTestResult>(
-      `data/test-results/${testResultId}.json`,
-    );
+    const data = await fetchReportJsonData<AllureAwesomeTestResult>(`data/test-results/${testResultId}.json`);
 
     testResultStore.value = {
       data: { ...testResultStore.value.data, [testResultId]: data },

package/src/stores/tree.ts

@@ -1,14 +1,108 @@
 import { fetchReportJsonData } from "@allurereport/web-commons";
-import { signal } from "@preact/signals";
+import { computed, signal } from "@preact/signals";
 import type { StoreSignalState } from "@/stores/types";
+import { createRecursiveTree, isRecursiveTreeEmpty } from "@/utils/treeFilters";
+import type {AllureAwesomeStatus, AllureAwesomeTree, AllureAwesomeTreeGroup} from "../../types";
 
-export const treeStore = signal<StoreSignalState<any>>({
+export type TreeSortBy = "order" | "duration" | "status" | "alphabet";
+export type TreeDirection = "asc" | "desc";
+export type TreeFilters = "flaky" | "retry" | "new";
+export type TreeFiltersState = {
+  query: string;
+  status: AllureAwesomeStatus;
+  filter: Record<TreeFilters, boolean>;
+  sortBy: TreeSortBy;
+  direction: TreeDirection;
+};
+
+export const treeStore = signal<StoreSignalState<AllureAwesomeTree>>({
   loading: true,
   error: undefined,
   data: undefined,
 });
 
-export const fetchTreeData = async (treeName: string) => {
+export const noTests = computed(() => !Object.keys(treeStore?.value?.data?.leavesById).length);
+
+export const treeFiltersStore = signal<TreeFiltersState>({
+  query: "",
+  status: "total",
+  filter: {
+    flaky: false,
+    retry: false,
+    new: false,
+  },
+  sortBy: "order",
+  direction: "asc",
+});
+
+export const filteredTree = computed(() => {
+  const { root, leavesById, groupsById } = treeStore.value.data;
+
+  return createRecursiveTree({
+    group: root as AllureAwesomeTreeGroup,
+    leavesById,
+    groupsById,
+    filterOptions: treeFiltersStore.value,
+  });
+});
+
+export const noTestsFound = computed(() => {
+  return isRecursiveTreeEmpty(filteredTree.value);
+});
+
+export const clearTreeFilters = () => {
+  treeFiltersStore.value = {
+    query: "",
+    status: "total",
+    filter: {
+      flaky: false,
+      retry: false,
+      new: false,
+    },
+    sortBy: "order",
+    direction: "asc",
+  };
+};
+
+export const setTreeQuery = (query: string) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    query,
+  };
+};
+
+export const setTreeStatus = (status: AllureAwesomeStatus) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    status,
+  };
+};
+
+export const setTreeSortBy = (sortBy: TreeSortBy) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    sortBy,
+  };
+};
+
+export const setTreeDirection = (direction: TreeDirection) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    direction,
+  };
+};
+
+export const setTreeFilter = (filterKey: TreeFilters, value: boolean) => {
+  treeFiltersStore.value = {
+    ...treeFiltersStore.value,
+    filter: {
+      ...treeFiltersStore.value.filter,
+      [filterKey]: value,
+    },
+  };
+};
+
+export const fetchTreeData = async () => {
   treeStore.value = {
     ...treeStore.value,
     loading: true,
@@ -16,7 +110,7 @@ export const fetchTreeData = async (treeName: string) => {
   };
 
   try {
-    const res = await fetchReportJsonData(`widgets/${treeName}.json`);
+    const res = await fetchReportJsonData<AllureAwesomeTree>("widgets/tree.json");
 
     treeStore.value = {
       data: res,

package/src/types/globals.d.ts

@@ -2,7 +2,12 @@ declare module "*.svg" {
   const content: {
     id: string;
   };
+
   export default content;
 }
 
-declare module "*.scss";
+declare module "*.scss" {
+  const content: Record<string, string>;
+
+  export = content;
+}

package/src/utils/copyToClipboard.ts

@@ -1,3 +1,16 @@
 export const copyToClipboard = async (text: string) => {
-  await navigator.clipboard.writeText(text);
+  if (navigator.clipboard) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textarea);
 };

package/src/utils/treeFilters.ts

@@ -1,5 +1,5 @@
-import type { DefaultTreeData } from "@allurereport/core-api";
-import type { ReportContentContextValue } from "@/components/app/ReportBody/context";
+import type { TreeFiltersState } from "@/stores/tree";
+import type { AllureAwesomeRecursiveTree, AllureAwesomeTree, AllureAwesomeTreeGroup } from "../../types";
 
 const statusOrder = {
   failed: 1,
@@ -9,142 +9,95 @@ const statusOrder = {
   unknown: 5,
 };
 
-const filterByQuery = ({
-  leaves,
-  leavesById,
-  query,
-}: {
-  leaves: string[];
-  leavesById: DefaultTreeData["leavesById"];
-  query: string;
-}) =>
-  leaves.filter((leafId) => {
-    const lowerCaseQuery = query.toLocaleLowerCase();
-    const foundById = leavesById[leafId].nodeId.toLowerCase().includes(lowerCaseQuery);
-    const foundByName = leavesById[leafId].name.toLowerCase().includes(lowerCaseQuery);
+export const filterLeaves = (
+  leaves: string[] = [],
+  leavesById: AllureAwesomeTree["leavesById"],
+  filterOptions?: TreeFiltersState,
+) => {
+  const filteredLeaves = [...leaves]
+    .map((leafId) => leavesById[leafId])
+    .filter((leaf) => {
+      const queryMatched = !filterOptions?.query || leaf.name.toLowerCase().includes(filterOptions.query.toLowerCase());
+      const statusMatched =
+        !filterOptions?.status || filterOptions?.status === "total" || leaf.status === filterOptions.status;
+      const flakyMatched = !filterOptions?.filter?.flaky || leaf.flaky;
+      const retryMatched = !filterOptions?.filter?.retry || leaf.retry;
+      // TODO: at this moment we don't have a new field implementation even in the generator
+      // const newMatched = !filterOptions?.filter?.new || leaf.new;
+
+      return [queryMatched, statusMatched, flakyMatched, retryMatched].every(Boolean);
+    });
 
-    return foundById || foundByName;
-  });
+  if (!filterOptions) {
+    return filteredLeaves;
+  }
 
-const sortedLeaves = ({
-  leavesFiltered,
-  leavesById,
-  filterOptions,
-}: {
-  leavesFiltered: string[];
-  leavesById: DefaultTreeData["leavesById"];
-  filterOptions: ReportContentContextValue;
-}) => {
-  leavesFiltered.sort((a, b) => {
-    const leafA = leavesById[a];
-    const leafB = leavesById[b];
-    const filterDirection = filterOptions.direction === "asc";
+  return filteredLeaves.sort((a, b) => {
+    const asc = filterOptions.direction === "asc";
 
     switch (filterOptions.sortBy) {
+      case "order":
+        return asc ? a.groupOrder - b.groupOrder : b.groupOrder - a.groupOrder;
       case "duration":
-        return filterDirection
-          ? (leafA.duration || 0) - (leafB.duration || 0)
-          : (leafB.duration || 0) - (leafA.duration || 0);
+        return asc ? (a.duration || 0) - (b.duration || 0) : (b.duration || 0) - (a.duration || 0);
       case "alphabet":
-        return filterDirection ? leafA.name.localeCompare(leafB.name) : leafB.name.localeCompare(leafA.name);
+        return asc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
       case "status": {
-        const statusA = statusOrder[leafA.status] || statusOrder.unknown;
-        const statusB = statusOrder[leafB.status] || statusOrder.unknown;
-        return filterDirection ? statusA - statusB : statusB - statusA;
+        const statusA = statusOrder[a.status] || statusOrder.unknown;
+        const statusB = statusOrder[b.status] || statusOrder.unknown;
+
+        return asc ? statusA - statusB : statusB - statusA;
       }
       default:
         return 0;
     }
   });
-
-  if (filterOptions.direction === "desc" && ["order"].includes(filterOptions.sortBy as string)) {
-    leavesFiltered.reverse();
-  }
-
-  return leavesFiltered;
 };
 
-const filterByTestType = ({
-  leaves,
-  leavesById,
-  filterTypes,
-}: {
-  leaves: string[];
-  leavesById: DefaultTreeData["leavesById"];
-  filterTypes: ReportContentContextValue["filter"];
-}) => {
-  return leaves.filter((leafId) => {
-    const leaf = leavesById[leafId];
-    return (!filterTypes.flaky || leaf.flaky) && (!filterTypes.retry || leaf.retry) && (!filterTypes.new || leaf.new);
-  });
-};
-
-export const filterLeaves = (
-  leaves: string[],
-  leavesById: DefaultTreeData["leavesById"],
-  statusFilter?: string,
-  filterOptions?: ReportContentContextValue,
-): string[] => {
-  let leavesFiltered =
-    statusFilter === "total" || !statusFilter
-      ? filterByQuery({
-          leaves,
+/**
+ * Fills the given tree from generator and returns recursive tree which includes leaves data instead of their IDs
+ * Filters leaves when `filterOptions` property is provided
+ * @param payload
+ */
+export const createRecursiveTree = (payload: {
+  group: AllureAwesomeTreeGroup;
+  groupsById: AllureAwesomeTree["groupsById"];
+  leavesById: AllureAwesomeTree["leavesById"];
+  filterOptions?: TreeFiltersState;
+}): AllureAwesomeRecursiveTree => {
+  const { group, groupsById, leavesById, filterOptions } = payload;
+  const groupLeaves = group.leaves ?? [];
+
+  return {
+    ...group,
+    // FIXME: don't have any idea, why eslint marks next line as unsafe because it actually has a correct type
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    leaves: filterLeaves(groupLeaves, leavesById, filterOptions),
+    trees: group?.groups
+      ?.filter((groupId) => {
+        const subGroup = groupsById[groupId];
+
+        return subGroup?.leaves?.length || subGroup?.groups?.length;
+      })
+      ?.map((groupId) =>
+        createRecursiveTree({
+          group: groupsById[groupId],
+          groupsById,
           leavesById,
-          query: filterOptions.query,
-        })
-      : leaves.filter((leafId) => leavesById[leafId].status === statusFilter);
-
-  leavesFiltered = filterByQuery({
-    leaves: leavesFiltered,
-    leavesById,
-    query: filterOptions.query,
-  });
-
-  leavesFiltered = filterByTestType({ leaves: leavesFiltered, leavesById, filterTypes: filterOptions.filter });
-
-  leavesFiltered = sortedLeaves({ leavesFiltered, leavesById, filterOptions });
-
-  return leavesFiltered;
+          filterOptions,
+        }),
+      ),
+  };
 };
 
-export const filterGroups = (
-  groups: string[],
-  groupsById: DefaultTreeData["groupsById"],
-  leavesById: DefaultTreeData["leavesById"],
-  statusFilter?: string,
-  filterOptions?: ReportContentContextValue,
-): string[] => {
-  const gro = groups.filter((groupId) => {
-    const group = groupsById?.[groupId];
-    const groupLeaves = filterLeaves((group?.leaves as string[]) || [], leavesById, statusFilter, filterOptions);
-    const filteredSubGroups = group?.groups?.filter((subGroupId: number) => {
-      const subGroup = groupsById?.[subGroupId] as { leaves: string[]; groups: string[] };
-      return (
-        filterLeaves(subGroup?.leaves || [], leavesById, statusFilter, filterOptions).length > 0 ||
-        filterGroups(subGroup?.groups || [], groupsById, leavesById, statusFilter, filterOptions).length > 0
-      );
-    });
-
-    return groupLeaves.length > 0 || (filteredSubGroups && filteredSubGroups.length > 0);
-  });
-
-  const sortedGroups = gro.sort((a, b) => {
-    const leafA = groupsById[a];
-    const leafB = groupsById[b];
-    const filterDirection = filterOptions.direction === "asc";
-
-    switch (filterOptions.sortBy) {
-      case "alphabet": {
-        return filterDirection ? leafA.name.localeCompare(leafB.name) : leafB.name.localeCompare(leafA.name);
-      }
-      default:
-        return 0;
-    }
-  });
+export const isRecursiveTreeEmpty = (tree: AllureAwesomeRecursiveTree) => {
+  if (!tree.trees?.length && !tree.leaves?.length) {
+    return true;
+  }
 
-  if (filterOptions.direction === "desc" && ["order"].includes(filterOptions.sortBy as string)) {
-    sortedGroups.reverse();
+  if (tree.leaves?.length) {
+    return false;
   }
 
-  return sortedGroups;
+  return tree.trees?.every((subTree) => isRecursiveTreeEmpty(subTree));
 };