chrome-devtools-frontend
Version:
Chrome DevTools UI
235 lines (205 loc) • 10.1 kB
text/typescript
// Copyright 2020 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 * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
import {
assertElements,
renderElementIntoDOM,
} from '../../../testing/DOMHelpers.js';
import {describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
import {MockIssuesManager} from '../../../testing/MockIssuesManager.js';
import * as IconButton from '../icon_button/icon_button.js';
import * as IssueCounter from './issue_counter.js';
const renderIssueCounter = (data: IssueCounter.IssueCounter.IssueCounterData):
{component: IssueCounter.IssueCounter.IssueCounter, shadowRoot: ShadowRoot} => {
const component = new IssueCounter.IssueCounter.IssueCounter();
component.data = data;
renderElementIntoDOM(component);
assert.isNotNull(component.shadowRoot);
return {component, shadowRoot: component.shadowRoot};
};
export const extractIconGroups = (shadowRoot: ShadowRoot) => {
const iconButton = shadowRoot.querySelector('icon-button');
assert.instanceOf(iconButton, IconButton.IconButton.IconButton);
const iconButtonShadowRoot = iconButton.shadowRoot;
assert.exists(iconButtonShadowRoot);
const icons = iconButtonShadowRoot.querySelectorAll('.status-icon');
assertElements(icons, IconButton.Icon.Icon);
const labels = iconButtonShadowRoot.querySelectorAll('.icon-button-title');
assertElements(labels, HTMLSpanElement);
assert.strictEqual(icons.length, labels.length, 'Expected icons and labels to appear in pairs');
const iconGroups = [];
for (let i = 0; i < icons.length; ++i) {
const labelElement = labels[i];
const label: string|null =
window.getComputedStyle(labelElement).display === 'none' ? null : labelElement.textContent;
iconGroups.push({iconData: icons[i].data, label});
}
return iconGroups;
};
export const extractButton = (shadowRoot: ShadowRoot) => {
const iconButton = shadowRoot.querySelector('icon-button');
assert.instanceOf(iconButton, IconButton.IconButton.IconButton);
const iconButtonShadowRoot = iconButton.shadowRoot;
assert.exists(iconButtonShadowRoot);
const button = iconButtonShadowRoot.querySelector('button');
assert.instanceOf(button, HTMLButtonElement);
return button;
};
describeWithLocale('IssueCounter', () => {
describe('with omitting zero-count issue kinds', () => {
it('renders correctly', () => {
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
});
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 2);
assert.deepEqual(icons.map(c => c.label), ['2', '1']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled']);
});
it('updates correctly', () => {
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
});
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 2);
assert.deepEqual(icons.map(c => c.label), ['2', '1']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled']);
}
issuesManager.incrementIssueCountsOfAllKinds();
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 3);
assert.deepEqual(icons.map(c => c.label), ['3', '2', '1']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled', 'issue-text-filled']);
}
});
it('updates correctly through setter', () => {
const issuesManager = new MockIssuesManager([]);
const {component, shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
});
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 2);
assert.deepEqual(icons.map(c => c.label), ['2', '1']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled']);
}
component.data = {...component.data, displayMode: IssueCounter.IssueCounter.DisplayMode.ONLY_MOST_IMPORTANT};
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 1);
assert.deepEqual(icons.map(c => c.label), ['2']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled']);
}
});
it('Aria label is added correctly', () => {
const expectedAccessibleName = 'Accessible Name';
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
accessibleName: expectedAccessibleName,
});
const button = extractButton(shadowRoot);
const accessibleName = button.getAttribute('aria-label');
assert.strictEqual(accessibleName, expectedAccessibleName);
});
});
describe('without omitting zero count issue kinds', () => {
it('renders correctly', () => {
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
displayMode: IssueCounter.IssueCounter.DisplayMode.SHOW_ALWAYS,
throttlerTimeout: 0,
});
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 3);
assert.deepEqual(icons.map(c => c.label), ['2', '1', '0']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled', 'issue-text-filled']);
});
it('updates correctly', () => {
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
displayMode: IssueCounter.IssueCounter.DisplayMode.SHOW_ALWAYS,
throttlerTimeout: 0,
});
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 3);
assert.deepEqual(icons.map(c => c.label), ['2', '1', '0']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled', 'issue-text-filled']);
}
issuesManager.incrementIssueCountsOfAllKinds();
{
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 3);
assert.deepEqual(icons.map(c => c.label), ['3', '2', '1']);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled', 'issue-exclamation-filled', 'issue-text-filled']);
}
});
});
describe('in compact mode', () => {
it('renders correctly', () => {
const issuesManager = new MockIssuesManager([]);
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
compact: true,
});
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 1);
assert.deepEqual(icons.map(c => c.label), [null]);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-cross-filled']);
});
it('renders correctly with only improvement issues', () => {
const issuesManager = new MockIssuesManager([]);
issuesManager.setNumberOfIssues(new Map([
[IssuesManager.Issue.IssueKind.IMPROVEMENT, 3],
[IssuesManager.Issue.IssueKind.BREAKING_CHANGE, 0],
[IssuesManager.Issue.IssueKind.PAGE_ERROR, 0],
]));
const {shadowRoot} = renderIssueCounter({
issuesManager: issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager,
throttlerTimeout: 0,
compact: true,
});
const icons = extractIconGroups(shadowRoot);
assert.lengthOf(icons, 1);
assert.deepEqual(icons.map(c => c.label), [null]);
const iconNames = icons.map(c => 'iconName' in c.iconData ? c.iconData.iconName : undefined);
assert.deepEqual(iconNames, ['issue-text-filled']);
});
});
});
describeWithLocale('getIssueCountsEnumeration', () => {
it('formats issue counts correctly', () => {
const issuesManager = new MockIssuesManager([]);
const string = IssueCounter.IssueCounter.getIssueCountsEnumeration(
issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager);
assert.strictEqual(string, '2 page errors, 1 breaking change');
});
it('formats issue counts correctly when displaying zero entries', () => {
const issuesManager = new MockIssuesManager([]);
const string = IssueCounter.IssueCounter.getIssueCountsEnumeration(
issuesManager as unknown as IssuesManager.IssuesManager.IssuesManager, false);
assert.strictEqual(string, '2 page errors, 1 breaking change, 0 possible improvements');
});
});