perf(movimento): sem tempo morto, vídeos regravados e 3D sem React Three Fiber
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
This commit is contained in:
1 parent
f8545cd442
commit
6ac87824f3
68 files changed
+5735
-3300
No files matched your search
@@ -0,0 +1,65 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import {
|
||||
resetFocusOnNavigation,
|
||||
useFocusOnNavigation,
|
||||
} from "./useFocusOnNavigation";
|
||||
|
||||
function Probe({ pathname }: { pathname: string }) {
|
||||
useFocusOnNavigation(pathname);
|
||||
return null;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
resetFocusOnNavigation();
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
function mountMain() {
|
||||
const main = document.createElement("div");
|
||||
main.id = "main-content";
|
||||
main.tabIndex = -1;
|
||||
document.body.append(main);
|
||||
return main;
|
||||
}
|
||||
|
||||
describe("useFocusOnNavigation", () => {
|
||||
it("does nothing on the first load, even with #main-content on the page", () => {
|
||||
const main = mountMain();
|
||||
render(<Probe pathname="/" />);
|
||||
expect(main).not.toHaveFocus();
|
||||
});
|
||||
|
||||
it("focuses #main-content once per path change, never scrolling", () => {
|
||||
const main = mountMain();
|
||||
const focus = jest.spyOn(main, "focus");
|
||||
const { rerender } = render(<Probe pathname="/" />);
|
||||
|
||||
rerender(<Probe pathname="/cases" />);
|
||||
expect(main).toHaveFocus();
|
||||
expect(focus).toHaveBeenCalledTimes(1);
|
||||
expect(focus).toHaveBeenCalledWith({ preventScroll: true });
|
||||
|
||||
rerender(<Probe pathname="/cases" />);
|
||||
expect(focus).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("still tells a navigation from the first load when the component remounts (first segment changed)", () => {
|
||||
const main = mountMain();
|
||||
const first = render(<Probe pathname="/" />);
|
||||
first.unmount();
|
||||
render(<Probe pathname="/cases" />);
|
||||
expect(main).toHaveFocus();
|
||||
});
|
||||
|
||||
it("survives a page without #main-content (a 404 shell, an error boundary)", () => {
|
||||
const { rerender } = render(<Probe pathname="/" />);
|
||||
expect(() => rerender(<Probe pathname="/nada" />)).not.toThrow();
|
||||
expect(screen.queryByRole("main")).toBeNull();
|
||||
});
|
||||
|
||||
it("is not fooled by the double effect of React StrictMode", () => {
|
||||
const main = mountMain();
|
||||
render(<Probe pathname="/" />, { reactStrictMode: true });
|
||||
expect(main).not.toHaveFocus();
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user