DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

[src/__tests__/Layout-test.js]: Added 16 test cases for each alignContent / alignItems combination - also includes alignSelf testing within the test data ;

Browse Source
This commit is contained in:
Pierre Renaux
2015-05-08 14:52:11 +08:00
parent f4226d3ff5
commit 68d029e460
3 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Layout-test-utils.js
View File

@@ -429,6 +429,11 @@ var layoutTestUtils = (function() {
testNamedLayout('expected-dom', expectedLayout, domLayout);
testNamedLayout('layout-dom', layout, domLayout);
},
testLayoutAgainstDomOnly: function(node, expectedLayout) {
var layout = computeCSSLayout(node);
var domLayout = computeDOMLayout(node);
testNamedLayout('layout-dom', layout, domLayout);
},
testFillNodes: testFillNodes,
testExtractNodes: testExtractNodes,
testRandomLayout: function(node) {

2
src/Layout.js
View File

@@ -22,7 +22,7 @@ var computeLayout = (function() {
var CSS_ALIGN_FLEX_START = 'flex-start';
var CSS_ALIGN_CENTER = 'center';
// var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_FLEX_END = 'flex-end';
var CSS_ALIGN_STRETCH = 'stretch';
var CSS_POSITION_RELATIVE = 'relative';

74
src/__tests__/Layout-test.js
View File

@@ -9,6 +9,7 @@
/* globals layoutTestUtils */
var testLayout = layoutTestUtils.testLayout;
var testLayoutAgainstDomOnly = layoutTestUtils.testLayoutAgainstDomOnly;
var testFillNodes = layoutTestUtils.testFillNodes;
var testExtractNodes = layoutTestUtils.testExtractNodes;
var text = layoutTestUtils.text;
@@ -1586,5 +1587,78 @@ describe('Layout', function() {
);
});
});
describe('Layout alignContent', function() {
var alignContentData = {
style: {width: 300, height: 380, flexDirection: 'row', flexWrap: 'wrap'},
children: [
/* 0 */ { style: {width: 50, height: 50, margin: 10} },
/* 1 */ { style: {width: 50, height: 50, margin: 10} },
/* 2 */ { style: {width: 50, height: 50, margin: 10} },
/* 3 */ { style: {width: 50, height: 50, margin: 10} },
/* 4 */ { style: {width: 50, height: 100, margin: 10} },
/* 5 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
/* 6 */ { style: {width: 50, height: 50, margin: 10} },
/* 7 */ { style: {width: 50, height: 100, margin: 10} },
/* 8 */ { style: {width: 50, height: 50, margin: 10} },
/* 9 */ { style: {width: 50, height: 50, margin: 10} },
/* 10 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start' } },
/* 11 */ { style: {width: 50, height: 50, margin: 10} },
/* 12 */ { style: {width: 50, height: 50, margin: 10} },
/* 13 */ { style: {width: 50, height: 50, margin: 10, alignSelf: 'flex-start'} },
/* 14 */ { style: {width: 50, height: 50, margin: 10} },
],
};
it('should layout with alignContent: stretch, and alignItems: flex-start', function() {
testLayout(
alignContentData,
{ width:300,height:380,top:0,left:0, children:[
{width:50,height:50,top:10,left:10},
{width:50,height:50,top:10,left:80},
{width:50,height:50,top:10,left:150},
{width:50,height:50,top:10,left:220},
{width:50,height:100,top:92.5,left:10},
{width:50,height:50,top:92.5,left:80},
{width:50,height:50,top:92.5,left:150},
{width:50,height:100,top:92.5,left:220},
{width:50,height:50,top:225,left:10},
{width:50,height:50,top:225,left:80},
{width:50,height:50,top:225,left:150},
{width:50,height:50,top:225,left:220},
{width:50,height:50,top:307.5,left:10},
{width:50,height:50,top:307.5,left:80},
{width:50,height:50,top:307.5,left:150}
]}
);
});
function testAlignContent(aAlignContent, aAlignItems) {
it('should layout with alignContent: '+aAlignContent+', and alignItems: '+aAlignItems, function() {
testLayoutAgainstDomOnly(alignContentData);
});
}
// testAlignContent('stretch', 'flex-start'); // above with expected value data
testAlignContent('stretch', 'center');
testAlignContent('stretch', 'flex-end');
testAlignContent('stretch', 'stretch');
testAlignContent('flex-start', 'flex-start');
testAlignContent('flex-start', 'center');
testAlignContent('flex-start', 'flex-end');
testAlignContent('flex-start', 'stretch');
testAlignContent('center', 'flex-start');
testAlignContent('center', 'center');
testAlignContent('center', 'flex-end');
testAlignContent('center', 'stretch');
testAlignContent('flex-end', 'flex-start');
testAlignContent('flex-end', 'center');
testAlignContent('flex-end', 'flex-end');
testAlignContent('flex-end', 'stretch');
});