chrome-devtools-frontend
Version:
Chrome DevTools UI
45 lines (37 loc) • 2.04 kB
text/typescript
// Copyright 2024 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 {
getCleanTextContentFromElements,
getCleanTextContentFromSingleElement,
renderElementIntoDOM,
} from '../../../../testing/DOMHelpers.js';
import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
import {TraceLoader} from '../../../../testing/TraceLoader.js';
import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
import * as Insights from './insights.js';
describeWithEnvironment('CLSCulprits component', () => {
it('renders unsized image culprits', async function() {
const traceData = await TraceLoader.traceEngine(this, 'unsized-images.json.gz');
const firstNavInsights = traceData.insights?.values().next()?.value;
assert.isOk(firstNavInsights);
const clsModel = firstNavInsights.model.CLSCulprits;
const component = new Insights.CLSCulprits.CLSCulprits();
component.model = clsModel;
component.insightSetKey = firstNavInsights.id;
component.bounds = traceData.parsedTrace.Meta.traceBounds;
component.selected = true;
renderElementIntoDOM(component);
await RenderCoordinator.done();
assert.isOk(component.shadowRoot);
const titleText = getCleanTextContentFromSingleElement(component.shadowRoot, '.insight-title');
assert.strictEqual(titleText, 'Layout shift culprits');
const worstClusterText = getCleanTextContentFromSingleElement(component.shadowRoot, '.worst-cluster');
assert.strictEqual(worstClusterText, 'Worst cluster: Layout shift cluster @ 1.37 s');
const culpritsList = component.shadowRoot.querySelector<HTMLUListElement>('.worst-culprits');
assert.isOk(culpritsList);
const culpritsText = getCleanTextContentFromElements(culpritsList, 'li');
// There are two shifts hence the two culprits.
assert.deepEqual(culpritsText, ['Unsized Images', 'Unsized Images']);
});
});