chrome-devtools-frontend
Version:
Chrome DevTools UI
96 lines (77 loc) • 3.64 kB
text/typescript
// Copyright (c) 2022 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.
import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
import * as Platform from './platform.js';
const cssInJS = (strings: ArrayLike<string>, ...values: any[]): CSSInJS =>
String.raw({raw: strings}, ...values) as CSSInJS;
describe('DOMUtilities', () => {
describe('deepActiveElement', () => {
it('returns the active element if there is no shadow root', () => {
const btn = document.createElement('button');
btn.innerText = 'Click me!';
renderElementIntoDOM(btn);
btn.focus();
const activeElement = Platform.DOMUtilities.deepActiveElement(document);
assert.strictEqual(activeElement, btn);
});
it('dives through the shadow root and finds the right active element', () => {
class TestComponent extends HTMLElement {
shadow = this.attachShadow({mode: 'open'});
button = document.createElement('button');
connectedCallback(): void {
this.button.innerText = 'Click me from the shadow root!';
this.shadow.appendChild(this.button);
this.button.focus();
}
}
customElements.define('dom-utilities-test-component', TestComponent);
const component = new TestComponent();
renderElementIntoDOM(component);
const activeElement = Platform.DOMUtilities.deepActiveElement(document);
assert.strictEqual(activeElement, component.button);
});
});
describe('getEnclosingShadowRootForNode', () => {
it('returns null if no shadow root is found up the tree', () => {
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
renderElementIntoDOM(parent);
assert.isNull(Platform.DOMUtilities.getEnclosingShadowRootForNode(child));
});
it('returns the shadow root in the tree', () => {
const div = document.createElement('div');
class TestComponent extends HTMLElement {
readonly #shadow = this.attachShadow({mode: 'open'});
connectedCallback() {
this.#shadow.appendChild(div);
}
}
customElements.define('shadow-root-test', TestComponent);
const component = new TestComponent();
renderElementIntoDOM(component);
assert.strictEqual(Platform.DOMUtilities.getEnclosingShadowRootForNode(div), component.shadowRoot);
});
});
describe('appendStyle', () => {
const {appendStyle} = Platform.DOMUtilities;
it('correctly appends <style> elements', () => {
const parent = renderElementIntoDOM(document.createElement('main'));
appendStyle(parent, cssInJS`h1 { color: red; }`);
appendStyle(parent, cssInJS`h2 { color: green; } h1 { font-size: 1px; }`);
assert.lengthOf(parent.children, 2);
assert.instanceOf(parent.children[0], HTMLStyleElement);
assert.strictEqual(parent.children[0].textContent, 'h1 { color: red; }');
assert.instanceOf(parent.children[1], HTMLStyleElement);
assert.strictEqual(parent.children[1].textContent, 'h2 { color: green; } h1 { font-size: 1px; }');
});
it('correctly inserts <style> elements into disconnected nodes', () => {
const parent = document.createElement('div');
appendStyle(parent, cssInJS`div { color: red; }`);
assert.lengthOf(parent.children, 1);
assert.instanceOf(parent.children[0], HTMLStyleElement);
assert.strictEqual(parent.children[0].textContent, 'div { color: red; }');
});
});
});