Closed joshblack closed 1 year ago
Component | Title | Name | Link | VRT | AAT |
---|---|---|---|---|---|
ActionMenu | Components/ActionMenu/examples | Groups And Description | Link | ||
Components/ActionMenu/examples | Menu With Actions | Link | |||
Components/ActionMenu/examples | Mixed Selection | Link | |||
Components/ActionMenu/examples | Multiple Selection | Link | |||
Components/ActionMenu/examples | Single Selection | Link | |||
Components/ActionMenu/examples | Single Selection With Placeholder | Link | |||
Components/ActionMenu/fixtures | Actions Story | Link | |||
Components/ActionMenu/fixtures | Controlled Menu | Link | |||
Components/ActionMenu/fixtures | Custom Anchor | Link | |||
Components/ActionMenu/fixtures | External Anchor | Link | |||
Components/ActionMenu/fixtures | Memex Add Column | Link | |||
Components/ActionMenu/fixtures | Memex Iteration | Link | |||
Components/ActionMenu/fixtures | Memex Keyboard Shortcut | Link | |||
Components/ActionMenu/fixtures | Memex Table Menu | Link | |||
Components/ActionMenu/fixtures | Memex View Options Menu | Link | |||
Components/ActionMenu/fixtures | Mnemonics Test | Link | |||
Components/ActionMenu/fixtures | Overlay Props | Link | |||
Components/ActionMenu/fixtures | Tab Test | Link | |||
Components/ActionMenu/fixtures | Within Focus Zone | Link | |||
AvatarStack | Components/AvatarStack | AvatarStack | Link | ||
AvatarToken | Components/AvatarToken | Default | Link | ||
Components/AvatarToken | Interactive | Link | |||
Components/AvatarToken | With On Remove Fn | Link | |||
ButtonGroup | Components/ButtonGroup | Default | Link | ||
Components/ButtonGroup | Playground | Link | |||
ConfirmationDialog | Components/ConfirmationDialog | Basic Confirmation Dialog | Link | ||
Components/ConfirmationDialog | Shorthand Hook | Link | |||
Components/ConfirmationDialog | Shorthand Hook From Action Menu | Link | |||
Dialog | Components/Dialog | Basic Dialog | Link | ||
Components/Dialog | Stress Test | Link | |||
Components/Dialog | With Custom Renderers | Link | |||
FilteredActionList | Components/FilteredActionList | Default | Link | ||
IconButton | Components/IconButton | Playground | Link | ||
Components/IconButton/Features | Danger | Link | |||
Components/IconButton/Features | Default | Link | |||
Components/IconButton/Features | Disabled | Link | |||
Components/IconButton/Features | Invisible | Link | |||
Components/IconButton/Features | Large | Link | |||
Components/IconButton/Features | Medium | Link | |||
Components/IconButton/Features | Primary | Link | |||
Components/IconButton/Features | Small | Link | |||
IssueLabelToken | Components/IssueLabelToken | Default | Link | ||
Components/IssueLabelToken | Interactive | Link | |||
Components/IssueLabelToken | With On Remove Fn | Link | |||
Label | Components/Label | Label | Link | ||
LinkButton | Components/LinkButton | Playground | Link | ||
Components/LinkButton/Features | Danger | Link | |||
Components/LinkButton/Features | Default | Link | |||
Components/LinkButton/Features | Invisible | Link | |||
Components/LinkButton/Features | Large | Link | |||
Components/LinkButton/Features | Leading Visual | Link | |||
Components/LinkButton/Features | Medium | Link | |||
Components/LinkButton/Features | Outline | Link | |||
Components/LinkButton/Features | Primary | Link | |||
Components/LinkButton/Features | Small | Link | |||
Components/LinkButton/Features | Trailing Visual | Link | |||
Components/LinkButton/Features | With React Router | Link | |||
NavList | Components/NavList | Simple | Link | ||
Components/NavList | With Next JS Link | Link | |||
Components/NavList | With React Router Link | Link | |||
Components/NavList | With Sub Items | Link | |||
PageLayout | Components/PageLayout | Custom Sticky Header | Link | ||
Components/PageLayout | Default | Link | |||
Components/PageLayout/Interactions | CustomStickyHeader | Link | |||
Components/PageLayout/Interactions | NonStickyPane | Link | |||
Components/PageLayout/Interactions | StickyPane | Link | |||
Components/PageLayout | Nested Scroll Container | Link | |||
Components/PageLayout | Pull Request Page | Link | |||
Components/PageLayout | Resizable Pane | Link | |||
Components/PageLayout | Scroll Container Within Page Layout Pane | Link | |||
Components/PageLayout | Sticky Pane | Link | |||
RelativeTime | Components/RelativeTime | Count Down Timer | Link | ||
Components/RelativeTime | Default | Link | |||
Components/RelativeTime | Micro Format | Link | |||
Components/RelativeTime | Recent Time | Link | |||
SegmentedControl | Components/SegmentedControl/SegmentedControl.Button | Playground | Link | ||
Components/SegmentedControl/SegmentedControl.IconButton | Playground | Link | |||
Components/SegmentedControl | Playground | Link | |||
Components/SegmentedControl/Features | [Example] Associated with a label and caption | Link | |||
Components/SegmentedControl/Features | [fullWidth: narrow] | Link | |||
Components/SegmentedControl/Features | [fullWidth: regular] | Link | |||
Components/SegmentedControl/Features | [variant: narrow] Action menu | Link | |||
Components/SegmentedControl/Features | [variant: narrow] Hide labels | Link | |||
Components/SegmentedControl/Features | Controlled | Link | |||
Components/SegmentedControl/Features | Default | Link | |||
Components/SegmentedControl/Features | Full width | Link | |||
Components/SegmentedControl/Features | Icon only | Link | |||
Components/SegmentedControl/Features | With Icons | Link | |||
SelectPanel | Components/SelectPanel | Multi Select | Link | ||
Components/SelectPanel | SelectPanel, Above a Tall Body | Link | |||
Components/SelectPanel | SelectPanel, Height and Scroll | Link | |||
Components/SelectPanel | SelectPanel, Height: Initial, Overflowing Items | Link | |||
Components/SelectPanel | SelectPanel, Height: Initial, Underflowing Items | Link | |||
Components/SelectPanel | SelectPanel, Height: Initial, Underflowing Items (After Fetch) | Link | |||
Components/SelectPanel | Single Select | Link | |||
Components/SelectPanel | With External Anchor | Link | |||
SplitPageLayout | Components/SplitPageLayout | Default | Link | ||
Components/SplitPageLayout | Settings Page | Link | |||
ToggleSwitch | Components/ToggleSwitch/examples | Controlled | Link | ||
Components/ToggleSwitch/examples | Default (uncontrolled) | Link | |||
Components/ToggleSwitch/examples | statusLabelPosition="end" | Link | |||
Components/ToggleSwitch/fixtures | Associated with a caption | Link | |||
Components/ToggleSwitch/fixtures | Small | Link | |||
Token | Components/Token | Default | Link | ||
Components/Token | Interactive | Link | |||
Components/Token | with leadingVisual | Link | |||
Components/Token | With On Remove Fn | Link | |||
Tooltip | Components/Tooltip/Default | Icon Button Tooltip | Link | ||
TreeView | Components/TreeView | Default | Link | ||
Components/TreeView/Features | Async Error | Link | |||
Components/TreeView/Features | Async Success | Link | |||
Components/TreeView/Features | Async With Count | Link | |||
Components/TreeView/Features | Contain Intrinsic Size | Link | |||
Components/TreeView/Features | Controlled | Link | |||
Components/TreeView/Features | Empty Directories | Link | |||
Components/TreeView/Features | Files | Link | |||
Components/TreeView/Features | Files Changed | Link | |||
Components/TreeView/Features | Nested Scroll Container | Link | |||
Components/TreeView/Features | Stress Test | Link | |||
MarkdownEditor | Drafts/Components/MarkdownEditor | Custom Buttons | Link | ||
Drafts/Components/MarkdownEditor | Default | Link | |||
Drafts/Components/MarkdownEditor | Lazy Loaded Suggestions | Link | |||
PageHeader | Drafts/Components/PageHeader/Examples | Files Page | Link | ||
Drafts/Components/PageHeader/Examples | Files Page On Narrow Viewport | Link | |||
Drafts/Components/PageHeader/Examples | Pull Request Page | Link | |||
Drafts/Components/PageHeader/Examples | Pull Request Page On Narrow Viewport | Link | |||
Drafts/Components/PageHeader/Examples | Webhooks | Link | |||
Drafts/Components/PageHeader/Examples | Webhooks On Narrow Viewport | Link | |||
Drafts/Components/PageHeader/Features | Has Large Title | Link | |||
Drafts/Components/PageHeader/Features | Has Title Only | Link | |||
Drafts/Components/PageHeader/Features | With Actions | Link | |||
Drafts/Components/PageHeader/Features | With Actions That Have Responsive Content | Link | |||
Drafts/Components/PageHeader/Features | With Context Bar And Actions Of Context Area | Link | |||
Drafts/Components/PageHeader/Features | With Description Slot | Link | |||
Drafts/Components/PageHeader/Features | With Leading And Trailing Actions | Link | |||
Drafts/Components/PageHeader/Features | With Leading And Trailing Visuals | Link | |||
Drafts/Components/PageHeader/Features | With Leading Visual Hidden On Regular Viewport | Link | |||
Drafts/Components/PageHeader/Features | With Navigation Slot | Link | |||
Drafts/Components/PageHeader/Features | With Parent Link And Actions Of Context Area | Link | |||
Drafts/Components/PageHeader | Playground | Link | |||
UnderlineNav | Drafts/Components/UnderlineNav/Examples | Profile Page | Link | ||
Drafts/Components/UnderlineNav/Examples | Pull Request Page | Link | |||
Drafts/Components/UnderlineNav/Examples | Repos Page | Link | |||
Drafts/Components/UnderlineNav/Features | Counters Loading State | Link | |||
Drafts/Components/UnderlineNav/Features | Default | Link | |||
Drafts/Components/UnderlineNav/Features | Overflow On Narrow Screen | Link | |||
Drafts/Components/UnderlineNav/Features | Overflow Template | Link | |||
Drafts/Components/UnderlineNav/Features | With Counter Labels | Link | |||
Drafts/Components/UnderlineNav/Features | With Icons | Link | |||
Drafts/Components/UnderlineNav/Interactions | KeepSelectedItemVisible | Link | |||
Drafts/Components/UnderlineNav/Interactions | KeyboardNavigation | Link | |||
Drafts/Components/UnderlineNav/Interactions | SelectAMenuItem | Link | |||
Drafts/Components/UnderlineNav | Playground | Link | |||
Drafts/Components/UnderlineNav/UnderlineNav.Item | Playground | Link |
e2e/components/{Name}.test.ts
test.describe('{Name}')
test.describe('{StoryName}')
themes
test.describe(theme)
block
default @vrt
axe @aat
Checklist
npm run setup
and then npm start
e2e/components
If it does not have an e2e test
script/generate-e2e-tests.js
with the component and stories that you would like to have testednode script/generate-e2e-tests.js
to generate the test filesupdate snapshots
to your Pull RequestIf it does have an e2e test
e2e/components/ComponentName.test.tsx
script/generate-e2e-tests.js
where the component is definednode script/generate-e2e-tests.js
to generate the test filesupdate snapshots
to your Pull RequestAdding a note here for the easiest way to add component stories to the script/generate-e2e-tests.js
file:
npm run build:storybook
stories.json
in /docs/public/storybook
script/generate-e2e-tests.js
, cleaning it up to match other code (remove the unnecessary parts).Generate e2e tests
)Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.
About
Currently, the project uses Chromatic which uses the project's storybook to generate snapshots. This setup currently has several limitations or challenges that we're running:
Approach
We are looking into using Playwright as an alternative for our Visual Regression Testing setup, along with using it as a way to report on Automated Accessibility Testing from axe. This approach will allow snapshots in the following situations:
This approach will also include running and reporting axe results, in particular with custom rules that mirror dotcom's.
Checklist
@vrt
and@aat
tags for VRT and axe accordinglyWhat's next
matrix
test to components