Migrate the Dom-extension test to Karma

This commit migrates the dom-extension test
from a layout test to a Karma test. It also
splits up the test in three separate cases
for readability purposes.
Note that this does not currently run on
Chromium infrastructure yet. That will be
fixed in a follow-up CL.

Change-Id: Ib10e81bb30094dbf2c18ed73a57e894c8de3a9c6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1821517Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Almothana Athamneh <almuthanna@google.com>
Cr-Commit-Position: refs/heads/master@{#699350}

third_party/blink/renderer/devtools/karma.conf.js

@@ -13,6 +13,9 @@ module.exports = function(config) {
     },{
       pattern: 'tests/**/*.ts',
       type: 'module'
+    }, {
+      pattern: 'tests/**/*.js',
+      type: 'module'
     }],
 
     reporters: ["dots"],

third_party/blink/renderer/devtools/tests/front_end/platform/dom-extension.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const { assert } = chai;
+import '../../../front_end/dom_extension/DOMExtension.js';
+
+
+function createSlot(parent, name) {
+    const slot = parent.createChild('slot');
+    if (name)
+        slot.name = name;
+    return slot;
+}
+
+function createChild(parent, tagName, name, text = '') {
+    const child = parent.createChild(tagName, name);
+    if (name)
+        child.slot = name;
+    child.textContent = text;
+    return child;
+}
+
+
+describe('DataGrid', () => {
+    it('Traverse Node with Children', () => {
+        let component1 = createElementWithClass('div', 'component1');
+        createChild(component1, 'div', 'component1-content', 'text 1');
+        createChild(component1, 'div', 'component2-content', 'text 2');
+        createChild(component1, 'span', undefined, 'text 3');
+        createChild(component1, 'span', 'component1-content', 'text 4');
+
+        // Now we have:
+        /*
+        * <div class="component1">
+        *    <div class="component1-content" slot="component1-content">text 1</div>
+        *    <div class="component2-content" slot="component2-content">text 2</div>
+        *    <span>text 3</span><span class="component1-content" slot="component1-content">text 4</span>
+        * </div>
+        */
+
+
+        let node = component1;
+        assert.equal(node.nodeValue, null, 'root node value is incorrect');
+        assert.equal(node.nodeName, 'DIV', 'root node name is incorrect');
+        assert.equal(node.className, 'component1', 'root node class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV', 'first child node name is incorrect');
+        assert.equal(node.className, 'component1-content', 'first child class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, "text 1", 'second child node value is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV', 'second child node name is incorrect');
+        assert.equal(node.className, 'component2-content', 'second child class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, "text 2", 'second child node value is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SPAN', 'third child node name is incorrect');
+        assert.equal(node.className, '', 'third child class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, "text 3", 'third child node value is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SPAN', 'forth child node name is incorrect');
+        assert.equal(node.className, 'component1-content', 'forth child class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, "text 4", 'forth child node value is incorrect');
+    });
+
+    it('Traverse Node with Shadows',  () => {
+        var component1 = createElementWithClass('div', 'component1');
+        var shadow1 = component1.attachShadow({mode: 'open'});
+        var shadow1Content = createElementWithClass('div', 'shadow-component1');
+        shadow1.appendChild(shadow1Content);
+        var component2 = shadow1Content.createChild('div', 'component2');
+        var shadow2 = component2.attachShadow({mode: 'open'});
+        var shadow2Content = createElementWithClass('div', 'shadow-component1');
+        shadow2.appendChild(shadow2Content);
+        var midDiv = createChild(shadow2Content, 'div', 'mid-div');
+        createChild(midDiv, 'div', undefined, 'component2-text');
+
+        // Now we have:
+        /*
+        * <div class="component1"></div>
+        * <div class="shadow-component1"><div class="component2"></div></div>
+        * <div class="shadow-component1"><div class="mid-div" slot="mid-div"><div>component2-text</div></div></div>
+        */
+
+        let node = component1;
+        assert.equal(node.nodeName, 'DIV', 'root node name is incorrect');
+        assert.equal(node.className, 'component1', 'root node class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, '#document-fragment', 'first document fragment node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV', 'first document fragment child node name is incorrect');
+        assert.equal(node.className, 'shadow-component1', 'first document fragment child node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'component2');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, '#document-fragment');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'shadow-component1');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'mid-div');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, '');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, '#text');
+        assert.equal(node.nodeValue, 'component2-text');
+    });
+
+    it('Traverse Node with Slots', () => {
+        var component1 = createElementWithClass('div', 'component1');
+        var shadow1 = component1.attachShadow({mode: 'open'});
+        var shadow1Content = createElementWithClass('div', 'shadow-component1');
+        shadow1.appendChild(shadow1Content);
+        createSlot(shadow1Content, 'component1-content');
+        createSlot(shadow1Content, null);
+        var component2 = shadow1Content.createChild('div', 'component2');
+        var shadow2 = component2.attachShadow({mode: 'open'});
+        createSlot(component2, 'component2-content');
+        createChild(
+            component2, 'div', 'component2-content', 'component2 light dom text');
+        var shadow2Content = createElementWithClass('div', 'shadow-component1');
+        shadow2.appendChild(shadow2Content);
+        var midDiv = createChild(shadow2Content, 'div', 'mid-div');
+        createChild(midDiv, 'div', undefined, 'component2-text');
+        createSlot(midDiv, null);
+        createSlot(midDiv, 'component2-content');
+
+        // Now we have:
+        /*
+        * <div class="component1"></div>
+        * <div class="shadow-component1">
+        *    <slot name="component1-content"></slot>
+        *    <slot></slot>
+        *    <div class="component2">
+        *       <slot name="component2-content"></slot>
+        *       <div class="component2-content" slot="component2-content">component2 light dom text</div>
+        *    </div>
+        * </div>
+        * <div class="shadow-component1">
+        *    <div class="mid-div" slot="mid-div">
+        *       <div>component2-text</div>
+        *       <slot></slot>
+        *       <slot name="component2-content"></slot>
+        *    </div>
+        * </div>
+        */
+
+        let node = component1;
+        assert.equal(node.nodeName, 'DIV', 'root node name is incorrect');
+        assert.equal(node.className, 'component1', 'root node class is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, '#document-fragment', 'first document fragment node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV', 'first document fragment child node name is incorrect');
+        assert.equal(node.className, 'shadow-component1', 'first document fragment child node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SLOT', 'first slot node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SLOT', 'second slot node name is incorrect');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'component2');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, '#document-fragment');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'shadow-component1');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'mid-div');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, '');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, 'component2-text');
+        assert.equal(node.nodeName, '#text');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SLOT');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SLOT');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'SLOT');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeName, 'DIV');
+        assert.equal(node.className, 'component2-content');
+
+        node = node.traverseNextNode(component1);
+        assert.equal(node.nodeValue, 'component2 light dom text');
+        assert.equal(node.nodeName, '#text');
+    });
+});
\ No newline at end of file