Commit 58c98cff authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Chromium LUCI CQ

Files app: Generate JS module for <files-message> and <files-spinner>

Bug: 1133186
Change-Id: Icf9d3a1594affa6647544910241c989d86477b6b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2576858
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: default avatarJeremie Boulic <jboulic@chromium.org>
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834614}
parent 8ba30306
...@@ -103,7 +103,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesDisplayPanel) { ...@@ -103,7 +103,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesDisplayPanel) {
} }
IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesMessage) { IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesMessage) {
RunTestURL("foreground/elements/files_message_unittest_gen.html"); RunTestURL("foreground/elements/files_message_unittest.m_gen.html");
} }
IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesPasswordDialog) { IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesPasswordDialog) {
......
...@@ -6,6 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni") ...@@ -6,6 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
import("//third_party/closure_compiler/js_unit_tests.gni") import("//third_party/closure_compiler/js_unit_tests.gni")
import("//tools/polymer/polymer.gni") import("//tools/polymer/polymer.gni")
import("//ui/file_manager/base/gn/js_test_gen_html.gni") import("//ui/file_manager/base/gn/js_test_gen_html.gni")
import("//ui/webui/resources/tools/js_modulizer.gni")
visibility = [ "//ui/file_manager/file_manager/foreground/*" ] visibility = [ "//ui/file_manager/file_manager/foreground/*" ]
...@@ -57,11 +58,13 @@ js_type_check("closure_compile_jsmodules") { ...@@ -57,11 +58,13 @@ js_type_check("closure_compile_jsmodules") {
deps = [ deps = [
":files_format_dialog.m", ":files_format_dialog.m",
":files_icon_button.m", ":files_icon_button.m",
":files_message.m",
":files_metadata_box.m", ":files_metadata_box.m",
":files_metadata_entry.m", ":files_metadata_entry.m",
":files_quick_view.m", ":files_quick_view.m",
":files_ripple.m", ":files_ripple.m",
":files_safe_media.m", ":files_safe_media.m",
":files_spinner.m",
":files_toast.m", ":files_toast.m",
":files_toggle_ripple.m", ":files_toggle_ripple.m",
":files_tooltip.m", ":files_tooltip.m",
...@@ -154,13 +157,25 @@ js_library("files_message") { ...@@ -154,13 +157,25 @@ js_library("files_message") {
] ]
} }
js_unittest("files_message_unittest") { js_unittest("files_message_unittest.m") {
deps = [ deps = [
":files_message", ":files_message.m",
"//ui/webui/resources/js:webui_resource_test", "//chrome/test/data/webui:chai_assert",
"//ui/webui/resources/js:assert.m",
] ]
} }
js_library("files_message.m") {
sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_message.m.js" ]
deps = [
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
"//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
"//ui/webui/resources/js:assert.m",
]
extra_deps = [ ":modulize" ]
}
js_library("files_metadata_box") { js_library("files_metadata_box") {
externs_list = [ "$externs_path/pending_polymer.js" ] externs_list = [ "$externs_path/pending_polymer.js" ]
} }
...@@ -298,6 +313,12 @@ js_library("files_safe_media_webview_content") { ...@@ -298,6 +313,12 @@ js_library("files_safe_media_webview_content") {
js_library("files_spinner") { js_library("files_spinner") {
} }
js_library("files_spinner.m") {
sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_spinner.m.js" ]
extra_deps = [ ":modulize" ]
}
# TODO(tapted): Move this to //ui/file_manager/base. # TODO(tapted): Move this to //ui/file_manager/base.
js_library("files_toast") { js_library("files_toast") {
visibility += [ "//ui/file_manager/gallery/*" ] visibility += [ "//ui/file_manager/gallery/*" ]
...@@ -391,7 +412,6 @@ js_unittest("files_xf_elements_unittest") { ...@@ -391,7 +412,6 @@ js_unittest("files_xf_elements_unittest") {
js_test_gen_html("js_test_gen_html") { js_test_gen_html("js_test_gen_html") {
deps = [ deps = [
":files_message_unittest",
":files_password_dialog_unittest", ":files_password_dialog_unittest",
":files_xf_elements_unittest", ":files_xf_elements_unittest",
] ]
...@@ -415,9 +435,17 @@ js_library("xf_display_panel") { ...@@ -415,9 +435,17 @@ js_library("xf_display_panel") {
] ]
} }
js_modulizer("modulize") {
input_files = [
"files_message.js",
"files_spinner.js",
]
}
js_test_gen_html("js_test_gen_html_modules") { js_test_gen_html("js_test_gen_html_modules") {
is_polymer3 = true is_polymer3 = true
deps = [ deps = [
":files_message_unittest.m",
":files_toast_unittest.m", ":files_toast_unittest.m",
":files_tooltip_unittest.m", ":files_tooltip_unittest.m",
] ]
......
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
// #import {assert} from 'chrome://resources/js/assert.m.js';
/** /**
* FilesMessage template. * FilesMessage template.
* @const @type {string} * @const @type {string}
...@@ -72,7 +74,7 @@ const filesMessageTemplate = ` ...@@ -72,7 +74,7 @@ const filesMessageTemplate = `
/** /**
* FilesMessage. * FilesMessage.
*/ */
class FilesMessage extends HTMLElement { /* #export */ class FilesMessage extends HTMLElement {
constructor() { constructor() {
/** /**
* Create element content. * Create element content.
......
...@@ -2,22 +2,17 @@ ...@@ -2,22 +2,17 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
/** // clang-format off
* TODO(lucmult): Remove this when converting to JS modules. import {assert} from 'chrome://resources/js/assert.m.js';
* @suppress {checkTypes} import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://test/chai_assert.js';
*/
chrome.fileManagerPrivate = { import {FilesMessage} from './files_message.m.js';
FormatFileSystemType: { // clang-format on
VFAT: 'vfat',
EXFAT: 'exfat',
NTFS: 'ntfs',
},
};
/** /**
* Adds a FilesMessage element to the page, initially hidden. * Adds a FilesMessage element to the page, initially hidden.
*/ */
function setUpPage() { export function setUpPage() {
document.body.innerHTML += document.body.innerHTML +=
'<files-message id="test-files-message" hidden></files-message>'; '<files-message id="test-files-message" hidden></files-message>';
} }
...@@ -43,7 +38,7 @@ function setFilesMessageContent() { ...@@ -43,7 +38,7 @@ function setFilesMessageContent() {
// <files-message> [hidden] controls visual display. // <files-message> [hidden] controls visual display.
assertEquals('none', window.getComputedStyle(message).display); assertEquals('none', window.getComputedStyle(message).display);
assertNotEqual(null, message.getAttribute('hidden')); assertNotEquals(null, message.getAttribute('hidden'));
assertTrue(message.hidden); assertTrue(message.hidden);
// <files-message> extends HTMLElement and so the setContent() method // <files-message> extends HTMLElement and so the setContent() method
...@@ -53,7 +48,7 @@ function setFilesMessageContent() { ...@@ -53,7 +48,7 @@ function setFilesMessageContent() {
}); });
// <files-message> element should be visually displayed. // <files-message> element should be visually displayed.
assertNotEqual('none', window.getComputedStyle(message).display); assertNotEquals('none', window.getComputedStyle(message).display);
assertEquals(null, message.getAttribute('hidden')); assertEquals(null, message.getAttribute('hidden'));
assertFalse(message.hidden); assertFalse(message.hidden);
...@@ -65,7 +60,7 @@ function setFilesMessageContent() { ...@@ -65,7 +60,7 @@ function setFilesMessageContent() {
* setting its content via the element's property setters, and hiding its * setting its content via the element's property setters, and hiding its
* sub-elements. * sub-elements.
*/ */
async function testFilesMessage(done) { export async function testFilesMessage(done) {
// Setup and return the <files-message> element. // Setup and return the <files-message> element.
/** @type {!FilesMessage|!Element} */ /** @type {!FilesMessage|!Element} */
const message = setFilesMessageContent(); const message = setFilesMessageContent();
...@@ -83,11 +78,11 @@ async function testFilesMessage(done) { ...@@ -83,11 +78,11 @@ async function testFilesMessage(done) {
const close = assert(message.shadowRoot.querySelector('#close')); const close = assert(message.shadowRoot.querySelector('#close'));
// The sub-elements should be displayed. // The sub-elements should be displayed.
assertNotEqual('none', window.getComputedStyle(icon).display); assertNotEquals('none', window.getComputedStyle(icon).display);
assertNotEqual('none', window.getComputedStyle(text).display); assertNotEquals('none', window.getComputedStyle(text).display);
assertNotEqual('none', window.getComputedStyle(dismiss).display); assertNotEquals('none', window.getComputedStyle(dismiss).display);
assertNotEqual('none', window.getComputedStyle(action).display); assertNotEquals('none', window.getComputedStyle(action).display);
assertNotEqual('none', window.getComputedStyle(close).display); assertNotEquals('none', window.getComputedStyle(close).display);
// To work with screen readers, the icon & text element containing // To work with screen readers, the icon & text element containing
// parent element should have aria role 'alert'. // parent element should have aria role 'alert'.
...@@ -118,7 +113,7 @@ async function testFilesMessage(done) { ...@@ -118,7 +113,7 @@ async function testFilesMessage(done) {
// Clicking the main element does not emit a visual signal. // Clicking the main element does not emit a visual signal.
signal = 'main-element-not-clickable'; signal = 'main-element-not-clickable';
assertNotEqual(null, message.onclick); assertNotEquals(null, message.onclick);
message.click(); message.click();
assertEquals('main-element-not-clickable', signal); assertEquals('main-element-not-clickable', signal);
...@@ -175,7 +170,7 @@ async function testFilesMessage(done) { ...@@ -175,7 +170,7 @@ async function testFilesMessage(done) {
message.close = {label: 'aria close label'}; message.close = {label: 'aria close label'};
assertEquals('aria close label', close.getAttribute('aria-label')); assertEquals('aria close label', close.getAttribute('aria-label'));
assertEquals('cr:close', close.getAttribute('iron-icon')); assertEquals('cr:close', close.getAttribute('iron-icon'));
assertNotEqual(null, close.onclick); assertNotEquals(null, close.onclick);
signal = null; signal = null;
close.click(); close.click();
assertEquals('cr:close', signal); assertEquals('cr:close', signal);
...@@ -218,7 +213,7 @@ async function testFilesMessage(done) { ...@@ -218,7 +213,7 @@ async function testFilesMessage(done) {
// Setting null text should display empty text. // Setting null text should display empty text.
message.message = null; message.message = null;
assertEquals('', text.getAttribute('aria-label')); assertEquals('', text.getAttribute('aria-label'));
assertNotEqual('none', window.getComputedStyle(text).display); assertNotEquals('none', window.getComputedStyle(text).display);
done(); done();
} }
...@@ -63,7 +63,7 @@ const filesSpinnerTemplate = ` ...@@ -63,7 +63,7 @@ const filesSpinnerTemplate = `
/** /**
* FilesSpinner. * FilesSpinner.
*/ */
class FilesSpinner extends HTMLElement { /* #export */ class FilesSpinner extends HTMLElement {
constructor() { constructor() {
super().attachShadow({mode: 'open'}).innerHTML = filesSpinnerTemplate; super().attachShadow({mode: 'open'}).innerHTML = filesSpinnerTemplate;
} }
......
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