From 840a2e91d45a719769e49863aff6feb334a02ea0 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 4 Feb 2020 11:08:20 -0800
Subject: [PATCH] [change] modernize Button

Rewrite Button to use function components.
Rewrite the tests to replace enzyme with testing-library.
---
 .../exports/Button/__tests__/index-test.js    | 22 +++-------
 .../src/exports/Button/index.js               | 40 +++++++++----------
 2 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/packages/react-native-web/src/exports/Button/__tests__/index-test.js b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
index 85b2ebf6..f9920cd1 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
@@ -3,30 +3,20 @@
 
 import Button from '..';
 import React from 'react';
-import StyleSheet from '../../StyleSheet';
-import TouchableOpacity from '../../TouchableOpacity';
-import { render, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 describe('components/Button', () => {
   test('prop "color"', () => {
     const onPress = () => {};
-    const color = 'blue';
-    const button = shallow(<Button color={color} onPress={onPress} title="" />);
-    const style = StyleSheet.flatten(button.prop('style'));
-    expect(style.backgroundColor).toEqual(color);
-  });
-
-  test('prop "onPress"', () => {
-    const onPress = jest.fn();
-    const component = shallow(<Button onPress={onPress} title="" />);
-    component.find(TouchableOpacity).simulate('press');
-    expect(onPress).toHaveBeenCalled();
+    const color = 'rgb(0, 0, 255)';
+    const { container } = render(<Button color={color} onPress={onPress} title="" />);
+    expect(container.firstChild.style.backgroundColor).toEqual(color);
   });
 
   test('prop "title"', () => {
     const onPress = () => {};
     const text = 'Click me';
-    const component = render(<Button onPress={onPress} title={text} />);
-    expect(component.text()).toEqual(text);
+    const { getByText } = render(<Button onPress={onPress} title={text} />);
+    expect(getByText(text)).toBeDefined();
   });
 });
diff --git a/packages/react-native-web/src/exports/Button/index.js b/packages/react-native-web/src/exports/Button/index.js
index f733aa9f..3e69ac48 100644
--- a/packages/react-native-web/src/exports/Button/index.js
+++ b/packages/react-native-web/src/exports/Button/index.js
@@ -22,27 +22,25 @@ type ButtonProps = {|
   title: string
 |};
 
-class Button extends React.Component<ButtonProps> {
-  render() {
-    const { accessibilityLabel, color, disabled, onPress, testID, title } = this.props;
+export default function Button(props: ButtonProps) {
+  const { accessibilityLabel, color, disabled, onPress, testID, title } = props;
 
-    return (
-      <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="button"
-        disabled={disabled}
-        onPress={onPress}
-        style={[
-          styles.button,
-          color && { backgroundColor: color },
-          disabled && styles.buttonDisabled
-        ]}
-        testID={testID}
-      >
-        <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
-      </TouchableOpacity>
-    );
-  }
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={[
+        styles.button,
+        color && { backgroundColor: color },
+        disabled && styles.buttonDisabled
+      ]}
+      testID={testID}
+    >
+      <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
+    </TouchableOpacity>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -64,5 +62,3 @@ const styles = StyleSheet.create({
     color: '#a1a1a1'
   }
 });
-
-export default Button;