diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index a0b835238136ae..f3f69a6e1e315e 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -19,6 +19,8 @@ type SegmentedControlIOSProps = $ReadOnly<{| ...ViewProps, /** * The labels for the control's segment buttons, in order. + * + * The default value is an empty array. */ values?: $ReadOnlyArray, /** @@ -27,6 +29,8 @@ type SegmentedControlIOSProps = $ReadOnly<{| selectedIndex?: ?number, /** * If false the user won't be able to interact with the control. + * + * The default value is true. */ enabled?: boolean, /** @@ -54,6 +58,21 @@ type Props = $ReadOnly<{| forwardedRef: ?React.Ref, |}>; +/** + * Default Props Helper Functions + * Use the following helper functions for default values + */ + +// enabledOrDefault(this.props.enabled) +function enabledOrDefault(enabled: ?boolean) { + return enabled ?? true; +} + +// valuesOrDefault(this.props.values) +function valuesOrDefault(values: ?$ReadOnlyArray) { + return values ?? []; +} + /** * Use `SegmentedControlIOS` to render a UISegmentedControl iOS. * @@ -76,11 +95,6 @@ type Props = $ReadOnly<{| */ class SegmentedControlIOS extends React.Component { - static defaultProps = { - values: [], - enabled: true, - }; - _onChange = (event: SyntheticEvent) => { this.props.onChange && this.props.onChange(event); this.props.onValueChange && @@ -88,12 +102,21 @@ class SegmentedControlIOS extends React.Component { }; render() { - const {forwardedRef, onValueChange, style, ...props} = this.props; + const { + forwardedRef, + enabled: _enabled, + values: _values, + onValueChange, + style, + ...props + } = this.props; return ( ); diff --git a/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js new file mode 100644 index 00000000000000..605864bf697b88 --- /dev/null +++ b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js @@ -0,0 +1,55 @@ +/** + * 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. + * + * @format + * @emails oncall+react_native + */ + +'use strict'; + +const React = require('react'); +const ReactTestRenderer = require('react-test-renderer'); + +const SegmentedControlIOS = require('../SegmentedControlIOS.ios'); + +describe('SegmentedControlIOS', () => { + it('renders the segmented control', () => { + const component = ReactTestRenderer.create(); + expect(component).not.toBeNull(); + }); + it('renders the segmented control with enabled default value', () => { + const component = ReactTestRenderer.create(); + expect(component.toTree().rendered.props.enabled).toBe(true); + expect(component).toMatchSnapshot(); + }); + it('renders the segmented control with enabled', () => { + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().rendered.props.enabled).toBe(true); + expect(component).toMatchSnapshot(); + }); + it('renders the segmented control with enabled set to false', () => { + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().rendered.props.enabled).toBe(false); + expect(component).toMatchSnapshot(); + }); + it('renders the segmented control with values default value', () => { + const component = ReactTestRenderer.create(); + expect(component.toTree().rendered.props.values).toEqual([]); + expect(component).toMatchSnapshot(); + }); + it('renders the segmented control with values', () => { + const values = ['One', 'Two']; + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().rendered.props.values).toBe(values); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/Libraries/Components/SegmentedControlIOS/__tests__/__snapshots__/SegmentedContolIOS-test.js.snap b/Libraries/Components/SegmentedControlIOS/__tests__/__snapshots__/SegmentedContolIOS-test.js.snap new file mode 100644 index 00000000000000..30195d27c7f857 --- /dev/null +++ b/Libraries/Components/SegmentedControlIOS/__tests__/__snapshots__/SegmentedContolIOS-test.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SegmentedControlIOS renders the segmented control with enabled 1`] = ` + +`; + +exports[`SegmentedControlIOS renders the segmented control with enabled default value 1`] = ` + +`; + +exports[`SegmentedControlIOS renders the segmented control with enabled set to false 1`] = ` + +`; + +exports[`SegmentedControlIOS renders the segmented control with values 1`] = ` + +`; + +exports[`SegmentedControlIOS renders the segmented control with values default value 1`] = ` + +`;