From 58d5ec15f45a8a19a82e794ae711a4cf89e95c61 Mon Sep 17 00:00:00 2001 From: Joshua Wiegmann Date: Fri, 2 Jul 2021 19:30:37 +0200 Subject: [PATCH 1/2] Remove defaultProps from SegmentedControlIOS --- .../SegmentedControlIOS.ios.js | 14 +++--- .../__tests__/SegmentedContolIOS-test.js | 50 +++++++++++++++++++ 2 files changed, 58 insertions(+), 6 deletions(-) create mode 100644 Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index a0b835238136..2635abdbc741 100644 --- a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js +++ b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js @@ -76,11 +76,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 && @@ -111,7 +106,14 @@ const SegmentedControlIOSWithRef = React.forwardRef( props: SegmentedControlIOSProps, forwardedRef: ?React.Ref, ) => { - return ; + return ( + + ); }, ); diff --git a/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js new file mode 100644 index 000000000000..ab1b58a8aead --- /dev/null +++ b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js @@ -0,0 +1,50 @@ +/** + * 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().props.enabled).toBe(true); + }); + it('renders the segmented control with enabled', () => { + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().props.enabled).toBe(true); + }); + it('renders the segmented control with enabled set to false', () => { + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().props.enabled).toBe(false); + }); + it('renders the segmented control with values default value', () => { + const component = ReactTestRenderer.create(); + expect(component.toTree().props.values).toEqual([]); + }); + it('renders the segmented control with values', () => { + const values = ['One', 'Two']; + const component = ReactTestRenderer.create( + , + ); + expect(component.toTree().props.values).toBe(values); + }); +}); From 32850ebfd5db78467f0835ea6eeb979cfa24fb11 Mon Sep 17 00:00:00 2001 From: Joshua Wiegmann Date: Sat, 10 Jul 2021 00:00:45 +0200 Subject: [PATCH 2/2] Move props to SegmentedControlIOS render and add snapshot tests --- .../SegmentedControlIOS.ios.js | 39 +++++++-- .../__tests__/SegmentedContolIOS-test.js | 15 ++-- .../SegmentedContolIOS-test.js.snap | 86 +++++++++++++++++++ 3 files changed, 126 insertions(+), 14 deletions(-) create mode 100644 Libraries/Components/SegmentedControlIOS/__tests__/__snapshots__/SegmentedContolIOS-test.js.snap diff --git a/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js b/Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js index 2635abdbc741..f3f69a6e1e31 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. * @@ -83,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 ( ); @@ -106,14 +134,7 @@ const SegmentedControlIOSWithRef = React.forwardRef( props: SegmentedControlIOSProps, forwardedRef: ?React.Ref, ) => { - return ( - - ); + return ; }, ); diff --git a/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js index ab1b58a8aead..605864bf697b 100644 --- a/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js +++ b/Libraries/Components/SegmentedControlIOS/__tests__/SegmentedContolIOS-test.js @@ -22,29 +22,34 @@ describe('SegmentedControlIOS', () => { }); it('renders the segmented control with enabled default value', () => { const component = ReactTestRenderer.create(); - expect(component.toTree().props.enabled).toBe(true); + 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().props.enabled).toBe(true); + 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().props.enabled).toBe(false); + 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().props.values).toEqual([]); + 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().props.values).toBe(values); + 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 000000000000..30195d27c7f8 --- /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`] = ` + +`;