react-native-ui-lib
Version:
[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down
367 lines (306 loc) • 15.4 kB
JavaScript
import Button from '../index';
import {Colors, BorderRadiuses, Typography, ThemeManager} from '../../../style';
import {Constants} from '../../../helpers';
describe('Button', () => {
beforeEach(() => {
ThemeManager.setComponentTheme('Button', {});
mockIOS();
});
describe('isOutline', () => {
it('should return false when outline or outlineColor props were not sent', () => {
const uut = new Button({});
expect(uut.isOutline).toBe(false);
});
it('should return true if either outline or outlineColor props were sent', () => {
expect(new Button({outline: true}).isOutline).toBe(true);
expect(new Button({outlineColor: 'blue'}).isOutline).toBe(true);
expect(new Button({outline: true, outlineColor: 'blue'}).isOutline).toBe(true);
});
});
describe('isFilled', () => {
it('should return true if button is not a link or outline', () => {
expect(new Button({}).isFilled).toBe(true);
});
it('should return false if button is an outline button', () => {
expect(new Button({outline: true}).isFilled).toBe(false);
expect(new Button({outlineColor: 'blue'}).isFilled).toBe(false);
});
it('should return false if button is a link', () => {
expect(new Button({link: true}).isFilled).toBe(false);
});
});
describe('getBackgroundColor', () => {
it('should return by default blue30 color', () => {
const uut = new Button({});
expect(uut.getBackgroundColor()).toEqual(Colors.blue30);
});
it('should return defined theme backgroundColor', () => {
ThemeManager.setComponentTheme('Button', {
backgroundColor: Colors.purple40,
});
const uut = new Button({});
expect(uut.getBackgroundColor()).toEqual(Colors.purple40);
});
it('should return backgroundColor according to official prop', () => {
const uut = new Button({backgroundColor: 'red'});
expect(uut.getBackgroundColor()).toEqual('red');
});
it('should return backgroundColor according to modifier', () => {
const uut = new Button({'bg-orange30': true});
expect(uut.getBackgroundColor()).toEqual(Colors.orange30);
});
it('should return undefined if this button is outline', () => {
const uut = new Button({backgroundColor: 'blue', outline: true});
expect(uut.getBackgroundColor()).toEqual('transparent');
});
it('should return undefined if this button is link', () => {
const uut = new Button({'bg-orange30': true, link: true});
expect(uut.getBackgroundColor()).toEqual('transparent');
});
it('should return theme disabled color if button is disabled', () => {
const uut = new Button({'bg-orange30': true, disabled: true});
expect(uut.getBackgroundColor()).toEqual(ThemeManager.CTADisabledColor);
});
});
describe('getActiveBackgroundColor', () => {
it('should return undefined by default', () => {
const uut = new Button({});
expect(uut.getActiveBackgroundColor()).toBe(undefined);
});
it('should return value according to getActiveBackgroundColor callback prop', () => {
const getActiveBackgroundColor = () => 'red';
const uut = new Button({getActiveBackgroundColor});
expect(uut.getActiveBackgroundColor()).toBe('red');
});
});
describe('getLabelColor', () => {
it('should return theme ctaTextColor by default', () => {
const uut = new Button({});
expect(uut.getLabelColor()).toEqual(ThemeManager.CTATextColor);
});
it('should return blue30 color for link', () => {
const uut = new Button({link: true});
expect(uut.getLabelColor()).toEqual(Colors.blue30);
});
it('should return Theme linkColor color for link', () => {
ThemeManager.setComponentTheme('Button', {
linkColor: Colors.yellow40,
});
const uut = new Button({link: true});
expect(uut.getLabelColor()).toEqual(Colors.yellow40);
});
it('should return linkColor color for link', () => {
const uut = new Button({link: true, linkColor: Colors.orange50});
expect(uut.getLabelColor()).toEqual(Colors.orange50);
});
it('should return blue30 color for outline by default or the outlineColor passed', () => {
let uut = new Button({outline: true});
expect(uut.getLabelColor()).toEqual(Colors.blue30);
uut = new Button({outline: true, outlineColor: 'red'});
expect(uut.getLabelColor()).toEqual('red');
});
it('should return color according to color modifier', () => {
const uut = new Button({red10: true});
expect(uut.getLabelColor()).toEqual(Colors.red10);
});
it('should return color according to color prop', () => {
const uut = new Button({red10: true, color: 'green'});
expect(uut.getLabelColor()).toEqual('green');
});
it('should return disabled text color according to theme for link/outline button', () => {
const uut = new Button({red10: true, color: 'green', link: true, disabled: true});
expect(uut.getLabelColor()).toEqual(ThemeManager.CTADisabledColor);
});
});
describe('getContentSizeStyle', () => {
it('should return style for large button', () => {
const uut = new Button({size: 'large'});
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 36});
mockAndroid();
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 28});
});
it('should return style for medium button', () => {
const uut = new Button({size: 'medium'});
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 18});
mockAndroid();
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 20});
});
it('should return style for small button', () => {
const uut = new Button({size: 'small'});
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 15});
});
it('should return style for xSmall button', () => {
const uut = new Button({size: Button.sizes.xSmall});
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 12});
});
it('should have no padding of button is a link', () => {
const uut = new Button({size: 'medium', link: true});
expect(uut.getContentSizeStyle()).toEqual({paddingHorizontal: 0});
});
it('should have no padding if avoidInnerPadding prop was sent', () => {
const uut = new Button({size: 'medium', avoidInnerPadding: true});
expect(uut.getContentSizeStyle()).toEqual();
});
});
describe('getLabelSizeStyle', () => {
it('should return style for large button', () => {
const uut = new Button({size: 'large'});
expect(uut.getLabelSizeStyle()).toEqual({});
});
it('should return style for medium button', () => {
const uut = new Button({size: 'medium'});
expect(uut.getLabelSizeStyle()).toEqual({...Typography.text80});
});
it('should return style for small button', () => {
const uut = new Button({size: 'small'});
expect(uut.getLabelSizeStyle()).toEqual({...Typography.text80});
});
it('should return style for xSmall button', () => {
const uut = new Button({size: Button.sizes.xSmall});
expect(uut.getLabelSizeStyle()).toEqual({...Typography.text80});
});
});
describe('getOutlineStyle', () => {
it('should return undefined when outline is false', () => {
const uut = new Button({outline: false});
expect(uut.getOutlineStyle()).toEqual(undefined);
});
it('should return borderWidth style with default borderColor when outline is true', () => {
const uut = new Button({outline: true});
expect(uut.getOutlineStyle()).toEqual({borderWidth: 1, borderColor: Colors.blue30});
});
it('should return undefined when link is true, even when outline is true', () => {
const uut = new Button({outline: true, link: true});
expect(uut.getOutlineStyle()).toEqual(undefined);
});
it('should return outlineColor according to prop', () => {
const uut = new Button({outline: true, outlineColor: 'red'});
expect(uut.getOutlineStyle()).toEqual({borderWidth: 1, borderColor: 'red'});
});
it('should return outline even if only got outlineColor prop', () => {
const uut = new Button({outlineColor: 'yellow'});
expect(uut.getOutlineStyle()).toEqual({borderWidth: 1, borderColor: 'yellow'});
});
it('should return disabled color for outline if button is disabled', () => {
const uut = new Button({disabled: true, outline: true});
expect(uut.getOutlineStyle()).toEqual({borderWidth: 1, borderColor: Colors.dark70});
});
});
describe('getBorderRadiusStyle', () => {
it('should return default border radius - br100 when no border radius sent', () => {
const uut = new Button({});
expect(uut.getBorderRadiusStyle()).toEqual({borderRadius: BorderRadiuses.br100});
});
it('should return given border radius when use plain number', () => {
const uut = new Button({borderRadius: 12});
expect(uut.getBorderRadiusStyle()).toEqual({borderRadius: 12});
});
it('should return 0 border radius when button is a link', () => {
const uut = new Button({link: true});
expect(uut.getBorderRadiusStyle()).toEqual({borderRadius: 0});
});
it('should return 0 border radius when button is full width', () => {
const uut = new Button({fullWidth: true});
expect(uut.getBorderRadiusStyle()).toEqual({borderRadius: 0});
});
it('should return 0 border radius when border radius prop is 0', () => {
const uut = new Button({borderRadius: 0});
expect(uut.getBorderRadiusStyle()).toEqual({borderRadius: 0});
});
});
describe('getContainerSizeStyle', () => {
it('should return style for large button', () => {
const uut = new Button({size: 'large'});
const uut2 = new Button({size: 'large', outline: true});
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 16, minWidth: 138});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 15, minWidth: 138});
mockAndroid();
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 15, minWidth: 128});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 14, minWidth: 128});
});
it('should return style for medium button', () => {
const uut = new Button({size: 'medium'});
const uut2 = new Button({size: 'medium', outline: true});
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 11, minWidth: 95});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 10, minWidth: 95});
mockAndroid();
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 10, minWidth: 88});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 9, minWidth: 88});
});
it('should return style for small button', () => {
const uut = new Button({size: 'small'});
const uut2 = new Button({size: 'small', outline: true});
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 6, minWidth: 74});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 5, minWidth: 74});
mockAndroid();
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 6, minWidth: 72});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 5, minWidth: 72});
});
it('should return style for xSmall button', () => {
const uut = new Button({size: Button.sizes.xSmall});
const uut2 = new Button({size: Button.sizes.xSmall, outline: true});
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 5, minWidth: 66});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 4, minWidth: 66});
mockAndroid();
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 4, minWidth: 60});
expect(uut2.getContainerSizeStyle()).toEqual({paddingVertical: 3, minWidth: 60});
});
it('should avoid minWidth limitation if avoidMinWidth was sent', () => {
const uut = new Button({size: Button.sizes.medium, avoidMinWidth: true});
expect(uut.getContainerSizeStyle()).toEqual({paddingVertical: 11});
});
});
describe('getIconStyle', () => {
it('should return the right spacing according to button size when label exists', () => {
let uut = new Button({size: Button.sizes.large});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginRight: 8}, undefined]);
uut = new Button({size: Button.sizes.medium});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginRight: 8}, undefined]);
uut = new Button({size: Button.sizes.small});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginRight: 4}, undefined]);
uut = new Button({size: Button.sizes.xSmall});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginRight: 4}, undefined]);
});
it('should return the right spacing according to button size when label exists and icon on the right', () => {
let uut = new Button({size: Button.sizes.large, iconOnRight: true});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginLeft: 8}, undefined]);
uut = new Button({size: Button.sizes.medium, iconOnRight: true});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginLeft: 8}, undefined]);
uut = new Button({size: Button.sizes.small, iconOnRight: true});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginLeft: 4}, undefined]);
uut = new Button({size: Button.sizes.xSmall, iconOnRight: true});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginLeft: 4}, undefined]);
});
it('should return icon style according to button size when label exists', () => {
let uut = new Button({size: Button.sizes.large, disabled: true, outline: true});
expect(uut.getIconStyle()).toEqual([{marginRight: 8, tintColor: Colors.dark60}, undefined]);
uut = new Button({size: Button.sizes.large, disabled: true, link: true});
expect(uut.getIconStyle()).toEqual([{marginRight: 8, tintColor: Colors.dark60}, undefined]);
uut = new Button({size: Button.sizes.large, disabled: true});
expect(uut.getIconStyle()).toEqual([{tintColor: Colors.white, marginRight: 8}, undefined]);
});
it('should set tintColor according to getLabelColor logic', () => {
const uut = new Button({size: Button.sizes.large});
jest.spyOn(uut, 'getLabelColor');
uut.getLabelColor.mockReturnValue('red');
expect(uut.getIconStyle()).toEqual([{marginRight: 8, tintColor: 'red'}, undefined]);
});
it('should include custom iconStyle provided as a prop', () => {
let uut = new Button({size: Button.sizes.large, iconStyle: {marginRight: 9, tintColor: 'red'}});
expect(uut.getIconStyle()).toEqual([
{marginRight: 8, tintColor: Colors.white},
{marginRight: 9, tintColor: 'red'},
]);
uut = new Button({size: Button.sizes.large, iconStyle: 123}); // style can be StyleSheet id
expect(uut.getIconStyle()).toEqual([{marginRight: 8, tintColor: Colors.white}, 123]);
});
});
});
function mockIOS() {
Constants.isIOS = true;
Constants.isAndroid = false;
}
function mockAndroid() {
Constants.isIOS = false;
Constants.isAndroid = true;
}