Make variables for text sizes so it is easier to fix when the browser changes

src/Layout-test-utils.js

@@ -223,7 +223,16 @@ var layoutTestUtils = (function() {
     return node;
   }
 
+  var textSizes = {
+    smallWidth: 34.671875,
+    smallHeight: 18,
+    bigWidth: 172.421875,
+    bigHeight: 36,
+    bigMinWidth: 100.453125,
+  };
+
   return {
+    textSizes: textSizes,
     testLayout: function(node, expectedLayout) {
       var layout = computeCSSLayout(node);
       var domLayout = computeDOMLayout(node);
@@ -238,6 +247,7 @@ var layoutTestUtils = (function() {
     computeDOMLayout: computeDOMLayout,
     reduceTest: reduceTest,
     text: function(text) {
+
       var body = iframeText.contentDocument.body;
       var fn = function(width) {
         if (width === undefined || width !== width) {
@@ -248,14 +258,17 @@ var layoutTestUtils = (function() {
         // Comment this block of code if you want to use the browser to
         // generate proper sizes
         if (text === 'small') {
-          return {width: Math.min(33, width), height: 18};
+          return {
+            width: Math.min(textSizes.smallWidth, width),
+            height: textSizes.smallHeight
+          };
         }
         if (text === 'loooooooooong with space') {
           var res = {
-            width: width >= 171 ? 171 : Math.max(100, width),
+            width: width >= textSizes.bigWidth ? textSizes.bigWidth : Math.max(textSizes.bigMinWidth, width),
-            height: width >= 171 ? 18 : 36
+            height: width >= textSizes.bigWidth ? textSizes.smallHeight : textSizes.bigHeight
           };
-          return res
+          return res;
         }
         return;
 

src/__tests__/Layout-test.js

@@ -5,6 +5,7 @@ var computeLayout = layoutTestUtils.computeLayout;
 var computeDOMLayout = layoutTestUtils.computeDOMLayout;
 var reduceTest = layoutTestUtils.reduceTest;
 var text = layoutTestUtils.text;
+var textSizes = layoutTestUtils.textSizes;
 
 describe('Layout', function() {
   it('should layout a single node with width and height', function() {
@@ -748,21 +749,21 @@ describe('Layout', function() {
   it('should layout node with just text', function() {
     testLayout(
       {style: {measure: text('small')}},
-      {width: 33, height: 18, top: 0, left: 0}
+      {width: textSizes.smallWidth, height: textSizes.smallHeight, top: 0, left: 0}
     );
   });
 
   it('should layout node with text and width', function() {
     testLayout(
       {style: {measure: text('small'), width: 10}},
-      {width: 10, height: 18, top: 0, left: 0}
+      {width: 10, height: textSizes.smallHeight, top: 0, left: 0}
     );
   });
 
   it('should layout node with text, padding and margin', function() {
     testLayout(
       {style: {measure: text('loooooooooong with space'), padding: 5, margin: 5}},
-      {width: 181, height: 28, top: 5, left: 5}
+      {width: 10 + textSizes.bigWidth, height: 10 + textSizes.smallHeight, top: 5, left: 5}
     );
   });
 
@@ -788,9 +789,9 @@ describe('Layout', function() {
           {style: {flex: 1, measure: text('loooooooooong with space')}}
         ]}
       ]},
-      {width: 500, height: 18, top: 0, left: 0, children: [
+      {width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
-        {width: 500, height: 18, top: 0, left: 0, children: [
+        {width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
-          {width: 500, height: 18, top: 0, left: 0}
+          {width: 500, height: textSizes.smallHeight, top: 0, left: 0}
         ]}
       ]}
     );
@@ -803,9 +804,9 @@ describe('Layout', function() {
           {style: {measure: text('loooooooooong with space')}}
         ]}
       ]},
-      {width: 130, height: 36, top: 0, left: 0, children: [
+      {width: 130, height: textSizes.bigHeight, top: 0, left: 0, children: [
-        {width: 130, height: 36, top: 0, left: 0, children: [
+        {width: 130, height: textSizes.bigHeight, top: 0, left: 0, children: [
-          {width: 130, height: 36, top: 0, left: 0}
+          {width: 130, height: textSizes.bigHeight, top: 0, left: 0}
         ]}
       ]}
     );
@@ -818,9 +819,9 @@ describe('Layout', function() {
           {style: {width: 130, measure: text('loooooooooong with space')}}
         ]}
       ]},
-      {width: 200, height: 36, top: 0, left: 0, children: [
+      {width: 200, height: textSizes.bigHeight, top: 0, left: 0, children: [
-        {width: 200, height: 36, top: 0, left: 0, children: [
+        {width: 200, height: textSizes.bigHeight, top: 0, left: 0, children: [
-          {width: 130, height: 36, top: 0, left: 0}
+          {width: 130, height: textSizes.bigHeight, top: 0, left: 0}
         ]}
       ]}
     );
@@ -831,8 +832,8 @@ describe('Layout', function() {
       {style: {width: 100}, children: [
         {style: {measure: text('loooooooooong with space')}}
       ]},
-      {width: 100, height: 36, top: 0, left: 0, children: [
+      {width: 100, height: textSizes.bigHeight, top: 0, left: 0, children: [
-        {width: 100, height: 36, top: 0, left: 0}
+        {width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
       ]}
     );
   });
@@ -844,9 +845,9 @@ describe('Layout', function() {
           {style: {measure: text('loooooooooong with space')}}
         ]}
       ]},
-      {width: 100, height: 76, top: 0, left: 0, children: [
+      {width: 100, height: 40 + textSizes.bigHeight, top: 0, left: 0, children: [
-        {width: 100, height: 36, top: 20, left: 20, children: [
+        {width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 20, left: 20, children: [
-          {width: 100, height: 36, top: 0, left: 0}
+          {width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
         ]}
       ]}
     );
@@ -885,7 +886,7 @@ describe('Layout', function() {
       ]},
       {width: 200, height: 58, top: 0, left: 0, children: [
         {width: 200, height: 58, top: 0, left: 0, children: [
-          {width: 171, height: 18, top: 20, left: 20}
+          {width: textSizes.bigWidth, height: textSizes.smallHeight, top: 20, left: 20}
         ]}
       ]}
     );
@@ -900,7 +901,7 @@ describe('Layout', function() {
       ]},
       {width: 200, height: 76, top: 0, left: 0, children: [
         {width: 200, height: 76, top: 0, left: 0, children: [
-          {width: 160, height: 36, top: 20, left: 20}
+          {width: 160, height: textSizes.bigHeight, top: 20, left: 20}
         ]}
       ]}
     );
@@ -956,9 +957,9 @@ describe('Layout', function() {
         {style: {measure: text('loooooooooong with space'), position: 'absolute'}}
       ]},
       {width: 0, height: 0, top: 0, left: 0, children: [
-        {width: 100, height: 36, top: 0, left: 0}
+        {width: 100, height: textSizes.bigHeight, top: 0, left: 0}
       ]}
-    )
+    );
   });
 
   it('should layout randomly', function() {
@@ -969,7 +970,7 @@ describe('Layout', function() {
       // LCG using GCC's constants
       this.state = (1103515245 * this.state + 12345) % 0x80000000;
       return this.state / (0x80000000 - 1);
-    }
+    };
 
     var rng = new RNG(0);
     function randMinMax(node, chance, attribute, min, max) {