From a5ffa6bbd671d81ae290c8bbd76c319aaca0bac0 Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Fri, 6 Oct 2017 14:28:22 -0700
Subject: [PATCH 1/6] Show/hide-specific configurability of transition counts

---
 lib/src/component/abstract_transition.dart    |  34 +--
 .../component/abstract_transition_props.dart  |  16 +-
 .../component/abstract_transition_test.dart   | 220 +++++++++++-------
 3 files changed, 167 insertions(+), 103 deletions(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index 18b791ee7..b85466ba3 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -106,9 +106,21 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
   /// Returns the DOM node that will transition.
   Element getTransitionDomNode();
 
-  /// Whether the Element returned by [getTransitionDomNode] will have a transition event.
+  /// Whether transitions are enabled for this component.
   bool get hasTransition => true;
 
+  /// Whether the Element returned by [getTransitionDomNode] will have a transition event when showing.
+  bool get hasTransitionIn => hasTransition && transitionInCount > 0;
+
+  /// Whether the Element returned by [getTransitionDomNode] will have a transition event when hiding.
+  bool get hasTransitionOut => hasTransition && transitionOutCount > 0;
+
+  /// The number of `transitionend` events that occur when the transition node is shown.
+  int get transitionInCount => props.transitionInCount ?? props.transitionCount;
+
+  /// The number of `transitionend` events that occur when the transition node is hidden.
+  int get transitionOutCount => props.transitionOutCount ?? props.transitionCount;
+
   /// The duration that can elapse before a transition timeout occurs.
   Duration get transitionTimeout => const Duration(seconds: 1);
 
@@ -135,7 +147,7 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
     prepareShow();
 
     setState(newState()
-      ..transitionPhase = hasTransition ? TransitionPhase.PRE_SHOWING : TransitionPhase.SHOWN
+      ..transitionPhase = hasTransitionIn ? TransitionPhase.PRE_SHOWING : TransitionPhase.SHOWN
     );
   }
 
@@ -155,7 +167,7 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
     prepareHide();
 
     setState(newState()
-      ..transitionPhase = hasTransition ? TransitionPhase.HIDING : TransitionPhase.HIDDEN
+      ..transitionPhase = hasTransitionOut ? TransitionPhase.HIDING : TransitionPhase.HIDDEN
     );
   }
 
@@ -163,19 +175,7 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
   /// the event is dispatched.
   @mustCallSuper
   void onNextTransitionEnd(complete()) {
-    var skipCount = props.transitionCount - 1;
-
-    if (props.transitionCount <= 0) {
-      var warningMessage = 'You have set `props.transitionCount` to an invalid option: ${props.transitionCount}.';
-
-      if (props.transitionCount == 0) {
-        warningMessage += ' Instead of setting this prop to 0, override the `hasTransition` getter to return false.';
-      }
-
-      assert(ValidationUtil.warn(warningMessage, this));
-
-      skipCount = 0;
-    }
+    var transitionCount = isOrWillBeHidden ? transitionOutCount : transitionInCount;
 
     _cancelTransitionEventListener();
     _cancelTransitionEndTimer();
@@ -191,7 +191,7 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
       complete();
     });
 
