Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { PhoneFrame } from "./PhoneFrame";
|
|
|
|
describe("PhoneFrame", () => {
|
|
it("shows only the poster when it has no children (the pinned reel does not download the phone video)", () => {
|
|
const { container } = render(
|
|
<PhoneFrame poster="/videos/x/mobile.webp" className="ds-reel-phone" />,
|
|
);
|
|
|
|
const phone = container.firstElementChild as HTMLElement;
|
|
const screenEl = phone.querySelector(".ds-phone-screen") as HTMLElement;
|
|
expect(phone).toHaveClass("ds-phone", "ds-reel-phone");
|
|
expect(screenEl.style.backgroundImage).toContain("/videos/x/mobile.webp");
|
|
expect(screenEl).toBeEmptyDOMElement();
|
|
});
|
|
|
|
it("renders its children inside the screen", () => {
|
|
render(
|
|
<PhoneFrame>
|
|
<p>demo</p>
|
|
</PhoneFrame>,
|
|
);
|
|
|
|
expect(screen.getByText("demo").parentElement).toHaveClass(
|
|
"ds-phone-screen",
|
|
);
|
|
});
|
|
|
|
it("has no background without a poster, and passes the style along", () => {
|
|
const { container } = render(<PhoneFrame style={{ width: 120 }} />);
|
|
|
|
expect(
|
|
(container.querySelector(".ds-phone-screen") as HTMLElement).style
|
|
.backgroundImage,
|
|
).toBe("");
|
|
expect((container.firstElementChild as HTMLElement).style.width).toBe(
|
|
"120px",
|
|
);
|
|
});
|
|
});
|