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 |
|
25 | import React from 'react'
|
26 | import { mount } from '@instructure/ui-test-sandbox'
|
27 | import { expect } from './expect'
|
28 | import { Example, StoryConfig, within } from '../index'
|
29 | import { generateComponentExamples } from './generateComponentExamples'
|
30 |
|
31 | const 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 | */
|
57 | export 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 | }
|