-    _endTransitionSubscription = getTransitionDomNode()?.onTransitionEnd?.skip(skipCount)?.take(1)?.listen((_) {
+    _endTransitionSubscription = getTransitionDomNode()?.onTransitionEnd?.skip(transitionCount - 1)?.take(1)?.listen((_) {
       _cancelTransitionEndTimer();
 
       complete();
diff --git a/lib/src/component/abstract_transition_props.dart b/lib/src/component/abstract_transition_props.dart
index 84e56d146..f729067b8 100644
--- a/lib/src/component/abstract_transition_props.dart
+++ b/lib/src/component/abstract_transition_props.dart
@@ -27,11 +27,23 @@ abstract class TransitionPropsMixin {
 
   Map get props;
 
-  /// Number of transitions to occur within the [AbstractTransitionComponent].
+  /// The number of `transitionend` event that occur when the transition node is shown/hidden.
   ///
-  /// Default: 1
+  /// Serves as the default for [transitionInCount]/[transitionOutCount] when they are not specified.
+  ///
+  /// Default: `1`
   int transitionCount;
 
+  /// The number of `transitionend` event that occur when the transition node is shown.
+  ///
+  /// Default: [transitionCount]
+  int transitionInCount;
+
+  /// The number of `transitionend` event that occur when the transition node is hidden.
+  ///
+  /// Default: [transitionCount]
+  int transitionOutCount;
+
   /// Optional callback that fires before the [AbstractTransitionComponent] is hidden.
   ///
   /// Returning `false` will cancel default behavior, and the [AbstractTransitionComponent] will remain visible.
diff --git a/test/over_react/component/abstract_transition_test.dart b/test/over_react/component/abstract_transition_test.dart
index a3630d18c..e49319952 100644
--- a/test/over_react/component/abstract_transition_test.dart
+++ b/test/over_react/component/abstract_transition_test.dart
@@ -17,6 +17,7 @@ library abstract_transition_test;
 import 'dart:async';
 import 'dart:html';
 
+import 'package:meta/meta.dart';
 import 'package:over_react/over_react.dart';
 import 'package:over_react_test/over_react_test.dart';
 import 'package:test/test.dart';
@@ -206,53 +207,158 @@ main() {
               reason: 'Should have transitioned to HIDDEN in a microtask without waiting for a transitionend that may never occur');
         });
       });
-    });
 
-    group('waits for correct number of `onTransitionEnd` events when `transitionCount` is', () {
-      test('1', () async {
-        var renderedInstance = render(Transitioner()..transitionCount = 1);
-        TransitionerComponent transitioner = getDartComponent(renderedInstance);
+      group('shows and hides the component properly, waiting for correct number of `onTransitionEnd` when the number of transitions', () {
+        Future<Null> sharedTests(renderedInstance, {@required int expectedTransitionInCount, @required int expectedTransitionOutCount}) async {
+          if (expectedTransitionInCount < 0) throw new ArgumentError.value(expectedTransitionInCount, 'expectedTransitionInCount', 'must be greater than 0');
+          if (expectedTransitionOutCount < 0) throw new ArgumentError.value(expectedTransitionOutCount, 'expectedTransitionOutCount', 'must be greater than 0');
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.SHOWN));
+          TransitionerComponent transitioner = getDartComponent(renderedInstance);
 
-        transitioner.hide();
+          expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDDEN));
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING));
+          transitioner.show();
 
-        await new Future.delayed(Duration.ZERO);
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING),
-            reason: 'should still be waiting for a transition event');
+          if (expectedTransitionInCount != 0) {
+            expect(transitioner.state.transitionPhase, equals(TransitionPhase.SHOWING));
 
-        await triggerTransitionEnd(transitioner.getTransitionDomNode());
+            for (var i = 0; i < expectedTransitionInCount; i++) {
+              await new Future.delayed(Duration.ZERO);
+              expect(transitioner.state.transitionPhase, equals(TransitionPhase.SHOWING),
+                  reason: 'should still be waiting for a transition event');
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDDEN));
-      });
+              await triggerTransitionEnd(transitioner.getTransitionDomNode());
+            }
+          }
 
-      test('2', () async {
-        var renderedInstance = render(Transitioner()..transitionCount = 2);
-        TransitionerComponent transitioner = getDartComponent(renderedInstance);
+          expect(transitioner.state.transitionPhase, equals(TransitionPhase.SHOWN));
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.SHOWN));
+          transitioner.hide();
 
-        transitioner.hide();
+          if (expectedTransitionOutCount != 0) {
+            expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING));
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING));
+            for (var i = 0; i < expectedTransitionOutCount; i++) {
+              await new Future.delayed(Duration.ZERO);
+              expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING),
+                  reason: 'should still be waiting for a transition event');
 
-        await new Future.delayed(Duration.ZERO);
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING),
-            reason: 'should still be waiting for a transition event');
+              await triggerTransitionEnd(transitioner.getTransitionDomNode());
+            }
+          }
 
-        await triggerTransitionEnd(transitioner.getTransitionDomNode());
+          expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDDEN));
+        }
+
+        group('is specified via props.transitionCount and is', () {
+          test('less than 0 (should behave like 0)', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = -2
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 0,
+              expectedTransitionOutCount: 0,
+            );
+          });
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING));
+          test('0', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = 0
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 0,
+              expectedTransitionOutCount: 0,
+            );
+          });
 
