| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 3 Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| 4 for details. All rights reserved. Use of this source code is governed by a | 4 for details. All rights reserved. Use of this source code is governed by a |
| 5 BSD-style license that can be found in the LICENSE file. | 5 BSD-style license that can be found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 <html lang="en"> | 7 <html lang="en"> |
| 8 <head> | 8 <head> |
| 9 <!-- | 9 <!-- |
| 10 This test runs the TodoMVC app, adds a few todos, marks some as done | 10 This test runs the TodoMVC app, adds a few todos, marks some as done |
| 11 programatically, and clicks on a checkbox to mark others via the UI. | 11 programatically, and clicks on a checkbox to mark others via the UI. |
| 12 --> | 12 --> |
| 13 <meta charset="utf-8"> | 13 <meta charset="utf-8"> |
| 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 15 <link rel="import" href="../web/app.html"> | 15 <link rel="import" href="../web/app.html"> |
| 16 <link rel="stylesheet" href="../web/base.css"> | 16 <link rel="stylesheet" href="../web/base.css"> |
| 17 <script src="packages/web_ui/testing/testing.js"></script> | 17 <script src="packages/polymer/testing/testing.js"></script> |
| 18 <title>Dart • TodoMVC</title> | 18 <title>Dart • TodoMVC</title> |
| 19 </head><body> | 19 </head><body> |
| 20 <todo-app></todo-app> | 20 <todo-app></todo-app> |
| 21 <script type="application/dart"> | 21 <script type="application/dart"> |
| 22 import 'dart:async'; | |
| 23 import 'dart:html'; | 22 import 'dart:html'; |
| 24 import 'package:unittest/unittest.dart'; | 23 import 'package:unittest/unittest.dart'; |
| 25 import 'package:web_ui/web_ui.dart'; | 24 import 'package:polymer/polymer.dart'; |
| 26 import '../web/model.dart'; | 25 import '../web/model.dart'; |
| 27 | 26 |
| 27 Node findWithText(Node node, String text) { |
| 28 if (node.text == text) return node; |
| 29 if (node is Element && (node as Element).localName == 'polymer-element') { |
| 30 return null; |
| 31 } |
| 32 if (node is Element && (node as Element).shadowRoot != null) { |
| 33 var r = findWithText((node as Element).shadowRoot, text); |
| 34 if (r != null) return r; |
| 35 } |
| 36 for (var n in node.nodes) { |
| 37 var r = findWithText(n, text); |
| 38 if (r != null) return r; |
| 39 } |
| 40 return null; |
| 41 } |
| 42 |
| 43 Node findShadowHost(Node node, ShadowRoot root) { |
| 44 if (node is Element) { |
| 45 var shadowRoot = (node as Element).shadowRoot; |
| 46 if (shadowRoot == root) return node; |
| 47 if (shadowRoot != null) { |
| 48 var r = findShadowHost(shadowRoot, root); |
| 49 if (r != null) return r; |
| 50 } |
| 51 } |
| 52 for (var n in node.nodes) { |
| 53 var r = findShadowHost(n, root); |
| 54 if (r != null) return r; |
| 55 } |
| 56 return null; |
| 57 } |
| 58 |
| 28 main() { | 59 main() { |
| 29 Timer.run(() { | 60 appModel.todos.add(new Todo('one (unchecked)')); |
| 30 useShadowDom = false; | 61 appModel.todos.add(new Todo('two (unchecked)')); |
| 31 app.todos.add(new Todo('one (unchecked)')); | 62 appModel.todos.add(new Todo('three (checked)')..done = true); |
| 32 app.todos.add(new Todo('two (unchecked)')); | 63 appModel.todos.add(new Todo('four (checked)')); |
| 33 app.todos.add(new Todo('three (checked)')..done = true); | |
| 34 app.todos.add(new Todo('four (checked)')); | |
| 35 deliverChangesSync(); | |
| 36 | 64 |
| 37 // To ensure we click in the correct place, we calculate x, y offset where | 65 performMicrotaskCheckpoint(); |
| 38 // we want to click based on the coordinates given by content shell, and | 66 var body = query('body'); |
| 39 // then adapt those offset in the current window. This makes is possible to | |
| 40 // debug the application in Dartium reliably. | |
| 41 | 67 |
| 42 var bounding = document.body.getBoundingClientRect(); | 68 var label = findWithText(body, 'four (checked)'); |
| 43 // The x, y location of body in the content shell output was: (117, 130) | 69 expect(label is LabelElement, isTrue, reason: 'text is in a label'); |
| 44 // and location of the node we want to click was: (119, 398) | |
| 45 int x = bounding.left.toInt() + (119 - 117); | |
| 46 int y = bounding.top.toInt() + (398 - 130); | |
| 47 var node = document.elementFromPoint(x, y); | |
| 48 expect(node is InputElement, isTrue, | |
| 49 reason: '$x, $y points to a checkbox'); | |
| 50 expect(node.checked, isFalse, reason: 'element is unchecked'); | |
| 51 Element parent = node.parent; | |
| 52 expect(parent.query('label').text, equals('four (checked)')); | |
| 53 node.dispatchEvent(new MouseEvent('click', detail: 1)); | |
| 54 expect(node.checked, isTrue, reason: 'element is checked'); | |
| 55 | 70 |
| 56 // Ideally the test above would work also with shadow DOM (pending that | 71 var host = findShadowHost(body, label.parentNode); |
| 57 // 'elementFromPoint' is fixed to return also nodes under the shadow DOM). | 72 var node = host.parent.query('input'); |
| 58 // The next extra check is only valid when polyfilling the shadow DOM: | 73 expect(node is InputElement, isTrue, reason: 'node is a checkbox'); |
| 59 expect(node, same(document.queryAll('input[type=checkbox]')[4])); | 74 expect(node.type, 'checkbox', reason: 'node type is checkbox'); |
| 75 expect(node.checked, isFalse, reason: 'element is unchecked'); |
| 60 | 76 |
| 61 window.postMessage('done', '*'); | 77 node.dispatchEvent(new MouseEvent('click', detail: 1)); |
| 62 }); | 78 expect(node.checked, isTrue, reason: 'element is checked'); |
| 79 performMicrotaskCheckpoint(); |
| 80 |
| 81 window.postMessage('done', '*'); |
| 63 } | 82 } |
| 83 |
| 64 </script> | 84 </script> |
| 65 </body> | 85 </body> |
| 66 </html> | 86 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23224003:
move polymer.dart into dart svn (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart