-
Notifications
You must be signed in to change notification settings - Fork 101
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a11y test helper for mocha unit tests
fixes CNVS-24009 This adds a wrapper for the aXe testing library that we can use in our mocha unit tests. When adding a new component the a11y test will be automatically included by the generator script. The wrapper adds the capability to ignore specific rules (see MetricListItem.test.js for an example) Note that because the aXe test method is async the stack trace when there is a failure isn't very helpful. You can see what test failed in the report though. This may be something we can improve in the future. Additional changes: - Cleaned up dependencies and replaced lodash.uniqueid with the shortid module. - Refactored some of the example code into a ComponentExample component - updated Image, RangeInput and Link components based on the a11y test results - added json-loader to load .babelrc file to render examples Test plan: - `npm start` and browser to http://localhost:8080; examples should render - `npm test` all test cases should pass - Modify a component so that it doesn't meet a11y standards (e.g. remove the label element from RangeInput); Run `npm test`. The RangeInput a11y standards test should fail. - Modify the MetricListItem.test.js file and remove the ignores; The test should fail when `npm test` is run. Change-Id: I0743d3975f16fd86fde7a77754b9c7b303207201 Reviewed-on: https://gerrit.instructure.com/69959 Tested-by: Jenkins Reviewed-by: Ryan Shaw <[email protected]> QA-Review: Aaron Cannon <[email protected]> Product-Review: Jennifer Stern <[email protected]>
- Loading branch information
Showing
31 changed files
with
516 additions
and
341 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 151 additions & 0 deletions
151
docs/app/lib/components/ComponentExample/ComponentExample.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React, {Component, PropTypes} from 'react' | ||
| import ReactDOM from 'react-dom' | ||
| import { transform } from 'babel-standalone' | ||
| import WindowMessageListener from '../WindowMessageListener' | ||
| import debounce from 'lodash/function/debounce' | ||
| import defer from 'lodash/function/defer' | ||
| import window from 'global/window' | ||
|
|
||
| import styles from './ComponentExample.css' | ||
|
|
||
| import docs from '../../util/load-docs' | ||
|
|
||
| export default class ComponentExample extends Component { | ||
| static propTypes = { | ||
| code: PropTypes.string, | ||
| children: PropTypes.node | ||
| }; | ||
|
|
||
| constructor () { | ||
| super() | ||
| this.state = { | ||
| error: null | ||
| } | ||
| } | ||
|
|
||
| componentDidMount () { | ||
| docs.globalize() | ||
|
|
||
| if (this.props.code) { | ||
| this.executeCode(this.props.code) | ||
| } | ||
| if (window.parent) { | ||
| WindowMessageListener.postMessage(window.parent, { | ||
| isMounted: true | ||
| }) | ||
| this._handleResize = debounce(this.notifyParent, 200) | ||
| window.addEventListener('resize', this._handleResize) | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount () { | ||
| if (this._handleResize) { | ||
| window.removeEventListener('resize', this._handleResize) | ||
| } | ||
| } | ||
|
|
||
| handleMessage = (message) => { | ||
| if (message && typeof message.code === 'string') { | ||
| this.executeCode(message.code) | ||
| } | ||
| }; | ||
|
|
||
| notifyParent = () => { | ||
| if (window.parent) { | ||
| const node = ReactDOM.findDOMNode(this) | ||
| window.setTimeout(function () { | ||
| WindowMessageListener.postMessage(window.parent, { | ||
| contentHeight: node.offsetHeight | ||
| }) | ||
| }, 0) | ||
| } | ||
| }; | ||
|
|
||
| compileCode (code) { | ||
| return transform(code, require('json!babel-config')).code | ||
| } | ||
|
|
||
| evalCode (code) { | ||
| /* eslint-disable no-eval */ | ||
| return eval(code) | ||
| /* eslint-disable no-eval */ | ||
| } | ||
|
|
||
| executeCode (code) { | ||
| const mountNode = this.refs.mount | ||
|
|
||
| ReactDOM.unmountComponentAtNode(mountNode) | ||
|
|
||
| this.setState({ | ||
| error: null | ||
| }) | ||
|
|
||
| if (!code) { | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const compiledCode = this.compileCode(code) | ||
| const component = this.evalCode(compiledCode) | ||
|
|
||
| ReactDOM.render(component, mountNode, () => { | ||
| defer(this.notifyParent) | ||
| }) | ||
| } catch (err) { | ||
| this.handleError(err) | ||
| } | ||
| } | ||
|
|
||
| handleError (err) { | ||
| ReactDOM.unmountComponentAtNode(this.refs.mount) | ||
| this.setState({ | ||
| error: err.toString() | ||
| }) | ||
| defer(this.notifyParent) | ||
| } | ||
|
|
||
| renderError () { | ||
| const { error } = this.state | ||
| if (error) { | ||
| return ( | ||
| <pre className={styles.error}>{error}</pre> | ||
| ) | ||
| } else { | ||
| return null | ||
| } | ||
| } | ||
|
|
||
| renderErrorBg () { | ||
| const { error } = this.state | ||
| if (error) { | ||
| return ( | ||
| <div className={styles.errorBg}></div> | ||
| ) | ||
| } else { | ||
| return null | ||
| } | ||
| } | ||
|
|
||
| renderExample () { | ||
| const { error } = this.state | ||
| if (error) { | ||
| null | ||
| } else { | ||
| return ( | ||
| <div ref="mount" className={styles.example}> | ||
| {this.props.children} | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| render () { | ||
| return ( | ||
| <WindowMessageListener onReceiveMessage={this.handleMessage} className={styles.root}> | ||
| { this.renderErrorBg() } | ||
| { this.renderExample() } | ||
| { this.renderError() } | ||
| </WindowMessageListener> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './ComponentExample' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './WindowMessageListener' |
Oops, something went wrong.