-        await new Future.delayed(Duration.ZERO);
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDING),
-              reason: 'should still be waiting for a transition event');
+          test('1', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = 1
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 1,
+              expectedTransitionOutCount: 1,
+            );
+          });
 
-        await triggerTransitionEnd(transitioner.getTransitionDomNode());
+          test('2', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = 2
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 2,
+              expectedTransitionOutCount: 2,
+            );
+          });
+        });
 
-        expect(transitioner.state.transitionPhase, equals(TransitionPhase.HIDDEN));
+        group('is specified via props.transitionCount and', () {
+          test('props.transitionInCount', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = 3
+              ..transitionInCount = 2
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 2,
+              expectedTransitionOutCount: 3,
+            );
+          });
+
+          test('props.transitionOutCount', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = 2
+              ..transitionOutCount = 3
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 2,
+              expectedTransitionOutCount: 3,
+            );
+          });
+        });
+
+        test('is specified via props.transitionInCount props.transitionOutCount:', () async {
+          var renderedInstance = render(Transitioner()
+            ..initiallyShown = false
+            ..transitionInCount = 2
+            ..transitionOutCount = 3
+          );
+          await sharedTests(renderedInstance,
+            expectedTransitionInCount: 2,
+            expectedTransitionOutCount: 3,
+          );
+        });
+
+        group('is zero for only one of showing/hiding:', () {
+          test('zero for showing', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionInCount = 0
+              ..transitionOutCount = 3
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 0,
+              expectedTransitionOutCount: 3,
+            );
+          });
+
+          test('zero for hiding', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionInCount = 2
+              ..transitionOutCount = 0
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 2,
+              expectedTransitionOutCount: 0,
+            );
+          });
+        });
       });
     });
 
@@ -360,60 +466,6 @@ main() {
       });
     });
 
-    group('validates the', () {
-      bool warningsWereEnabled;
-      setUp(() {
-        warningsWereEnabled = ValidationUtil.WARNINGS_ENABLED;
-        ValidationUtil.WARNINGS_ENABLED = false;
-        startRecordingValidationWarnings();
-      });
-
-      tearDown(() {
-        ValidationUtil.WARNINGS_ENABLED = warningsWereEnabled;
-        stopRecordingValidationWarnings();
-      });
-
-      group('transitionCount prop by', () {
-        group('warning when', () {
-          test('it is set to 0', () async {
-            var renderedInstance = render(Transitioner()..transitionCount = 0);
-
-            TransitionerComponent transitioner = getDartComponent(renderedInstance);
-
-            transitioner.hide();
-
-            await triggerTransitionEnd(transitioner.getTransitionDomNode());
-
-            verifyValidationWarning('You have set `props.transitionCount` to an invalid option: 0. Instead of setting this prop to 0, override the `hasTransition` getter to return false.');
-          });
-
-          test('it is set to -1', () async {
-            var renderedInstance = render(Transitioner()..transitionCount = -1);
-
-            TransitionerComponent transitioner = getDartComponent(renderedInstance);
-
-            transitioner.hide();
-
-            await triggerTransitionEnd(transitioner.getTransitionDomNode());
-
-            verifyValidationWarning('You have set `props.transitionCount` to an invalid option: -1.');
-          });
-        });
-
-        test('not warning when it is set to 1', () async {
-          var renderedInstance = render(Transitioner()..transitionCount = 1);
-
-          TransitionerComponent transitioner = getDartComponent(renderedInstance);
-
-          transitioner.hide();
-
-          await triggerTransitionEnd(transitioner.getTransitionDomNode());
-
-          rejectValidationWarning(anything);
-        });
-      }, testOn: '!js');
-    });
-
     group('time out', () {
       bool warningsWereEnabled;
 

From 1e9c476620f862fc17f395bd26901afce2709aec Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Fri, 6 Oct 2017 14:39:51 -0700
Subject: [PATCH 2/6] Add getTransitionTestAttributes

---
 lib/src/component/abstract_transition.dart    | 18 ++++
 .../component/abstract_transition_test.dart   | 84 ++++++++++++++++++-
 2 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index b85466ba3..84fe63a9a 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -19,6 +19,7 @@ import 'dart:html';
 
 import 'package:meta/meta.dart';
 import 'package:over_react/over_react.dart';
+import 'package:over_react/component_base.dart' as component_base;
 
 @AbstractProps()
 abstract class AbstractTransitionProps extends UiProps with TransitionPropsMixin {}
@@ -368,6 +369,23 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
     }
   }
 
+  /// Returns attributes only available during testing that indicate the state of the transition.
+  Map<String, String> getTransitionTestAttributes() {
+    if (!component_base.UiProps.testMode) return const {};
+
+    const enumToAttrValue = const <TransitionPhase, String>{
+      TransitionPhase.SHOWN: 'shown',
+      TransitionPhase.HIDDEN: 'hidden',
+      TransitionPhase.HIDING: 'hiding',
+      TransitionPhase.PRE_SHOWING: 'pre-showing',
+      TransitionPhase.SHOWING: 'showing',
+    };
+
+    return {
+      'data-transition-phase': enumToAttrValue[state.transitionPhase],
+    };
+  }
+
   // --------------------------------------------------------------------------
   // Public API Methods
   // --------------------------------------------------------------------------
diff --git a/test/over_react/component/abstract_transition_test.dart b/test/over_react/component/abstract_transition_test.dart
index e49319952..4f3e38085 100644
--- a/test/over_react/component/abstract_transition_test.dart
+++ b/test/over_react/component/abstract_transition_test.dart
@@ -535,6 +535,86 @@ main() {
 
       expect(transitioner.transitionPhasesSet, orderedEquals([TransitionPhase.HIDING]));
     });
+
+    group('getTransitionTestAttributes returns attributes that indicate the state of the transition in component', () {
+      const transitionPhaseTestAttr = 'data-transition-phase';
+
+      group('when the transition state is', () {
+        test('PRE_SHOWING', () async {
+          // Have to use MutationObserver since setting the state to PRE_SHOWING
+          // synchronously updates the state to SHOWING.
+          var transitionAttrMutations = <List<String>>[];
+          var observer = new MutationObserver((records, observer) {
+            for (var record in records) {
+              if (record.attributeName != transitionPhaseTestAttr) continue;
+              transitionAttrMutations.add([
+                record.oldValue,
+                // ignore: avoid_as
+                (record.target as Element).attributes[record.attributeName],
+              ]);
+            }
+          });
+          addTearDown(observer.disconnect);
+
+          var jacket = mount<TransitionerComponent>(Transitioner()(), attachedToDocument: true);
+          observer.observe(jacket.getNode(), attributes: true, attributeOldValue: true);
+
+          var component = jacket.getDartInstance();
+          component.setState(component.newState()..transitionPhase = TransitionPhase.PRE_SHOWING);
+
+          // Wait for MutationObserver callback to fire.
+          await new Future(() {});
+
+          expect(transitionAttrMutations, contains(equals(
+              // We can't catch the overlay getting its attribute changed to `pre-showing` for some reason,
+              // so we'll just have to verify that the old value used to be `pre-showing`.
+              ['pre-showing', 'showing']
+          )));
+        });
+
+        test('SHOWING', () {
+          var jacket = mount<TransitionerComponent>(Transitioner()());
+          var component = jacket.getDartInstance();
+
+          component.setState(component.newState()..transitionPhase = TransitionPhase.SHOWING);
+
+          expect(jacket.getNode(), hasAttr(transitionPhaseTestAttr, 'showing'));
+        });
+
+        test('SHOWN', () {
+          var jacket = mount<TransitionerComponent>(Transitioner()());
+
+          expect(jacket.getNode(), hasAttr(transitionPhaseTestAttr, 'shown'));
+        });
+
+        test('HIDING', () {
+          var jacket = mount<TransitionerComponent>(Transitioner()());
+          var component = jacket.getDartInstance();
+
+          component.setState(component.newState()..transitionPhase = TransitionPhase.HIDING);
+
+          expect(jacket.getNode(), hasAttr(transitionPhaseTestAttr, 'hiding'));
+        });
+
+        test('HIDDEN', () {
+          var jacket = mount<TransitionerComponent>(Transitioner()());
+          var component = jacket.getDartInstance();
+
+          component.setState(component.newState()..transitionPhase = TransitionPhase.HIDDEN);
+
+          expect(jacket.getNode(), hasAttr(transitionPhaseTestAttr, 'hidden'));
+        });
+      });
+
+      test('unless test mode is disabled', () {
+        disableTestMode();
+        addTearDown(enableTestMode);
+
+        var jacket = mount<TransitionerComponent>(Transitioner()());
+
+        expect(jacket.getNode().attributes, isNot(contains(transitionPhaseTestAttr)));
+      });
+    });
   });
 }
 
