@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/components/TestResult/TestResultTabs/styles.scss

@@ -0,0 +1,76 @@
+.test-result-tabs {
+  display: flex;
+}
+
+.tabsList {
+  display: flex;
+  overflow-x: auto;
+  flex-grow: 0;
+  max-width: max-content;
+  gap: 8px;
+}
+
+.tab {
+  color: var(--on-text-primary);
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  transform: scale(1);
+  outline: none;
+  background-color: var(--bg-base-primary);
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  transition:
+    transform var(--interaction-transition-duration) ease-out,
+    outline var(--interaction-transition-duration) ease-out,
+    background-color var(--color-change-transition-duration),
+    border-color var(--color-change-transition-duration);
+  margin: 0 0 8px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -8px;
+    width: 100%;
+    left: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+  }
+  &[aria-current] {
+    background-color: var(--bg-base-primary);
+    cursor: default;
+
+    &:after {
+      border-bottom: 2px solid var(--on-support-aldebaran);
+    }
+
+    span {
+      font-weight: bold;
+    }
+  }
+
+  &:hover:not([aria-current]) {
+    background-color: var(--bg-control-flat-medium);
+  }
+
+  &:active:not([aria-current]) {
+    background-color: var(--bg-control-flat-heavy);
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: 0 solid var(--ad-other-focus);
+
+    &:not([aria-current]) {
+      background-color: var(--bg-control-flat-medium);
+    }
+  }
+}

package/src/components/TestResult/TestResultTeardown/index.tsx

