split improvements and bugfixes

packages/e2e/test/allure-awesome/testResult.test.ts

@@ -1,6 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { layer } from "allure-js-commons";
-import { Stage, Status } from "allure-js-commons";
+import { Stage, Status, layer } from "allure-js-commons";
 import { type ReportBootstrap, boostrapReport, randomNumber } from "../utils/index.js";
 
 let bootstrap: ReportBootstrap;
@@ -82,7 +81,6 @@ test.describe("allure-awesome", () => {
       const randomLeaf = page.getByTestId("tree-leaf").nth(randomNumber(0, 4));
 
       await randomLeaf.click();
-
       const testTitleText = await page.getByTestId("test-result-info-title").textContent();
       const navCounterText = await page.getByTestId("test-result-nav-current").textContent();
       const pressPrevArrow = await page.getByTestId("test-result-nav-next").isDisabled();
@@ -135,4 +133,35 @@ test.describe("allure-awesome", () => {
       await expect(page.getByTestId("test-result-error-trace")).toHaveText("broken test trace");
     });
   });
+
+  test.describe("Layout switching", () => {
+    test.beforeEach(async ({ page }) => {
+      // await page.goto("/");
+      await expect(page.getByTestId("base-layout")).toBeVisible();
+    });
+
+    test("should toggle from BaseLayout to SplitLayout with loader displayed correctly", async ({ page }) => {
+      await page.getByTestId("toggle-layout-button").click();
+
+      await expect(page.getByTestId("loader")).toBeVisible();
+
+      await expect(page.getByTestId("loader")).toBeHidden({ timeout: 1000 });
+
+      await expect(page.getByTestId("split-layout")).toBeVisible();
+      await expect(page.getByTestId("base-layout")).toBeHidden();
+    });
+
+    test("should toggle back from SplitLayout to BaseLayout with loader displayed correctly", async ({ page }) => {
+      await page.getByTestId("toggle-layout-button").click();
+      await expect(page.getByTestId("split-layout")).toBeVisible();
+
+      await page.getByTestId("toggle-layout-button").click();
+
+      await expect(page.getByTestId("loader")).toBeVisible();
+      await expect(page.getByTestId("loader")).toBeHidden({ timeout: 1000 });
+
+      await expect(page.getByTestId("base-layout")).toBeVisible();
+      await expect(page.getByTestId("split-layout")).toBeHidden();
+    });
+  });
 });

packages/web-awesome/src/assets/scss/index.scss

@@ -1,5 +1,5 @@
 @import "fonts.scss";
-@import "typography.scss";
+//@import "typography.scss";
 @import "day.scss";
 @import "night.scss";
 @import "theme.scss";

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

@@ -15,12 +15,13 @@ export type BaseLayoutProps = {
 
 export const BaseLayout = () => {
   const { id: testResultId } = route.value;
+
   useEffect(() => {
     if (testResultId) {
       fetchTestResult(testResultId);
       fetchTestResultNav();
     }
-  }, []);
+  }, [testResultId]);
 
   const content = testResultId ? (
     <Loadable
@@ -44,7 +45,7 @@ export const BaseLayout = () => {
   );
 
   return (
-    <div className={styles.layout}>
+    <div className={styles.layout} data-testid="base-layout">
       {content}
       <Modal {...modalData.value} isModalOpen={isModalOpen.value} closeModal={() => (isModalOpen.value = false)} />
     </div>

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

@@ -1,11 +1,23 @@
+import type { ClassValue } from "clsx";
+import clsx from "clsx";
 import { LanguagePicker } from "@/components/LanguagePicker";
+import { TestResultBreadcrumbs } from "@/components/TestResult/TestResultHeader/TestResultBreadcrumbs";
 import { ThemeButton } from "@/components/ThemeButton/ThemeButton";
 import ToggleLayout from "@/components/ToggleLayout";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
 import * as styles from "./styles.scss";
 
-export const Header = () => {
+interface HeaderProps {
+  className?: ClassValue;
+}
+
+export const Header = ({ className }: HeaderProps) => {
+  const { id } = route.value;
+
   return (
-    <div className={styles.above}>
+    <div className={clsx(styles.above, className)}>
+      {id && <TestResultBreadcrumbs testResult={testResultStore.value?.data?.[id]} />}
       <div className={styles.right}>
         <LanguagePicker />
         <ToggleLayout />

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

@@ -3,14 +3,14 @@ import { Header } from "@/components/Header";
 import { ReportBody } from "@/components/ReportBody";
 import { ReportHeader } from "@/components/ReportHeader";
 import { ReportMetadata } from "@/components/ReportMetadata";
-import { isSplitMode, layoutStore } from "@/stores/layout";
+import { isSplitMode } from "@/stores/layout";
 import * as styles from "./styles.scss";
 
 const MainReport = () => {
   return (
     <>
-      <Header />
-      <div className={clsx(styles.content, isSplitMode.value && styles["scroll-inside"])}>
+      {!isSplitMode.value && <Header />}
+      <div className={clsx(styles.content, isSplitMode.value ? styles["scroll-inside"] : "")}>
         <ReportHeader />
         <ReportMetadata />
         <ReportBody />

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

@@ -2,6 +2,7 @@ import { Loadable, Modal, PageLoader, Text } from "@allurereport/web-components"
 import type { JSX } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
 import MainReport from "@/components/MainReport";
 import SideBySide from "@/components/SideBySide";
 import TestResult from "@/components/TestResult";
@@ -62,7 +63,8 @@ export const SplitLayout = () => {
   }, [cachedMain]);
 
   return (
-    <div className={styles["side-by-side"]}>
+    <div className={styles["side-by-side"]} data-testId={"split-layout"}>
+      <Header className={styles.header} />
       <SideBySide left={cachedMain} right={testResult} />
       <Modal {...modalData.value} isModalOpen={isModalOpen.value} closeModal={() => (isModalOpen.value = false)} />
       <Footer />

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

@@ -78,3 +78,8 @@
   justify-content: center;
   height: 100%;
 }
+
+.header {
+  padding: 8px 8px 0;
+  margin-bottom: 0;
+}