Skip to content

Commit

Permalink
Testing Module functionality and stories
Browse files Browse the repository at this point in the history
  • Loading branch information
ghengeveld committed Sep 30, 2024
1 parent fc01f69 commit 11042e8
Show file tree
Hide file tree
Showing 17 changed files with 285 additions and 155 deletions.
2 changes: 1 addition & 1 deletion code/addons/a11y/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
},
"devDependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"@testing-library/react": "^14.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
},
"devDependencies": {
"@storybook/blocks": "workspace:*",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
2 changes: 1 addition & 1 deletion code/addons/jest/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"upath": "^2.0.1"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-resize-detector": "^7.1.2",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/measure/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"tiny-invariant": "^1.3.1"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/onboarding/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
},
"devDependencies": {
"@radix-ui/react-dialog": "^1.0.5",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"@storybook/react": "workspace:*",
"framer-motion": "^11.0.3",
"react": "^18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion code/addons/outline/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/test/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
},
"dependencies": {
"@storybook/csf": "^0.1.11",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"chalk": "^5.3.0"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion code/addons/themes/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"ts-dedent": "^2.0.0"
},
"devDependencies": {
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"typescript": "^5.3.2"
},
"peerDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion code/addons/viewport/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
},
"devDependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.3.2"
Expand Down
2 changes: 1 addition & 1 deletion code/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@
"@radix-ui/react-slot": "^1.0.2",
"@storybook/docs-mdx": "4.0.0-next.1",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.10",
"@storybook/icons": "^1.2.12",
"@tanstack/react-virtual": "^3.3.0",
"@testing-library/react": "^14.0.0",
"@types/compression": "^1.7.0",
Expand Down
36 changes: 30 additions & 6 deletions code/core/src/manager/components/sidebar/SidebarBottom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { ContrastIcon, PointerHandIcon } from '@storybook/icons';
import type { API_FilterFunction, API_StatusUpdate, API_StatusValue } from '@storybook/types';

import {
TESTING_MODULE_RUN_ALL_REQUEST,
TESTING_MODULE_RUN_PROGRESS_RESPONSE,
TESTING_MODULE_WATCH_MODE_REQUEST,
type TestingModuleRunResponsePayload,
} from '@storybook/core/core-events';
import {
Expand Down Expand Up @@ -96,6 +98,18 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
e.stopPropagation();
setErrorsActive((active) => !active);
}, []);
const onRunTests = useCallback(
(providerId?: string) => {
api.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId });
},
[api]
);
const onSetWatchMode = useCallback(
(providerId: string, watchMode: boolean) => {
api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, { providerId, watchMode });
},
[api]
);

useEffect(() => {
const filter = getFilter(hasWarnings && warningsActive, hasErrors && errorsActive);
Expand All @@ -104,17 +118,19 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {

const testProviders = [
{
providerId: 'component-tests',
id: 'component-tests',
title: 'Component tests',
description: 'Ran 2 seconds ago',
icon: <PointerHandIcon />,
runnable: true,
watchable: true,
},
{
providerId: 'visual-tests',
id: 'visual-tests',
title: 'Visual tests',
description: 'Not run',
icon: <ContrastIcon />,
runnable: true,
},
];

Expand All @@ -125,9 +141,17 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
return (
<Wrapper id="sidebar-bottom-wrapper">
<TestingModule
{...{ api, testProviders, errorsActive, warningsActive, toggleErrors, toggleWarnings }}
errorCount={errors.length}
warningCount={warnings.length}
{...{
testProviders,
errorCount: errors.length,
warningCount: warnings.length,
errorsActive,
warningsActive,
toggleErrors,
toggleWarnings,
onRunTests,
onSetWatchMode,
}}
/>
</Wrapper>
);
Expand All @@ -140,7 +164,7 @@ export const SidebarBottom = () => {
useEffect(() => {
api.getChannel()?.on(TESTING_MODULE_RUN_PROGRESS_RESPONSE, (data) => {
if ('payload' in data) {
// console.log('progress', data);
console.log('progress', data);
// TODO clear statuses
api.experimental_updateStatus('figure-out-id', processTestReport(data.payload));
} else {
Expand Down
111 changes: 111 additions & 0 deletions code/core/src/manager/components/sidebar/TestingModule.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import React from 'react';

import { ContrastIcon, MarkupIcon, PointerHandIcon } from '@storybook/icons';
import type { Meta, StoryObj } from '@storybook/react';
import { fn, userEvent } from '@storybook/test';

import { TestingModule } from './TestingModule';

const testProviders = [
{
id: 'component-tests',
title: 'Component tests',
description: 'Ran 2 seconds ago',
icon: <PointerHandIcon />,
runnable: true,
watchable: true,
},
{
id: 'visual-tests',
title: 'Visual tests',
description: 'Not run',
icon: <ContrastIcon />,
runnable: true,
},
{
id: 'linting',
title: 'Linting',
description: 'Watching for changes',
icon: <MarkupIcon />,
watching: true,
},
];

const meta = {
component: TestingModule,
args: {
testProviders,
errorCount: 0,
warningCount: 0,
errorsActive: false,
warningsActive: false,
toggleErrors: fn(),
toggleWarnings: fn(),
onRunTests: fn(),
onSetWatchMode: fn(),
},
} satisfies Meta<typeof TestingModule>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const Collapsed: Story = {
play: async ({ canvas }) => {
const button = await canvas.findByRole('button', { name: /Collapse/ });
await userEvent.click(button);
},
};

export const Statuses: Story = {
args: {
errorCount: 14,
warningCount: 42,
},
};

export const ErrorsActive: Story = {
args: {
...Statuses.args,
errorsActive: true,
},
};

export const WarningsActive: Story = {
args: {
...Statuses.args,
warningsActive: true,
},
};

export const BothActive: Story = {
args: {
...Statuses.args,
errorsActive: true,
warningsActive: true,
},
};

export const CollapsedStatuses: Story = {
args: Statuses.args,
play: Collapsed.play,
};

export const Running: Story = {
args: {
testProviders: testProviders.map((tp) => ({ ...tp, running: true })),
},
};

export const CollapsedRunning: Story = {
args: Running.args,
play: Collapsed.play,
};

export const Watching: Story = {
args: {
testProviders: testProviders.map((tp) => ({ ...tp, watching: true })),
},
};
Loading

0 comments on commit 11042e8

Please sign in to comment.