@techsio/storybook-better-a11y 0.0.4 → 0.0.6

package/dist/components/A11YPanel.stories.js

@@ -0,0 +1,198 @@
+import react from "react";
+import { ManagerContext } from "storybook/manager-api";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { styled } from "storybook/theming";
+import preview from "../../../../.storybook/preview";
+import { results } from "../results.mock.js";
+import { RuleType } from "../types.js";
+import { A11YPanel } from "./A11YPanel.js";
+import { A11yContext } from "./A11yContext.js";
+const emptyResults = {
+    passes: [],
+    incomplete: [],
+    violations: [],
+    toolOptions: {},
+    inapplicable: [],
+    testEngine: {
+        name: '',
+        version: ''
+    },
+    testRunner: {
+        name: ''
+    },
+    testEnvironment: {
+        userAgent: '',
+        windowWidth: 0,
+        windowHeight: 0
+    },
+    url: '',
+    timestamp: ''
+};
+const StyledWrapper = styled.div(({ theme })=>({
+        backgroundColor: theme.background.content,
+        fontSize: theme.typography.size.s2 - 1,
+        color: theme.color.defaultText,
+        display: 'block',
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'auto'
+    }));
+const managerContext = {
+    state: {},
+    api: {
+        getDocsUrl: fn().mockName('api::getDocsUrl'),
+        getCurrentParameter: fn().mockName('api::getCurrentParameter')
+    }
+};
+const meta = preview.meta({
+    title: 'Panel',
+    component: A11YPanel,
+    parameters: {
+        layout: 'fullscreen'
+    }
+});
+const context = {
+    parameters: {},
+    handleManual: fn(),
+    highlighted: false,
+    toggleHighlight: fn(),
+    tab: RuleType.VIOLATION,
+    setTab: fn(),
+    setStatus: fn(),
+    handleCopyLink: fn(),
+    toggleOpen: fn(),
+    allExpanded: false,
+    handleCollapseAll: fn(),
+    handleExpandAll: fn(),
+    handleSelectionChange: fn(),
+    handleJumpToElement: fn()
+};
+const Template = (args)=>/*#__PURE__*/ react.createElement(A11yContext.Provider, {
+        value: {
+            ...context,
+            ...args
+        }
+    }, /*#__PURE__*/ react.createElement(ManagerContext.Provider, {
+        value: managerContext
+    }, /*#__PURE__*/ react.createElement(StyledWrapper, {
+        id: "panel-tab-content"
+    }, /*#__PURE__*/ react.createElement(A11YPanel, null))));
+const Initializing = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "initial",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+const Disabled = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "initial",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map(),
+            parameters: {
+                disable: true
+            }
+        })
+});
+const Manual = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "manual",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+const ManualWithDiscrepancy = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "manual",
+            error: null,
+            discrepancy: 'cliFailedButModeManual',
+            selectedItems: new Map()
+        })
+});
+const Running = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "running",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+const ReadyWithResults = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: results,
+            status: "ready",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map([
+                [
+                    `${RuleType.VIOLATION}.${results.violations["0"].id}`,
+                    `${RuleType.VIOLATION}.${results.violations["0"].id}.1`
+                ]
+            ])
+        }),
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        const btn = await waitFor(()=>canvas.findByRole('button', {
+                name: /Rerun accessibility scan/
+            }), {
+            timeout: 3000
+        });
+        await userEvent.click(btn);
+        expect(context.handleManual).toHaveBeenCalled();
+    }
+});
+const ReadyWithResultsDiscrepancyCLIPassedBrowserFailed = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: results,
+            status: "ready",
+            error: null,
+            discrepancy: 'cliPassedBrowserFailed',
+            selectedItems: new Map([
+                [
+                    `${RuleType.VIOLATION}.${results.violations["0"].id}`,
+                    `${RuleType.VIOLATION}.${results.violations["0"].id}.1`
+                ]
+            ])
+        })
+});
+const Error = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "error",
+            error: 'TypeError: Configured rule { impact: "moderate", disable: true } is invalid. Rules must be an object with at least an id property.',
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+const ErrorStateWithObject = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "error",
+            error: {
+                message: 'Test error object message'
+            },
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+const Broken = meta.story({
+    render: ()=>/*#__PURE__*/ react.createElement(Template, {
+            results: emptyResults,
+            status: "component-test-error",
+            error: null,
+            discrepancy: null,
+            selectedItems: new Map()
+        })
+});
+export { Broken, Disabled, Error, ErrorStateWithObject, Initializing, Manual, ManualWithDiscrepancy, ReadyWithResults, ReadyWithResultsDiscrepancyCLIPassedBrowserFailed, Running };

package/dist/components/A11YPanel.test.js

@@ -0,0 +1,110 @@
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import react from "react";
+import { ThemeProvider, convert, themes } from "storybook/theming";
+import { A11YPanel } from "./A11YPanel.js";
+import { useA11yContext } from "./A11yContext.js";
+import * as __rspack_external_storybook_manager_api_d834c1f5 from "storybook/manager-api";
+vi.mock('storybook/manager-api');
+const mockedManagerApi = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5);
+vi.mock('./A11yContext');
+const mockedUseA11yContext = vi.mocked(useA11yContext);
+mockedManagerApi.useParameter.mockReturnValue({
+    manual: false
+});
+const emptyResults = {
+    passes: [],
+    incomplete: [],
+    violations: [],
+    toolOptions: {},
+    inapplicable: [],
+    testEngine: {
+        name: '',
+        version: ''
+    },
+    testRunner: {
+        name: ''
+    },
+    testEnvironment: {
+        userAgent: '',
+        windowWidth: 0,
+        windowHeight: 0
+    },
+    url: '',
+    timestamp: ''
+};
+describe('A11YPanel', ()=>{
+    it('should render initializing state', ()=>{
+        mockedUseA11yContext.mockReturnValue({
+            parameters: {},
+            results: emptyResults,
+            status: 'initial',
+            handleManual: vi.fn(),
+            error: null
+        });
+        const element = render(/*#__PURE__*/ react.createElement(ThemeProvider, {
+            theme: convert(themes.light)
+        }, /*#__PURE__*/ react.createElement(A11YPanel, null)));
+        expect(element.getByText('Please wait while the addon is initializing...')).toBeInTheDocument();
+    });
+    it('should render manual state', ()=>{
+        const handleManual = vi.fn();
+        mockedUseA11yContext.mockReturnValue({
+            parameters: {},
+            results: emptyResults,
+            status: 'manual',
+            handleManual,
+            error: null
+        });
+        const component = render(/*#__PURE__*/ react.createElement(ThemeProvider, {
+            theme: convert(themes.light)
+        }, /*#__PURE__*/ react.createElement(A11YPanel, null)));
+        const runTestButton = component.getByText('Run accessibility scan');
+        expect(runTestButton).toBeInTheDocument();
+        fireEvent.click(runTestButton);
+        expect(handleManual).toHaveBeenCalled();
+    });
+    it('should render running state', ()=>{
+        mockedUseA11yContext.mockReturnValue({
+            parameters: {},
+            results: emptyResults,
+            status: 'running',
+            handleManual: vi.fn(),
+            error: null
+        });
+        const component = render(/*#__PURE__*/ react.createElement(ThemeProvider, {
+            theme: convert(themes.light)
+        }, /*#__PURE__*/ react.createElement(A11YPanel, null)));
+        expect(component.getByText('Please wait while the accessibility scan is running...')).toBeInTheDocument();
+    });
+    it('should render error state', ()=>{
+        mockedUseA11yContext.mockReturnValue({
+            parameters: {},
+            results: emptyResults,
+            status: 'error',
+            handleManual: vi.fn(),
+            error: 'Test error message'
+        });
+        const component = render(/*#__PURE__*/ react.createElement(ThemeProvider, {
+            theme: convert(themes.light)
+        }, /*#__PURE__*/ react.createElement(A11YPanel, null)));
+        expect(component.container).toHaveTextContent('The accessibility scan encountered an error');
+        expect(component.container).toHaveTextContent('Test error message');
+    });
+    it('should render error state with object error', ()=>{
+        mockedUseA11yContext.mockReturnValue({
+            parameters: {},
+            results: emptyResults,
+            status: 'error',
+            handleManual: vi.fn(),
+            error: {
+                message: 'Test error object message'
+            }
+        });
+        const component = render(/*#__PURE__*/ react.createElement(ThemeProvider, {
+            theme: convert(themes.light)
+        }, /*#__PURE__*/ react.createElement(A11YPanel, null)));
+        expect(component.container).toHaveTextContent('The accessibility scan encountered an error');
+        expect(component.container).toHaveTextContent('{ "message": "Test error object message" }');
+    });
+});