@allurereport/web-awesome 3.0.0-beta.10

package/src/components/TestResult/TestResultSteps/testResultStep.tsx

@@ -0,0 +1,84 @@
+import type { DefaultTestStepResult } from "@allurereport/core-api";
+import { Code, Text, TreeItemIcon, allureIcons } from "@allurereport/web-components";
+import type { FunctionComponent } from "preact";
+import { useState } from "preact/hooks";
+import { ArrowButton } from "@/components/ArrowButton";
+import { MetadataList } from "@/components/Metadata";
+import { type MetadataItem } from "@/components/ReportMetadata";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
+import { TestResultStepInfo } from "@/components/TestResult/TestResultSteps/testResultStepInfo";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+export const TestResultStepParameters = (props: { parameters: DefaultTestStepResult["parameters"] }) => {
+  const { parameters } = props;
+
+  return (
+    <div className={styles["test-result-parameters"]}>
+      <MetadataList size={"s"} envInfo={parameters as unknown as MetadataItem[]} columns={1} />
+    </div>
+  );
+};
+export const TestResultStepsContent = (props: { item: DefaultTestStepResult }) => {
+  const { item } = props;
+
+  return (
+    <div className={styles["test-result-step-content"]}>
+      {Boolean(item?.parameters?.length) && <TestResultStepParameters parameters={item.parameters} />}
+      {Boolean(item?.steps?.length) && (
+        <>
+          {item.steps?.map((subItem, key) => {
+            if (subItem.type === "step") {
+              return <TestResultStep stepIndex={key + 1} key={key} item={subItem} />;
+            }
+
+            if (subItem.type === "attachment") {
+              return <TestResultAttachment stepIndex={key + 1} key={key} item={subItem} />;
+            }
+
+            return null;
+          })}
+        </>
+      )}
+    </div>
+  );
+};
+
+export const TestResultStep: FunctionComponent<{
+  item: DefaultTestStepResult;
+  stepIndex?: number;
+  className?: string;
+}> = ({ item, stepIndex }) => {
+  const isEarlyOpened = collapsedTrees.value.has(item.stepId);
+  const [isOpened, setIsOpen] = useState(isEarlyOpened || false);
+  const hasContent = Boolean(item?.steps?.length || item?.parameters?.length);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(item.stepId);
+  };
+
+  return (
+    <div className={styles["test-result-step"]}>
+      <div className={styles["test-result-step-header"]} onClick={handleClick}>
+        {!hasContent ? (
+          <div className={styles["test-result-strut"]} />
+        ) : (
+          <ArrowButton
+            isOpened={isOpened}
+            icon={allureIcons.arrowsChevronDown}
+            iconSize={"xs"}
+            className={!hasContent ? styles["test-result-visibility-hidden"] : ""}
+          />
+        )}
+        <TreeItemIcon status={item.status} />
+        <Code size={"s"} className={styles["test-result-step-number"]}>
+          {stepIndex}
+        </Code>
+        <Text className={styles["test-result-header-text"]}>{item.name}</Text>
+        <TestResultStepInfo item={item} />
+      </div>
+      {hasContent && isOpened && <TestResultStepsContent item={item} />}
+    </div>
+  );
+};

package/src/components/TestResult/TestResultSteps/testResultStepInfo.tsx

@@ -0,0 +1,30 @@
+import { type DefaultTestStepResult, formatDuration } from "@allurereport/core-api";
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+
+export const TestResultStepInfo = (props: { item: DefaultTestStepResult }) => {
+  const { item } = props;
+  const formattedDuration = formatDuration(item?.duration as number);
+  const stepLength = item.steps?.length;
+  const attachmentLength = item.steps?.filter((step) => step.type === "attachment")?.length;
+
+  return (
+    <div className={styles["item-info"]}>
+      {Boolean(stepLength) && (
+        <div className={styles["item-info-step"]}>
+          <SvgIcon id={allureIcons.lineArrowsCornerDownRight} className={styles["item-info-step-icon"]} />
+          <Text size={"s"}>{stepLength}</Text>
+        </div>
+      )}
+      {Boolean(attachmentLength) && (
+        <div className={styles["item-info-step"]}>
+          <SvgIcon id={allureIcons.lineFilesFileAttachment2} className={styles["item-info-step-icon"]} />
+          <Text size={"s"}>{attachmentLength}</Text>
+        </div>
+      )}
+      <Text type="ui" size={"s"} className={styles["item-time"]}>
+        {formattedDuration}
+      </Text>
+    </div>
+  );
+};

