From a51bd9f9978fbebf009cedad8bce1a9fcadf58b1 Mon Sep 17 00:00:00 2001
From: Ben Smith <ben@hellosmithy.com>
Date: Mon, 29 Feb 2016 21:08:53 +0000
Subject: [PATCH] Preserve order in `mergeChildMappings`

---
 .../ReactTransitionChildMapping.js            |  9 ++--
 .../__tests__/ReactCSSTransitionGroup-test.js | 12 ++---
 .../ReactTransitionChildMapping-test.js       | 45 +++++++++++++++++++
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/addons/transitions/ReactTransitionChildMapping.js b/src/addons/transitions/ReactTransitionChildMapping.js
index 28583432403..2e0d90358ad 100644
--- a/src/addons/transitions/ReactTransitionChildMapping.js
+++ b/src/addons/transitions/ReactTransitionChildMapping.js
@@ -75,6 +75,11 @@ var ReactTransitionChildMapping = {
 
     var i;
     var childMapping = {};
+
+    for (i = 0; i < pendingKeys.length; i++) {
+      childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
+    }
+
     for (var nextKey in next) {
       if (nextKeysPending.hasOwnProperty(nextKey)) {
         for (i = 0; i < nextKeysPending[nextKey].length; i++) {
@@ -87,10 +92,6 @@ var ReactTransitionChildMapping = {
       childMapping[nextKey] = getValueForKey(nextKey);
     }
 
-    // Finally, add the keys which didn't appear before any key in `next`
-    for (i = 0; i < pendingKeys.length; i++) {
-      childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
-    }
 
     return childMapping;
   },
diff --git a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
index 0bf8c6bb2ff..66007bba51f 100644
--- a/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
+++ b/src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
@@ -90,8 +90,8 @@ describe('ReactCSSTransitionGroup', function() {
       container
     );
     expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
-    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
-    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('one');
+    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
+    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('two');
 
     // For some reason jst is adding extra setTimeout()s and grunt test isn't,
     // so we need to do this disgusting hack.
@@ -125,8 +125,8 @@ describe('ReactCSSTransitionGroup', function() {
       container
     );
     expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
-    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
-    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('one');
+    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
+    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('two');
   });
 
   it('should switch transitionLeave from false to true', function() {
@@ -160,8 +160,8 @@ describe('ReactCSSTransitionGroup', function() {
       container
     );
     expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
-    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('three');
-    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('two');
+    expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
+    expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('three');
   });
 
   it('should work with no children', function() {
diff --git a/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js b/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js
index 7cc3c63a6f1..9af6f8a144b 100644
--- a/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js
+++ b/src/addons/transitions/__tests__/ReactTransitionChildMapping-test.js
@@ -109,6 +109,51 @@ describe('ReactTransitionChildMapping', function() {
     });
   });
 
+  it('should preserve order when overlapping insertions and deletions are iterated on', function() {
+    var prev = {
+      one: true,
+      two: true,
+      four: true,
+      five: true,
+    };
+    var next = {
+      one: true,
+      two: true,
+      three: true,
+      five: true,
+    };
+    var childMappingsKeys = Object.keys(ReactTransitionChildMapping.mergeChildMappings(prev, next));
+    expect(childMappingsKeys).toEqual([
+      'one',
+      'two',
+      'three',
+      'four',
+      'five',
+    ]);
+  });
+
+  it('should preserve order when non-overlapping insertions are iterated on', function() {
+    var prev = {
+      one: true,
+      two: true,
+      three: true,
+    };
+    var next = {
+      four: true,
+      five: true,
+      six: true,
+    };
+    var childMappingsKeys = Object.keys(ReactTransitionChildMapping.mergeChildMappings(prev, next));
+    expect(childMappingsKeys).toEqual([
+      'one',
+      'two',
+      'three',
+      'four',
+      'five',
+      'six',
+    ]);
+  });
+
   it('should support mergeChildMappings with undefined input', function() {
     var prev = {
       one: true,