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