@@ -586,7 +666,9 @@ class TransitionerComponent extends AbstractTransitionComponent<TransitionerProp
 
   @override
   render() {
-    return Dom.div()();
+    return (Dom.div()
+      ..addProps(getTransitionTestAttributes())
+    )();
   }
 
   @override

From 87f8f2b9f424595fbdb59bb59251db146739884f Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Thu, 12 Oct 2017 09:47:47 -0700
Subject: [PATCH 3/6] Use constant for transition phase attribute

---
 lib/src/component/abstract_transition.dart         | 14 +++++++++++++-
 .../component/abstract_transition_test.dart        |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index 84fe63a9a..7d0fba4ae 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -82,6 +82,18 @@ abstract class AbstractTransitionState extends UiState {
 abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
                                            S extends AbstractTransitionState>
   extends UiStatefulComponent<T, S> {
+  /// The DOM attribute used to indicate the current transition phase,
+  /// added in test mode in [getTransitionTestAttributes].
+  ///
+  /// Possible values:
+  ///
+  /// - `pre-showing`
+  /// - `showing`
+  /// - `shown`
+  /// - `hiding`
+  /// - `hidden`
+  static const String transitionPhaseTestAttr = 'data-transition-phase';
+
   @override
   get consumedProps => const [
     const $Props(AbstractTransitionProps),
@@ -382,7 +394,7 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
     };
 
     return {
-      'data-transition-phase': enumToAttrValue[state.transitionPhase],
+      transitionPhaseTestAttr: enumToAttrValue[state.transitionPhase],
     };
   }
 
diff --git a/test/over_react/component/abstract_transition_test.dart b/test/over_react/component/abstract_transition_test.dart
index 4f3e38085..d29d0b40d 100644
--- a/test/over_react/component/abstract_transition_test.dart
+++ b/test/over_react/component/abstract_transition_test.dart
@@ -537,7 +537,7 @@ main() {
     });
 
     group('getTransitionTestAttributes returns attributes that indicate the state of the transition in component', () {
-      const transitionPhaseTestAttr = 'data-transition-phase';
+      const transitionPhaseTestAttr = AbstractTransitionComponent.transitionPhaseTestAttr;
 
       group('when the transition state is', () {
         test('PRE_SHOWING', () async {

From f8ace21b604a920887c2d62b87920c667fa2c32a Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Fri, 13 Oct 2017 10:14:19 -0700
Subject: [PATCH 4/6] Account for null transitionCount prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Necessary to support existing consumers who don’t
properly add inherited default props.
---
 lib/src/component/abstract_transition.dart            |  4 ++--
 .../component/abstract_transition_test.dart           | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index 7d0fba4ae..76342795e 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -129,10 +129,10 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
   bool get hasTransitionOut => hasTransition && transitionOutCount > 0;
 
   /// The number of `transitionend` events that occur when the transition node is shown.
-  int get transitionInCount => props.transitionInCount ?? props.transitionCount;
+  int get transitionInCount => props.transitionInCount ?? props.transitionCount ?? 0;
 
   /// The number of `transitionend` events that occur when the transition node is hidden.
-  int get transitionOutCount => props.transitionOutCount ?? props.transitionCount;
+  int get transitionOutCount => props.transitionOutCount ?? props.transitionCount ?? 0;
 
   /// The duration that can elapse before a transition timeout occurs.
   Duration get transitionTimeout => const Duration(seconds: 1);
diff --git a/test/over_react/component/abstract_transition_test.dart b/test/over_react/component/abstract_transition_test.dart
index d29d0b40d..f0a69c374 100644
--- a/test/over_react/component/abstract_transition_test.dart
+++ b/test/over_react/component/abstract_transition_test.dart
@@ -262,6 +262,17 @@ main() {
             );
           });
 
+          test('null (should behave like 0)', () async {
+            var renderedInstance = render(Transitioner()
+              ..initiallyShown = false
+              ..transitionCount = null
+            );
+            await sharedTests(renderedInstance,
+              expectedTransitionInCount: 0,
+              expectedTransitionOutCount: 0,
+            );
+          });
+
           test('0', () async {
             var renderedInstance = render(Transitioner()
               ..initiallyShown = false

From acbd73dc5f7ac62ff818ca1862065355791c8e0c Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Fri, 13 Oct 2017 10:25:36 -0700
Subject: [PATCH 5/6] Fix behavior when props.transitionCount is null

---
 lib/src/component/abstract_transition.dart              | 8 ++++++--
 test/over_react/component/abstract_transition_test.dart | 6 +++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index 76342795e..713163b57 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -129,10 +129,14 @@ abstract class AbstractTransitionComponent<T extends AbstractTransitionProps,
   bool get hasTransitionOut => hasTransition && transitionOutCount > 0;
 
   /// The number of `transitionend` events that occur when the transition node is shown.
-  int get transitionInCount => props.transitionInCount ?? props.transitionCount ?? 0;
+  ///
+  /// Defaults to `1` to match previous behavior in the case where `props.transitionCount` is `null`.
+  int get transitionInCount => props.transitionInCount ?? props.transitionCount ?? 1;
 
   /// The number of `transitionend` events that occur when the transition node is hidden.
-  int get transitionOutCount => props.transitionOutCount ?? props.transitionCount ?? 0;
+  ///
+  /// Defaults to `1` to match previous behavior in the case where `props.transitionCount` is `null`.
+  int get transitionOutCount => props.transitionOutCount ?? props.transitionCount ?? 1;
 
   /// The duration that can elapse before a transition timeout occurs.
   Duration get transitionTimeout => const Duration(seconds: 1);
diff --git a/test/over_react/component/abstract_transition_test.dart b/test/over_react/component/abstract_transition_test.dart
index f0a69c374..4c460a835 100644
--- a/test/over_react/component/abstract_transition_test.dart
+++ b/test/over_react/component/abstract_transition_test.dart
@@ -262,14 +262,14 @@ main() {
             );
           });
 
-          test('null (should behave like 0)', () async {
+          test('null (should behave like the default, 1, for backwards compatibility)', () async {
             var renderedInstance = render(Transitioner()
               ..initiallyShown = false
               ..transitionCount = null
             );
             await sharedTests(renderedInstance,
-              expectedTransitionInCount: 0,
-              expectedTransitionOutCount: 0,
+              expectedTransitionInCount: 1,
+              expectedTransitionOutCount: 1,
             );
           });
 

From d9dabc573865d35b76da7069fb86ad9eb87d2657 Mon Sep 17 00:00:00 2001
From: Greg Littlefield <greg.littlefield@workiva.com>
Date: Fri, 13 Oct 2017 10:25:48 -0700
Subject: [PATCH 6/6] Fix doc comment reference typo

---
 lib/src/component/abstract_transition.dart | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/src/component/abstract_transition.dart b/lib/src/component/abstract_transition.dart
index 713163b57..6b57b0691 100644
--- a/lib/src/component/abstract_transition.dart
+++ b/lib/src/component/abstract_transition.dart
@@ -28,7 +28,7 @@ abstract class AbstractTransitionProps extends UiProps with TransitionPropsMixin
 abstract class AbstractTransitionState extends UiState {
   /// The current phase of transition the [AbstractTransitionComponent] is in.
   ///
-  /// Default:  [AbstractTransitionComponent.initiallyShown] ? [TransitionState.SHOWN] : [TransitionState.HIDDEN]
+  /// Default:  [AbstractTransitionComponent.initiallyShown] ? [TransitionPhase.SHOWN] : [TransitionPhase.HIDDEN]
   TransitionPhase transitionPhase;
 }