[fix] createElement uses provided function component

If the component provided to 'createElement' is not a string alias for a
DOM component, it will no longer attempt to replace that component with
a DOM component inferred from the 'accessibility{Component,Role,Traits}'
prop.

Fix #895
This commit is contained in:
Nicolas Gallagher
2018-04-15 15:03:34 -07:00
parent 1aec803086
commit cf2612663b
3 changed files with 20 additions and 5 deletions

View File

@@ -67,7 +67,7 @@ export default class AppRegistry {
appParameters.initialProps || emptyObject,
appParameters.rootTag,
wrapperComponentProvider && wrapperComponentProvider(appParameters),
appParameters.callback,
appParameters.callback
)
};
return appKey;

View File

@@ -1,7 +1,8 @@
/* eslint-env jasmine, jest */
import createElement from '..';
import { shallow, render } from 'enzyme';
import React from 'react';
import { render, shallow } from 'enzyme';
describe('modules/createElement', () => {
test('it renders different DOM elements', () => {
@@ -23,9 +24,20 @@ describe('modules/createElement', () => {
});
});
describe('when ARIA role is "button"', () => {
describe('prop "accessibilityRole"', () => {
test('and string component type', () => {
const component = shallow(createElement('span', { accessibilityRole: 'link' }));
expect(component.find('a').length).toBe(1);
});
test('and function component type', () => {
const Custom = () => <div />;
const component = shallow(createElement(Custom, { accessibilityRole: 'link' }));
expect(component.find('div').length).toBe(1);
});
[{ disabled: true }, { disabled: false }].forEach(({ disabled }) => {
describe(`and disabled is "${disabled}"`, () => {
describe(`value is "button" and disabled is "${disabled}"`, () => {
[{ name: 'Enter', which: 13 }, { name: 'Space', which: 32 }].forEach(({ name, which }) => {
test(`"onClick" is ${disabled ? 'not ' : ''}called when "${name}" is pressed`, () => {
const onClick = jest.fn();

View File

@@ -83,7 +83,10 @@ const adjustProps = domProps => {
const createElement = (component, props, ...children) => {
// use equivalent platform elements where possible
const accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
let accessibilityComponent;
if (component && component.constructor === String) {
accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
}
const Component = accessibilityComponent || component;
const domProps = createDOMProps(Component, props);
adjustProps(domProps);