Skip to content

Commit

Permalink
Create @react-native/normalize-color package
Browse files Browse the repository at this point in the history 
Summary: Changelog: [Internal]

Reviewed By: TheSavior

Differential Revision: D22644750

fbshipit-source-id: f1b24c7e72819650517b7b42f93eeeed9c1e627b
  • Loading branch information
@cpojer @facebook-github-bot
cpojer authored and facebook-github-bot committed Jul 24, 2020
1 parent c38b506 commit ab56ed7
Show file tree
Hide file tree
Showing 9 changed files with 621 additions and 528 deletions.
219 changes: 55 additions & 164 deletions Libraries/StyleSheet/__tests__/normalizeColor-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,172 +13,63 @@
const {OS} = require('../../Utilities/Platform');
const normalizeColor = require('../normalizeColor');

describe('normalizeColor', function() {
it('should accept only spec compliant colors', function() {
expect(normalizeColor('#abc')).not.toBe(null);
expect(normalizeColor('#abcd')).not.toBe(null);
expect(normalizeColor('#abcdef')).not.toBe(null);
expect(normalizeColor('#abcdef01')).not.toBe(null);
expect(normalizeColor('rgb(1,2,3)')).not.toBe(null);
expect(normalizeColor('rgb(1, 2, 3)')).not.toBe(null);
expect(normalizeColor('rgb( 1 , 2 , 3 )')).not.toBe(null);
expect(normalizeColor('rgb(-1, -2, -3)')).not.toBe(null);
expect(normalizeColor('rgba(0, 0, 0, 1)')).not.toBe(null);
expect(normalizeColor(0x01234567 + 0.5)).toBe(null);
expect(normalizeColor(-1)).toBe(null);
expect(normalizeColor(0xffffffff + 1)).toBe(null);
});
it('forwards calls to @react-native/normalize-color/base', () => {
jest
.resetModules()
.mock('@react-native/normalize-color/base', () => jest.fn());

it('should temporarily accept floating point values for rgb', function() {
expect(normalizeColor('rgb(1.1, 2.1, 3.1)')).toBe(0x010203ff);
expect(normalizeColor('rgba(1.1, 2.1, 3.1, 1.0)')).toBe(0x010203ff);
});

it('should refuse non spec compliant colors', function() {
expect(normalizeColor('#00gg00')).toBe(null);
expect(normalizeColor('rgb(1, 2, 3,)')).toBe(null);
expect(normalizeColor('rgb(1, 2, 3')).toBe(null);

// Used to be accepted by normalizeColor
expect(normalizeColor('abc')).toBe(null);
expect(normalizeColor(' #abc ')).toBe(null);
expect(normalizeColor('##abc')).toBe(null);
expect(normalizeColor('rgb 255 0 0')).toBe(null);
expect(normalizeColor('RGBA(0, 1, 2)')).toBe(null);
expect(normalizeColor('rgb (0, 1, 2)')).toBe(null);
expect(normalizeColor('hsv(0, 1, 2)')).toBe(null);
expect(normalizeColor({r: 10, g: 10, b: 10})).toBe(null);
expect(normalizeColor('hsl(1%, 2, 3)')).toBe(null);
expect(normalizeColor('rgb(1%, 2%, 3%)')).toBe(null);
});

it('should handle hex6 properly', function() {
expect(normalizeColor('#000000')).toBe(0x000000ff);
expect(normalizeColor('#ffffff')).toBe(0xffffffff);
expect(normalizeColor('#ff00ff')).toBe(0xff00ffff);
expect(normalizeColor('#abcdef')).toBe(0xabcdefff);
expect(normalizeColor('#012345')).toBe(0x012345ff);
});

it('should handle hex3 properly', function() {
expect(normalizeColor('#000')).toBe(0x000000ff);
expect(normalizeColor('#fff')).toBe(0xffffffff);
expect(normalizeColor('#f0f')).toBe(0xff00ffff);
});

it('should handle hex8 properly', function() {
expect(normalizeColor('#00000000')).toBe(0x00000000);
expect(normalizeColor('#ffffffff')).toBe(0xffffffff);
expect(normalizeColor('#ffff00ff')).toBe(0xffff00ff);
expect(normalizeColor('#abcdef01')).toBe(0xabcdef01);
expect(normalizeColor('#01234567')).toBe(0x01234567);
});

it('should handle rgb properly', function() {
expect(normalizeColor('rgb(0, 0, 0)')).toBe(0x000000ff);
expect(normalizeColor('rgb(-1, -2, -3)')).toBe(0x000000ff);
expect(normalizeColor('rgb(0, 0, 255)')).toBe(0x0000ffff);
expect(normalizeColor('rgb(100, 15, 69)')).toBe(0x640f45ff);
expect(normalizeColor('rgb(255, 255, 255)')).toBe(0xffffffff);
expect(normalizeColor('rgb(256, 256, 256)')).toBe(0xffffffff);
});

it('should handle rgba properly', function() {
expect(normalizeColor('rgba(0, 0, 0, 0.0)')).toBe(0x00000000);
expect(normalizeColor('rgba(0, 0, 0, 0)')).toBe(0x00000000);
expect(normalizeColor('rgba(0, 0, 0, -0.5)')).toBe(0x00000000);
expect(normalizeColor('rgba(0, 0, 0, 1.0)')).toBe(0x000000ff);
expect(normalizeColor('rgba(0, 0, 0, 1)')).toBe(0x000000ff);
expect(normalizeColor('rgba(0, 0, 0, 1.5)')).toBe(0x000000ff);
expect(normalizeColor('rgba(100, 15, 69, 0.5)')).toBe(0x640f4580);
});

it('should handle hsl properly', function() {
expect(normalizeColor('hsl(0, 0%, 0%)')).toBe(0x000000ff);
expect(normalizeColor('hsl(360, 100%, 100%)')).toBe(0xffffffff);
expect(normalizeColor('hsl(180, 50%, 50%)')).toBe(0x40bfbfff);
expect(normalizeColor('hsl(540, 50%, 50%)')).toBe(0x40bfbfff);
expect(normalizeColor('hsl(70, 25%, 75%)')).toBe(0xcacfafff);
expect(normalizeColor('hsl(70, 100%, 75%)')).toBe(0xeaff80ff);
expect(normalizeColor('hsl(70, 110%, 75%)')).toBe(0xeaff80ff);
expect(normalizeColor('hsl(70, 0%, 75%)')).toBe(0xbfbfbfff);
expect(normalizeColor('hsl(70, -10%, 75%)')).toBe(0xbfbfbfff);
});

it('should handle hsla properly', function() {
expect(normalizeColor('hsla(0, 0%, 0%, 0)')).toBe(0x00000000);
expect(normalizeColor('hsla(360, 100%, 100%, 1)')).toBe(0xffffffff);
expect(normalizeColor('hsla(360, 100%, 100%, 0)')).toBe(0xffffff00);
expect(normalizeColor('hsla(180, 50%, 50%, 0.2)')).toBe(0x40bfbf33);
});

it('should handle named colors properly', function() {
expect(normalizeColor('red')).toBe(0xff0000ff);
expect(normalizeColor('transparent')).toBe(0x00000000);
expect(normalizeColor('peachpuff')).toBe(0xffdab9ff);
});

it('should handle number colors properly', function() {
expect(normalizeColor(0x00000000)).toBe(0x00000000);
expect(normalizeColor(0xff0000ff)).toBe(0xff0000ff);
expect(normalizeColor(0xffffffff)).toBe(0xffffffff);
expect(normalizeColor(0x01234567)).toBe(0x01234567);
});

it("should return the same color when it's already normalized", function() {
const normalizedColor = normalizeColor('red') || 0;
expect(normalizeColor(normalizedColor)).toBe(normalizedColor);
});

describe('iOS', () => {
if (OS === 'ios') {
const PlatformColor = require('../PlatformColorValueTypes.ios')
.PlatformColor;
const DynamicColorIOS = require('../PlatformColorValueTypesIOS.ios')
.DynamicColorIOS;

it('should normalize iOS PlatformColor colors', () => {
const color = PlatformColor('systemRedColor');
const normalizedColor = normalizeColor(color);
const expectedColor = {semantic: ['systemRedColor']};
expect(normalizedColor).toEqual(expectedColor);
});

it('should normalize iOS Dynamic colors with named colors', () => {
const color = DynamicColorIOS({light: 'black', dark: 'white'});
const normalizedColor = normalizeColor(color);
const expectedColor = {dynamic: {light: 'black', dark: 'white'}};
expect(normalizedColor).toEqual(expectedColor);
});
expect(require('../normalizeColor')('#abc')).not.toBe(null);
expect(require('@react-native/normalize-color/base')).toBeCalled();
});

it('should normalize iOS Dynamic colors with PlatformColor colors', () => {
const color = DynamicColorIOS({
light: PlatformColor('systemBlackColor'),
dark: PlatformColor('systemWhiteColor'),
});
const normalizedColor = normalizeColor(color);
const expectedColor = {
dynamic: {
light: {semantic: ['systemBlackColor']},
dark: {semantic: ['systemWhiteColor']},
},
};
expect(normalizedColor).toEqual(expectedColor);
describe('iOS', () => {
if (OS === 'ios') {
const PlatformColor = require('../PlatformColorValueTypes.ios')
.PlatformColor;
const DynamicColorIOS = require('../PlatformColorValueTypesIOS.ios')
.DynamicColorIOS;

it('should normalize iOS PlatformColor colors', () => {
const color = PlatformColor('systemRedColor');
const normalizedColor = normalizeColor(color);
const expectedColor = {semantic: ['systemRedColor']};
expect(normalizedColor).toEqual(expectedColor);
});

it('should normalize iOS Dynamic colors with named colors', () => {
const color = DynamicColorIOS({light: 'black', dark: 'white'});
const normalizedColor = normalizeColor(color);
const expectedColor = {dynamic: {light: 'black', dark: 'white'}};
expect(normalizedColor).toEqual(expectedColor);
});

it('should normalize iOS Dynamic colors with PlatformColor colors', () => {
const color = DynamicColorIOS({
light: PlatformColor('systemBlackColor'),
dark: PlatformColor('systemWhiteColor'),
});
}
});

describe('Android', () => {
if (OS === 'android') {
const PlatformColor = require('../PlatformColorValueTypes.android')
.PlatformColor;
const normalizedColor = normalizeColor(color);
const expectedColor = {
dynamic: {
light: {semantic: ['systemBlackColor']},
dark: {semantic: ['systemWhiteColor']},
},
};
expect(normalizedColor).toEqual(expectedColor);
});
}
});

it('should normalize Android PlatformColor colors', () => {
const color = PlatformColor('?attr/colorPrimary');
const normalizedColor = normalizeColor(color);
const expectedColor = {resource_paths: ['?attr/colorPrimary']};
expect(normalizedColor).toEqual(expectedColor);
});
}
});
describe('Android', () => {
if (OS === 'android') {
const PlatformColor = require('../PlatformColorValueTypes.android')
.PlatformColor;

it('should normalize Android PlatformColor colors', () => {
const color = PlatformColor('?attr/colorPrimary');
const normalizedColor = normalizeColor(color);
const expectedColor = {resource_paths: ['?attr/colorPrimary']};
expect(normalizedColor).toEqual(expectedColor);
});
}
});
Loading

0 comments on commit ab56ed7

Please sign in to comment.