[LG-5567] Wizard Test harnesses #3208
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TheSonOfThomp
requested review from
a team,
Copilot,
shaneeza and
stephl3
and removed request for
a team and
shaneeza
🦋 Changeset detectedLatest commit: c49df33 The changes in this PR will be included in the next version bump. This PR includes changesets to release 92 packages
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 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds test harnesses for the Wizard component to enable easier testing of Wizard functionality in consuming applications. The test harnesses provide utilities to query wizard elements by their data attributes and interact with wizard buttons.
Key changes:
- Added test utilities in
packages/wizard/src/testing/that provide methods to find wizard elements and interact with buttons - Updated utility functions in
packages/libto better handle mapped/flattened children arrays - Added exports for Direction and Position enums in descendants package
- Updated package configuration and TypeScript references
Reviewed Changes
Copilot reviewed 40 out of 41 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/wizard/src/testing/ | New test harness implementation with utilities for querying wizard elements and buttons |
| packages/wizard/tsconfig.json | Added TypeScript configuration with test-harnesses reference |
| packages/lib/src/childQueries/findChild*.tsx | Updated child query utilities to handle flattened arrays |
| packages/descendants/src/index.ts | Added Direction and Position enum exports |
| packages/wizard/package.json | Package configuration with testing export |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| "exclude": ["**/*.spec.*", "**/*.stories.*"], | ||
| "references": [ | ||
| { | ||
| "path": "../button" |
There was a problem hiding this comment.
Duplicate reference to '../button' package. Remove one of these duplicate entries.
Copilot uses AI. Check for mistakes.
Comment on lines
19
to
21
| "path": "../button" | ||
| }, | ||
| { |
There was a problem hiding this comment.
Duplicate reference to '../button' package. Remove one of these duplicate entries.
Suggested change
| "path": "../button" | |
| }, | |
| { |
Copilot uses AI. Check for mistakes.
Comment on lines
+95
to
+112
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | ||
| * The promise is rejected if no elements match or if more than one match is found. | ||
| */ | ||
| const findFooter = () => | ||
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute. | ||
| * Will throw if no elements match or if more than one match is found. | ||
| */ | ||
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. | ||
| * Will throw if more than one match is found. | ||
| */ | ||
| const queryFooter = () => | ||
| screen.queryByTestId(lgIds.footer) as HTMLElement | null; |
There was a problem hiding this comment.
The documentation incorrectly states that footer methods use data-testid attribute, but the implementation uses data-lgid attribute via getLgIds() function.
Suggested change
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. | |
| * Will throw if more than one match is found. | |
| */ | |
| const queryFooter = () => | |
| screen.queryByTestId(lgIds.footer) as HTMLElement | null; | |
| * @returns a promise that resolves to the footer element using the `data-lgid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| findByLgId!<HTMLElement>(lgIds.footer); | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => getByLgId!<HTMLElement>(lgIds.footer); | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute or `null` if no elements match. | |
| * Will throw if more than one match is found. | |
| */ | |
| const queryFooter = () => | |
| queryByLgId!<HTMLElement>(lgIds.footer); |
Copilot uses AI. Check for mistakes.
Comment on lines
+95
to
+108
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | ||
| * The promise is rejected if no elements match or if more than one match is found. | ||
| */ | ||
| const findFooter = () => | ||
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute. | ||
| * Will throw if no elements match or if more than one match is found. | ||
| */ | ||
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. |
There was a problem hiding this comment.
The documentation incorrectly states that footer methods use data-testid attribute, but the implementation uses data-lgid attribute via getLgIds() function.
Suggested change
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. | |
| * @returns a promise that resolves to the footer element using the `data-lgid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute or `null` if no elements match. |
Copilot uses AI. Check for mistakes.
Comment on lines
+95
to
+112
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | ||
| * The promise is rejected if no elements match or if more than one match is found. | ||
| */ | ||
| const findFooter = () => | ||
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute. | ||
| * Will throw if no elements match or if more than one match is found. | ||
| */ | ||
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | ||
|
|
||
| /** | ||
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. | ||
| * Will throw if more than one match is found. | ||
| */ | ||
| const queryFooter = () => | ||
| screen.queryByTestId(lgIds.footer) as HTMLElement | null; |
There was a problem hiding this comment.
The documentation incorrectly states that footer methods use data-testid attribute, but the implementation uses data-lgid attribute via getLgIds() function.
Suggested change
| * @returns a promise that resolves to the footer element using the `data-testid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| screen.findByTestId(lgIds.footer) as Promise<HTMLElement>; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => screen.getByTestId(lgIds.footer) as HTMLElement; | |
| /** | |
| * @returns the footer element using the `data-testid` data attribute or `null` if no elements match. | |
| * Will throw if more than one match is found. | |
| */ | |
| const queryFooter = () => | |
| screen.queryByTestId(lgIds.footer) as HTMLElement | null; | |
| * @returns a promise that resolves to the footer element using the `data-lgid` data attribute. | |
| * The promise is rejected if no elements match or if more than one match is found. | |
| */ | |
| const findFooter = () => | |
| findByLgId!<HTMLElement>(lgIds.footer); | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute. | |
| * Will throw if no elements match or if more than one match is found. | |
| */ | |
| const getFooter = () => getByLgId!<HTMLElement>(lgIds.footer); | |
| /** | |
| * @returns the footer element using the `data-lgid` data attribute or `null` if no elements match. | |
| * Will throw if more than one match is found. | |
| */ | |
| const queryFooter = () => | |
| queryByLgId!<HTMLElement>(lgIds.footer); |
Copilot uses AI. Check for mistakes.
|
Size Change: +63 B (0%) Total Size: 1.6 MB
ℹ️ View Unchanged
|
* fix(box): silence test lint warnings * chore(test): skip tests in deprecated-packages * chore: update emotion version and ALL_PACKAGES list
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* fix text input * runs fix * fix mistake * reset file
* update type * expand scope of solution
* Add children to Card type * pnpm changeset * Lint fix :-)
* Banner named export * update codemod * codemod tests * changesets * update tests * update readme
* fixed issue * with changeset
stephl3
reviewed
Oct 14, 2025
| @@ -0,0 +1,83 @@ | |||
| export interface WizardButtonUtils { | |||
There was a problem hiding this comment.
Can use GetTestUtilsReturnType from @leafygreen-ui/button/testing instead of redefining here
Comment on lines
+76
to
+92
| /** | ||
| * @returns a promise that resolves to the current step element using the `data-lgid` data attribute. | ||
| * The promise is rejected if no elements match or if more than one match is found. | ||
| */ | ||
| const findCurrentStep = () => findByLgId!<HTMLElement>(lgIds.step); | ||
|
|
||
| /** | ||
| * @returns the current step element using the `data-lgid` data attribute. | ||
| * Will throw if no elements match or if more than one match is found. | ||
| */ | ||
| const getCurrentStep = () => getByLgId!<HTMLElement>(lgIds.step); | ||
|
|
||
| /** | ||
| * @returns the current step element using the `data-lgid` data attribute or `null` if no elements match. | ||
| * Will throw if more than one match is found. | ||
| */ | ||
| const queryCurrentStep = () => queryByLgId!<HTMLElement>(lgIds.step); |
There was a problem hiding this comment.
I think a different approach will need to be taken for passing a data-lgid attribute to each step. As-is, there will be multiple with the same data-lgid which will cause these to all throw. An alternative is to apply a similar pattern used for Select or Tabs although that would also require using some other property like role to identify which children are Step instances used in a Wizard instance
Probably, not sure how that happened |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
Adds Test Harnesses for Wizard component
https://jira.mongodb.org/browse/LG-5562