package/src/components/TestResult/TestResultSteps/wrongAttachment.tsx

@@ -0,0 +1,8 @@
+import * as styles from "@/components/TestResult/TestResultSteps/styles.scss";
+import { useI18n } from "@/stores";
+
+export const EmptyComponent = () => {
+  const { t } = useI18n("errors");
+
+  return <div className={styles["wrong-attachment-sign"]}>{t("missedAttachment")}</div>;
+};

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

@@ -0,0 +1,68 @@
+import { Text } from "@allurereport/web-components";
+import { type ComponentChildren, createContext } from "preact";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { activeTab, navigateTo, route } from "@/stores/router";
+import * as styles from "./styles.scss";
+
+type TestResultTabsContextT = {
+  currentTab: string | undefined;
+  setCurrentTab: (id: string) => void;
+};
+
+const TestResultTabsContext = createContext<TestResultTabsContextT | null>(null);
+
+export const useTestResultTabsContext = () => {
+  const context = useContext(TestResultTabsContext);
+
+  if (!context) {
+    throw new Error("TestResultTabs components must be used within a TestResultTabs component");
+  }
+
+  return context;
+};
+
+export const TestResultTabsProvider = (props: { initialTab?: string; children: ComponentChildren }) => {
+  const { children, initialTab } = props;
+  const [currentTab, setCurrentTab] = useState<string | undefined>(initialTab);
+
+  return (
+    <TestResultTabsContext.Provider value={{ currentTab, setCurrentTab }}>{children}</TestResultTabsContext.Provider>
+  );
+};
+
+export const TestResultTabs = (props: { children: ComponentChildren; initialTab?: string }) => {
+  return <TestResultTabsProvider {...props} />;
+};
+
+export const TestResultTabsList = (props: { children: ComponentChildren }) => {
+  return <div className={styles.tabsList}>{props.children}</div>;
+};
+
+export const TestResultTab = (props: { id: string; children: ComponentChildren; disabled?: boolean }) => {
+  const { currentTab, setCurrentTab } = useTestResultTabsContext();
+  const { id, children } = props;
+  const isActiveFromUrl = activeTab.value === id;
+  const isCurrentTab = isActiveFromUrl ? isActiveFromUrl : currentTab === id;
+
+  useEffect(() => {
+    if (isActiveFromUrl) {
+      setCurrentTab(id);
+    }
+  }, [activeTab.value]);
+
+  const handleTabClick = () => {
+    if (isCurrentTab) {
+      return;
+    }
+    setCurrentTab(id);
+    navigateTo({ ...route.value, params: { ...route.value.params, tabName: id !== "overview" ? id : "" } });
+  };
+
+  return (
+    <button className={styles.tab} onClick={handleTabClick} aria-current={isCurrentTab ? true : undefined}>
+      <Text type="paragraph" size="m">
+        {children}
+      </Text>
+    </button>
+  );
+};

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,59 @@
+import { allureIcons } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import type { AwesomeTestResult } 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";
+import { collapsedTrees, toggleTree } from "@/stores/tree";
+
+const typeMap = {
+  before: TestResultStep,
+  after: TestResultStep,
+  step: TestResultStep,
+  attachment: TestResultAttachment,
+};
+
+export type TestResultTeardownProps = {
+  teardown: AwesomeTestResult["teardown"];
+  id: string;
+};
+
+export const TestResultTeardown: FunctionalComponent<TestResultTeardownProps> = ({ teardown, id }) => {
+  const teardownId = `${id}-teardown`;
+  const isEarlyCollapsed = !collapsedTrees.value.has(teardownId);
+  const [isOpened, setIsOpen] = useState<boolean>(isEarlyCollapsed);
+
+  const handleClick = () => {
+    setIsOpen(!isOpened);
+    toggleTree(teardownId);
+  };
+
+  const { t } = useI18n("execution");
+
+  return (
+    <div className={styles["test-result-steps"]}>
+      <TestResultDropdown
+        icon={allureIcons.lineHelpersFlag}
+        isOpened={isOpened}
+        setIsOpen={handleClick}
+        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/TestStepsEmpty/index.tsx

@@ -0,0 +1,23 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { useI18n } from "@/stores";
+import * as styles from "./styles.scss";
+
+const TestStepsEmpty = () => {
+  const { t } = useI18n("empty");
+  return (
+    <div className={styles["test-steps-empty"]}>
+      <div className={styles["test-steps-empty-wrapper"]}>
+        <SvgIcon
+          size={"m"}
+          width={"32px"}
+          height={"32px"}
+          id={allureIcons.lineDevCodeSquare}
+          className={styles["test-steps-empty-icon"]}
+        />
+        <Text className={styles["test-steps-empty-text"]}>{t("no-test-steps-results")}</Text>
+      </div>
+    </div>
+  );
+};
+
+export default TestStepsEmpty;

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

@@ -0,0 +1,25 @@
+.test-steps-empty {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 320px;
+  align-items: center;
+}
+
+.test-steps-empty-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.test-steps-empty-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 16px;
+  flex: 1 1 auto;
+}
+
+.test-steps-empty-text {
+  color: var(--on-text-secondary);
+  flex: 1 1 auto;
+}

package/src/components/TestResult/TrError/TrDiff.tsx

@@ -0,0 +1,124 @@
+import { Button, Code, CodeViewer } from "@allurereport/web-components";
+import type { BaseOptions, Change } from "diff";
+import { diffChars, diffLines, diffWords } from "diff";
+import { useState } from "preact/hooks";
+import { ac } from "vitest/dist/chunks/reporters.D7Jzd9GS";
+import * as styles from "@/components/TestResult/TrError/styles.scss";
+import { useI18n } from "@/stores";
+
+const diffFunctions = {
+  chars: diffChars,
+  words: diffWords,
+  lines: diffLines,
+} as const;
+
+type DiffType = keyof typeof diffFunctions;
+type ViewMode = "unified" | "side-by-side";
+
+export const TrDiff = ({ expected, actual }: { expected: string; actual: string }) => {
+  const stringifiedExpected = JSON.stringify(expected);
+  const stringifiedActual = JSON.stringify(actual);
+  const [diffType, setDiffType] = useState<DiffType>("lines");
+  const [viewMode, setViewMode] = useState<ViewMode>("unified");
+  const [diff, setDiff] = useState<Change[]>(() => diffLines(stringifiedExpected, stringifiedActual));
+  const { t } = useI18n("controls");
+
+  const DiffCode = () => {
+    return (
+      <>
+        {diff.map((part, index) => (
+          <div key={index} className={part.added ? styles["diff-green"] : part.removed ? styles["diff-red"] : ""}>
+            {part.value}
+          </div>
+        ))}
+      </>
+    );
+  };
+  const changeTypeDiff = (type: DiffType = "chars") => {
+    const diffFn = diffFunctions[type];
+    const result = (diffFn as (oldStr: string, newStr: string, options?: BaseOptions) => Change[])(
+      stringifiedExpected,
+      stringifiedActual,
+      {},
+    );
+
+    setDiffType(type);
+    setDiff(result);
+  };
+
+  const SideBySideView = () => {
+    return (
+      <div className={styles["side-by-side"]}>
+        <div className={styles.side}>
+          <Code type={"ui"} size={"s"} className={styles["side-title"]}>
+            {t("expected")}
+          </Code>
+          <CodeViewer code={expected} className={styles["diff-screen"]} />
+        </div>
+        <div className={styles.side}>
+          <div className={styles.expected}>
+            <Code size={"s"} className={styles["side-title"]}>
+              {t("actual")}
+            </Code>
+          </div>
+          <CodeViewer className={styles["diff-screen"]}>
+            <DiffCode />
+          </CodeViewer>
+        </div>
+      </div>
+    );
+  };
+
+  const UnifiedView = () => {
+    return (
+      <>
+        <div className={styles.unified}>
+          <CodeViewer className={styles["diff-screen"]}>
+            <div className={styles["diff-grey"]}>{expected}</div>
+            <DiffCode />
+          </CodeViewer>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.diff} data-testId={"test-result-diff"}>
+      <div className={styles["diff-controls"]}>
+        <div className={styles["diff-buttons"]}>
+          <Code size={"s"} className={styles["diff-buttons-title"]}>
+            {t("viewMode")}:
+          </Code>
+          <div className={styles["diff-view"]}>
+            {["unified", "side-by-side"].map((mode: ViewMode) => (
+              <Button
+                key={mode}
+                size={"s"}
+                style={viewMode === mode ? "primary" : "outline"}
+                text={t(mode)}
+                onClick={() => setViewMode(mode)}
+              />
+            ))}
+          </div>
+        </div>
+        <div className={styles["diff-buttons"]}>
+          <Code size={"s"} className={styles["diff-buttons-title"]}>
+            {t("compareBy")}:
+          </Code>
+          {["chars", "words", "lines"].map((type: DiffType) => {
+            return (
+              <Button
+                key={type}
+                size={"s"}
+                style={diffType === type ? "primary" : "outline"}
+                text={t(type)}
+                onClick={() => changeTypeDiff(type)}
+              />
+            );
+          })}
+        </div>
+      </div>
+      {viewMode === "side-by-side" ? <SideBySideView /> : <UnifiedView />}
+    </div>
+  );
+};

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

@@ -0,0 +1,78 @@
+import type { TestError } from "@allurereport/core-api";
+import { Button, Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
+import AnsiToHtml from "ansi-to-html";
+import { type FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { TrDiff } from "@/components/TestResult/TrError/TrDiff";
+import { useI18n } from "@/stores/locale";
+import { openModal } from "@/stores/modal";
+import { copyToClipboard } from "@/utils/copyToClipboard";
+import * as styles from "./styles.scss";
+
+const TrErrorTrace = ({ trace }: { trace: string }) => {
+  const ansiTrace = new AnsiToHtml().toHtml(trace);
+  return (
+    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
+      <Code size={"s"} type={"ui"}>
+        {/* eslint-disable-next-line react/no-danger */}
+        <pre dangerouslySetInnerHTML={{ __html: ansiTrace }}>{ansiTrace}</pre>
+      </Code>
+    </div>
+  );
+};
+
+export const TrError: FunctionalComponent<TestError> = ({ message, trace, actual, expected }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useI18n("ui");
+  const { t: tooltip } = useI18n("controls");
+  const { t: empty } = useI18n("empty");
+
+  const openDiff = () =>
+    openModal({
+      title: tooltip("comparison"),
+      data: { actual, expected },
+      component: <TrDiff actual={actual} expected={expected} />,
+    });
+
+  return (
+    <div data-testid="test-result-error" className={styles["test-result-error"]}>
+      {message ? (
+        <>
+          <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
+            <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
+              {t("error")}
+            </Text>
+            <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
+              <IconButton
+                style={"ghost"}
+                size={"s"}
+                icon={allureIcons.lineGeneralCopy3}
+                onClick={() => {
+                  copyToClipboard(message);
+                }}
+              />
+            </TooltipWrapper>
+          </div>
+          <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
+            <Code data-testid="test-result-error-message" size={"s"}>
+              <pre>{message}</pre>
+            </Code>
+          </div>
+        </>
+      ) : (
+        empty("no-message-provided")
+      )}
+
+      {Boolean(actual && expected) && (
+        <Button
+          style={"flat"}
+          data-testId={"test-result-diff-button"}
+          size={"s"}
+          text={tooltip("showDiff")}
+          onClick={openDiff}
+        />
+      )}
+      {isOpen && Boolean(trace.length) && <TrErrorTrace trace={trace} />}
+    </div>
+  );
+};