Commit 22e138ff authored by Joon Ahn's avatar Joon Ahn Committed by Commit Bot

Diagnostics: TextBadge polymer element

http://screen/Be2cQHGk3cZmE5f

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I6f6ef200659fdcd7e72a56d1d87328c72342ccb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2530750
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: default avatarZentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826876}
parent 3babb02c
......@@ -31,6 +31,7 @@ js_type_check("closure_compile") {
":routine_result_entry_test",
":routine_result_list_test",
":routine_section_test",
":text_badge_test",
]
}
......@@ -230,3 +231,11 @@ js_library("routine_section_test") {
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
]
}
js_library("text_badge_test") {
deps = [
"../..:chai_assert",
"../..:test_util.m",
"//chromeos/components/diagnostics_ui/resources:text_badge",
]
}
......@@ -22,6 +22,7 @@ import {fakeRoutineListExecutorTestSuite} from './routine_list_executor_test.js'
import {routineResultEntryTestSuite} from './routine_result_entry_test.js';
import {routineResultListTestSuite} from './routine_result_list_test.js';
import {routineSectionTestSuite} from './routine_section_test.js';
import {textBadgeTestSuite} from './text_badge_test.js';
window.test_suites_list = [];
......@@ -47,3 +48,4 @@ runSuite('RoutineListExecutor', fakeRoutineListExecutorTestSuite);
runSuite('RoutineResultEntry', routineResultEntryTestSuite);
runSuite('RoutineResultList', routineResultListTestSuite);
runSuite('RoutineSection', routineSectionTestSuite);
runSuite('TextBadge', textBadgeTestSuite);
......@@ -56,7 +56,7 @@ const debug_suites_list = [
'FakeMojoInterface', 'FakeObservables', 'FakeSystemDataProvider',
'FakeSystemRoutineContoller', 'MemoryCard', 'OverviewCard', 'PercentBarChart',
'RealtimeCpuChart', 'RoutineListExecutor', 'RoutineResultEntry',
'RoutineResultList', 'RoutineSection'
'RoutineResultList', 'RoutineSection', 'TextBadge'
];
TEST_F('DiagnosticsApp', 'BrowserTest', function() {
......
// 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 'chrome://diagnostics/text_badge.js';
import {BadgeType} from 'chrome://diagnostics/text_badge.js';
import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
import {flushTasks} from '../../test_util.m.js';
export function textBadgeTestSuite() {
/** @type {?TextBadgeElement} */
let textBadgeElement = null;
setup(() => {
document.body.innerHTML = '';
});
teardown(() => {
if (textBadgeElement) {
textBadgeElement.remove();
}
textBadgeElement = null;
});
/**
* @param {!BadgeType} badgeType
* @param {string} value
* @param {boolean=} hidden
*/
function initializeBadge(badgeType, value, hidden = false) {
assertFalse(!!textBadgeElement);
textBadgeElement =
/** @type {!TextBadgeElement} */ (document.createElement('text-badge'));
assertTrue(!!textBadgeElement);
textBadgeElement.badgeType = badgeType;
textBadgeElement.value = value;
textBadgeElement.hidden = hidden || false;
document.body.appendChild(textBadgeElement);
return flushTasks();
}
test('InitializeBadge', () => {
const badgeType = BadgeType.DEFAULT;
const value = 'Test value';
return initializeBadge(badgeType, value).then(() => {
const textBadge = textBadgeElement.$$('#textBadge');
assertEquals(badgeType, textBadge.getAttribute('class'));
assertEquals(value, textBadge.textContent.trim());
assertFalse(textBadge.hidden);
});
});
test('InitializeBadgeHidden', () => {
const badgeType = BadgeType.DEFAULT;
const value = 'Test value';
const hidden = true;
return initializeBadge(badgeType, value, hidden).then(() => {
assertTrue(textBadgeElement.$$('#textBadge').hidden);
});
});
}
......@@ -31,6 +31,7 @@ js_type_check("closure_compile_module") {
":routine_result_entry",
":routine_result_list",
":routine_section",
":text_badge",
]
}
......@@ -175,6 +176,12 @@ js_library("routine_section") {
]
}
js_library("text_badge") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
}
html_to_js("web_components") {
js_files = [
"battery_status_card.js",
......@@ -191,5 +198,6 @@ html_to_js("web_components") {
"routine_result_entry.js",
"routine_result_list.js",
"routine_section.js",
"text_badge.js",
]
}
......@@ -39,6 +39,7 @@
<include name="IDR_DIAGNOSTICS_SHARED_CSS_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.js" use_base_dir="false" type="BINDDATA"/>
<include name="IDR_DIAGNOSTICS_SYSTEM_DATA_PROVIDER_MOJO_LITE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/mojom/system_data_provider.mojom-lite.js" use_base_dir="false" type="BINDATA" />
<include name="IDR_DIAGNOSTICS_SYSTEM_ROUTINE_CONTROLLER_MOJO_LITE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/mojom/system_routine_controller.mojom-lite.js" use_base_dir="false" type="BINDATA" />
<include name="IDR_DIAGNOSTICS_TEXT_BADGE_JS" file="${root_gen_dir}/chromeos/components/diagnostics_ui/resources/text_badge.js" use_base_dir="false" type="BINDATA"/>
<include name="IDR_DIAGNOSTICS_TYPES_JS" file="diagnostics_types.js" type="BINDATA"/>
<include name="IDR_D3_SRC_D3_MIN_JS" file="../../../../third_party/d3/src/d3.min.js" type="BINDATA" />
</includes>
......
<style include="diagnostics-shared">
#textBadge {
padding: 3px 5px;
border-radius: 3px;
}
.default {
background-color: var(--google-blue-100);
color: var(--google-blue-500);
}
.success {
background-color: var(--google-green-100);
color: var(--google-green-500);
}
.error {
background-color: var(--google-red-100);
color: var(--google-red-500);
}
</style>
<span id="textBadge" class$="[[badgeType]]" hidden$="[[hidden]]">[[value]]</span>
\ No newline at end of file
// 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 './diagnostics_fonts_css.js';
import './diagnostics_shared_css.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
/**
* Badge style class type.
* @enum {string}
*/
export const BadgeType = {
DEFAULT: 'default',
ERROR: 'error',
SUCCESS: 'success',
};
/**
* @fileoverview
* 'text-badge' displays a text-based rounded badge.
*/
Polymer({
is: 'text-badge',
_template: html`{__html_template__}`,
properties: {
/** @type {!BadgeType} */
badgeType: {
type: String,
value: BadgeType.DEFAULT,
},
/** @type {string} */
value: {
type: String,
value: '',
},
/** @type {boolean} */
hidden: {
type: Boolean,
value: false,
},
},
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment