@techsio/storybook-better-a11y 0.0.4 → 0.0.6

package/dist/manager.test.js

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { PANEL_ID } from "./constants.js";
+import "./manager.js";
+import * as __rspack_external_storybook_manager_api_d834c1f5 from "storybook/manager-api";
+vi.mock('storybook/manager-api');
+const mockedApi = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5);
+mockedApi.useStorybookApi = vi.fn(()=>({
+        getSelectedPanel: vi.fn()
+    }));
+mockedApi.useAddonState = vi.fn();
+const mockedAddons = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5.addons);
+const registrationImpl = mockedAddons.register.mock.calls[0][1];
+const isPanel = (input)=>input.type === __rspack_external_storybook_manager_api_d834c1f5.types.PANEL;
+describe('A11yManager', ()=>{
+    it('should register the panels', ()=>{
+        registrationImpl(mockedApi);
+        expect(mockedAddons.add.mock.calls).toHaveLength(2);
+        expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
+        const panel = mockedAddons.add.mock.calls.map(([_, def])=>def).find(({ type })=>type === __rspack_external_storybook_manager_api_d834c1f5.types.PANEL);
+        const tool = mockedAddons.add.mock.calls.map(([_, def])=>def).find(({ type })=>type === __rspack_external_storybook_manager_api_d834c1f5.types.TOOL);
+        expect(panel).toBeDefined();
+        expect(tool).toBeDefined();
+    });
+    it('should compute title with no issues', ()=>{
+        mockedApi.useAddonState.mockImplementation(()=>[
+                {
+                    results: void 0
+                }
+            ]);
+        registrationImpl(__rspack_external_storybook_manager_api_d834c1f5);
+        const title = mockedAddons.add.mock.calls.map(([_, def])=>def).find(isPanel)?.title;
+        expect(title()).toMatchInlineSnapshot(`
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
+      </div>
+    `);
+    });
+    it('should compute title with issues', ()=>{
+        mockedApi.useAddonState.mockImplementation(()=>[
+                {
+                    results: {
+                        violations: [
+                            {}
+                        ],
+                        incomplete: [
+                            {},
+                            {}
+                        ]
+                    }
+                }
+            ]);
+        registrationImpl(mockedApi);
+        const title = mockedAddons.add.mock.calls.map(([_, def])=>def).find(isPanel)?.title;
+        expect(title()).toMatchInlineSnapshot(`
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
+        <Badge
+          compact={true}
+          status="neutral"
+        >
+          3
+        </Badge>
+      </div>
+    `);
+    });
+});

package/dist/postinstall.js

@@ -18,4 +18,4 @@ async function postinstall(options) {
         args
     });
 }
-export default postinstall;
+export { postinstall as default };

package/dist/preview.js

@@ -1 +1,68 @@
-export { afterEach, decorators, initialGlobals, parameters } from "./699.js";
+import { expect } from "storybook/test";
+import { run } from "./a11yRunner.js";
+import { getIsVitestStandaloneRun } from "./utils.js";
+import { withVisionSimulator } from "./withVisionSimulator.js";
+let vitestMatchersExtended = false;
+const decorators = [
+    withVisionSimulator
+];
+const afterEach = async ({ id: storyId, reporting, parameters, globals, viewMode })=>{
+    const a11yParameter = parameters.a11y;
+    const a11yGlobals = globals.a11y;
+    const shouldRunEnvironmentIndependent = a11yParameter?.disable !== true && a11yParameter?.test !== 'off' && a11yGlobals?.manual !== true;
+    const getMode = ()=>{
+        switch(a11yParameter?.test){
+            case 'todo':
+                return 'warning';
+            case 'error':
+            default:
+                return 'failed';
+        }
+    };
+    if (shouldRunEnvironmentIndependent && 'story' === viewMode) try {
+        const result = await run(a11yParameter, storyId);
+        if (result) {
+            const hasViolations = (result?.violations.length ?? 0) > 0;
+            reporting.addReport({
+                type: 'a11y',
+                version: 1,
+                result,
+                status: hasViolations ? getMode() : 'passed'
+            });
+            if (getIsVitestStandaloneRun()) {
+                if (hasViolations && 'failed' === getMode()) {
+                    if (!vitestMatchersExtended) {
+                        const { toHaveNoViolations } = await import("vitest-axe/matchers");
+                        expect.extend({
+                            toHaveNoViolations
+                        });
+                        vitestMatchersExtended = true;
+                    }
+                    expect(result).toHaveNoViolations();
+                }
+            }
+        }
+    } catch (e) {
+        reporting.addReport({
+            type: 'a11y',
+            version: 1,
+            result: {
+                error: e
+            },
+            status: 'failed'
+        });
+        if (getIsVitestStandaloneRun()) throw e;
+    }
+};
+const initialGlobals = {
+    a11y: {
+        manual: false
+    },
+    vision: void 0
+};
+const preview_parameters = {
+    a11y: {
+        test: 'todo'
+    }
+};
+export { afterEach, decorators, initialGlobals, preview_parameters as parameters };

package/dist/preview.test.js

@@ -0,0 +1,215 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { run } from "./a11yRunner.js";
+import { afterEach } from "./preview.js";
+import { getIsVitestRunning, getIsVitestStandaloneRun } from "./utils.js";
+const mocks = vi.hoisted(()=>({
+        getIsVitestRunning: vi.fn(),
+        getIsVitestStandaloneRun: vi.fn()
+    }));
+vi.mock(import("./a11yRunner.js"));
+vi.mock(import("./utils.js"), async (importOriginal)=>{
+    const mod = await importOriginal();
+    return {
+        ...mod,
+        getIsVitestRunning: mocks.getIsVitestRunning,
+        getIsVitestStandaloneRun: mocks.getIsVitestStandaloneRun
+    };
+});
+const mockedRun = vi.mocked(run);
+const violations = [
+    {
+        id: 'color-contrast',
+        impact: 'serious',
+        tags: '_duplicate_["args","0","reporters","0","result","passes","12","tags"]',
+        description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
+        help: 'Elements must meet minimum color contrast ratio thresholds',
+        helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI',
+        nodes: [
+            {
+                any: [
+                    {
+                        id: 'color-contrast',
+                        data: {
+                            fgColor: '#029cfd',
+                            bgColor: '#f6f9fc',
+                            contrastRatio: 2.76,
+                            fontSize: '10.5pt (14px)',
+                            fontWeight: 'normal',
+                            messageKey: null,
+                            expectedContrastRatio: '4.5:1',
+                            shadowColor: '_undefined_'
+                        },
+                        relatedNodes: [
+                            {
+                                html: '<div class="css-1av19vu">',
+                                target: [
+                                    '.css-1av19vu'
+                                ]
+                            }
+                        ],
+                        impact: 'serious',
+                        message: 'Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+                        '_constructor-name_': 'CheckResult'
+                    }
+                ],
+                all: [],
+                none: [],
+                impact: 'serious',
+                html: '<span class="css-1mjgzsp">',
+                target: [
+                    '.css-1mjgzsp'
+                ],
+                failureSummary: 'Fix any of the following:\n  Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1'
+            }
+        ]
+    }
+];
+describe('afterEach', ()=>{
+    beforeEach(()=>{
+        vi.mocked(getIsVitestRunning).mockReturnValue(false);
+        vi.mocked(getIsVitestStandaloneRun).mockReturnValue(true);
+    });
+    const createContext = (overrides = {})=>({
+            viewMode: 'story',
+            reporting: {
+                reports: [],
+                addReport: vi.fn()
+            },
+            parameters: {
+                a11y: {
+                    test: 'error'
+                }
+            },
+            globals: {
+                a11y: {}
+            },
+            ...overrides
+        });
+    it('should run accessibility checks and report results', async ()=>{
+        const context = createContext();
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        await expect(()=>afterEach(context)).rejects.toThrow();
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'failed'
+        });
+    });
+    it('should run accessibility checks and report results without throwing', async ()=>{
+        const context = createContext();
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        mocks.getIsVitestStandaloneRun.mockReturnValue(false);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'failed'
+        });
+    });
+    it('should run accessibility checks and should report them as warnings', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    test: 'todo'
+                }
+            }
+        });
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        mocks.getIsVitestStandaloneRun.mockReturnValue(false);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'warning'
+        });
+    });
+    it('should report passed status when there are no violations', async ()=>{
+        const context = createContext();
+        const result = {
+            violations: []
+        };
+        mockedRun.mockResolvedValue(result);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'passed'
+        });
+    });
+    it('should not run accessibility checks when disable is true', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    disable: true
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should not run accessibility checks when globals manual is true', async ()=>{
+        const context = createContext({
+            globals: {
+                a11y: {
+                    manual: true
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should not run accessibility checks when parameters.a11y.test is "off"', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    test: 'off'
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should report error when run throws an error', async ()=>{
+        const context = createContext();
+        const error = new Error('Test error');
+        mockedRun.mockRejectedValue(error);
+        await expect(()=>afterEach(context)).rejects.toThrow();
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result: {
+                error
+            },
+            status: 'failed'
+        });
+    });
+    it('should not run in docs mode', async ()=>{
+        const context = createContext({
+            viewMode: 'docs'
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+});