Add to Button tests

packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Button prop "accessibilityLabel" 1`] = `
+<div
+  aria-label="accessibility label"
+  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  data-focusable="true"
+  role="button"
+  style="transition-duration: 0s;"
+  tabindex="0"
+>
+  <div
+    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    dir="auto"
+  />
+</div>
+`;
+
+exports[`components/Button prop "color" 1`] = `
+<div
+  class="css-cursor-18t94o4 css-view-1dbjc4n r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  data-focusable="true"
+  role="button"
+  style="background-color: rgb(0, 0, 255); transition-duration: 0s;"
+  tabindex="0"
+>
+  <div
+    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    dir="auto"
+  />
+</div>
+`;
+
+exports[`components/Button prop "disabled" 1`] = `
+<div
+  aria-disabled="true"
+  class="css-view-1dbjc4n r-backgroundColor-11mpjr4 r-borderRadius-1jkafct r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  disabled=""
+  role="button"
+  style="transition-duration: 0s;"
+>
+  <div
+    class="css-text-901oao r-color-c68hjy r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    dir="auto"
+  />
+</div>
+`;
+
+exports[`components/Button prop "testID" 1`] = `
+<div
+  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  data-focusable="true"
+  data-testid="123"
+  role="button"
+  style="transition-duration: 0s;"
+  tabindex="0"
+>
+  <div
+    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    dir="auto"
+  />
+</div>
+`;
+
+exports[`components/Button prop "title" 1`] = `
+<div
+  class="css-cursor-18t94o4 css-view-1dbjc4n r-backgroundColor-14sbq61 r-borderRadius-1jkafct r-cursor-1loqt21 r-touchAction-1otgn73 r-transitionProperty-1i6wzkk r-userSelect-lrvibr"
+  data-focusable="true"
+  role="button"
+  style="transition-duration: 0s;"
+  tabindex="0"
+>
+  <div
+    class="css-text-901oao r-color-jwli3a r-fontWeight-majxgm r-padding-edyy15 r-textAlign-q4m81j r-textTransform-tsynxw"
+    dir="auto"
+  >
+    Click me
+  </div>
+</div>
+`;

packages/react-native-web/src/exports/Button/__tests__/index-test.js

@@ -1,22 +1,47 @@
-/* eslint-env jasmine, jest */
-/* eslint-disable react/jsx-no-bind */
-
 import Button from '..';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createEventTarget } from 'dom-event-testing-library';
 import { render } from '@testing-library/react';
 
 describe('components/Button', () => {
+  test('prop "accessibilityLabel"', () => {
+    const { container } = render(<Button accessibilityLabel="accessibility label" title="" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('prop "color"', () => {
-    const onPress = () => {};
     const color = 'rgb(0, 0, 255)';
-    const { container } = render(<Button color={color} onPress={onPress} title="" />);
-    expect(container.firstChild.style.backgroundColor).toEqual(color);
+    const { container } = render(<Button color={color} title="" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('prop "disabled"', () => {
+    const { container } = render(<Button disabled={true} title="" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('prop "onPress"', () => {
+    const onPress = jest.fn();
+    const ref = React.createRef();
+    act(() => {
+      render(<Button onPress={onPress} ref={ref} title="" />);
+    });
+    const target = createEventTarget(ref.current);
+    act(() => {
+      target.pointerdown();
+      target.pointerup();
+    });
+    expect(onPress).toBeCalled();
+  });
+
+  test('prop "testID"', () => {
+    const { container } = render(<Button testID="123" title="" />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "title"', () => {
-    const onPress = () => {};
-    const text = 'Click me';
-    const { getByText } = render(<Button onPress={onPress} title={text} />);
-    expect(getByText(text)).toBeDefined();
+    const { container } = render(<Button title="Click me" />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

packages/react-native-web/src/exports/Button/index.js

@@ -8,10 +8,10 @@
  * @flow
  */
 
+import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import TouchableOpacity from '../TouchableOpacity';
 import Text from '../Text';
-import React from 'react';
 
 type ButtonProps = {|
   accessibilityLabel?: ?string,
@@ -22,7 +22,7 @@ type ButtonProps = {|
   title: string
 |};
 
-export default function Button(props: ButtonProps) {
+const Button = React.forwardRef<ButtonProps, *>((props, forwardedRef) => {
   const { accessibilityLabel, color, disabled, onPress, testID, title } = props;
 
   return (
@@ -31,6 +31,7 @@ export default function Button(props: ButtonProps) {
       accessibilityRole="button"
       disabled={disabled}
       onPress={onPress}
+      ref={forwardedRef}
       style={[
         styles.button,
         color && { backgroundColor: color },
@@ -41,7 +42,9 @@ export default function Button(props: ButtonProps) {
       <Text style={[styles.text, disabled && styles.textDisabled]}>{title}</Text>
     </TouchableOpacity>
   );
-}
+});
+
+Button.displayName = 'Button';
 
 const styles = StyleSheet.create({
   button: {
@@ -62,3 +65,7 @@ const styles = StyleSheet.create({
     color: '#a1a1a1'
   }
 });
+
+export type { ButtonProps };
+
+export default Button;