Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update(withIcon): Throw dev error if an ally prop is missing. #84

Merged
merged 3 commits into from
Jun 7, 2019
Merged

update(withIcon): Throw dev error if an ally prop is missing. #84

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2613412
update(withIcon): Throw dev error if an ally prop is missing.
stefhatcher Jun 7, 2019
bf005fc
Merge branch 'master' into stefanie--add-dev-error-when-missing-acces…
stefhatcher Jun 7, 2019
d0b16bc
fix build errors. update tests.
stefhatcher Jun 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/icons/src/withIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export default function withIcon(
};

if (__DEV__) {
if (!accessibilityLabel && !decorative) {
// eslint-disable-next-line no-console
console.error('Missing `accessibilityLabel` or `decorative` for accessibility.');
}

if (accessibilityLabel && decorative) {
// eslint-disable-next-line no-console
console.error('Only one of `accessibilityLabel` or `decorative` may be used.');
Expand Down
22 changes: 18 additions & 4 deletions packages/icons/test/withIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ describe('withIcon()', () => {

it('passes through props', () => {
const Hoc = withIcon('IconTest')(Foo);
const wrapper = shallow(<Hoc inline size={16} color="white" />);
const wrapper = shallow(<Hoc decorative inline size={16} color="white" />);
const style: React.CSSProperties = wrapper.find(Foo).prop('style');

expect(style.width).toBe(16);
Expand All @@ -28,23 +28,23 @@ describe('withIcon()', () => {

it('flips horizontally', () => {
const Hoc = withIcon('IconTest')(Foo);
const wrapper = shallow(<Hoc flip />);
const wrapper = shallow(<Hoc decorative flip />);
const style: React.CSSProperties = wrapper.find(Foo).prop('style');

expect(style.transform).toBe('scale(-1, 1)');
});

it('flips vertically', () => {
const Hoc = withIcon('IconTest')(Foo);
const wrapper = shallow(<Hoc flipVertical />);
const wrapper = shallow(<Hoc decorative flipVertical />);
const style: React.CSSProperties = wrapper.find(Foo).prop('style');

expect(style.transform).toBe('scale(1, -1)');
});

it('flips horizontally & vertically', () => {
const Hoc = withIcon('IconTest')(Foo);
const wrapper = shallow(<Hoc flip flipVertical />);
const wrapper = shallow(<Hoc decorative flip flipVertical />);
const style: React.CSSProperties = wrapper.find(Foo).prop('style');

expect(style.transform).toBe('scale(-1, -1)');
Expand All @@ -61,4 +61,18 @@ describe('withIcon()', () => {
expect(wrapperWithLabel.find(Foo).prop('role')).toBe('img');
expect(wrapperWithLabel.find(Foo).prop('aria-label')).toBe('foobar');
});

it('errors when an a11y prop is missing', () => {
expect(() => {
const Hoc = withIcon('IconTest')(Foo);
shallow(<Hoc />);
}).toThrowError('Missing `accessibilityLabel` or `decorative` for accessibility.');
});

it('errors when both a11y props are added', () => {
expect(() => {
const Hoc = withIcon('IconTest')(Foo);
shallow(<Hoc decorative accessibilityLabel="foobar" />);
}).toThrowError('Only one of `accessibilityLabel` or `decorative` may be used.');
});
});