Merging tests for flattenStyle
Reviewed By: yungsters Differential Revision: D7176652 fbshipit-source-id: 25b6f2e4f8397ba6f07b2913775b91af90b45750
This commit is contained in:
parent
321ba067a8
commit
135637ce24
|
@ -8,30 +8,48 @@
|
||||||
*/
|
*/
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
var flattenStyle = require('flattenStyle');
|
const StyleSheet = require('StyleSheet');
|
||||||
|
const StyleSheetValidation = require('StyleSheetValidation');
|
||||||
|
const flattenStyle = require('flattenStyle');
|
||||||
|
|
||||||
|
function getFixture() {
|
||||||
|
StyleSheetValidation.addValidStylePropTypes({
|
||||||
|
styleA: () => {},
|
||||||
|
styleB: () => {},
|
||||||
|
});
|
||||||
|
|
||||||
|
return StyleSheet.create({
|
||||||
|
elementA: {
|
||||||
|
styleA: 'moduleA/elementA/styleA',
|
||||||
|
styleB: 'moduleA/elementA/styleB',
|
||||||
|
},
|
||||||
|
elementB: {
|
||||||
|
styleB: 'moduleA/elementB/styleB',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
describe('flattenStyle', () => {
|
describe('flattenStyle', () => {
|
||||||
|
|
||||||
it('should merge style objects', () => {
|
it('should merge style objects', () => {
|
||||||
var style1 = {width: 10};
|
const style1 = {width: 10};
|
||||||
var style2 = {height: 20};
|
const style2 = {height: 20};
|
||||||
var flatStyle = flattenStyle([style1, style2]);
|
const flatStyle = flattenStyle([style1, style2]);
|
||||||
expect(flatStyle.width).toBe(10);
|
expect(flatStyle.width).toBe(10);
|
||||||
expect(flatStyle.height).toBe(20);
|
expect(flatStyle.height).toBe(20);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should override style properties', () => {
|
it('should override style properties', () => {
|
||||||
var style1 = {backgroundColor: '#000', width: 10};
|
const style1 = {backgroundColor: '#000', width: 10};
|
||||||
var style2 = {backgroundColor: '#023c69', width: null};
|
const style2 = {backgroundColor: '#023c69', width: null};
|
||||||
var flatStyle = flattenStyle([style1, style2]);
|
const flatStyle = flattenStyle([style1, style2]);
|
||||||
expect(flatStyle.backgroundColor).toBe('#023c69');
|
expect(flatStyle.backgroundColor).toBe('#023c69');
|
||||||
expect(flatStyle.width).toBe(null);
|
expect(flatStyle.width).toBe(null);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should overwrite properties with `undefined`', () => {
|
it('should overwrite properties with `undefined`', () => {
|
||||||
var style1 = {backgroundColor: '#000'};
|
const style1 = {backgroundColor: '#000'};
|
||||||
var style2 = {backgroundColor: undefined};
|
const style2 = {backgroundColor: undefined};
|
||||||
var flatStyle = flattenStyle([style1, style2]);
|
const flatStyle = flattenStyle([style1, style2]);
|
||||||
expect(flatStyle.backgroundColor).toBe(undefined);
|
expect(flatStyle.backgroundColor).toBe(undefined);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -40,11 +58,99 @@ describe('flattenStyle', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should recursively flatten arrays', () => {
|
it('should recursively flatten arrays', () => {
|
||||||
var style1 = {width: 10};
|
const style1 = {width: 10};
|
||||||
var style2 = {height: 20};
|
const style2 = {height: 20};
|
||||||
var style3 = {width: 30};
|
const style3 = {width: 30};
|
||||||
var flatStyle = flattenStyle([null, [], [style1, style2], style3]);
|
const flatStyle = flattenStyle([null, [], [style1, style2], style3]);
|
||||||
expect(flatStyle.width).toBe(30);
|
expect(flatStyle.width).toBe(30);
|
||||||
expect(flatStyle.height).toBe(20);
|
expect(flatStyle.height).toBe(20);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not allocate an object when there is no style', () => {
|
||||||
|
const nullStyle = flattenStyle(null);
|
||||||
|
const nullStyleAgain = flattenStyle(null);
|
||||||
|
|
||||||
|
expect(nullStyle).toBe(nullStyleAgain);
|
||||||
|
expect(nullStyle).toBe(undefined);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not allocate an object when there is a style', () => {
|
||||||
|
const style = {a: 'b'};
|
||||||
|
const nullStyle = flattenStyle(style);
|
||||||
|
|
||||||
|
expect(nullStyle).toBe(style);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not allocate an object when there is a single class', () => {
|
||||||
|
const fixture = getFixture();
|
||||||
|
var singleStyle = flattenStyle(fixture.elementA);
|
||||||
|
var singleStyleAgain = flattenStyle(fixture.elementA);
|
||||||
|
|
||||||
|
expect(singleStyle).toBe(singleStyleAgain);
|
||||||
|
expect(singleStyle).toEqual({
|
||||||
|
styleA: 'moduleA/elementA/styleA',
|
||||||
|
styleB: 'moduleA/elementA/styleB',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should merge single class and style properly', () => {
|
||||||
|
const fixture = getFixture();
|
||||||
|
var style = {styleA: 'overrideA', styleC: 'overrideC'};
|
||||||
|
var arrayStyle = flattenStyle([fixture.elementA, style]);
|
||||||
|
|
||||||
|
expect(arrayStyle).toEqual({
|
||||||
|
styleA: 'overrideA',
|
||||||
|
styleB: 'moduleA/elementA/styleB',
|
||||||
|
styleC: 'overrideC',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should merge multiple classes', () => {
|
||||||
|
const fixture = getFixture();
|
||||||
|
var AthenB = flattenStyle([fixture.elementA, fixture.elementB]);
|
||||||
|
var BthenA = flattenStyle([fixture.elementB, fixture.elementA]);
|
||||||
|
|
||||||
|
expect(AthenB).toEqual({
|
||||||
|
styleA: 'moduleA/elementA/styleA',
|
||||||
|
styleB: 'moduleA/elementB/styleB',
|
||||||
|
});
|
||||||
|
expect(BthenA).toEqual({
|
||||||
|
styleA: 'moduleA/elementA/styleA',
|
||||||
|
styleB: 'moduleA/elementA/styleB',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should merge multiple classes with style', () => {
|
||||||
|
const fixture = getFixture();
|
||||||
|
var style = {styleA: 'overrideA'};
|
||||||
|
var AthenB = flattenStyle([fixture.elementA, fixture.elementB, style]);
|
||||||
|
var BthenA = flattenStyle([fixture.elementB, fixture.elementA, style]);
|
||||||
|
|
||||||
|
expect(AthenB).toEqual({
|
||||||
|
styleA: 'overrideA',
|
||||||
|
styleB: 'moduleA/elementB/styleB',
|
||||||
|
});
|
||||||
|
expect(BthenA).toEqual({
|
||||||
|
styleA: 'overrideA',
|
||||||
|
styleB: 'moduleA/elementA/styleB',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should flatten recursively', () => {
|
||||||
|
const fixture = getFixture();
|
||||||
|
var style = [{styleA: 'newA', styleB: 'newB'}, {styleA: 'newA2'}];
|
||||||
|
var AthenB = flattenStyle([fixture.elementA, fixture.elementB, style]);
|
||||||
|
|
||||||
|
expect(AthenB).toEqual({
|
||||||
|
styleA: 'newA2',
|
||||||
|
styleB: 'newB',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should ignore invalid class names', () => {
|
||||||
|
var invalid = flattenStyle(1234, null);
|
||||||
|
|
||||||
|
expect(invalid).toEqual({});
|
||||||
|
// Invalid class name 1234 skipping ...
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue