diff --git a/apps/web/index.html b/apps/web/index.html index 8a8ae51f5..8ae633e64 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -16,7 +16,7 @@ - Reactive Resume + Reactive Resume — A free and open-source resume builder @@ -56,6 +56,6 @@ clip: rect(0 0 0 0); } - + diff --git a/apps/web/public/videos/timelapse.mp4 b/apps/web/public/videos/timelapse-v1.mp4 similarity index 100% rename from apps/web/public/videos/timelapse.mp4 rename to apps/web/public/videos/timelapse-v1.mp4 diff --git a/apps/web/public/videos/timelapse-v1.webp b/apps/web/public/videos/timelapse-v1.webp new file mode 100644 index 000000000..6fd9f69f4 Binary files /dev/null and b/apps/web/public/videos/timelapse-v1.webp differ diff --git a/apps/web/src/routes/_home/-sections/hero.test.tsx b/apps/web/src/routes/_home/-sections/hero.test.tsx new file mode 100644 index 000000000..9838abf0d --- /dev/null +++ b/apps/web/src/routes/_home/-sections/hero.test.tsx @@ -0,0 +1,48 @@ +// @vitest-environment happy-dom + +import type { PropsWithChildren } from "react"; +import { render } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import { i18n } from "@lingui/core"; +import { I18nProvider } from "@lingui/react"; + +type LinkProps = PropsWithChildren<{ + to: string; +}>; + +vi.mock("@tanstack/react-router", () => ({ + Link: ({ children, to, ...rest }: LinkProps) => ( + + {children} + + ), +})); + +vi.mock("@/components/animation/comet-card", () => ({ + CometCard: ({ children }: PropsWithChildren) =>
{children}
, +})); + +vi.mock("@/components/animation/spotlight", () => ({ + Spotlight: () =>
, +})); + +i18n.loadAndActivate({ locale: "en", messages: {} }); + +const { Hero } = await import("./hero"); + +describe("Hero", () => { + it("shows a poster and waits for user interaction before loading the video", () => { + const { container } = render( + + + , + ); + const video = container.querySelector("video"); + + expect(video).toHaveAttribute("poster", "/videos/timelapse-v1.webp"); + expect(video).toHaveAttribute("preload", "none"); + expect(video).toHaveAttribute("src", "/videos/timelapse-v1.mp4"); + expect(video).toHaveAttribute("controls"); + expect(video).not.toHaveAttribute("autoplay"); + }); +}); diff --git a/apps/web/src/routes/_home/-sections/hero.tsx b/apps/web/src/routes/_home/-sections/hero.tsx index 1f3b7cb3d..901af6ac4 100644 --- a/apps/web/src/routes/_home/-sections/hero.tsx +++ b/apps/web/src/routes/_home/-sections/hero.tsx @@ -29,15 +29,15 @@ export function Hero() {