Accessibility/button test (#31189)
Summary: This PR aims to add test's for button. Snapshot test for PR https://github.com/facebook/react-native/issues/31001 . This would make sure `accessibilityState` is properly set. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Added] - Test's for button Pull Request resolved: https://github.com/facebook/react-native/pull/31189 Test Plan: `npm test` to run the test's. Since the disabled prop of button has precedence over `accessibilityState.disabled` the test's will make sure it remains this way. Reviewed By: kacieb Differential Revision: D27473082 Pulled By: lunaleaps fbshipit-source-id: 65d82620e8c245c2a8e29c3e9a8252d3a4275b09
This commit is contained in:
Huzaifa
Facebook GitHub Bot
Родитель
d04ec4dc65
Коммит
b5e649fcf6
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import ReactTestRenderer from 'react-test-renderer';
|
||||
import Button from '../Button';
|
||||
|
||||
describe('<Button />', () => {
|
||||
it('should render as expected', () => {
|
||||
expect(ReactTestRenderer.create(<Button title="Test Button" />)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be disabled and it should set accessibilityState to disabled when disabled={true}', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(<Button title="Test Button" disabled={true} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be disabled when disabled={true} and accessibilityState={{disabled: true}}', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(<Button title="Test Button" disabled={true} accessibilityState={{disabled: true}} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be disabled when disabled is empty and accessibilityState={{disabled: true}}', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(<Button title="Test Button" accessibilityState={{disabled: true}} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should overwrite accessibilityState with value of disabled prop', () => {
|
||||
expect(ReactTestRenderer.create(<Button title="Test Button" disabled={true} accessibilityState={{disabled: false}} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should not be disabled when disabled={false} and accessibilityState={{disabled: true}}', () => {
|
||||
expect(ReactTestRenderer.create(<Button title="Test Button" disabled={false} accessibilityState={{disabled: true}} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should not be disabled when disabled={false} and accessibilityState={{disabled: false}}', () => {
|
||||
expect(ReactTestRenderer.create( <Button title="Test Button" disabled={false} accessibilityState={{disabled: false}} />)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,368 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Button /> should be disabled and it should set accessibilityState to disabled when disabled={true} 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={true}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
Object {
|
||||
"color": "#cdcdcd",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should be disabled when disabled is empty and accessibilityState={{disabled: true}} 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={true}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
Object {
|
||||
"color": "#cdcdcd",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should be disabled when disabled={true} and accessibilityState={{disabled: true}} 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={true}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
Object {
|
||||
"color": "#cdcdcd",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should not be disabled when disabled={false} and accessibilityState={{disabled: false}} 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": false,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={false}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should not be disabled when disabled={false} and accessibilityState={{disabled: true}} 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": false,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={false}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should overwrite accessibilityState with value of disabled prop 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
disabled={true}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
Object {
|
||||
"color": "#cdcdcd",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`<Button /> should render as expected 1`] = `
|
||||
<View
|
||||
accessibilityRole="button"
|
||||
accessible={true}
|
||||
collapsable={false}
|
||||
focusable={false}
|
||||
nativeID="animatedComponent"
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"opacity": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {},
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#007AFF",
|
||||
"fontSize": 18,
|
||||
"margin": 8,
|
||||
"textAlign": "center",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
Test Button
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
`;
|
||||
Загрузка…
Ссылка в новой задаче