use constants for text examples

src/Layout-test-utils.js

@@ -229,15 +229,49 @@ var layoutTestUtils = (function() {
     return node;
   }
 
+  function measureTextSizes(text, width) {
+    var body = iframeText.contentDocument.body;
+    if (width === undefined || width !== width) {
+      width = Infinity;
+    }
+
+    var div = document.createElement('div');
+    div.style.width = (width === Infinity ? 10000000 : width) + 'px';
+    div.style.display = 'flex';
+    div.style.flexDirection = 'column';
+    div.style.alignItems = 'flex-start';
+
+    var span = document.createElement('span');
+    span.style.display = 'flex';
+    span.style.flexDirection = 'column';
+    span.style.alignItems = 'flex-start';
+    span.innerText = text;
+
+    div.appendChild(span);
+    body.appendChild(div);
+    var rect = span.getBoundingClientRect();
+    body.removeChild(div);
+    return {
+      width: rect.width,
+      height: rect.height
+    };
+  }
+
+  var texts = {
+    small: 'small',
+    big: 'loooooooooong with space',
+  };
+
   var textSizes = {
-    smallWidth: 34.671875,
+    smallWidth: measureTextSizes(texts.small, 0).width,
-    smallHeight: 18,
+    smallHeight: measureTextSizes(texts.small, 0).height,
-    bigWidth: 172.421875,
+    bigWidth: measureTextSizes(texts.big).width,
-    bigHeight: 36,
+    bigHeight: measureTextSizes(texts.big, 0).height,
-    bigMinWidth: 100.453125,
+    bigMinWidth: measureTextSizes(texts.big, 0).width,
   };
 
   return {
+    texts: texts,
     textSizes: textSizes,
     testLayout: function(node, expectedLayout) {
       var layout = computeCSSLayout(node);
@@ -253,8 +287,6 @@ var layoutTestUtils = (function() {
     computeDOMLayout: computeDOMLayout,
     reduceTest: reduceTest,
     text: function(text) {
-
-      var body = iframeText.contentDocument.body;
       var fn = function(width) {
         if (width === undefined || width !== width) {
           width = Infinity;
@@ -263,43 +295,21 @@ var layoutTestUtils = (function() {
         // Constants for testing purposes between C/JS and other platforms
         // Comment this block of code if you want to use the browser to
         // generate proper sizes
-        if (text === 'small') {
+        if (text === texts.small) {
           return {
             width: Math.min(textSizes.smallWidth, width),
             height: textSizes.smallHeight
           };
         }
-        if (text === 'loooooooooong with space') {
+        if (text === texts.big) {
           var res = {
             width: width >= textSizes.bigWidth ? textSizes.bigWidth : Math.max(textSizes.bigMinWidth, width),
             height: width >= textSizes.bigWidth ? textSizes.smallHeight : textSizes.bigHeight
           };
           return res;
         }
-        return;
-
-        var div = document.createElement('div');
-        div.style.width = (width === Infinity ? 10000000 : width) + 'px';
-        div.style.display = 'flex';
-        div.style.flexDirection = 'column';
-        div.style.alignItems = 'flex-start';
-
-        var span = document.createElement('span');
-        span.style.display = 'flex';
-        span.style.flexDirection = 'column';
-        span.style.alignItems = 'flex-start';
-        span.innerText = text;
-
-        div.appendChild(span);
-        body.appendChild(div);
-        var rect = span.getBoundingClientRect();
-        body.removeChild(div);
-        return {
-          width: rect.width,
-          height: rect.height
-        };
       };
-      fn.toString = function() { return text; }
+      fn.toString = function() { return text; };
       return fn;
     }
   }

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 texts = layoutTestUtils.texts;
 var textSizes = layoutTestUtils.textSizes;
 
 describe('Layout', function() {
@@ -748,22 +749,22 @@ describe('Layout', function() {
 
   it('should layout node with just text', function() {
     testLayout(
-      {style: {measure: text('small')}},
+      {style: {measure: text(texts.small)}},
       {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}},
+      {style: {measure: text(texts.small), width: 10}},
       {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}},
+      {style: {measure: text(texts.big)}},
-      {width: 10 + textSizes.bigWidth, height: 10 + textSizes.smallHeight, top: 5, left: 5}
+      {width: textSizes.bigWidth, height: textSizes.smallHeight, top: 0, left: 0}
     );
   });
 
@@ -786,7 +787,7 @@ describe('Layout', function() {
     testLayout(
       {style: {}, children: [
         {style: {width: 500, flexDirection: 'row'}, children: [
-          {style: {flex: 1, measure: text('loooooooooong with space')}}
+          {style: {flex: 1, measure: text(texts.big)}}
         ]}
       ]},
       {width: 500, height: textSizes.smallHeight, top: 0, left: 0, children: [
@@ -801,7 +802,7 @@ describe('Layout', function() {
     testLayout(
       {style: {width: 130}, children: [
         {style: {alignSelf: 'stretch', alignItems: 'stretch'}, children: [
-          {style: {measure: text('loooooooooong with space')}}
+          {style: {measure: text(texts.big)}}
         ]}
       ]},
       {width: 130, height: textSizes.bigHeight, top: 0, left: 0, children: [
@@ -816,7 +817,7 @@ describe('Layout', function() {
     testLayout(
       {style: {width: 200}, children: [
         {style: {alignSelf: 'stretch', alignItems: 'stretch'}, children: [
-          {style: {width: 130, measure: text('loooooooooong with space')}}
+          {style: {width: 130, measure: text(texts.big)}}
         ]}
       ]},
       {width: 200, height: textSizes.bigHeight, top: 0, left: 0, children: [
@@ -830,7 +831,7 @@ describe('Layout', function() {
   it('should layout node with text bounded by parent', function() {
     testLayout(
       {style: {width: 100}, children: [
-        {style: {measure: text('loooooooooong with space')}}
+        {style: {measure: text(texts.big)}}
       ]},
       {width: 100, height: textSizes.bigHeight, top: 0, left: 0, children: [
         {width: textSizes.bigMinWidth, height: textSizes.bigHeight, top: 0, left: 0}
@@ -842,7 +843,7 @@ describe('Layout', function() {
     testLayout(
       {style: {width: 100, padding: 10}, children: [
         {style: {margin: 10}, children: [
-          {style: {measure: text('loooooooooong with space')}}
+          {style: {measure: text(texts.big)}}
         ]}
       ]},
       {width: 100, height: 40 + textSizes.bigHeight, top: 0, left: 0, children: [
@@ -881,7 +882,7 @@ describe('Layout', function() {
     testLayout(
       {style: {}, children: [
         {style: {width: 200, flexDirection: 'row'}, children: [
-          {style: {margin: 20, measure: text('loooooooooong with space')}}
+          {style: {margin: 20, measure: text(texts.big)}}
         ]}
       ]},
       {width: 200, height: 58, top: 0, left: 0, children: [
@@ -896,7 +897,7 @@ describe('Layout', function() {
     testLayout(
       {style: {}, children: [
         {style: {width: 200}, children: [
-          {style: {margin: 20, measure: text('loooooooooong with space')}}
+          {style: {margin: 20, measure: text(texts.big)}}
         ]}
       ]},
       {width: 200, height: 76, top: 0, left: 0, children: [
@@ -946,7 +947,7 @@ describe('Layout', function() {
 
   xit('should layout text with alignItems: stretch', function() {
     testLayout(
-      {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text('loooooooooong with space')}},
+      {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}},
       {width: 80, height: 68, top: 0, left: 0}
     );
   });
@@ -954,7 +955,7 @@ describe('Layout', function() {
   xit('should layout node with text and position absolute', function() {
     testLayout(
       {style: {}, children: [
-        {style: {measure: text('loooooooooong with space'), position: 'absolute'}}
+        {style: {measure: text(texts.big)}}
       ]},
       {width: 0, height: 0, top: 0, left: 0, children: [
         {width: 100, height: textSizes.bigHeight, top: 0, left: 0}
@@ -1018,7 +1019,7 @@ describe('Layout', function() {
       randEnum(node, 0.5, 'alignItems', ['flex-start', 'center', 'flex-end', 'stretch']);
       randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']);
       randEnum(node, 0.5, 'position', ['relative', 'absolute']);
-      randEnum(node, 0.5, 'measure', [text('small'), text('loooooooooong with space')]);
+      randEnum(node, 0.5, 'measure', [text(texts.small), text(texts.big)]);
 
       if (node.style.measure) {
         // align-items: stretch on a text node makes it wrap in a different way.