1// Copyright 2020 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5import type * as ElementsModule from '../../../../front_end/elements/elements.js'; 6import {assertShadowRoot, renderElementIntoDOM} from '../helpers/DOMHelpers.js'; 7import {describeWithEnvironment} from '../helpers/EnvironmentHelpers.js'; 8 9const {assert} = chai; 10 11const initialData = { 12 inherited: false, 13 traceable: true, 14 onNavigateToSource: () => {}, 15}; 16 17describeWithEnvironment('ComputedStyleProperty', () => { 18 let Elements: typeof ElementsModule; 19 before(async () => { 20 Elements = await import('../../../../front_end/elements/elements.js'); 21 }); 22 23 it('renders inherited property correctly', () => { 24 const component = new Elements.ComputedStyleProperty.ComputedStyleProperty(); 25 renderElementIntoDOM(component); 26 const data = { 27 ...initialData, 28 traceable: false, 29 inherited: true, 30 }; 31 component.data = data; 32 33 assertShadowRoot(component.shadowRoot); 34 35 const slots = Array.from(component.shadowRoot.querySelectorAll('.inherited slot')); 36 assert.deepEqual( 37 slots.map(slot => slot.getAttribute('name')), 38 [ 39 'property-name', 40 'property-value', 41 ], 42 'should contain name and value slots under .inherited selector'); 43 }); 44 45 it('renders a clickable goto icon that calls onNavigateToSource when it contains traces', () => { 46 const component = new Elements.ComputedStyleProperty.ComputedStyleProperty(); 47 renderElementIntoDOM(component); 48 let isOnNavigateToSourceCalled = false; 49 const data = { 50 ...initialData, 51 onNavigateToSource: () => { 52 isOnNavigateToSourceCalled = true; 53 }, 54 }; 55 component.data = data; 56 57 assertShadowRoot(component.shadowRoot); 58 const goto = component.shadowRoot.querySelector<HTMLElement>('.goto'); 59 if (!goto) { 60 assert.fail('goto icon should exist'); 61 return; 62 } 63 goto.click(); 64 assert.isTrue(isOnNavigateToSourceCalled, 'goto icon should be clickable that calls onNavigateToSource'); 65 }); 66}); 67