[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
* initial Wizard component
* Creates basic Wizard.tsx component
Prompt:
In the newly created package, create the Wizard component.
Note: these docs mention `Wizard.Step` and `Wizard.Footer`. DO NOT create these yet. They will be created later
The `@leafygreen-ui/wizard` is a general-purpose, multi-step page template, designed to create guided in-app flows and wizards:
Based on the MultiStepWizard component in MMS, and intended to be used in the Product Deletion template.
Feature Overview:
- Takes in all Steps in the flow as children.
- Renders the appropriate content for the current step
- Internally handles step changing (with optional external control)
Non-goals:
- We will not be implementing this across MMS (MultiStepWizard is currently used in 26 files)
- This will not support different url routes per step
Wizard component
The root flow component. Controls the rendering of the appropriate step based on a controlled prop, or uncontrolled internal state.
Example
```tsx
const [activeStep, setActiveStep] = useState(0)
<Wizard activeStep={activeStep}>
<Wizard.Step
title="Step 1"
description={<>Some description with a <Link>link</Link></>}
>
Some Content. Lorem ipsum dolor.
</Wizard.Step>
<Wizard.Step />
<Wizard.Step />
<Wizard.Footer
backButtonProps={{ onClick: setActiveStep(x--) }}
cancelButtonProps={{}}
primaryButtonProps={{ onClick: setActiveStep(x++), variant: 'danger', disabled }}
/>
</Wizard>
```
Props:
```ts
activeStep?: number;
onStepChange?: (step: number) => void
showStepper?: boolean; // omit for v1
```
State:
`[activeStep, setActiveStep] = useState<number> // if none provided as a prop`
Events:
- `onStepChange` : fired when the activeStep changes
- this should still fire when controlled?
Rendering:
- Renders the appropriate Step based on the activeStep prop/state
- Renders the Footer element, with enabled/hidden buttons based on the activeStep
- If activeStep === 0, hides back button
- Injects setActiveStep into Back and Primary buttons (if uncontrolled)
* Creates WizardStep and WizardFooter
Prompt:
The Footer and Step components have been scaffolded.
Create both components with the following spec:
Step:
A single Step in the multi-step flow. Must be rendered within a Wizard.
```ts
title: ReactNode;
description: ReactNode;
children: ReactNode;
```
Footer:
The footer element for the Wizard. A wrapper around LeafyGreen `FormFooter`, but allows us to optionally inject event handlers into the buttons.
```
backButtonProps: ButtonProps;
cancelButtonProps: ButtonProps;
primaryButtonProps: ButtonProps;
```
* footer& step stories
* temp useWizardControlledValue
* fix useWizardControlledValue
* update Footer
* Update package.json
* use typography in Step
* update descendants
* update packages
* the rest of the owl
* update width
* fix nits
* Squashed commit of the following:
commit c826033
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue Sep 30 15:54:03 2025 -0400
Update isChildWithProperty.spec.tsx
commit 01585d3
Merge: f3570c4 94745fb
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue Sep 30 13:28:59 2025 -0400
Merge branch 'main' into ac/cc-utils
commit f3570c4
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Tue Sep 30 13:28:37 2025 -0400
rm todo
commit becf667
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri Sep 26 16:50:05 2025 -0400
rm wizard
commit f8463ac
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri Sep 26 16:50:00 2025 -0400
update index files
commit 5e0d157
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Fri Sep 26 16:49:50 2025 -0400
adds 2 level fragment test
commit caf8a93
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri Sep 26 16:39:09 2025 -0400
Update packages/lib/src/childQueries/findChildren/findChildren.ts
Co-authored-by: Stephen Lee <stephen.lee@mongodb.com>
commit ee977a1
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Fri Sep 26 16:38:18 2025 -0400
Update packages/lib/src/childQueries/findChild/findChild.tsx
Co-authored-by: Stephen Lee <stephen.lee@mongodb.com>
commit ee32a26
Merge: ac2c485 366e851
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu Sep 25 15:20:23 2025 -0400
Merge branch 'main' into ac/cc-utils
commit ac2c485
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 14:03:09 2025 -0400
Create lib-find-children.md
commit 9cd7489
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 14:00:05 2025 -0400
Update findChildren.ts
commit 90e8208
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 13:59:35 2025 -0400
Update findChildren.ts
commit d7ae970
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 13:52:04 2025 -0400
update findChild/children with unwrapRootFragment
commit a64ff9e
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 13:49:27 2025 -0400
Creates unwrapRootFragment
commit 000f713
Author: Adam Thompson <2414030+TheSonOfThomp@users.noreply.github.com>
Date: Thu Sep 25 13:05:35 2025 -0400
Apply suggestions from code review
`allChildren.length === 1`
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
commit c6d9c9d
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 13:00:30 2025 -0400
Update index.ts
commit c369957
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 13:00:12 2025 -0400
mv child queries
commit 5fe4f9d
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 12:59:35 2025 -0400
update index files
commit c9261c8
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 12:58:48 2025 -0400
mv componentQueries
commit be05c4d
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 12:55:19 2025 -0400
Update findChildren.spec.tsx
commit f493f6d
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 12:46:47 2025 -0400
update findChild tests
commit 74f5f7e
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Thu Sep 25 12:46:28 2025 -0400
Fix isChildWithProperty tests
commit 5439034
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed Sep 24 19:05:18 2025 -0400
findChildren
commit aa89584
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed Sep 24 19:05:10 2025 -0400
Update findChild.tsx
commit dda7ad5
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed Sep 24 19:05:01 2025 -0400
isChildWithProperty
commit ae3a41b
Author: Adam Thompson <adam.thompson@mongodb.com>
Date: Wed Sep 24 17:02:37 2025 -0400
mv existing utils
* adds findChildren
* adds TextNode
* Update Wizard.spec.tsx
* minor fixes
* spread rest
* adds wizard context assertions
* fix exports
* fix exports
* Update TextNode.tsx
* creates compound component
* lint
* update CompoundSubComponent api
* update packages
* add WizardProvider
* update stories
* Wizard
* update findChild/ren
* spread className
* add "exceeded steps" warning
* adds warning tests
…omponents` (#3200) * install cc * use CC in wiz * useControlled * rm isControlled check * lint
TheSonOfThomp
requested review from
a team,
Copilot,
shaneeza and
stephl3
and removed request for
a team and
shaneeza
🦋 Changeset detectedLatest commit: 950cf69 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
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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