diff --git a/packages/html-reporter/src/links.tsx b/packages/html-reporter/src/links.tsx index 24b548cc1b..16278e586b 100644 --- a/packages/html-reporter/src/links.tsx +++ b/packages/html-reporter/src/links.tsx @@ -117,7 +117,20 @@ const kMissingContentType = 'x-playwright/missing'; export type AnchorID = string | string[] | ((id: string) => boolean) | undefined; -function matchesAnchor(id: AnchorID, anchor: string): boolean { +export function useAnchor(id: AnchorID, onReveal: () => void) { + const searchParams = React.useContext(SearchParamsContext); + const isAnchored = useIsAnchored(id); + React.useEffect(() => { + if (isAnchored) + onReveal(); + }, [isAnchored, onReveal, searchParams]); +} + +export function useIsAnchored(id: AnchorID) { + const searchParams = React.useContext(SearchParamsContext); + const anchor = searchParams.get('anchor'); + if (anchor === null) + return false; if (typeof id === 'undefined') return false; if (typeof id === 'string') @@ -127,33 +140,6 @@ function matchesAnchor(id: AnchorID, anchor: string): boolean { return id(anchor); } -export function useAnchor(id: AnchorID, onReveal: () => void) { - React.useEffect(() => { - if (typeof id === 'undefined') - return; - - const listener = () => { - const params = new URLSearchParams(window.location.hash.slice(1)); - if (params.has('anchor') && matchesAnchor(id, params.get('anchor')!)) - onReveal(); - }; - window.addEventListener('popstate', listener); - - // check if we're already on the anchor. required to make it work on page load. - listener(); - - return () => window.removeEventListener('popstate', listener); - }, [id, onReveal]); -} - -export function useIsAnchored(id: AnchorID) { - const searchParams = React.useContext(SearchParamsContext); - if (!searchParams.has('anchor')) - return false; - const anchor = searchParams.get('anchor'); - return matchesAnchor(id, anchor!); -} - export function Anchor({ id, children }: React.PropsWithChildren<{ id: AnchorID }>) { const ref = React.useRef(null); const onAnchorReveal = React.useCallback(() => {