| Index: packages/polymer_expressions/test/syntax_test.dart
|
| diff --git a/packages/polymer_expressions/test/syntax_test.dart b/packages/polymer_expressions/test/syntax_test.dart
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..d4f8d9e9a95a252cb386b78eac7488fd7759928f
|
| --- /dev/null
|
| +++ b/packages/polymer_expressions/test/syntax_test.dart
|
| @@ -0,0 +1,609 @@
|
| +// Copyright (c) 2013, 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.
|
| +
|
| +import 'dart:async';
|
| +import 'dart:html';
|
| +
|
| +import 'package:observe/observe.dart';
|
| +import 'package:observe/mirrors_used.dart'; // make test smaller.
|
| +import 'package:polymer_expressions/polymer_expressions.dart';
|
| +import 'package:polymer_expressions/eval.dart';
|
| +import 'package:template_binding/template_binding.dart';
|
| +import 'package:unittest/html_config.dart';
|
| +import 'package:unittest/unittest.dart';
|
| +import 'package:smoke/mirrors.dart' as smoke;
|
| +
|
| +class TestScopeFactory implements ScopeFactory {
|
| + int scopeCount = 0;
|
| +
|
| + modelScope({Object model, Map<String, Object> variables}) {
|
| + scopeCount++;
|
| + return new Scope(model: model, variables: variables);
|
| + }
|
| +
|
| + childScope(Scope parent, String name, Object value) {
|
| + scopeCount++;
|
| + return parent.childScope(name, value);
|
| + }
|
| +}
|
| +
|
| +main() {
|
| + useHtmlConfiguration();
|
| + smoke.useMirrors();
|
| +
|
| + group('PolymerExpressions', () {
|
| + DivElement testDiv;
|
| + TestScopeFactory testScopeFactory;
|
| +
|
| + setUp(() {
|
| + document.body.append(testDiv = new DivElement());
|
| + testScopeFactory = new TestScopeFactory();
|
| + });
|
| +
|
| + tearDown(() {
|
| + testDiv.children.clear();
|
| + testDiv = null;
|
| + });
|
| +
|
| + Future<Element> setUpTest(String html, {model, Map globals}) {
|
| + var tag = new Element.html(html,
|
| + treeSanitizer: new NullNodeTreeSanitizer());
|
| +
|
| + // make sure templates behave in the polyfill
|
| + TemplateBindExtension.bootstrap(tag);
|
| +
|
| + templateBind(tag)
|
| + ..bindingDelegate = new PolymerExpressions(globals: globals,
|
| + scopeFactory: testScopeFactory)
|
| + ..model = model;
|
| + testDiv.children.clear();
|
| + testDiv.append(tag);
|
| + return waitForChange(testDiv);
|
| + }
|
| +
|
| + group('scope creation', () {
|
| + // These tests are sensitive to some internals of the implementation that
|
| + // might not be visible to applications, but are useful for verifying that
|
| + // that we're not creating too many Scopes.
|
| +
|
| + // The reason that we create two Scopes in the cases with one binding is
|
| + // that <template bind> has one scope for the context to evaluate the bind
|
| + // binding in, and another scope for the bindings inside the template.
|
| +
|
| + // We could try to optimize the outer scope away in cases where the
|
| + // expression is empty, but there are a lot of special cases in the
|
| + // syntax code already.
|
| + test('should create one scope for a single binding', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, 'a');
|
| + expect(testScopeFactory.scopeCount, 1);
|
| + }));
|
| +
|
| + test('should only create a single scope for two bindings', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <div>{{ data }}</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 3);
|
| + expect(testDiv.children[1].text, 'a');
|
| + expect(testDiv.children[2].text, 'a');
|
| + expect(testScopeFactory.scopeCount, 1);
|
| + }));
|
| +
|
| + test('should create a new scope for a bind/as binding', () {
|
| + return setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <template bind="{{ data as a }}" id="inner">
|
| + <div>{{ a }}</div>
|
| + <div>{{ data }}</div>
|
| + </template>
|
| + </template>''',
|
| + model: new Model('foo'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 5);
|
| + expect(testDiv.children[1].text, 'foo');
|
| + expect(testDiv.children[3].text, 'foo');
|
| + expect(testDiv.children[4].text, 'foo');
|
| + expect(testScopeFactory.scopeCount, 2);
|
| + });
|
| + });
|
| +
|
| + test('should create scopes for a repeat/in binding', () {
|
| + return setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <template repeat="{{ i in items }}" id="inner">
|
| + <div>{{ i }}</div>
|
| + <div>{{ data }}</div>
|
| + </template>
|
| + </template>''',
|
| + model: new Model('foo'), globals: {'items': ['a', 'b', 'c']})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 9);
|
| + expect(testDiv.children[1].text, 'foo');
|
| + expect(testDiv.children[3].text, 'a');
|
| + expect(testDiv.children[4].text, 'foo');
|
| + expect(testDiv.children[5].text, 'b');
|
| + expect(testDiv.children[6].text, 'foo');
|
| + expect(testDiv.children[7].text, 'c');
|
| + expect(testDiv.children[8].text, 'foo');
|
| + // 1 scopes for <template bind>, 1 for each repeat
|
| + expect(testScopeFactory.scopeCount, 4);
|
| + });
|
| + });
|
| +
|
| +
|
| + });
|
| +
|
| + group('with template bind', () {
|
| +
|
| + test('should show a simple binding on the model', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, 'a');
|
| + }));
|
| +
|
| + test('should handle an empty binding on the model', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ }}</div>
|
| + </template>''',
|
| + model: 'a')
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, 'a');
|
| + }));
|
| +
|
| + test('should show a simple binding to a global', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ a }}</div>
|
| + </template>''',
|
| + globals: {'a': '123'})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, '123');
|
| + }));
|
| +
|
| + test('should show an expression binding', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data + 'b' }}</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, 'ab');
|
| + }));
|
| +
|
| + test('should handle an expression in the bind attribute', () =>
|
| + setUpTest('''
|
| + <template id="test" bind="{{ data }}">
|
| + <div>{{ this }}</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].text, 'a');
|
| + }));
|
| +
|
| + test('should handle a nested template with an expression in the bind '
|
| + 'attribute', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <template id="inner" bind="{{ data }}">
|
| + <div>{{ this }}</div>
|
| + </template>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 3);
|
| + expect(testDiv.children[2].text, 'a');
|
| + }));
|
| +
|
| +
|
| + test('should handle an "as" expression in the bind attribute', () =>
|
| + setUpTest('''
|
| + <template id="test" bind="{{ data as a }}">
|
| + <div>{{ data }}b</div>
|
| + <div>{{ a }}c</div>
|
| + </template>''',
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children.length, 3);
|
| + expect(testDiv.children[1].text, 'ab');
|
| + expect(testDiv.children[2].text, 'ac');
|
| + }));
|
| +
|
| + // passes safari
|
| + test('should not resolve names in the outer template from within a nested'
|
| + ' template with a bind binding', () {
|
| + var completer = new Completer();
|
| + var bindingErrorHappened = false;
|
| + var templateRendered = false;
|
| + maybeComplete() {
|
| + if (bindingErrorHappened && templateRendered) {
|
| + completer.complete(true);
|
| + }
|
| + }
|
| + runZoned(() {
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <div>{{ b }}</div>
|
| + <template id="inner" bind="{{ b }}">
|
| + <div>{{ data }}</div>
|
| + <div>{{ b }}</div>
|
| + <div>{{ this }}</div>
|
| + </template>
|
| + </template>''',
|
| + model: new Model('foo'), globals: {'b': 'bbb'})
|
| + .then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].text, 'foo');
|
| + expect(testDiv.children[2].text, 'bbb');
|
| + // Something very strage is happening in the template bindings
|
| + // polyfill, and the template is being stamped out, inside the
|
| + // template tag (which shouldn't happen), and outside the template
|
| + //expect(testDiv.children[3].text, '');
|
| + expect(testDiv.children[3].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[4].text, '');
|
| + expect(testDiv.children[5].text, 'bbb');
|
| + expect(testDiv.children[6].text, 'bbb');
|
| + templateRendered = true;
|
| + maybeComplete();
|
| + });
|
| + }, onError: (e, s) {
|
| + expect('$e', contains('data'));
|
| + bindingErrorHappened = true;
|
| + maybeComplete();
|
| + });
|
| + return completer.future;
|
| + });
|
| +
|
| + // passes safari
|
| + test('should shadow names in the outer template from within a nested '
|
| + 'template', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ a }}</div>
|
| + <div>{{ b }}</div>
|
| + <template bind="{{ b as a }}">
|
| + <div>{{ a }}</div>
|
| + <div>{{ b }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'a': 'aaa', 'b': 'bbb'})
|
| + .then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].text, 'aaa');
|
| + expect(testDiv.children[2].text, 'bbb');
|
| + expect(testDiv.children[3].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[4].text, 'bbb');
|
| + expect(testDiv.children[5].text, 'bbb');
|
| + }));
|
| +
|
| + });
|
| +
|
| + group('with template repeat', () {
|
| +
|
| + // passes safari
|
| + test('should not resolve names in the outer template from within a nested'
|
| + ' template with a repeat binding', () {
|
| + var completer = new Completer();
|
| + var bindingErrorHappened = false;
|
| + var templateRendered = false;
|
| + maybeComplete() {
|
| + if (bindingErrorHappened && templateRendered) {
|
| + completer.complete(true);
|
| + }
|
| + }
|
| + runZoned(() {
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <template repeat="{{ items }}">
|
| + <div>{{ }}{{ data }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'items': [1, 2, 3]},
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].text, 'a');
|
| + expect(testDiv.children[2].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[3].text, '1');
|
| + expect(testDiv.children[4].text, '2');
|
| + expect(testDiv.children[5].text, '3');
|
| + templateRendered = true;
|
| + maybeComplete();
|
| + });
|
| + }, onError: (e, s) {
|
| + expect('$e', contains('data'));
|
| + bindingErrorHappened = true;
|
| + maybeComplete();
|
| + });
|
| + return completer.future;
|
| + });
|
| +
|
| + test('should handle repeat/in bindings', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <template repeat="{{ item in items }}">
|
| + <div>{{ item }}{{ data }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'items': [1, 2, 3]},
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + // expect 6 children: two templates, a div and three instances
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].text, 'a');
|
| + expect(testDiv.children[2].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[3].text, '1a');
|
| + expect(testDiv.children[4].text, '2a');
|
| + expect(testDiv.children[5].text, '3a');
|
| +// expect(testDiv.children.map((c) => c.text),
|
| +// ['', 'a', '', '1a', '2a', '3a']);
|
| + }));
|
| +
|
| + test('should observe changes to lists in repeat bindings', () {
|
| + var items = new ObservableList.from([1, 2, 3]);
|
| + return setUpTest('''
|
| + <template id="test" bind>
|
| + <template repeat="{{ items }}">
|
| + <div>{{ }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'items': items},
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[2].text, '1');
|
| + expect(testDiv.children[3].text, '2');
|
| + expect(testDiv.children[4].text, '3');
|
| +// expect(testDiv.children.map((c) => c.text),
|
| +// ['', '', '1', '2', '3']);
|
| + items.add(4);
|
| + return waitForChange(testDiv);
|
| + }).then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[2].text, '1');
|
| + expect(testDiv.children[3].text, '2');
|
| + expect(testDiv.children[4].text, '3');
|
| + expect(testDiv.children[5].text, '4');
|
| +// expect(testDiv.children.map((c) => c.text),
|
| +// ['', '', '1', '2', '3', '4']);
|
| + });
|
| + });
|
| +
|
| + test('should observe changes to lists in repeat/in bindings', () {
|
| + var items = new ObservableList.from([1, 2, 3]);
|
| + return setUpTest('''
|
| + <template id="test" bind>
|
| + <template repeat="{{ item in items }}">
|
| + <div>{{ item }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'items': items},
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[2].text, '1');
|
| + expect(testDiv.children[3].text, '2');
|
| + expect(testDiv.children[4].text, '3');
|
| +// expect(testDiv.children.map((c) => c.text),
|
| +// ['', '', '1', '2', '3']);
|
| + items.add(4);
|
| + return waitForChange(testDiv);
|
| + }).then((_) {
|
| + expect(testDiv.children[0].text, '');
|
| + expect(testDiv.children[1].tagName.toLowerCase(), 'template');
|
| + expect(testDiv.children[2].text, '1');
|
| + expect(testDiv.children[3].text, '2');
|
| + expect(testDiv.children[4].text, '3');
|
| + expect(testDiv.children[5].text, '4');
|
| +// expect(testDiv.children.map((c) => c.text),
|
| +// ['', '', '1', '2', '3', '4']);
|
| + });
|
| + });
|
| + });
|
| +
|
| + group('with template if', () {
|
| +
|
| + Future doTest(value, bool shouldRender) =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ data }}</div>
|
| + <template if="{{ show }}">
|
| + <div>{{ data }}</div>
|
| + </template>
|
| + </template>''',
|
| + globals: {'show': value},
|
| + model: new Model('a'))
|
| + .then((_) {
|
| + if (shouldRender) {
|
| + expect(testDiv.children.length, 4);
|
| + expect(testDiv.children[1].text, 'a');
|
| + expect(testDiv.children[3].text, 'a');
|
| + } else {
|
| + expect(testDiv.children.length, 3);
|
| + expect(testDiv.children[1].text, 'a');
|
| + }
|
| + });
|
| +
|
| + test('should render for a true expression',
|
| + () => doTest(true, true));
|
| +
|
| + test('should treat a non-null expression as truthy',
|
| + () => doTest('a', true));
|
| +
|
| + test('should treat an empty list as truthy',
|
| + () => doTest([], true));
|
| +
|
| + test('should handle a false expression',
|
| + () => doTest(false, false));
|
| +
|
| + test('should treat null as falsey',
|
| + () => doTest(null, false));
|
| + });
|
| +
|
| + group('error handling', () {
|
| +
|
| + test('should silently handle bad variable names', () {
|
| + var completer = new Completer();
|
| + runZoned(() {
|
| + testDiv.nodes.add(new Element.html('''
|
| + <template id="test" bind>{{ foo }}</template>'''));
|
| + templateBind(query('#test'))
|
| + ..bindingDelegate = new PolymerExpressions()
|
| + ..model = [];
|
| + return new Future(() {});
|
| + }, onError: (e, s) {
|
| + expect('$e', contains('foo'));
|
| + completer.complete(true);
|
| + });
|
| + return completer.future;
|
| + });
|
| +
|
| + test('should handle null collections in "in" expressions', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <template repeat="{{ item in items }}">
|
| + {{ item }}
|
| + </template>
|
| + </template>''',
|
| + globals: {'items': null})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[0].id, 'test');
|
| + }));
|
| +
|
| + });
|
| +
|
| + group('special bindings', () {
|
| +
|
| + test('should handle class attributes with lists', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div class="{{ classes }}">
|
| + </template>''',
|
| + globals: {'classes': ['a', 'b']})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].attributes['class'], 'a b');
|
| + expect(testDiv.children[1].classes, ['a', 'b']);
|
| + }));
|
| +
|
| + test('should handle class attributes with maps', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div class="{{ classes }}">
|
| + </template>''',
|
| + globals: {'classes': {'a': true, 'b': false, 'c': true}})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].attributes['class'], 'a c');
|
| + expect(testDiv.children[1].classes, ['a', 'c']);
|
| + }));
|
| +
|
| + test('should handle style attributes with lists', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div style="{{ styles }}">
|
| + </template>''',
|
| + globals: {'styles': ['display: none', 'color: black']})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].attributes['style'],
|
| + 'display: none;color: black');
|
| + }));
|
| +
|
| + test('should handle style attributes with maps', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div style="{{ styles }}">
|
| + </template>''',
|
| + globals: {'styles': {'display': 'none', 'color': 'black'}})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 2);
|
| + expect(testDiv.children[1].attributes['style'],
|
| + 'display: none;color: black');
|
| + }));
|
| + });
|
| +
|
| + group('regression tests', () {
|
| +
|
| + test('should bind to literals', () =>
|
| + setUpTest('''
|
| + <template id="test" bind>
|
| + <div>{{ 123 }}</div>
|
| + <div>{{ 123.456 }}</div>
|
| + <div>{{ "abc" }}</div>
|
| + <div>{{ true }}</div>
|
| + <div>{{ null }}</div>
|
| + </template>''',
|
| + globals: {'items': null})
|
| + .then((_) {
|
| + expect(testDiv.children.length, 6);
|
| + expect(testDiv.children[1].text, '123');
|
| + expect(testDiv.children[2].text, '123.456');
|
| + expect(testDiv.children[3].text, 'abc');
|
| + expect(testDiv.children[4].text, 'true');
|
| + expect(testDiv.children[5].text, '');
|
| + }));
|
| +
|
| + });
|
| +
|
| + });
|
| +}
|
| +
|
| +Future<Element> waitForChange(Element e) {
|
| + var completer = new Completer<Element>();
|
| + new MutationObserver((mutations, observer) {
|
| + observer.disconnect();
|
| + completer.complete(e);
|
| + }).observe(e, childList: true);
|
| + return completer.future.timeout(new Duration(seconds: 1));
|
| +}
|
| +
|
| +@reflectable
|
| +class Model extends ChangeNotifier {
|
| + String _data;
|
| +
|
| + Model(this._data);
|
| +
|
| + String get data => _data;
|
| +
|
| + void set data(String value) {
|
| + _data = notifyPropertyChange(#data, _data, value);
|
| + }
|
| +
|
| + String toString() => "Model(data: $_data)";
|
| +}
|
| +
|
| +class NullNodeTreeSanitizer implements NodeTreeSanitizer {
|
| +
|
| + @override
|
| + void sanitizeTree(Node node) {}
|
| +}
|
|
|