lib/web_ui/test/engine/host_node_test.dart

// Copyright 2013 The Flutter Authors. 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' as html;

import 'package:test/bootstrap/browser.dart';
import 'package:test/test.dart';
import 'package:ui/src/engine.dart';

void main() {
  internalBootstrapBrowserTest(() => testMain);
}

void testMain() {
  final html.Element rootNode = html.document.createElement('div');
  html.document.body!.append(rootNode);

  group('ShadowDomHostNode', () {
    final HostNode hostNode = ShadowDomHostNode(rootNode);

    test('Initializes and attaches a shadow root', () {
      expect(hostNode.node, isA<html.ShadowRoot>());
      expect((hostNode.node as html.ShadowRoot).host, rootNode);
      expect(hostNode.node, rootNode.shadowRoot);

      // The shadow root should be initialized with correct parameters.
      expect(rootNode.shadowRoot!.mode, 'open');
      if (browserEngine != BrowserEngine.firefox &&
          browserEngine != BrowserEngine.webkit) {
        // Older versions of Safari and Firefox don't support this flag yet.
        // See: https://caniuse.com/mdn-api_shadowroot_delegatesfocus
        expect(rootNode.shadowRoot!.delegatesFocus, isFalse);
      }
    });

    test('Attaches a stylesheet to the shadow root', () {
      final html.Element firstChild =
          (hostNode.node as html.ShadowRoot).children.first;

      expect(firstChild.tagName, equalsIgnoringCase('style'));
    });

    _runDomTests(hostNode);
  });

  group('ElementHostNode', () {
    final HostNode hostNode = ElementHostNode(rootNode);

    test('Initializes and attaches a child element', () {
      expect(hostNode.node, isA<html.Element>());
      expect((hostNode.node as html.Element).shadowRoot, isNull);
      expect(hostNode.node.parent, rootNode);
    });

    _runDomTests(hostNode);
  });
}

// The common test suite that all types of HostNode implementations need to pass.
void _runDomTests(HostNode hostNode) {
  group('DOM operations', () {
    final html.Element target = html.document.createElement('div')..id = 'yep';

    setUp(() {
      hostNode.nodes.addAll(<html.Node>[
        html.document.createElement('div'),
        target,
        html.document.createElement('flt-span'),
        html.document.createElement('div'),
      ]);
    });

    tearDown(() {
      hostNode.nodes.clear();
    });

    test('querySelector', () {
      final html.Element? found = hostNode.querySelector('#yep');

      expect(identical(found, target), isTrue);
    });

    test('.contains and .append', () {
      final html.Element another = html.document.createElement('div')
        ..id = 'another';

      expect(hostNode.contains(target), isTrue);
      expect(hostNode.contains(another), isFalse);
      expect(hostNode.contains(null), isFalse);

      hostNode.append(another);
      expect(hostNode.contains(another), isTrue);
    });

    test('querySelectorAll', () {
      final List<html.Node> found = hostNode.querySelectorAll('div');

      expect(found.length, 3);
      expect(found[1], target);
    });
  });
}