Skip to content

test(ui): consolidate Storybook DOM waits - #415

Open
abharms wants to merge 4 commits into
journey-to-the-shadow-domfrom
ype-5890-consolidate-storybook-dom-wait-helpers
Open

abharms wants to merge 4 commits into
journey-to-the-shadow-domfrom
ype-5890-consolidate-storybook-dom-wait-helpers

Conversation

@abharms

@abharms abharms commented Sep 17, 2026

Copy link
Copy Markdown
Collaborator

Summary

Targets journey-to-the-shadow-dom, which contains the Shadow DOM Storybook evidence this cleanup consolidates.

  • add a Storybook-only DOM wait helper without coupling ordinary Vitest/jsdom helpers to storybook/test
  • replace four duplicated waitForElement implementations and repeated ShadowRoot polling
  • keep selectors, failure messages, setup, interactions, and assertions visible in each story
  • preserve the production overlay story's explicit five-second element-wait timeout
  • keep production source and public interfaces unchanged

Requirement evidence

Jira acceptance area Evidence
Shared Storybook helper packages/ui/src/test/storybook-dom.ts owns the common element and ShadowRoot polling mechanics.
Matching migrations only Five existing Shadow DOM story files import the shared waits; four local element helpers and the redundant Bible picker root wrapper are removed.
Scenario evidence preserved No interaction or assertion moved into the helper or was removed; the five migrated story files pass 21/21 Chromium tests together.
Production timeout Every migrated waitForElement call in the production overlay story receives its explicit { timeout: 5_000 } option. ShadowRoot waits retain their original default timing.
Low-level coverage shadow-root-host.test.tsx is unchanged and the UI unit project passes 544/544.
Release/public surface The diff contains only stories, an internal test helper, and an intentional empty changeset; no production module or package export changes.

Review scope

Required outcomes:

  • consolidate duplicated Storybook element polling in a Storybook-specific helper
  • preserve all scenario-specific setup, behavior, assertions, failure messages, and wait timing
  • keep direct low-level ShadowRootHost assertions unchanged
  • pass the migrated Storybook stories, UI typecheck, lint, and diff validation
  • use the authenticated Storybook CI workflow as the complete-project check

Permitted support work:

  • a narrowly typed optional wait timeout
  • a direct waitForShadowRoot helper for matching repeated polling sites
  • import updates and the required empty changeset

Non-goals:

  • generic Storybook fixtures or a Shadow DOM testing framework
  • multi-root collection or nested-root traversal abstractions
  • moving behavior assertions or domain setup into shared helpers
  • broad story rewrites, new browser coverage, or rollout behavior
  • production runtime or public-interface changes

Please treat a finding as blocking only when it identifies an unmet in-scope requirement, a documented repository-standard violation in added or modified code, or a concrete regression or defect caused or worsened by this diff. Label other valid improvements as non-blocking follow-ups.

Verification

  • pnpm --filter @youversion/platform-react-ui exec vitest run --project storybook <five migrated story files> — 21/21 passed in Chromium
  • pnpm --filter @youversion/platform-react-ui test — 544/544 passed
  • pnpm --filter @youversion/platform-react-ui typecheck — passed
  • pnpm lint — passed
  • git diff --check — passed
  • final independent review at 91c7512 — no implementation, compatibility, or documented-standard violations

The unauthenticated local complete Storybook run executes all 73 assertions successfully but exits nonzero on nine existing network rejections in unrelated stories. The repository's Storybook CI workflow injects the staging credentials absent locally and is the authoritative complete-project evidence. The default concurrent workspace test run also reproduced an existing five-second controlled-reader timeout; that unchanged UI suite passes 544/544 in isolation.

Audit and compatibility notes

  • The clean-context simplification audit recommended restoring default timing for ShadowRoot attachment while retaining the production story's five-second element waits; that recommendation was accepted and verified.
  • Production bundles, public declarations, exported APIs, component DOM, focus behavior, accessibility behavior, and scenario assertions are unchanged.
  • Exact timeout duration and missing-element error preservation are established by source equivalence; the browser stories intentionally do not wait for failure timeouts.

Jira

RetriggerConfidence Score: 5/5

The PR appears safe to merge.

Summary

Consolidates repeated Storybook DOM polling into a Storybook-specific helper while preserving scenario-specific interactions, assertions, error messages, and production element-wait timeouts.

  • Adds shared waitForElement and waitForShadowRoot helpers.
  • Migrates five Shadow DOM story files away from duplicated polling implementations.
  • Adds an empty changeset because production code and public interfaces are unchanged.

Reviews (3) · Last reviewed commit: "Merge remote-tracking branch 'origin/jou..."

@changeset-bot

changeset-bot Bot commented Sep 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e6a27da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 17, 2026

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review Completed 2026-09-17T16:59:51.298165Z e6a27da New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@abharms
abharms requested a review from cameronapak September 17, 2026 16:18

@cameronapak cameronapak left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review

YPE-5890

Summary

Standards: 0 must-fix. Spec: 0 must-fix. Primary concern: none.

Review evidence
  • Scope: reviewed pinned revision ce97bde, YPE-5890, the full merge-base diff, surrounding Storybook/MSW behavior, and existing review history.
  • Method: independently traced the old and new polling paths, checked all migrated selectors, errors, assertions, and timeout call sites, and consulted Oracle on stability, security, and alignment.
Behavior or check Method / command Result Evidence source
Helper behavior and timing Source equivalence across all five migrated stories Preserved, including explicit five-second element waits and default ShadowRoot waits Coordinator
Full Storybook project pnpm --filter @youversion/platform-react-ui test:integration 617 passed; the global font mock resolves the nine font-request rejections seen on the prior commit CI
Build, unit tests, typecheck, lint, size, i18n, changeset Required PR checks Passed CI
Diff integrity git diff --check 8c240ed...ce97bde Passed Coordinator
  • Limits: an isolated local Storybook rerun could not start because this orb lacks Playwright's pinned Chromium binary; the authenticated CI browser run is green.
  • CI and bot review: all required checks pass; no unresolved human or bot threads.
  • Event: APPROVE.

Written by Code Reviewer bot on behalf of Cam.

timeout?: number;
}

export async function waitForElement<ElementType extends Element>(

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Keeping this helper limited to retry mechanics preserves the scenarios as readable evidence instead of turning it into a testing framework.

For Agents: narrow extraction

The helper retains caller-owned selectors and failure messages, while the production story keeps its explicit five-second element waits and ShadowRoot waits keep their original default timing. Ordinary jsdom helpers also remain independent of storybook/test.

Written by Code Reviewer bot on behalf of Cam.

Comment thread packages/ui/src/test/mocks/handlers.ts Outdated

export const globalHandlers = [
// Font stylesheet loaded by YouVersionProvider
http.get('*/v1/fonts/1/stylesheet', () =>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: This global mock is justified by the complete Storybook run, with the tradeoff that inherited previews now use fallback typography instead of loading the real brand font.

For Agents: deterministic font loading

Before this handler, all 617 assertions passed but nine stories produced unhandled stylesheet rejections and failed the job. The handler makes that run deterministic and green. Because the response is intentionally empty CSS, Storybook is no longer evidence for the actual Untitled Serif asset in stories that inherit global handlers; the dedicated font tests continue to own that contract.

Written by Code Reviewer bot on behalf of Cam.

…ype-5890-consolidate-storybook-dom-wait-helpers

# Conflicts:
#	packages/ui/src/test/mocks/handlers.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants