GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 00:32:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18513 from storybookjs/tom/sb-442-a11y-throws-error-when-loading-docs2

Browse Source
This commit is contained in:
Tom Coleman 2022-06-21 13:00:27 +10:00 committed by GitHub
commit eb8a9bbd39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
addons/a11y/src/components/A11yContext.test.tsx
View File

@ -50,16 +50,16 @@ const axeResult: Partial<AxeResults> = {
};
describe('A11YPanel', () => {
const getCurrentStoryData = jest.fn();
beforeEach(() => {
mockedApi.useChannel.mockReset();
mockedApi.useStorybookState.mockReset();
mockedApi.useStorybookApi.mockReset();
mockedApi.useAddonState.mockReset();
mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
mockedApi.useChannel.mockReturnValue(jest.fn());
const storyState: Partial<api.State> = { storyId };
// Lazy to mock entire state
mockedApi.useStorybookState.mockReturnValue(storyState as any);
getCurrentStoryData.mockReset().mockReturnValue({ id: storyId, type: 'story' });
mockedApi.useStorybookApi.mockReturnValue({ getCurrentStoryData } as any);
});
it('should render children', () => {

11
addons/a11y/src/components/A11yContext.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import { themes, convert } from '@storybook/theming';
import { Result } from 'axe-core';
import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
import { ADDON_ID, EVENTS } from '../constants';
@ -55,7 +55,8 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
const [tab, setTab] = React.useState(0);
const [highlighted, setHighlighted] = React.useState<string[]>([]);
const { storyId } = useStorybookState();
const api = useStorybookApi();
const storyEntry = api.getCurrentStoryData();
const handleToggleHighlight = React.useCallback((target: string[], highlight: boolean) => {
setHighlighted((prevHighlighted) =>
@ -89,12 +90,12 @@ export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active
}, [highlighted, tab]);
React.useEffect(() => {
if (active) {
handleRun(storyId);
if (active && storyEntry?.type === 'story') {
handleRun(storyEntry.id);
} else {
handleClearHighlights();
}
}, [active, handleClearHighlights, emit, storyId]);
}, [active, handleClearHighlights, emit, storyEntry]);
if (!active) return null;