UNPKG

3.99 kBTypeScriptView Raw
1/*
2 * The MIT License (MIT)
3 *
4 * Copyright (c) 2015 - present Instructure, Inc.
5 *
6 * Permission is hereby granted, free of charge, to any person obtaining a copy
7 * of this software and associated documentation files (the "Software"), to deal
8 * in the Software without restriction, including without limitation the rights
9 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 * copies of the Software, and to permit persons to whom the Software is
11 * furnished to do so, subject to the following conditions:
12 *
13 * The above copyright notice and this permission notice shall be included in all
14 * copies or substantial portions of the Software.
15 *
16 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 * SOFTWARE.
23 */
24
25import React from 'react'
26import { mount } from '@instructure/ui-test-sandbox'
27import { expect } from './expect'
28import { Example, StoryConfig, within } from '../index'
29import { generateComponentExamples } from './generateComponentExamples'
30
31const renderExample = ({ Component, componentProps, key }: Example<any>) => (
32 <Component key={key} {...componentProps} />
33)
34
35/**
36 *
37 * This function will generate a11y tests based on the component and the component
38 * example definition json.
39 * It will enumerate over the generated component examples and will call the
40 * `.accessible()` function on it.
41 *
42 * ```js
43 * const subject = await mount(<Example />)
44 const element = within(subject.getDOMNode())
45
46 expect(await element.accessible()).to.be.true()
47 * ```
48 * @param Component - The base Component
49 * @param componentExample - The example definition json, this will be the basis for the prop
50 * combination generation.
51 * @param ariaRulesToIgnore - ARIA rules to ignore. these must be one of the
52 * rules described here: https://dequeuniversity.com/rules/axe/4.4
53 *
54 * @module generateA11yTests
55 * @private
56 */
57export function generateA11yTests<Props>(
58 Component: React.ComponentType<any>,
59 componentExample: StoryConfig<Props>,
60 ariaRulesToIgnore?: string[]
61) {
62 const sections = generateComponentExamples(Component, componentExample)
63 describe(`${Component.displayName} should meet accessibility standards`, async () => {
64 sections.forEach(({ pages, propName, propValue }, i) => {
65 const description = propName
66 ? `rendered with prop '${propName}' = '${propValue}'`
67 : 'rendered'
68 describe(`${description}`, async () => {
69 let rendered = 0
70 let j = 0
71 pages.forEach(({ examples }) => {
72 examples.forEach((example) => {
73 const Example = renderExample.bind(null, example)
74 const description = process.env.DEBUG
75 ? `with prop combination: ${JSON.stringify(
76 example.componentProps,
77 null,
78 2
79 )} [${i},${j}]`
80 : `${j}`
81 it(description, async () => {
82 const subject = await mount(<Example />)
83 const element = within(subject.getDOMNode())
84 let axeOptions = undefined
85 if (ariaRulesToIgnore) {
86 axeOptions = { ignores: ariaRulesToIgnore }
87 }
88 const result = await element.accessible(axeOptions)
89 if (result !== true) {
90 // \n is needed because chai cuts the log in two with a
91 // expected - actual message.
92 expect.fail('\n' + result.message)
93 }
94 })
95 j++
96 })
97 rendered = rendered + examples.length
98 })
99 })
100 })
101 })
102}