Merge pull request alibaba-fusion#311 from jdkahn/test/a11y

More unit tests for components

test/badge/a11y-spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Badge from '../../src/badge/index';
+import '../../src/badge/style';
+import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Badge A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations for count and no children', async () => {
+        wrapper = await testReact(<Badge count={5} />);
+        return wrapper;
+    });
+
+    it('should not have any violations for dot', async () => {
+        wrapper = await testReact(<Badge dot />);
+        return wrapper;
+    });
+
+    it('should not have any violations for content', async () => {
+        wrapper = await testReact(<Badge content="hot">
+            <a href="#" aria-label="example"></a>
+        </Badge>);
+        return wrapper;
+    });
+});

test/balloon/a11y-spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Balloon from '../../src/balloon/index';
+import '../../src/balloon/style';
+import { afterEach as a11yAfterEach, test, mountReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const wrapperClassName = 'js-a11y-test';
+const popupProps = { wrapperClassName };
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Balloon A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            // wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    // TODO: fix `button-name` violation for close button
+    it.skip('should not have any violations', async () => {
+        wrapper = await mountReact(<Balloon visible popupProps={popupProps}>
+                I am balloon content
+        </Balloon>);
+        return test(`.${wrapperClassName}`);
+    });
+
+    it('should not have any violations when not closable', async () => {
+        wrapper = await mountReact(<Balloon visible closable={false} popupProps={popupProps}>
+                I am balloon content
+        </Balloon>);
+        return test(`.${wrapperClassName}`);
+    });
+
+    it('should not have any violations when Tooltip', async () => {
+        wrapper = await mountReact(<Balloon.Tooltip visible popupProps={popupProps}>
+                I am balloon content
+        </Balloon.Tooltip>);
+        return test(`.${wrapperClassName}`);
+    });
+});

test/breadcrumb/a11y-spec.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Breadcrumb from '../../src/breadcrumb/index';
+import '../../src/breadcrumb/style';
+import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Breadcrumb A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations when empty', async () => {
+        wrapper = await testReact(<Breadcrumb />);
+        return wrapper;
+    });
+
+    it('should not have any violations for breadcrumb items', async () => {
+        wrapper = await testReact(<Breadcrumb>
+            <Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
+            <Breadcrumb.Item>
+                T-shirts&nbsp; <b>78,999</b> Results
+            </Breadcrumb.Item>
+        </Breadcrumb>);
+        return wrapper;
+    });
+
+    it('should not have any violations for max node limit', async () => {
+        wrapper = await testReact(<Breadcrumb maxNode={2}>
+            <Breadcrumb.Item>1</Breadcrumb.Item>
+            <Breadcrumb.Item>2</Breadcrumb.Item>
+            <Breadcrumb.Item>3</Breadcrumb.Item>
+        </Breadcrumb>);
+        return wrapper;
+    });
+
+    it('should not have any violations for separator', async () => {
+        wrapper = await testReact(<Breadcrumb separator="/">
+            <Breadcrumb.Item>1</Breadcrumb.Item>
+            <Breadcrumb.Item>2</Breadcrumb.Item>
+            <Breadcrumb.Item>3</Breadcrumb.Item>
+        </Breadcrumb>);
+        return wrapper;
+    });
+});

