mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Adds basic Fantom test for <Button> (#51380)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/51380 Changelog: [internal] Adding more examples of tests for core components with Fantom :) Reviewed By: lenaic Differential Revision: D74874581 fbshipit-source-id: 1285c4d222cb811b51155871c245b1bd5889b47a
This commit is contained in:
Rubén Norte
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
8d8cb718aa
commit
935cba270c
@@ -0,0 +1,258 @@
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @flow strict-local
|
||||
* @format
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
|
||||
|
||||
import * as Fantom from '@react-native/fantom';
|
||||
import nullthrows from 'nullthrows';
|
||||
import * as React from 'react';
|
||||
import {Button} from 'react-native';
|
||||
|
||||
describe('<Button>', () => {
|
||||
describe('props', () => {
|
||||
describe('title', () => {
|
||||
it('sets the text of the button', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<Button title="Hello" />);
|
||||
});
|
||||
|
||||
expect(
|
||||
root
|
||||
.getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
|
||||
.toJSX(),
|
||||
).toEqual(
|
||||
// Upper case on Android (also used by Fantom)
|
||||
<rn-view backgroundColor="rgba(33, 150, 243, 255)">
|
||||
<rn-paragraph
|
||||
backgroundColor="rgba(255, 255, 255, 127)"
|
||||
foregroundColor="rgba(255, 255, 255, 255)">
|
||||
HELLO
|
||||
</rn-paragraph>
|
||||
</rn-view>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('color', () => {
|
||||
it('sets the background color of the button (non-iOS)', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<Button title="Hello" color="blue" />);
|
||||
});
|
||||
|
||||
expect(
|
||||
root
|
||||
.getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
|
||||
.toJSX(),
|
||||
).toEqual(
|
||||
<rn-view backgroundColor="rgba(0, 0, 255, 255)">
|
||||
<rn-paragraph
|
||||
backgroundColor="rgba(255, 255, 255, 127)"
|
||||
foregroundColor="rgba(255, 255, 255, 255)">
|
||||
HELLO
|
||||
</rn-paragraph>
|
||||
</rn-view>,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onPress', () => {
|
||||
it('is called when the button is pressed', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const onPressCallback = jest.fn();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<Button title="Hello" onPress={onPressCallback} />);
|
||||
});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
|
||||
// This is necessary because `<Button>` doesn't provide a `<View>` ref
|
||||
// but an instance of `Touchable` that isn't a ReactNativeElement.
|
||||
const buttonViewNode = nullthrows(
|
||||
root.document.documentElement.firstElementChild,
|
||||
);
|
||||
|
||||
Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabled', () => {
|
||||
it('sets different default colors', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(<Button title="Hello" disabled={true} />);
|
||||
});
|
||||
|
||||
expect(
|
||||
root
|
||||
.getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
|
||||
.toJSX(),
|
||||
).toEqual(
|
||||
<rn-view backgroundColor="rgba(223, 223, 223, 255)">
|
||||
<rn-paragraph
|
||||
backgroundColor="rgba(255, 255, 255, 127)"
|
||||
foregroundColor="rgba(161, 161, 161, 255)">
|
||||
HELLO
|
||||
</rn-paragraph>
|
||||
</rn-view>,
|
||||
);
|
||||
});
|
||||
|
||||
it('prevents the button onPress callback from being called', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const onPressCallback = jest.fn();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<Button title="Hello" disabled={true} onPress={onPressCallback} />,
|
||||
);
|
||||
});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
|
||||
// This is necessary because `<Button>` doesn't provide a `<View>` ref
|
||||
// but an instance of `Touchable` that isn't a ReactNativeElement.
|
||||
const buttonViewNode = nullthrows(
|
||||
root.document.documentElement.firstElementChild,
|
||||
);
|
||||
|
||||
Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it('takes precendence over accessibilityState (set to true)', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const onPressCallback = jest.fn();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<Button
|
||||
title="Hello"
|
||||
disabled={true}
|
||||
accessibilityState={{disabled: false}}
|
||||
onPress={onPressCallback}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
|
||||
// This is necessary because `<Button>` doesn't provide a `<View>` ref
|
||||
// but an instance of `Touchable` that isn't a ReactNativeElement.
|
||||
const buttonViewNode = nullthrows(
|
||||
root.document.documentElement.firstElementChild,
|
||||
);
|
||||
|
||||
Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it('takes precendence over accessibilityState (set to false)', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const onPressCallback = jest.fn();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<Button
|
||||
title="Hello"
|
||||
disabled={false}
|
||||
accessibilityState={{disabled: true}}
|
||||
onPress={onPressCallback}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(
|
||||
root
|
||||
.getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
|
||||
.toJSX(),
|
||||
).toEqual(
|
||||
<rn-view backgroundColor="rgba(33, 150, 243, 255)">
|
||||
<rn-paragraph
|
||||
backgroundColor="rgba(255, 255, 255, 127)"
|
||||
foregroundColor="rgba(255, 255, 255, 255)">
|
||||
HELLO
|
||||
</rn-paragraph>
|
||||
</rn-view>,
|
||||
);
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
|
||||
// This is necessary because `<Button>` doesn't provide a `<View>` ref
|
||||
// but an instance of `Touchable` that isn't a ReactNativeElement.
|
||||
const buttonViewNode = nullthrows(
|
||||
root.document.documentElement.firstElementChild,
|
||||
);
|
||||
|
||||
Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('accessibilityState', () => {
|
||||
it('disables the button when disabled property is true and disabled prop is NOT set', () => {
|
||||
const root = Fantom.createRoot();
|
||||
|
||||
const onPressCallback = jest.fn();
|
||||
|
||||
Fantom.runTask(() => {
|
||||
root.render(
|
||||
<Button
|
||||
title="Hello"
|
||||
accessibilityState={{disabled: true}}
|
||||
onPress={onPressCallback}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(
|
||||
root
|
||||
.getRenderedOutput({props: ['foregroundColor', 'backgroundColor']})
|
||||
.toJSX(),
|
||||
).toEqual(
|
||||
<rn-view backgroundColor="rgba(223, 223, 223, 255)">
|
||||
<rn-paragraph
|
||||
backgroundColor="rgba(255, 255, 255, 127)"
|
||||
foregroundColor="rgba(161, 161, 161, 255)">
|
||||
HELLO
|
||||
</rn-paragraph>
|
||||
</rn-view>,
|
||||
);
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
|
||||
// This is necessary because `<Button>` doesn't provide a `<View>` ref
|
||||
// but an instance of `Touchable` that isn't a ReactNativeElement.
|
||||
const buttonViewNode = nullthrows(
|
||||
root.document.documentElement.firstElementChild,
|
||||
);
|
||||
|
||||
Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
|
||||
|
||||
expect(onPressCallback).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user