UNPKG

chrome-devtools-frontend

Version:
235 lines (205 loc) • 10.1 kB
// 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'); }); });