test/button/a11y-spec.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Button from '../../src/button/index';
+import '../../src/button/style';
+import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Button A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations when default', async () => {
+        wrapper = await testReact(<div>
+            <Button type="normal">Normal</Button> &nbsp;&nbsp;
+            <Button type="normal" disabled>Normal</Button> &nbsp;&nbsp;
+            <Button type="primary">Prirmary</Button> &nbsp;&nbsp;
+            <Button type="primary" disabled>Prirmary</Button> &nbsp;&nbsp;
+            <Button type="secondary">Secondary</Button> &nbsp;&nbsp;
+            <Button type="secondary" disabled>Secondary</Button>
+        </div>);
+        return wrapper;
+    });
+
+    it('should not have any violations when text buttons', async () => {
+        wrapper = await testReact(<div>
+            <Button type="normal" text>Normal</Button> &nbsp;&nbsp;
+            <Button type="normal" text disabled>Normal</Button> &nbsp;&nbsp;
+            <Button type="primary" text>Normal</Button> &nbsp;&nbsp;
+            <Button type="primary" text disabled> Prirmary</Button> &nbsp;&nbsp;
+            <Button type="secondary" text>Normal</Button> &nbsp;&nbsp;
+            <Button type="secondary" text disabled>Secondary</Button>
+        </div>);
+        return wrapper;
+    });
+
+    it('should not have any violations when warning buttons', async () => {
+        wrapper = await testReact(<div>
+            <Button type="normal" warning>Normal</Button> &nbsp;&nbsp;
+            <Button type="normal" warning disabled>Prirmary</Button> &nbsp;&nbsp;
+            <Button type="primary" warning>Prirmary</Button> &nbsp;&nbsp;
+            <Button type="primary" warning disabled>Prirmary</Button> &nbsp;&nbsp;
+        </div>);
+        return wrapper;
+    });
+
+    it('should not have any violations when anchor tag', async () => {
+        const props = {
+            component: 'a',
+            href: 'http://www.alibaba.com',
+            target: '_blank'
+        };
+        wrapper = await testReact(<Button {...props}>alibaba</Button>);
+        return wrapper;
+    });
+
+    it('should not have any violations when ghost', async () => {
+        wrapper = await testReact(<div>
+            <Button ghost="light">Ghost light</Button> &nbsp;&nbsp;
+            <Button ghost="light" disabled>Ghost light</Button> &nbsp;&nbsp;
+            <Button ghost="dark">Ghost dark</Button> &nbsp;&nbsp;
+            <Button ghost="dark" disabled>Ghost dark</Button>
+        </div>);
+        return wrapper;
+    });
+
+    it('should not have any violations when in a Button Group', async () => {
+        wrapper = await testReact(
+            <Button.Group>
+                <Button type="primary">OK</Button>
+                <Button type="secondary">Cancel</Button>
+            </Button.Group>
+        );
+        return wrapper;
+    });
+
+    it('should not have any violations when loading', async () => {
+        wrapper = await testReact(<Button type="secondary" loading>Loading</Button>);
+        return wrapper;
+    });
+
+    it('should not have any violations when various sizes', async () => {
+        wrapper = await testReact(<div>
+            <Button type="primary" size="large">Large</Button>&nbsp;&nbsp;
+            <Button type="primary">Medium</Button>&nbsp;&nbsp;
+            <Button type="primary" size="small">Small</Button>
+            <br />
+            <br />
+            <Button.Group size="large">
+                <Button>Button</Button>
+                <Button>Button</Button>
+                <Button>Button</Button>
+            </Button.Group>
+        </div>);
+        return wrapper;
+    });
+});

test/card/a11y-spec.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Card from '../../src/card/index';
+import '../../src/card/style';
+import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Card A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations when default', async () => {
+        wrapper = await testReact(<Card title="Simple Card">
+            <div className="card-placeholder"></div>
+        </Card>);
+        return wrapper;
+    });
+
+    it('should not have any violations when displaying images', async () => {
+        wrapper = await testReact(<Card className="image-card" contentHeight="auto">
+            <img src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" alt="father day" />
+            <div className="custom-card">
+                <h3>Father's Day</h3>
+                <p>Thank you, papa</p>
+            </div>
+        </Card>);
+        return wrapper;
+    });
+
+    it('should not have any violations when setting height', async () => {
+        const commonProps = {
+            style: { width: 300 },
+            title: 'Title',
+            subTitle: 'Sub-title'
+        };
+
+        wrapper = await testReact(<div>
+            <Card {...commonProps} contentHeight="auto">
+                <div className="custom-content">
+                    <p>Card content</p>
+                    <p>Card content</p>
+                </div>
+            </Card>
+            &nbsp;&nbsp;
+            <Card {...commonProps} contentHeight={200}>
+                <div className="custom-content">
+                    <p>Card content</p>
+                    <p>Card content</p>
+                </div>
+            </Card>
+        </div>);
+        return wrapper;
+    });
+
+    it('should not have any violations when setting title off', async () => {
+        const commonProps = {
+            style: { width: 300 },
+            title: 'Title'
+        };
+
+        wrapper = await testReact(<Card {...commonProps} showTitleBullet={false}>
+            Card Content
+        </Card>);
+        return wrapper;
+    });
+});

test/dropdown/a11y-spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Dropdown from '../../src/dropdown/index';
+import '../../src/dropdown/style';
+import { afterEach as a11yAfterEach, test, mountReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const wrapperClassName = 'js-a11y-test';
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Dropdown A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations', async () => {
+        wrapper = await mountReact(<Dropdown trigger={<a>Hello dropdown</a>} visible wrapperClassName={wrapperClassName}>
+            <div>dropdown</div>
+        </Dropdown>);
+        return test(`.${wrapperClassName}`);
+    });
+});

test/icon/a11y-spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Icon from '../../src/icon/index';
+import '../../src/icon/style';
+import { afterEach as a11yAfterEach, testReact } from '../util/a11y/validate';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Icon A11y', () => {
+    let wrapper;
+
+    afterEach(() => {
+        if (wrapper) {
+            wrapper.unmount();
+            wrapper = null;
+        }
+        a11yAfterEach();
+    });
+
+    it('should not have any violations', async () => {
+        wrapper = await testReact(<Icon/>);
+        return wrapper;
+    });
+});