Repository navigation
test: guard HUD click-through surface #1160
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,76 @@ | ||||||
| import { readFileSync } from "node:fs"; | ||||||
| import ts from "typescript"; | ||||||
| import { describe, expect, it } from "vitest"; | ||||||
|
|
||||||
| const launchWindowSource = readFileSync(new URL("./LaunchWindow.tsx", import.meta.url), "utf8"); | ||||||
| const sourceFile = ts.createSourceFile( | ||||||
| "LaunchWindow.tsx", | ||||||
| launchWindowSource, | ||||||
| ts.ScriptTarget.Latest, | ||||||
| true, | ||||||
| ts.ScriptKind.TSX, | ||||||
| ); | ||||||
|
|
||||||
| function findElementByRef(refName: string): ts.JsxElement { | ||||||
| let match: ts.JsxElement | undefined; | ||||||
|
|
||||||
| function visit(node: ts.Node) { | ||||||
| if (match) return; | ||||||
|
|
||||||
| if (ts.isJsxOpeningElement(node)) { | ||||||
| const ref = node.attributes.properties.find( | ||||||
| (attribute): attribute is ts.JsxAttribute => | ||||||
| ts.isJsxAttribute(attribute) && | ||||||
| attribute.name.getText(sourceFile) === "ref" && | ||||||
| attribute.initializer?.getText(sourceFile) === `{${refName}}`, | ||||||
| ); | ||||||
| if (ref && ts.isJsxElement(node.parent)) { | ||||||
| match = node.parent; | ||||||
| return; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| ts.forEachChild(node, visit); | ||||||
| } | ||||||
|
|
||||||
| visit(sourceFile); | ||||||
| if (!match) throw new Error(`Could not find JSX element with ref ${refName}`); | ||||||
| return match; | ||||||
| } | ||||||
|
|
||||||
| function getAttributeNames(element: ts.JsxElement): string[] { | ||||||
| return element.openingElement.attributes.properties.flatMap((attribute) => | ||||||
| ts.isJsxAttribute(attribute) ? [attribute.name.getText(sourceFile)] : [], | ||||||
| ); | ||||||
| } | ||||||
|
|
||||||
| function getClassNameSource(element: ts.JsxElement): string { | ||||||
| const className = element.openingElement.attributes.properties.find( | ||||||
| (attribute): attribute is ts.JsxAttribute => | ||||||
| ts.isJsxAttribute(attribute) && attribute.name.getText(sourceFile) === "className", | ||||||
| ); | ||||||
| return className?.initializer?.getText(sourceFile) ?? ""; | ||||||
| } | ||||||
|
|
||||||
| describe("HUD pointer surface", () => { | ||||||
| it("keeps the stationary layout wrapper click-through after the HUD moves", () => { | ||||||
| const transformElement = findElementByRef("hudBarTransformRef"); | ||||||
| const layoutWrapper = transformElement.parent; | ||||||
|
|
||||||
| expect(ts.isJsxElement(layoutWrapper)).toBe(true); | ||||||
| if (!ts.isJsxElement(layoutWrapper)) return; | ||||||
|
|
||||||
| expect(getClassNameSource(layoutWrapper)).toContain("pointer-events-none"); | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🔎 Supported by static analysis
Match the unprefixed
🐛 Suggested fix
Committable suggestion
|
||||||
| expect(getClassNameSource(layoutWrapper)).not.toContain("pointer-events-auto"); | ||||||
| expect(getAttributeNames(layoutWrapper)).not.toContain("onMouseEnter"); | ||||||
| expect(getAttributeNames(layoutWrapper)).not.toContain("onMouseLeave"); | ||||||
| }); | ||||||
|
|
||||||
| it("makes the visibly transformed HUD bar interactive", () => { | ||||||
| const hudBar = findElementByRef("hudBarRef"); | ||||||
|
|
||||||
| expect(getClassNameSource(hudBar)).toContain("pointer-events-auto"); | ||||||
| expect(getAttributeNames(hudBar)).toContain("onMouseEnter"); | ||||||
| expect(getAttributeNames(hudBar)).toContain("onMouseLeave"); | ||||||
| }); | ||||||
| }); | ||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔎 Supported by static analysis
Script executed:
Repository: webadderallorg/Recordly
Length of output: 6490
Script executed:
Repository: webadderallorg/Recordly
Length of output: 6637
Cover both outer HUD ancestors.
The test checks only the immediate parent of
hudBarTransformRef. It passes if the 100vh wrapper or thehudContentRefwrapper losespointer-events-none. Add assertions for both ancestors.The current production JSX already sets
pointer-events-noneon these ancestors, so this is a regression-test coverage gap rather than a current production defect.Suggested test coverage