diff --git a/packages/e2e/test/allure-awesome/testResult.test.ts b/packages/e2e/test/allure-awesome/testResult.test.ts index 5243e687..39d9445c 100644 --- a/packages/e2e/test/allure-awesome/testResult.test.ts +++ b/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(); + }); + }); }); diff --git a/packages/web-awesome/src/assets/scss/index.scss b/packages/web-awesome/src/assets/scss/index.scss index 4009f159..7b168611 100644 --- a/packages/web-awesome/src/assets/scss/index.scss +++ b/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"; diff --git a/packages/web-awesome/src/assets/scss/typography.scss b/packages/web-awesome/src/assets/scss/typography.scss deleted file mode 100644 index 9abfc7cf..00000000 --- a/packages/web-awesome/src/assets/scss/typography.scss +++ /dev/null @@ -1,218 +0,0 @@ -:root { - --font-family: "PTRootUIWebVF", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji"; - --font-family-mono: "JetBrainsMonoVF", ui-monospace, monospace; - - /* line-heights */ - --line-height-xxl: 40px; - --line-height-xl: 32px; - --line-height-l: 24px; - --line-height-m: 20px; - --line-height-s: 16px; - - /* font-sizes */ - --font-size-3xl: 36px; - --font-size-2xl: 24px; - --font-size-xl: 18px; - --font-size-l: 16px; - --font-size-m: 14px; - --font-size-m-code: 13px; - --font-size-s: 12px; - --font-size-xs: 11px; -} - -:root[data-os="mac"] { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - --font-weight-normal: 425; - --font-weight-bold: 625; - --font-weight-extra-bold: 700; -} - -/* For non macos users font weights are different and nor antialiased */ -:root:not([data-os="mac"]) { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; - - --font-weight-normal: 400; - --font-weight-bold: 600; - --font-weight-extra-bold: 700; -} - -body { - /* paragraphs-text-m */ - font-size: var(--font-size-m); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.headings-head-l) { - font-size: var(--font-size-3xl); - line-height: var(--line-height-xxl); - font-weight: var(--font-weight-extra-bold); - letter-spacing: -0.016em; // -1.6% - font-family: var(--font-family); -} - -:global(.headings-head-m) { - font-size: var(--font-size-2xl); - line-height: var(--line-height-xl); - font-weight: var(--font-weight-extra-bold); - letter-spacing: -0.016em; // -1.6% - font-family: var(--font-family); -} - -:global(.headings-head-s) { - font-size: var(--font-size-xl); - line-height: var(--line-height-l); - font-weight: var(--font-weight-extra-bold); - letter-spacing: -0.01em; // -1% - font-family: var(--font-family); -} - -:global(.paragraphs-text-l-bold) { - font-size: var(--font-size-l); - line-height: var(--line-height-l); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-text-l) { - font-size: var(--font-size-l); - line-height: var(--line-height-l); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-text-m-bold) { - font-size: var(--font-size-m); - line-height: var(--line-height-m); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-text-m) { - font-size: var(--font-size-m); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-text-s-bold) { - font-size: var(--font-size-s); - line-height: var(--line-height-m); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-text-s) { - font-size: var(--font-size-s); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.paragraphs-code-m) { - font-size: var(--font-size-m-code); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family-mono); -} - -:global(.paragraphs-code-s) { - font-size: var(--font-size-s); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family-mono); -} - -:global(.ui-text-l-ui-bold) { - font-size: var(--font-size-l); - line-height: var(--line-height-m); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-l-ui) { - font-size: var(--font-size-l); - line-height: var(--line-height-m); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-m-ui-bold) { - font-size: var(--font-size-m); - line-height: var(--line-height-s); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-m-ui) { - font-size: var(--font-size-m); - line-height: var(--line-height-s); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-s-ui-bold) { - font-size: var(--font-size-s); - line-height: var(--line-height-s); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-s-ui) { - font-size: var(--font-size-s); - line-height: var(--line-height-s); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-xs-ui-bold) { - font-size: var(--font-size-xs); - line-height: var(--line-height-s); - font-weight: var(--font-weight-bold); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-text-xs-ui) { - font-size: var(--font-size-xs); - line-height: var(--line-height-s); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family); -} - -:global(.ui-code-m-ui) { - font-size: var(--font-size-m-code); - line-height: var(--line-height-s); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family-mono); -} - -:global(.ui-code-s-ui) { - font-size: var(--font-size-s); - line-height: var(--line-height-s); - font-weight: var(--font-weight-normal); - letter-spacing: 0; - font-family: var(--font-family-mono); -} diff --git a/packages/web-awesome/src/components/BaseLayout/index.tsx b/packages/web-awesome/src/components/BaseLayout/index.tsx index 0dc9ce57..93c4797e 100644 --- a/packages/web-awesome/src/components/BaseLayout/index.tsx +++ b/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 ? ( { ); return ( -
+
{content} (isModalOpen.value = false)} />
diff --git a/packages/web-awesome/src/components/Header/index.tsx b/packages/web-awesome/src/components/Header/index.tsx index 07041e1e..97b62f3a 100644 --- a/packages/web-awesome/src/components/Header/index.tsx +++ b/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 ( -
+
+ {id && }
diff --git a/packages/web-awesome/src/components/MainReport/index.tsx b/packages/web-awesome/src/components/MainReport/index.tsx index 19108b91..666b9e8b 100644 --- a/packages/web-awesome/src/components/MainReport/index.tsx +++ b/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 ( <> -
-
+ {!isSplitMode.value &&
} +
diff --git a/packages/web-awesome/src/components/SplitLayout/index.tsx b/packages/web-awesome/src/components/SplitLayout/index.tsx index f38da788..aaf5d8b4 100644 --- a/packages/web-awesome/src/components/SplitLayout/index.tsx +++ b/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 ( -
+
+
(isModalOpen.value = false)} />