@@ -0,0 +1,49 @@
+import { allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { ClassicTestResult } from "types";
+import { TestResultDropdown } from "@/components/TestResult/TestResultDropdown";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStep } from "@/components/TestResult/TestResultSteps/testResultStep";
+import { useI18n } from "@/stores/locale";
+
+const typeMap = {
+  before: TestResultStep,
+  after: TestResultStep,
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+};
+
+export type TestResultTeardownProps = {
+  teardown: ClassicTestResult["teardown"];
+};
+
+export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown }) => {
+  const [isOpened, setIsOpen] = useState(false);
+  const { t } = useI18n("execution");
+
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={allureIcons.lineHelpersFlag}
+        isOpened={isOpened}
+        setIsOpen={setIsOpen}
+        counter={teardown?.length}
+        title={t("teardown")}
+      />
+      {isOpened && (
+        <div className={styles["test-result-steps-root"]}>
+          {teardown?.map((item, key) => {
+            const StepComponent = typeMap[item.type];
+            return StepComponent ? (
+              // FIXME: use proper type in the StepComponent component
+              // @ts-ignore
+              <StepComponent item={item} stepIndex={key + 1} key={key} className={styles["test-result-step-root"]} />
+            ) : null;
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/{testresult → TestResult}/TestResultView.js

@@ -1,8 +1,8 @@
 import { View } from "backbone.marionette";
 import { findWhere } from "underscore";
+import ModalView from "@/components/Modal/ModalView.js";
 import AttachmentView from "@/components/attachment/AttachmentView.js";
 import ErrorSplashView from "@/components/error-splash/ErrorSplashView.js";
-import ModalView from "@/components/modal/ModalView.js";
 import TestResultOverviewView from "@/components/testresult-overview/TestResultOverviewView.js";
 import { behavior, className, on, regions } from "@/decorators/index.js";
 import translate from "@/helpers/t.js";

package/src/components/TestResult/index.tsx

@@ -0,0 +1,54 @@
+import type { FunctionComponent, FunctionalComponent } from "preact";
+import type { ClassicTestResult } from "types";
+import * as styles from "@/components/BaseLayout/styles.scss";
+import { TestResultAttachmentView } from "@/components/TestResult/TestResultAttachmentsView";
+import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
+import TestResultHistoryView from "@/components/TestResult/TestResultHistory";
+import { TestResultInfo } from "@/components/TestResult/TestResultInfo";
+import { TestResultOverview } from "@/components/TestResult/TestResultOverview";
+import { TestResultRetriesView } from "@/components/TestResult/TestResultRetriesView";
+import { TestResultTabs, useTestResultTabsContext } from "@/components/TestResult/TestResultTabs";
+
+export type TestResultViewProps = {
+  testResult?: ClassicTestResult;
+};
+
+const TestResultView: FunctionalComponent<TestResultViewProps> = ({ testResult }) => {
+  const { currentTab } = useTestResultTabsContext();
+  const viewMap: Record<string, any> = {
+    overview: TestResultOverview,
+    history: TestResultHistoryView,
+    attachments: TestResultAttachmentView,
+    retries: TestResultRetriesView,
+  };
+  const ViewComponent = viewMap[currentTab];
+
+  return <ViewComponent testResult={testResult} />;
+};
+
+export type TestResultContentProps = {
+  testResult?: ClassicTestResult;
+};
+
+const TestResultContent: FunctionalComponent<TestResultContentProps> = ({ testResult }) => {
+  return (
+    <TestResultTabs initialTab="overview">
+      <TestResultInfo testResult={testResult} />
+      <TestResultView testResult={testResult} />
+    </TestResultTabs>
+  );
+};
+
+export type TestResultProps = {
+  testResult?: ClassicTestResult;
+};
+
+const TestResult: FunctionComponent<TestResultProps> = ({ testResult }) => (
+  <>
+    <div className={styles.content}>
+      {testResult ? <TestResultContent testResult={testResult} /> : <TestResultEmpty />}
+    </div>
+  </>
+);
+
+export default TestResult;

package/src/components/TestResultView/index.tsx

@@ -0,0 +1,31 @@
+import { Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import TestResult from "@/components/TestResult";
+import TestResultEmpty from "@/components/TestResult/TestResultEmpty";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+
+export const TestResultView = () => {
+  const { params } = route.value;
+  const { id: testResultId } = params;
+
+  useEffect(() => {
+    fetchTestResult(testResultId);
+  }, []);
+
+  return (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderError={() => <TestResultEmpty />}
+      renderData={(testResultItem) => (
+        <>
+          <div key={testResultId}>
+            <TestResult testResult={testResultItem} />
+          </div>
+        </>
+      )}
+    />
+  );
+};

package/src/components/ThemeButton/ThemeButton.tsx

@@ -0,0 +1,20 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+export const ThemeButton = () => {
+  const theme = themeStore.value;
+
+  useEffect(() => {
+    getTheme();
+  }, []);
+
+  return (
+    <IconButton
+      onClick={toggleTheme}
+      style="ghost"
+      icon={theme === "light" ? allureIcons.lineShapesMoon : allureIcons.lineShapesSun}
+      size="s"
+    />
+  );
+};

package/src/components/Timeline/index.tsx

@@ -0,0 +1,2 @@
+const Overview = () => <div>Overview</div>;
+export default Overview;

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,76 @@
+import type { Statistic } from "@allurereport/core-api";
+import cx from "clsx";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { ClassicRecursiveTree, ClassicStatus } from "types";
+import TreeItem from "@/components/Tree/TreeItem";
+import { route } from "@/stores/router";
+import TreeHeader from "./TreeHeader";
+import * as styles from "./styles.scss";
+
+interface TreeProps {
+  statistic?: Statistic;
+  tree: ClassicRecursiveTree;
+  name?: string;
+  root?: boolean;
+  statusFilter?: ClassicStatus;
+}
+
+const Tree: FunctionComponent<TreeProps> = ({ tree, statusFilter, root, name, statistic }) => {
+  const { params } = route.value;
+  const { id: parentId, testResultId } = params;
+
+  const [isOpened, setIsOpen] = useState(
+    parentId === tree.nodeId || statistic === undefined || !!statistic.failed || !!statistic.broken,
+  );
+  const toggleTree = () => {
+    setIsOpen(!isOpened);
+  };
+  const emptyTree = !tree?.trees?.length && !tree?.leaves?.length;
+
+  if (emptyTree) {
+    return null;
+  }
+
+  const treeContent = isOpened && (
+    <div
+      data-testid="tree-content"
+      className={cx({
+        [styles["tree-content"]]: true,
+        [styles.root]: root,
+      })}
+    >
+      {tree?.trees?.map?.((subTree) => (
+        <Tree
+          key={subTree.nodeId}
+          name={subTree.name}
+          tree={subTree}
+          statistic={subTree.statistic}
+          statusFilter={statusFilter}
+        />
+      ))}
+      {tree?.leaves?.map?.((leaf) => (
+        <TreeItem
+          data-testid="tree-leaf"
+          key={leaf.nodeId}
+          id={leaf.nodeId}
+          name={leaf.name}
+          status={leaf.status}
+          groupOrder={leaf.groupOrder}
+          duration={leaf.duration}
+          parentNodeId={tree.nodeId}
+          isMarked={leaf.nodeId === testResultId}
+        />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={styles.tree}>
+      {name && <TreeHeader categoryTitle={name} isOpened={isOpened} toggleTree={toggleTree} statistic={statistic} />}
+      {treeContent}
+    </div>
+  );
+};
+
+export default Tree;

package/src/components/Tree/TreeHeader.tsx

@@ -0,0 +1,82 @@
+import { type Statistic, statusesList } from "@allurereport/core-api";
+import { Loadable, Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import { type FunctionComponent } from "preact";
+import { ArrowButton } from "@/components/ArrowButton";
+import { statsStore } from "@/stores";
+import { route } from "@/stores/router";
+import { treeFiltersStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+interface TreeHeaderProps {
+  statistic?: Statistic;
+  categoryTitle: string;
+  isOpened: boolean;
+  toggleTree: () => void;
+}
+
+const maxWidthTab = 140;
+const minWidthTab = 46;
+// to make the progress bar more visually responsive for smaller values,
+// we can adjust the formula by adding an offset to stretch the lower part
+// of the logarithmic scale
+const offset = 10;
+
+const progress = (current: number, total: number) => {
+  const logOffset = Math.log(offset);
+  return (Math.log(current + offset) - logOffset) / (Math.log(total + offset) - logOffset);
+};
+
+const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
+  categoryTitle,
+  isOpened,
+  toggleTree,
+  statistic,
+  ...rest
+}) => {
+  const { status: statusFilter } = treeFiltersStore.value;
+
+  return (
+    <Loadable
+      source={statsStore}
+      renderData={(stats: Statistic) => {
+        const width = Math.floor(progress(statistic.total, stats.total) * (maxWidthTab - minWidthTab) + minWidthTab);
+
+        const treeHeaderBar = statistic
+          ? statusesList
+              .map((status) => ({ status, value: statistic[status] }))
+              .filter(
+                ({ status, value }) =>
+                  value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
+              )
+              .map(({ status, value }) => {
+                const className = clsx(styles["tree-header-bar-item"], styles[status]);
+                const style = { flexGrow: value };
+
+                return (
+                  <div key={status} className={className} style={style}>
+                    {value}
+                  </div>
+                );
+              })
+          : null;
+
+        return (
+          <div data-testid="tree-header" {...rest} className={styles["tree-header"]} onClick={toggleTree}>
+            <ArrowButton data-testid="tree-arrow" isOpened={isOpened} />
+            <Text data-testid="tree-header-title" size="m" bold className={styles["tree-header-title"]}>
+              {categoryTitle}
+            </Text>
+            {treeHeaderBar && (
+              <div className={styles["tree-header-bar"]} style={{ width: `${width}px` }}>
+                {treeHeaderBar}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default TreeHeader;

package/src/components/Tree/TreeItem.tsx

@@ -0,0 +1,49 @@
+import { type TestStatus, formatDuration } from "@allurereport/core-api";
+import { Text } from "@allurereport/web-components";
+import clsx from "clsx";
+import type { FunctionComponent } from "preact";
+import TreeItemIcon from "@/components/Tree/TreeItemIcon";
+import { navigateTo, route } from "@/stores/router";
+import * as styles from "./styles.scss";
+
+interface TreeItemProps {
+  name: string;
+  status: TestStatus;
+  duration?: number;
+  id: string;
+  groupOrder: number;
+  parentNodeId?: string;
+  isMarked?: boolean;
+}
+
+export const TreeItem: FunctionComponent<TreeItemProps> = ({
+  name,
+  groupOrder,
+  status,
+  duration,
+  id,
+  parentNodeId,
+  isMarked,
+  ...rest
+}) => {
+  const { tabName } = route.value;
+  const formattedDuration = formatDuration(duration);
+  const navigateToTR = () => navigateTo(`#${tabName}/${parentNodeId || "root"}/${id}`);
+
+  return (
+    <div {...rest} className={clsx(styles["tree-item"], isMarked && styles["tree-item-marked"])} onClick={navigateToTR}>
+      <TreeItemIcon status={status} />
+      <span data-testid="tree-leaf-order" className={styles.order}>
+        {groupOrder}
+      </span>
+      <Text data-testid="tree-leaf-title" className={styles["item-title"]}>
+        {name}
+      </Text>
+      <Text data-testid="tree-leaf-duration" type="ui" size={"m"} className={styles["item-time"]}>
+        {formattedDuration}
+      </Text>
+    </div>
+  );
+};
+
+export default TreeItem;

package/src/components/Tree/TreeItemIcon.tsx

@@ -0,0 +1,32 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+interface TestStatusIconProps {
+  status?: "failed" | "broken" | "passed" | "skipped" | "unknown";
+  className?: string;
+  classNameIcon?: string;
+}
+
+const { solidAlertCircle, solidCheckCircle, solidHelpCircle, solidMinusCircle, solidXCircle } = allureIcons;
+
+const icons = {
+  failed: solidXCircle,
+  broken: solidAlertCircle,
+  passed: solidCheckCircle,
+  skipped: solidMinusCircle,
+  unknown: solidHelpCircle,
+};
+
+const TreeItemIcon: FunctionalComponent<TestStatusIconProps> = ({ status = "unknown", className, classNameIcon }) => {
+  const statusClass = clsx(styles[`status-${status}`], classNameIcon);
+
+  return (
+    <div data-testid={`tree-leaf-status-${status}`} className={clsx(styles["tree-item-icon"], className)}>
+      <SvgIcon className={statusClass} id={icons[status]} />
+    </div>
+  );
+};
+
+export default TreeItemIcon;

package/src/components/Tree/index.tsx

@@ -0,0 +1,60 @@
+import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { ClassicStatus } from "types";
+import Tree from "@/components/Tree/Tree";
+import { useI18n } from "@/stores/locale";
+import { currentTab } from "@/stores/tabs";
+import { clearTreeFilters, filteredTree, noTests, noTestsFound, setTreeStatus, treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export const TreeList = () => {
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    setTreeStatus(currentTab.value as ClassicStatus);
+  }, [currentTab.value]);
+
+  return (
+    <Loadable
+      source={treeStore}
+      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={() => clearTreeFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree tree={filteredTree.value} statusFilter={currentTab.value as ClassicStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};