molecule-ai/molecule-core
52
0
Fork 2
Code Issues 189 Pull Requests 19 Actions 1 Packages Projects Releases Wiki Activity

[canvas/test] ThemeToggle.tsx: invalid CSS selector causes uncaught exceptions in jsdom #1008

New Issue
Closed
opened 2026-05-14 13:05:15 +00:00 by core-qa · 0 comments
core-qa commented 2026-05-14 13:05:15 +00:00
Member
Copy Link
Copy Source

Bug Description

canvas/src/components/ThemeToggle.tsx:69 uses querySelectorAll("> [role=radio]") — the child combinator > requires a parent selector to its left. In a browser this works because the call context is the element, but jsdom (@asamuzakjp/dom-selector) rejects it with:

SyntaxError: Invalid selector > [role=radio]
  at HTMLDivElementImpl.querySelectorAll
  src/components/ThemeToggle.tsx:69:32

Impact: 5 uncaught exceptions per test run in ThemeToggle.test.tsx. Tests still pass (exit 0) because Vitest does not count uncaught exceptions as failures, but they pollute the test output.

Reproduction

Run cd canvas && npm test -- --run — observe 5 uncaught exceptions from ThemeToggle.test.tsx.

Root Cause

Commit 4929824c (PR #936, WCAG round 3) introduced:

const radiogroup = e.currentTarget.closest("[role=radiogroup]") as HTMLElement | null;
const btns = radiogroup?.querySelectorAll<HTMLButtonElement>("> [role=radio]");

The > [role=radio] selector is malformed. The intent was to select direct-child buttons with role=radio inside radiogroup.

Fix

const btns = radiogroup?.querySelectorAll<HTMLButtonElement>("[role=radio]");

Since the query is already scoped to radiogroup, the > combinator is unnecessary.

Scope

  • Tier: medium
  • Affected file: canvas/src/components/ThemeToggle.tsx
  • Tests: canvas/src/components/__tests__/ThemeToggle.test.tsx
  • Regression introduced: PR #936 (4929824c)
  • Assignee: core-canvas (or triage-operator)
## Bug Description `canvas/src/components/ThemeToggle.tsx:69` uses `querySelectorAll("> [role=radio]")` — the child combinator `>` requires a parent selector to its left. In a browser this works because the call context is the element, but jsdom (`@asamuzakjp/dom-selector`) rejects it with: ``` SyntaxError: Invalid selector > [role=radio] at HTMLDivElementImpl.querySelectorAll src/components/ThemeToggle.tsx:69:32 ``` **Impact:** 5 uncaught exceptions per test run in `ThemeToggle.test.tsx`. Tests still pass (exit 0) because Vitest does not count uncaught exceptions as failures, but they pollute the test output. ## Reproduction Run `cd canvas && npm test -- --run` — observe 5 uncaught exceptions from `ThemeToggle.test.tsx`. ## Root Cause Commit `4929824c` (PR #936, WCAG round 3) introduced: ```ts const radiogroup = e.currentTarget.closest("[role=radiogroup]") as HTMLElement | null; const btns = radiogroup?.querySelectorAll<HTMLButtonElement>("> [role=radio]"); ``` The `> [role=radio]` selector is malformed. The intent was to select direct-child buttons with `role=radio` inside `radiogroup`. ## Fix ```ts const btns = radiogroup?.querySelectorAll<HTMLButtonElement>("[role=radio]"); ``` Since the query is already scoped to `radiogroup`, the `>` combinator is unnecessary. ## Scope - **Tier:** medium - **Affected file:** `canvas/src/components/ThemeToggle.tsx` - **Tests:** `canvas/src/components/__tests__/ThemeToggle.test.tsx` - **Regression introduced:** PR #936 (`4929824c`) - **Assignee:** core-canvas (or triage-operator)
core-qa added the tier:medium label 2026-05-14 13:05:15 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
approved
area/ci
CI/CD pipeline issues
 do-not-auto-merge
Opt out of autonomous merge-queue merging
 do-not-merge
hold from auto-merge (design review in progress)
 kind/infrastructure
Infrastructure-related issues
 merge-queue
Ready for serialized Gitea merge queue
 merge-queue-hold
Temporarily hold PR in merge queue
 needs-engineer
platform/go
Go platform test issues
 ready-to-build
release-blocker
Blocks the staging→main promotion / a release
 release-test
security
test-label-sre
tier:high
High risk per dev-sop §SOP-6 — ceo only, 24h cooldown
 tier:low
Low risk per dev-sop §SOP-6 — engineers/managers/ceo can approve
 tier:medium
Medium risk per dev-sop §SOP-6 — managers/ceo can approve
 triage-test
test
 wip
Work in progress — do not auto-merge
No Label tier:medium
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
agent-dev-a agent-dev-b agent-pm agent-researcher agent-reviewer agent-reviewer-1 agent-reviewer-cr2 app-fe (Molecule AI · app-fe) app-lead (Molecule AI · app-lead) app-qa (Molecule AI · app-qa) claude-ceo-assistant claude-ci-reader claude-status-reaper core-be (Molecule AI · core-be) core-devops (Molecule AI · core-devops) core-fe (Molecule AI · core-fe) core-lead (Molecule AI · core-lead) core-offsec (Molecule AI · core-offsec) core-qa (Molecule AI · core-qa) core-security (Molecule AI · core-security) core-uiux (Molecule AI · core-uiux) cp-be (Molecule AI · cp-be) cp-lead (Molecule AI · cp-lead) cp-qa (Molecule AI · cp-qa) cp-security (Molecule AI · cp-security) cui (Zhanlin Cui) dev-lead (Molecule AI · dev-lead) devops-engineer documentation-specialist (Molecule AI · documentation-specialist) fullstack-engineer (Molecule AI · fullstack-engineer) godwin hongming hongming-ceo-delegated hongming-codex-laptop hongming-kimi-laptop hongming-pc2 hongming-personal infra-lead (Molecule AI · infra-lead) infra-runtime-be (Molecule AI · infra-runtime-be) infra-sre (Molecule AI · infra-sre) integration-tester (Molecule AI · integration-tester) mc-drift-bot molecule-code-reviewer plugin-dev (Molecule AI · plugin-dev) pm publish-runtime-bot pypi-publisher (Molecule AI PyPI Publisher (RFC#596)) release-manager (Molecule AI · release-manager) sdk-dev (Molecule AI · sdk-dev) sdk-lead (Molecule AI · sdk-lead) sop-drift-bot sop-tier-bot (SOP Tier-Check Bot) technical-writer (Molecule AI · technical-writer) triage-operator (Molecule AI · triage-operator)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#1008
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?