Index: packages/charted/test.disabled/transition/transition_test.dart |
diff --git a/packages/charted/test.disabled/transition/transition_test.dart b/packages/charted/test.disabled/transition/transition_test.dart |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7762ee0482f18a8e98fa30f45fe25cac06b13b24 |
--- /dev/null |
+++ b/packages/charted/test.disabled/transition/transition_test.dart |
@@ -0,0 +1,387 @@ |
+/* |
+ * Copyright 2014 Google Inc. All rights reserved. |
+ * |
+ * Use of this source code is governed by a BSD-style |
+ * license that can be found in the LICENSE file or at |
+ * https://developers.google.com/open-source/licenses/bsd |
+ */ |
+ |
+library charted.test.transition; |
+ |
+import 'dart:async'; |
+import 'dart:html' show document, Element; |
+import 'package:charted/core/utils.dart'; |
+import 'package:charted/interpolators/interpolators.dart'; |
+import 'package:charted/selection/selection.dart'; |
+import 'package:charted/selection/transition.dart'; |
+import 'package:unittest/unittest.dart'; |
+ |
+transitionTests() { |
+ const TIME_BIAS = 50; |
+ String markup = |
+ '<div class="transition-container">' |
+ '<div class="delay-100"></div>' |
+ '<div class="delay-500"></div>' |
+ '<div class="delay-callback"></div>' |
+ '<div class="delay-callback"></div>' |
+ '<div class="delay-callback"></div>' |
+ '<div class="duration-100"></div>' |
+ '<div class="duration-callback"></div>' |
+ '<div class="duration-callback"></div>' |
+ '<div class="duration-callback"></div>' |
+ '<div class="attr-100"></div>' |
+ '<div class="attr-callback"></div>' |
+ '<div class="attr-callback"></div>' |
+ '<div class="attr-callback"></div>' |
+ '<div class="style-callback"></div>' |
+ '<div class="style-callback"></div>' |
+ '<div class="style-callback"></div>' |
+ '<div class="attr-tween"></div>' |
+ '<div class="attr-tween"></div>' |
+ '<div class="attr-tween"></div>' |
+ '<div class="style-tween"></div>' |
+ '<div class="style-tween"></div>' |
+ '<div class="style-tween"></div>' |
+ '<div class="chained-transition"></div>' |
+ '<div class="transition-select">' |
+ '<div class="select-item"></div>' |
+ '</div>' |
+ '<div class="transition-select-all">' |
+ '<div class="select-item"></div>' |
+ '<div class="select-item"></div>' |
+ '<div class="select-item"></div>' |
+ '</div>' |
+ '</div>'; |
+ |
+ Element root; |
+ SelectionScope scope; |
+ |
+ setup() { |
+ root = new Element.html(markup); |
+ document.documentElement.append(root); |
+ scope = new SelectionScope.selector('.transition-container'); |
+ } |
+ |
+ teardown() { |
+ root.remove(); |
+ } |
+ |
+ setUp(setup); |
+ tearDown(teardown); |
+ |
+ void checkColor(e, color, [bool equal = true]) { |
+ if (color == null) { |
+ expect(e.attributes['style'], isNull); |
+ } else if (equal) { |
+ expect(e.attributes['style'], equals('background-color: ${color};')); |
+ } else { |
+ expect(e.attributes['style'] |
+ .compareTo('background-color: ${color};') == 0, isFalse); |
+ } |
+ } |
+ |
+ void checkHeight(e, height, [bool equal = true]) { |
+ if (height == null) { |
+ expect(e.attributes['height'], isNull); |
+ } else if (equal) { |
+ expect(e.attributes['height'], equals('${height}')); |
+ } else { |
+ expect(e.attributes['height'].compareTo('${height}') == 0, isFalse); |
+ } |
+ } |
+ |
+ test('Transition.delay delays specific time before transition', () { |
+ Selection transition1 = scope.select('.delay-100'); |
+ transition1.transition() |
+ ..style('background-color', '#ffffff') |
+ ..delay(100); |
+ new Timer(new Duration(milliseconds:100 - TIME_BIAS), expectAsync(() { |
+ transition1.each((d, i, Element e) { |
+ checkColor(e, null); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition1.each((d, i, Element e) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ Selection transition2 = scope.select('.delay-500'); |
+ transition2.transition() |
+ ..style('background-color', '#ffffff') |
+ ..delay(500); |
+ new Timer(new Duration(milliseconds:500 - TIME_BIAS), expectAsync(() { |
+ transition2.each((d, i, Element e) { |
+ checkColor(e, null); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:500 + TIME_BIAS), expectAsync(() { |
+ transition2.each((d, i, Element e) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.delayWithCallback delays specific time by callback', () { |
+ Selection transition = scope.selectAll('.delay-callback'); |
+ transition.transition() |
+ ..style('background-color', '#ffffff') |
+ ..delayWithCallback((d, i, e) => (i + 1) * 100); |
+ new Timer(new Duration(milliseconds:100 - TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, null); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ if (i > 0) checkColor(e, null); |
+ else checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:200 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ if (i > 1) checkColor(e, null); |
+ else checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:300 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.duration sets the duration of transition', () { |
+ Selection transition = scope.select('.duration-100'); |
+ transition |
+ .style('background-color', '#000000'); |
+ transition.transition() |
+ ..style('background-color', '#ffffff') |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)'); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, 'rgb(255, 255, 255)', false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.durationWithCallback sets duration by callback', () { |
+ Selection transition = scope.selectAll('.duration-callback'); |
+ transition |
+ .style('background-color', '#000000'); |
+ transition.transition() |
+ ..style('background-color', '#ffffff') |
+ ..durationWithCallback((d, i, e) => (i + 1) * 100); |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)'); |
+ }); |
+ new Timer(new Duration(milliseconds:100 - TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, 'rgb(255, 255, 255)', false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ if (i < 1) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ } else { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, 'rgb(255, 255, 255)', false); |
+ } |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:200 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ if (i < 2) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ } else { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, 'rgb(255, 255, 255)', false); |
+ } |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:300 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(255, 255, 255)'); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.attr sets the attribute of transition', () { |
+ Selection transition = scope.select('.attr-100'); |
+ transition.attr('height', '0'); |
+ transition.transition() |
+ ..attr('height', '100') |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, 0); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, 0, false); |
+ checkHeight(e, 100, false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, 100); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.attrWithCallback sets the attribute by callback', () { |
+ Selection transition = scope.selectAll('.attr-callback'); |
+ transition.attr('height', '0'); |
+ transition.transition() |
+ ..attrWithCallback('height', (d, i, e) => (i + 1) * 100) |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, 0); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, 0, false); |
+ checkHeight(e, (i + 1) * 100, false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, (i + 1) * 100); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.styleWithCallback sets the style by callback', () { |
+ Selection transition = scope.selectAll('.style-callback'); |
+ transition.style('background-color', 'rgb(0, 0, 0)'); |
+ var colors = ['rgb(255, 0, 0);', 'rgb(0, 255, 0);', 'rgb(0, 0, 255);']; |
+ transition.transition() |
+ ..styleWithCallback('background-color', (d, i, e) => colors[i]) |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)'); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, colors[i], false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, colors[i], false); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.attrTween transitions the value of the attribute with ' |
+ 'the specified name according to the specified tween function', () { |
+ Selection transition = scope.selectAll('.attr-tween'); |
+ transition.attr('height', '0px'); |
+ transition.transition() |
+ ..attrTween('height', (d, i, attr) => |
+ interpolateString(attr, ((i + 1) * 100).toString() + 'px')) |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, '0px'); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, '0px', false); |
+ checkHeight(e, '${(i + 1) * 100}.0px', false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkHeight(e, '${(i + 1) * 100}.0px'); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.styleTween transitions the value of the CSS style property ' |
+ 'with the specified name according to the specified tween function', () { |
+ Selection transition = scope.selectAll('.style-tween'); |
+ transition.style('background-color', 'rgb(0, 0, 0)'); |
+ var colors = ['rgb(255, 0, 0);', 'rgb(0, 255, 0);', 'rgb(0, 0, 255);']; |
+ transition.transition() |
+ ..styleTween('background-color', (d, i, style) => |
+ interpolateString(style, colors[i])) |
+ ..duration(100); |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)'); |
+ }); |
+ new Timer(new Duration(milliseconds:50), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, 'rgb(0, 0, 0)', false); |
+ checkColor(e, colors[i], false); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:100 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ checkColor(e, colors[i], false); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.transition implements chained transition', () { |
+ Selection transition = scope.select('.chained-transition'); |
+ transition.attr('height', '0'); |
+ Transition t = transition.transition(); |
+ t..duration(500) |
+ ..attr('height', '10000'); |
+ var t2 = t.transition(); |
+ t2.attr('height', '1000'); |
+ |
+ new Timer(new Duration(milliseconds:200), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ var height = num.parse(e.attributes['height']); |
+ expect(height > 0, isTrue); |
+ expect(height < 7500, isTrue); |
+ }); |
+ })); |
+ new Timer(new Duration(milliseconds:500), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ var height = num.parse(e.attributes['height']); |
+ expect(height > 7500, isTrue); |
+ }); |
+ })); |
+ |
+ new Timer(new Duration(milliseconds:1000 + TIME_BIAS), expectAsync(() { |
+ transition.each((d, i, Element e) { |
+ var height = num.parse(e.attributes['height']); |
+ expect(height == 1000, isTrue); |
+ }); |
+ })); |
+ }); |
+ |
+ test('Transition.select selects the first descendant element ' |
+ 'that matches the specified selector string', () { |
+ Selection transition = scope.select('.transition-select'); |
+ transition.select('.select-item') |
+ ..attr('height', '100'); |
+ transition.select('.select-item').each((d, i, Element e) { |
+ var height = num.parse(e.attributes['height']); |
+ expect(height, equals(100)); |
+ }); |
+ }); |
+ |
+ test('Transition.selectAll selects all descendant elements ' |
+ 'that match the specified selector string', () { |
+ Selection transition = scope.select('.transition-select-all'); |
+ transition.selectAll('.select-item') |
+ ..attr('height', '100'); |
+ transition.selectAll('.select-item').each((d, i, Element e) { |
+ var height = num.parse(e.attributes['height']); |
+ expect(height, equals(100)); |
+ }); |
+ }); |
+} |