Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/kasper/a11y-postinstall' into ka…
Browse files Browse the repository at this point in the history
…sper/a11y-postinstall
  • Loading branch information
kasperpeulen committed Dec 11, 2024
2 parents 21d7c3d + 20a1e60 commit 3fbd948
Show file tree
Hide file tree
Showing 113 changed files with 961 additions and 450 deletions.
21 changes: 21 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,24 @@
## 8.5.0-alpha.20

- Addon Test: Add `@vitest/coverage-v8` during postinstall if no coverage reporter is installed - [#29993](https://github.com/storybookjs/storybook/pull/29993), thanks @ghengeveld!
- Addon Test: Add support for previewHead - [#29808](https://github.com/storybookjs/storybook/pull/29808), thanks @ndelangen!
- Addon Test: Always run Vitest in watch mode internally - [#29749](https://github.com/storybookjs/storybook/pull/29749), thanks @JReinhold!
- Addon Test: Filter out falsy test results in TestProviderRender - [#30001](https://github.com/storybookjs/storybook/pull/30001), thanks @valentinpalkovic!
- Addon Test: Handle undefined storyId - [#29998](https://github.com/storybookjs/storybook/pull/29998), thanks @ghengeveld!
- Addon Test: Make component tests status row link to the story's tests panel - [#29992](https://github.com/storybookjs/storybook/pull/29992), thanks @ghengeveld!
- Addon Test: Merge viteFinal config into vitest config - [#29806](https://github.com/storybookjs/storybook/pull/29806), thanks @ndelangen!
- Addon Test: Prompt switch to `experimental-nextjs-vite` - [#29814](https://github.com/storybookjs/storybook/pull/29814), thanks @ndelangen!
- Addon Test: Use ProgressSpinner for stop button in Testing Module - [#29997](https://github.com/storybookjs/storybook/pull/29997), thanks @ghengeveld!

## 8.5.0-alpha.19

- Addon A11y: Create a11y test provider and revamp a11y addon - [#29643](https://github.com/storybookjs/storybook/pull/29643), thanks @valentinpalkovic!
- Addon Test: Fix indexing behavior - [#29836](https://github.com/storybookjs/storybook/pull/29836), thanks @yannbf!
- Addon Test: Fix run request while booting or restarting Vitest - [#29829](https://github.com/storybookjs/storybook/pull/29829), thanks @ghengeveld!
- Addon Test: Serve `staticDirs` with Vitest - [#29811](https://github.com/storybookjs/storybook/pull/29811), thanks @ghengeveld!
- RNW-Vite: Add tsconfig path aliases support - [#29953](https://github.com/storybookjs/storybook/pull/29953), thanks @shilman!
- RNW-Vite: Fix flow plugin including too many things - [#29952](https://github.com/storybookjs/storybook/pull/29952), thanks @dannyhw!

## 8.5.0-alpha.18

- Addon Test: Clarify message when `vitest` detects missing deps - [#29763](https://github.com/storybookjs/storybook/pull/29763), thanks @ndelangen!
Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/actions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/essentials/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/gfm/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/highlight/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/interactions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/jest/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/links/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/measure/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/onboarding/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-onboarding",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/outline/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/storysource/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
Expand Down
4 changes: 2 additions & 2 deletions code/addons/test/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/experimental-addon-test",
"version": "8.5.0-alpha.18",
"version": "8.5.0-alpha.20",
"description": "Integrate Vitest with Storybook",
"keywords": [
"storybook-addons",
Expand Down Expand Up @@ -85,7 +85,6 @@
"@storybook/icons": "^1.2.12",
"@storybook/instrumenter": "workspace:*",
"@storybook/test": "workspace:*",
"@storybook/theming": "workspace:*",
"polished": "^4.2.2",
"prompts": "^2.4.0",
"ts-dedent": "^2.2.0"
Expand Down Expand Up @@ -113,6 +112,7 @@
"slash": "^5.0.0",
"strip-ansi": "^7.1.0",
"tinyglobby": "^0.2.10",
"tree-kill": "^1.2.2",
"ts-dedent": "^2.2.0",
"typescript": "^5.3.2",
"vitest": "^2.1.3"
Expand Down
59 changes: 51 additions & 8 deletions code/addons/test/src/components/TestProviderRender.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { type ComponentProps, type FC, useCallback, useMemo, useRef, useState } from 'react';

import { Button, ListItem } from 'storybook/internal/components';
import { Button, ListItem, ProgressSpinner } from 'storybook/internal/components';
import {
TESTING_MODULE_CONFIG_CHANGE,
type TestProviderConfig,
Expand All @@ -17,15 +17,17 @@ import {
PlayHollowIcon,
PointerHandIcon,
ShieldIcon,
StopAltHollowIcon,
StopAltIcon,
} from '@storybook/icons';

import { isEqual } from 'es-toolkit';
import { debounce } from 'es-toolkit/compat';

// Relatively importing from a11y to get the ADDON_ID
import { ADDON_ID as A11Y_ADDON_ID } from '../../../a11y/src/constants';
import { type Config, type Details } from '../constants';
import {
ADDON_ID as A11Y_ADDON_ID,
PANEL_ID as A11y_ADDON_PANEL_ID,
} from '../../../a11y/src/constants';
import { type Config, type Details, PANEL_ID } from '../constants';
import { type TestStatus } from '../node/reporter';
import { Description } from './Description';
import { TestStatusIcon } from './TestStatusIcon';
Expand Down Expand Up @@ -66,6 +68,14 @@ const Checkbox = styled.input({
},
});

const Progress = styled(ProgressSpinner)({
margin: 2,
});

const StopIcon = styled(StopAltIcon)({
width: 10,
});

const statusOrder: TestStatus[] = ['failed', 'warning', 'pending', 'passed', 'skipped'];
const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['status']> = {
failed: 'negative',
Expand Down Expand Up @@ -101,7 +111,8 @@ export const TestProviderRender: FC<

return state.details?.testResults?.flatMap((result) =>
result.results
.filter((it) => !entryId || it.storyId === entryId || it.storyId.startsWith(`${entryId}-`))
.filter(Boolean)
.filter((r) => !entryId || r.storyId === entryId || r.storyId?.startsWith(`${entryId}-`))
.map((r) => r.reports.find((report) => report.type === 'a11y'))
);
}, [isA11yAddon, state.details?.testResults, entryId]);
Expand Down Expand Up @@ -145,6 +156,12 @@ export const TestProviderRender: FC<

const status = (state.failed ? 'failed' : results[0]?.status) || 'unknown';

const openPanel = (id: string, panelId: string) => {
api.selectStory(id);
api.setSelectedPanel(panelId);
api.togglePanel(true);
};

return (
<Container {...props}>
<Heading>
Expand Down Expand Up @@ -182,11 +199,13 @@ export const TestProviderRender: FC<
<Button
aria-label={`Stop ${state.name}`}
variant="ghost"
padding="small"
padding="none"
onClick={() => api.cancelTestProvider(state.id)}
disabled={state.cancelling}
>
<StopAltHollowIcon />
<Progress percentage={state.progress?.percentageCompleted}>
<StopIcon />
</Progress>
</Button>
) : (
<Button
Expand Down Expand Up @@ -244,6 +263,16 @@ export const TestProviderRender: FC<
<Extras>
<ListItem
title="Component tests"
onClick={
(status === 'failed' || status === 'warning') && results.length
? () => {
const firstNotPassed = results.find(
(r) => r.status === 'failed' || r.status === 'warning'
);
openPanel(firstNotPassed.storyId, PANEL_ID);
}
: null
}
icon={
state.crashed ? (
<TestStatusIcon status="critical" aria-label="status: crashed" />
Expand Down Expand Up @@ -278,6 +307,20 @@ export const TestProviderRender: FC<
{isA11yAddon && (
<ListItem
title="Accessibility"
onClick={
(a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
? () => {
const firstNotPassed = results.find((r) =>
r.reports
.filter((report) => report.type === 'a11y')
.find(
(report) => report.status === 'failed' || report.status === 'warning'
)
);
openPanel(firstNotPassed.storyId, A11y_ADDON_PANEL_ID);
}
: null
}
icon={<TestStatusIcon status={a11yStatus} aria-label={`status: ${a11yStatus}`} />}
right={a11yNotPassedAmount || null}
/>
Expand Down
14 changes: 7 additions & 7 deletions code/addons/test/src/manager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const statusMap: Record<TestStatus, API_StatusValue> = {
addons.register(ADDON_ID, (api) => {
const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
if (storybookBuilder.includes('vite')) {
const openAddonPanel = () => {
const openTestsPanel = () => {
api.setSelectedPanel(PANEL_ID);
api.togglePanel(true);
};
Expand Down Expand Up @@ -94,9 +94,9 @@ addons.register(ADDON_ID, (api) => {
? rest.failureMessages.join('\n')
: '',
data: { testRunId },
onClick: openAddonPanel,
onClick: openTestsPanel,
sidebarContextMenu: false,
} as API_StatusObject,
} satisfies API_StatusObject,
])
)
)
Expand All @@ -108,12 +108,12 @@ addons.register(ADDON_ID, (api) => {
update.details.testResults.flatMap((testResult) =>
testResult.results
.filter(({ storyId }) => storyId)
.map(({ storyId, status, testRunId, reports, ...rest }) => {
.map(({ storyId, testRunId, reports }) => {
const a11yReport = reports.find((r: any) => r.type === 'a11y');
return [
storyId,
a11yReport
? {
? ({
title: 'Accessibility tests',
description: '',
status: statusMap[a11yReport.status],
Expand All @@ -123,9 +123,9 @@ addons.register(ADDON_ID, (api) => {
api.togglePanel(true);
},
sidebarContextMenu: false,
}
} satisfies API_StatusObject)
: null,
] as const;
];
})
)
)
Expand Down
9 changes: 7 additions & 2 deletions code/addons/test/src/node/reporter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export type TestResultResult =
reports: Report[];
}
| {
status: Extract<TestStatus, 'failed'>;
status: Extract<TestStatus, 'failed' | 'warning'>;
storyId: string;
duration: number;
testRunId: string;
Expand All @@ -39,7 +39,7 @@ export type TestResult = {
results: TestResultResult[];
startTime: number;
endTime: number;
status: Extract<TestStatus, 'passed' | 'failed'>;
status: Extract<TestStatus, 'passed' | 'failed' | 'warning'>;
message?: string;
};

Expand Down Expand Up @@ -165,6 +165,11 @@ export class StorybookReporter implements Reporter {
numTotalTests,
startedAt: this.start,
finishedAt,
percentageCompleted: finishedAt
? 100
: numTotalTests
? ((numPassedTests + numFailedTests) / numTotalTests) * 100
: 0,
} as TestingModuleProgressReportProgress,
details: {
testResults,
Expand Down
Loading

0 comments on commit 3fbd948

Please sign in to comment.