Wrapping leaf nodes in non polymer elements

runtime/observatory/tests/observatory_ui/curly_block_test.dart

+// Copyright (c) 2016, 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:html';
+import 'package:unittest/unittest.dart';
+import 'package:observatory/src/elements/curly_block.dart';
+import 'helpers/webcomponents.dart';
+
+main() async {
+  await loadWebComponents();
+  CurlyBlockElement.tag.ensureRegistration();
+
+  group('instantiation', () {
+    test('default', () {
+      final CurlyBlockElement e = new CurlyBlockElement();
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isFalse);
+    });
+    test('not expanded', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: false);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isFalse);
+    });
+    test('not expanded / not disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: false,
+                                                        disabled: false);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isFalse);
+    });
+    test('not expanded / disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: false,
+                                                        disabled: true);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isTrue);
+    });
+    test('expanded', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: true);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isTrue);
+      expect(e.disabled, isFalse);
+    });
+    test('expanded / not disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: true,
+                                                        disabled: false);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isTrue);
+      expect(e.disabled, isFalse);
+    });
+    test('expanded / disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(expanded: true,
+                                                        disabled: true);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isTrue);
+      expect(e.disabled, isTrue);
+    });
+    test('not disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(disabled: false);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isFalse);
+    });
+    test('disabled', () {
+      final CurlyBlockElement e = new CurlyBlockElement(disabled: true);
+      expect(e, isNotNull, reason: 'element correctly created');
+      expect(e.expanded, isFalse);
+      expect(e.disabled, isTrue);
+    });
+  });
+  group('elements', () {
+    test('created after attachment', () {
+      final CurlyBlockElement e = new CurlyBlockElement();
+      expect(e.shadowRoot, isNotNull, reason: 'shadowRoot is created');
+      expect(e.shadowRoot.children.length, isZero,
+        reason: 'shadowRoot is empty');
+      document.body.append(e);
+      expect(e.shadowRoot.children.length, isNonZero,
+        reason: 'shadowRoot has elements');
+      e.remove();
+    });
+  });
+  group('content', () {
+    CurlyBlockElement e;
+    setUp((){
+      e = new CurlyBlockElement();
+      document.body.append(e);
+    });
+    tearDown(() {
+      e.remove();
+    });
+    test('toggles visibility', () {
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.toggle();
+      expect(e.shadowRoot.querySelector('content'), isNotNull);
+      e.toggle();
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.remove();
+    });
+    test('toggles visibility (manually)', () {
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.expanded = true;
+      expect(e.shadowRoot.querySelector('content'), isNotNull);
+      e.expanded = false;
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.remove();
+    });
+    test('does not toggle if disabled', () {
+      e.disabled = true;
+      expect(e.expanded, isFalse);
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.toggle();
+      expect(e.expanded, isFalse);
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.disabled = false;
+      e.toggle();
+      expect(e.expanded, isTrue);
+      expect(e.shadowRoot.querySelector('content'), isNotNull);
+      e.disabled = true;
+      e.toggle();
+      expect(e.expanded, isTrue);
+      expect(e.shadowRoot.querySelector('content'), isNotNull);
+      e.remove();
+    });
+    test('toggles visibility (manually) if disabled', () {
+      e.disabled = true;
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.expanded = true;
+      expect(e.shadowRoot.querySelector('content'), isNotNull);
+      e.expanded = false;
+      expect(e.shadowRoot.querySelector('content'), isNull);
+      e.remove();
+    });
+  });
+  group('event', () {
+    CurlyBlockElement e;
+    setUp((){
+      e = new CurlyBlockElement();
+      document.body.append(e);
+    });
+    tearDown(() {
+      e.remove();
+    });
+    test('fires on toggle', (){
+      e.onToggle.listen(expectAsync((CurlyBlockToggleEvent event){
+        expect(event, isNotNull);
+        expect(event.control, equals(e));
+      }, count: 1));
+      e.toggle();
+    });
+    test('fires on manual toggle', (){
+      e.onToggle.listen(expectAsync((CurlyBlockToggleEvent event){
+        expect(event, isNotNull);
+        expect(event.control, equals(e));
+      }, count: 1));
+      e.expanded = !e.expanded;
+    });
+    test('does not fire if setting same expanded value', (){
+      e.onToggle.listen(expectAsync((_){}, count: 0));
+      e.expanded = e.expanded;
+    });
+  });
+}