@microsoft/windows-admin-center-sdk/core/test-utilities/jasmine-axe-matcher.js

Microsoft - Windows Admin Center Shell

import * as axe from 'axe-core/axe';
/**
 * Reports the violations results.
 */
export class JasmineAxeReporter {
    /**
     * Helper method to dump violation details on test fail only.
     * This will help investigating issue with context specific help links.
     * @param violations all violations reported by the axe-core engine.
     */
    static reportResults(violations) {
        const violationsOutput = [];
        violationsOutput.push(`\n\r Axe-core engine found ${violations.length} violations.`);
        violations.forEach(violation => {
            violationsOutput.push('---------------------Start-------------------------------------');
            violationsOutput.push('Rule Id: ' + violation.id);
            violationsOutput.push('Violation: ' + violation.help);
            violationsOutput.push('Help Url: ' + violation.helpUrl);
            violationsOutput.push('Description: ' + violation.description);
            violationsOutput.push('Impact: ' + violation.impact);
            violationsOutput.push('Tags: ' + violation.tags);
            // Multiple nodes can have sane violations. Below will provide what node selector and HTML.
            violation.nodes.forEach(node => {
                violationsOutput.push('Target: ' + node.target);
                violationsOutput.push('Target HTML: ' + node.html);
            });
            violationsOutput.push('---------------------End---------------------------------------');
        });
        return violationsOutput.join('\n\r');
    }
}
/**
 * JasmineAxeMatcher is a custom Jasmine matcher responsible for accessibility scan using axe-core.
 * Axe-core is running on default configurations running all rules related to
 * WCAG2a, WCAG2aa, WCAG21aa, section-508, best-practice and experimental.
 * See https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#api-name-axegetrules
 *
 * Runs all axe-core rules.
 * elementContext: Context of the element code be document Node | string | inclusion-exclusion object
 * Examples:
 *  fixture.nativeElement
 *  document.getElementById(id)
 *  <div id="content">
 *  A node List: document.querySelectorAll
 *  A CSS selector for .className, div, #tag.
 *  inclusion-exclusion object
 * Examples:
*   Include all elements with id foobar but exclude any div within it.
*   {
*       include: ['#foobar '],
*       exclude: [['#foobar div']]
*   }
*   Include all elements if id header and all links and exclude a link with id foobarLink
*   {
*       include: [['#header '], ['a ']];
*       exclude: [['a', '#foobarLink']]
*   }
*/
export const JasmineAxeMatcher = {
    toHaveNoAccessibilityViolations: () => {
        return {
            compare: (elementContext) => {
                const result = {
                    pass: true,
                    message: ''
                };
                if (MsftSme.isNullOrUndefined(elementContext)) {
                    result.pass = false;
                    result.message = 'elementContext can not be null or undefined';
                    return result;
                }
                if (MsftSme.isNullOrWhiteSpace(elementContext.outerHTML)) {
                    result.pass = false;
                    result.message = 'elementContext can not be empty';
                    return result;
                }
                axe.run(elementContext).then((results) => {
                    if (results.violations.length > 0) {
                        // Always return pass but it will fail the test if expectations fail.
                        result.pass = true;
                        result.message = '';
                        expect(results.violations.length).withContext(JasmineAxeReporter.reportResults(results.violations)).toBe(0);
                    }
                });
                return result;
            }
        };
    }
};

//# sourceMappingURL=jasmine-axe-matcher.js.map