update elements and fix some bugs

test/firebase_collection_test.dart

 // Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 @TestOn('browser')
 library polymer_elements.test.firebase_collection_test;
 
 import 'dart:async';
 import 'dart:js';
 import 'package:polymer/polymer.dart';
 import 'package:polymer_elements/firebase_collection.dart';
 import 'package:web_components/web_components.dart';
 import 'package:test/test.dart';
 import 'common.dart';
+import 'firebase_test_helpers.dart';
 
 main() async {
   await initWebComponents();
 
-  group('<firebase-collection>', () {
+  group('firebase-collection', () {
     FirebaseCollection firebase;
 
-    group('collection manipulation', () {
+    tearDown(() {
+      if (firebase != null) removeFirebase(firebase);
+    });
+
+    group('basic usage', () {
+      var numberOfItems;
+
+      setUp(() {
+        numberOfItems = 3;
+        firebase =
+            fixtureFirebase('TrivialCollection', arrayOfObjects(numberOfItems));
+        return wait(1);
+      });
+
+      test('exposes data as an array', () {
+        expect(firebase.data is List, isTrue);
+        expect(firebase.data.length, numberOfItems);
+      });
+
+      test('receives data from Firebase location', () {
+        expect(firebase.data[0]['value'] is num, isTrue);
+      });
+    });
+
+    group('ordered primitives', () {
+      var numberOfItems;
+
+      setUp(() {
+        numberOfItems = 5;
+        firebase = fixtureFirebase(
+            'TrivialCollection', arrayOfPrimitives(numberOfItems));
+        firebase.orderByValue = true;
+      });
+
+      test('converts primitives into objects with a value key', () {
+        expect(firebase.data[0] is JsObject, isTrue);
+      });
+
+      test('orders primitives by value', () {
+        var lastValue = -1;
+
+        expect(firebase.data.length, numberOfItems);
+
+        firebase.data.forEach((datum) {
+          expect(datum['value'], isNot(lessThan(lastValue)));
+          lastValue = datum['value'];
+        });
+      });
+    });
+
+    group('removing a value locally', () {
+      var numberOfItems;
+      setUp(() {
+        numberOfItems = 3;
+        firebase =
+            fixtureFirebase('TrivialCollection', arrayOfObjects(numberOfItems));
+      });
+
+      test('works for data-bound changes', () {
+        firebase.removeAt('data', 0);
+        expect(firebase.data.length, numberOfItems - 1);
+      });
+
+      test('can be done with `remove`', () {
+        var objectToBeRemoved = firebase.data[0];
+        firebase.removeItem(objectToBeRemoved);
+
+        expect(firebase.data.length, numberOfItems - 1);
+        expect(firebase.data.indexOf(objectToBeRemoved), -1);
+      });
+    });
+
+    group('adding a value locally', () {
+      setUp(() {
+        firebase = fixtureFirebase('TrivialCollection');
+      });
+
+      test('works for data-bound changes', () {
+        var done = new Completer();
+        var intendedValue = randomInt();
+        // Can't call `add` since it is overridden
+        var index =
+            firebase.jsElement.callMethod('push', ['data', intendedValue]) - 1;

[Siggi Cherem (dart-lang), 2015/10/28 22:35:16]

should `push` be exposed in the Dart API? Is it part of the FirebaseCollection
API? or something we planned to translate as `add`, but there is already another
use for `add`?

[jakemac, 2015/10/29 16:07:29]

I guess what should really happen here is changing the `add` method on the
firebase element to have a different name. The `removeItem` method is the same
way. I will rename them `firebaseAdd` and `firebaseRemove`?

+
+        // NOTE(cdata): See polymer/polymer#2491.
+        firebase.async(() {
+          expect(firebase.data[index]['value'], isNotNull);
+          expect(firebase.data[index]['value'], intendedValue);
+          done.complete();
+        }, waitTime: 1);
+
+        return done.future;
+      });
+
+      test('can be done with `add`', () {
+        var done = new Completer();
+        var object = randomObject();
+        var length = firebase.data.length;
+        var foundObject;
+
+        firebase.add(new JsObject.jsify(object));
+
+        // NOTE(cdata): See polymer/polymer#2491.
+        firebase.async(() {
+          expect(firebase.data.length, length + 1);
+
+          firebase.data.forEach((datum) {
+            if (datum['value'] == object['value']) {
+              foundObject = datum;
+            }
+          });
+
+          expect(foundObject, isNotNull);
+          expect(foundObject['value'], object['value']);
+          done.complete();
+        }, waitTime: 1);
+
+        return done.future;
+      });
+    });
+
+    group('a changing child', () {
+      var numberOfItems;
+      var remoteFirebase;
+
+      setUp(() {
+        numberOfItems = 3;
+        firebase =
+            fixtureFirebase('TrivialCollection', arrayOfObjects(numberOfItems));
+        remoteFirebase = new JsObject(context['Firebase'], [firebase.location]);
+      });
+
+      test('updates the child key in place with the new value', () {
+        var datum = firebase.data[0];
+        var newValue = 99999;
+        var key = context['Polymer']['Collection']
+            .callMethod('get', [firebase.data]).callMethod('getKey', [datum]);
+
+        firebase.set('data.$key.value', newValue);
+
+        expect(firebase.data[0]['value'], newValue);
+      });
+    });
+
+    group('syncing collections', () {
+      var numberOfItems;
+      var remoteFirebase;
+
+      setUp(() {
+        numberOfItems = 3;
+
+        firebase = fixtureFirebase('TrivialCollection', arrayOfObjects(3));
+        firebase.orderValueType = 'number';
+        firebase.orderByValue = true;
+
+        remoteFirebase = new JsObject(context['Firebase'], [firebase.location]);
+      });
+
+      test('sync a new item at the correct index', () {
+        var firstValue = firebase.data[0];
+        var secondValue = firebase.data[1];
+        var datum = firebase.data[0];
+        var key = context['Polymer']['Collection']

[Siggi Cherem (dart-lang), 2015/10/28 22:35:16]

do we want to eventually wrap these static APIs as well? Maybe when the cleaner
JS interop ships?

[jakemac, 2015/10/29 16:07:29]

These collection apis are not really useful in general I don't think except
internally to polymer. If somebody asks for them we can wrap them.

+            .callMethod('get', [firebase.data]).callMethod('getKey', [datum]);
+        var remoteValue;
+
+        remoteFirebase.callMethod('on', [
+          'value',
+          (snapshot) {
+            remoteValue = snapshot.callMethod('val');
+          }
+        ]);
+
+        expect(remoteValue[0]['value'], firebase.data[0]['value']);
+      });
+    });
+
+    group('data-bound collection manipulation', () {
+      var numberOfItems;
+      var elements;
       DomBind domBind;
-      var dom;
-
-      setUp(() {
-        dom = fixture('BoundCollection');
-        domBind = dom.querySelector('[is=dom-bind]');
-        firebase = dom.querySelector('firebase-collection');
-      });
-
-      test('added values reflect 1-to-1 in the DOM', () {
-        return firebase.on['firebase-value'].first.then((_) {
-          var done = firebase.on['firebase-child-added'].first.then((_) {
-            expect(dom.querySelectorAll('div').length, firebase.data.length);
-          });
-          domBind.insert('data', 0, {'value': 'blah'});
-          domBind.render();
-          return done;
-        });
-      });
-    }, skip: 'https://github.com/dart-lang/polymer_elements/issues/62');
-
-    group('basic usage', () {
-      setUp(() {
-        firebase = fixture('TrivialCollection');
-      });
-
-      tearDown(() {
-        firebase.disconnect();
-      });
-
-      test('exposes data as an array', () {
-        return firebase.on['firebase-child-added'].first.then((_) {
-          expect(firebase.data is List, isTrue);
-        });
-      });
-
-      test('receives data from Firebase location', () {
-        return firebase.on['data-changed'].first.then((_) {
-          expect(firebase.data[0]['value'], true);
-        });
-      });
-    });
-
-    group('ordered primitives', () {
-      setUp(() {
-        firebase = fixture('PrimitiveCollection');
-      });
-
-      tearDown(() {
-        firebase.disconnect();
-      });
-
-      test('converts primitives into objects with a value key', () {
-        return firebase.on['firebase-child-added'].first.then((_) {
-          expect(firebase.data[0], isNotNull);
-        });
-      });
-
-      test('orders primitives by value', () {
-        return firebase.on['firebase-value'].first.then((_) {
-          var lastValue = -1.0 / 0;
-          expect(firebase.data.length, greaterThan(0));
-          firebase.data.forEach((item) {
-            expect(item['value'], greaterThanOrEqualTo(lastValue));
-            lastValue = item['value'];
-          });
-        });
-      });
-
-      group('adding a value locally', () {
-        setUp(() {
-          return firebase.on['firebase-value'].first;
-        });
-
-        test('can be done with `add`', () {
-          var length = firebase.data.length;
-          var newValue = firebase.data[firebase.data.length - 1]['value'] + 1;
-          var key;
-
-          var done = firebase.on['firebase-child-added'].first.then((_) {
-            expect(firebase.data.length, length + 1);
-            expect(firebase.data[firebase.data.length - 1]['value'], newValue);
-          }).then((_) async {
-            await wait(1);
-            firebase.removeByKey(key);
-          });
-
-          key = firebase.add(newValue).callMethod('key');
-          return done;
-        });
-      });
-    });
-
-    group('a child changes', () {
-      setUp(() {
-        firebase = fixture('ChangingChildren');
-        return firebase.on['firebase-value'].first;
-      });
-
-      test('updates the child key in place with the new value', () {
-        var childrenKeys = [];
-
-        var done = firebase.on['firebase-value'].first.then((_) async {
-          // Wait for childrenKeys to be populated
-          await new Future(() {});
-          var middleValue = firebase.getByKey(childrenKeys[1]);
-          var changes;
-
-          expect(middleValue['foo'], 1);
-          expect(middleValue['bar'], 1);
-
-          changes = firebase.on['firebase-child-changed'].first;
-
-          firebase.set('data.${firebase.data.indexOf(middleValue)}.bar', 2);
-
-          return changes;
-        }).then((_) {
-          var middleValue = firebase.getByKey(childrenKeys[1]);
-
-          expect(middleValue['foo'], 1);
-          expect(middleValue['bar'], 2);
-        }).then((_) {
-          childrenKeys.forEach((key) {
-            firebase.removeByKey(key);
-          });
-        });
-
-        var index = -1;
-        childrenKeys = [0, 1, 2].map((value) {
-          index++;
-          return firebase
-              .add(new JsObject.jsify({'foo': value, 'bar': index}))
-              .callMethod('key');
-        }).toList();
-
-        return done;
-      });
-    });
-
-    group('syncing collections', () {
-      FirebaseCollection localFirebase;
-      FirebaseCollection remoteFirebase;
-
-      setUp(() {
-        var children = fixture('SyncingCollections');
-        localFirebase = children[0];
-        remoteFirebase = children[1];
-        return Future.wait([
-          localFirebase.on['firebase-value'].first,
-          remoteFirebase.on['firebase-value'].first
-        ]);
-      });
-
-      test('syncs a new item at the correct index', () {
-        var data = {'foo': 100};
-        var key;
-
-        var done = remoteFirebase.on['firebase-value'].first.then((_) async {
-          await wait(1);
-          var value = remoteFirebase.getByKey(key);
-          var lowValue = remoteFirebase.getByKey('lowValue');
-          var highValue = remoteFirebase.getByKey('highValue');
-
-          var index = remoteFirebase.data.indexOf(value);
-          var lowIndex = remoteFirebase.data.indexOf(lowValue);
-          var highIndex = remoteFirebase.data.indexOf(highValue);
-
-          expect(value, isNotNull);
-          expect(index, lessThan(highIndex));
-          expect(index, greaterThan(lowIndex));
-        }).then((_) {
-          localFirebase.removeByKey(key);
-        });
-
-        key = localFirebase.add(new JsObject.jsify(data)).callMethod('key');
-
-        return done;
-      });
+
+      setUp(() {
+        elements = fixture('BoundCollection');
+        domBind = elements.querySelector('[is=dom-bind]');
+        firebase = elements.querySelector('firebase-collection');
+        firebase.location = fixtureLocation(arrayOfObjects(3));
+        numberOfItems = 3;
+      });
+
+      test('splices reflect in Firebase data', () {
+        var done = new Completer();
+        domBind.removeAt('data', 0);
+        domBind.add('data', randomObject());
+        domBind.removeAt('data', 0);
+        domBind.addAll('data', arrayOfObjects(2));
+
+        // NOTE(cdata): See polymer/polymer#2491.
+        firebase.async(() {
+          expect(firebase.data.length, domBind['data'].length);
+
+          for (int i = 0; i < firebase.data.length; i++) {
+            var datum = firebase.data[i];
+            expect(domBind['data'][i]['value'], datum['value']);
+          }
+
+          done.complete();
+        }, waitTime: 1);
+
+        done.future;
+      });
+
+      test('splices reflect in the DOM', () {
+        var divs;
+        var done = new Completer();
+
+        firebase.jsElement.callMethod('push',
+            ['data']..addAll(new JsObject.jsify(arrayOfObjects(3)) as JsArray));
+
+        firebase.async(() {
+          divs = elements.querySelectorAll('div');
+          expect(divs.length, firebase.data.length);
+
+          domBind.removeAt('data', 2);
+          domBind.add('data', randomObject());
+
+          firebase.async(() {
+            divs = elements.querySelectorAll('div');
+            expect(divs.length, firebase.data.length);
+
+            for (int i = 0; i < firebase.data.length; i++) {
+              var datum = firebase.data[i];
+              var divValue = int.parse(divs[i].text);
+              expect(datum.value, divValue);
+            }
+
+            done.complete();
+          }, waitTime: 1);
+        }, waitTime: 1);
+
+        return done.future;
+      }, skip: 'https://github.com/dart-lang/polymer_elements/issues/62');
     });
   });
 }