Commit 6beabfbd authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Chromium LUCI CQ

Files app: Generate JS module for <files_tooltip> and its unittest

Remove the reference to util.isFilesNg() to make easier to generate the
JS module because we're removing the support of running non FilesNg
version.

Add is_polymer3 option for js_test_gen_html.gni() to be able to closure
compile the unittest for Polymer elements.

Bug: 1133186,1152668
Change-Id: I6067d205ea962bc1fb1f1ee191eed356fc3bfd6f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2557886Reviewed-by: default avatarJeremie Boulic <jboulic@chromium.org>
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#832615}
parent a777ee30
...@@ -115,7 +115,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToast) { ...@@ -115,7 +115,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToast) {
} }
IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToolTip) { IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesToolTip) {
RunTestURL("foreground/elements/files_tooltip_unittest_gen.html"); RunTestURL("foreground/elements/files_tooltip_unittest.m_gen.html");
} }
IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileSystemMetadataProvider) { IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileSystemMetadataProvider) {
......
...@@ -62,6 +62,7 @@ group("unit_test_data") { ...@@ -62,6 +62,7 @@ group("unit_test_data") {
"file_manager/common/js:js_test_gen_html", "file_manager/common/js:js_test_gen_html",
"file_manager/common/js:js_test_gen_html_modules", "file_manager/common/js:js_test_gen_html_modules",
"file_manager/foreground/elements:js_test_gen_html", "file_manager/foreground/elements:js_test_gen_html",
"file_manager/foreground/elements:js_test_gen_html_modules",
"file_manager/foreground/js:js_test_gen_html", "file_manager/foreground/js:js_test_gen_html",
"file_manager/foreground/js:js_test_gen_html_modules", "file_manager/foreground/js:js_test_gen_html_modules",
"file_manager/foreground/js/metadata:js_test_gen_html", "file_manager/foreground/js/metadata:js_test_gen_html",
......
...@@ -32,6 +32,9 @@ import("//third_party/closure_compiler/js_unit_tests.gni") ...@@ -32,6 +32,9 @@ import("//third_party/closure_compiler/js_unit_tests.gni")
# contain <script type="module" src="..._unittest.m.js"> and traditional # contain <script type="module" src="..._unittest.m.js"> and traditional
# <script>s for mocks. # <script>s for mocks.
# #
# is_polymer3:
# Boolean indicating that it's a test for a Polymer 3 element.
#
# #
# Non-Polymer example: # Non-Polymer example:
# js_test_gen_html("folder_tests") { # js_test_gen_html("folder_tests") {
...@@ -77,6 +80,7 @@ template("js_test_gen_html") { ...@@ -77,6 +80,7 @@ template("js_test_gen_html") {
"mocks", "mocks",
"html_import", "html_import",
"js_module", "js_module",
"is_polymer3",
]) ])
testonly = true testonly = true
sources = [] sources = []
...@@ -105,6 +109,11 @@ template("js_test_gen_html") { ...@@ -105,6 +109,11 @@ template("js_test_gen_html") {
args += [ "--js_module" ] args += [ "--js_module" ]
} }
# Polymer3 implies --js_module for the generated HTML.
if (defined(is_polymer3) && is_polymer3) {
args += [ "--js_module" ]
}
if (defined(mocks)) { if (defined(mocks)) {
args += [ "--mocks" ] + rebase_path(mocks, root_build_dir) args += [ "--mocks" ] + rebase_path(mocks, root_build_dir)
data = mocks data = mocks
...@@ -118,6 +127,9 @@ template("js_test_gen_html") { ...@@ -118,6 +127,9 @@ template("js_test_gen_html") {
if (defined(invoker.js_module) && invoker.js_module) { if (defined(invoker.js_module) && invoker.js_module) {
uses_js_modules = true uses_js_modules = true
} }
if (defined(invoker.is_polymer3) && invoker.is_polymer3) {
is_polymer3 = true
}
testonly = true testonly = true
forward_variables_from(invoker, [ "closure_flags" ]) forward_variables_from(invoker, [ "closure_flags" ])
deps = [ dep ] deps = [ dep ]
......
...@@ -24,6 +24,7 @@ group("closure_compile") { ...@@ -24,6 +24,7 @@ group("closure_compile") {
deps = [ deps = [
":closure_compile_internal", ":closure_compile_internal",
":closure_compile_jsmodules", ":closure_compile_jsmodules",
":js_test_gen_html_modules_type_check_auto",
":js_test_gen_html_type_check_auto", ":js_test_gen_html_type_check_auto",
] ]
} }
...@@ -60,6 +61,7 @@ js_type_check("closure_compile_jsmodules") { ...@@ -60,6 +61,7 @@ js_type_check("closure_compile_jsmodules") {
":files_ripple.m", ":files_ripple.m",
":files_safe_media.m", ":files_safe_media.m",
":files_toggle_ripple.m", ":files_toggle_ripple.m",
":files_tooltip.m",
] ]
} }
...@@ -275,14 +277,29 @@ js_library("files_tooltip") { ...@@ -275,14 +277,29 @@ js_library("files_tooltip") {
deps = [ "//ui/file_manager/file_manager/common/js:util" ] deps = [ "//ui/file_manager/file_manager/common/js:util" ]
} }
js_unittest("files_tooltip_unittest") { js_unittest("files_tooltip_unittest.m") {
deps = [ deps = [
":files_tooltip", ":files_tooltip.m",
"//ui/file_manager/base/js:test_error_reporting", "//chrome/test/data/webui:chai_assert",
"//ui/webui/resources/js:webui_resource_test", "//ui/file_manager/base/js:test_error_reporting.m",
] ]
} }
polymer_modulizer("files_tooltip") {
js_file = "files_tooltip.js"
html_file = "files_tooltip.html"
html_type = "dom-module"
preserve_url_scheme = true
}
js_library("files_tooltip.m") {
sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_tooltip.m.js" ]
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
extra_deps = [ ":files_tooltip_module" ]
}
js_unittest("files_toast_unittest") { js_unittest("files_toast_unittest") {
deps = [ deps = [
":files_toast", ":files_toast",
...@@ -303,7 +320,6 @@ js_test_gen_html("js_test_gen_html") { ...@@ -303,7 +320,6 @@ js_test_gen_html("js_test_gen_html") {
":files_message_unittest", ":files_message_unittest",
":files_password_dialog_unittest", ":files_password_dialog_unittest",
":files_toast_unittest", ":files_toast_unittest",
":files_tooltip_unittest",
":files_xf_elements_unittest", ":files_xf_elements_unittest",
] ]
html_import = true html_import = true
...@@ -326,6 +342,19 @@ js_library("xf_display_panel") { ...@@ -326,6 +342,19 @@ js_library("xf_display_panel") {
] ]
} }
js_test_gen_html("js_test_gen_html_modules") {
is_polymer3 = true
deps = [ ":files_tooltip_unittest.m" ]
closure_flags =
strict_error_checking_closure_args + [
"js_module_root=./gen/ui",
"js_module_root=../../ui",
"browser_resolver_prefix_replacements=\"chrome://test/=./\"",
"hide_warnings_for=third_party/",
]
}
js_library("xf_panel_item") { js_library("xf_panel_item") {
deps = [ deps = [
":xf_button", ":xf_button",
......
...@@ -86,6 +86,5 @@ ...@@ -86,6 +86,5 @@
</style> </style>
<div id="label"></div> <div id="label"></div>
</template> </template>
<script src="files_tooltip.js"></script> <script src="files_tooltip.js"></script>
</dom-module> </dom-module>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
* document.querySelector('files-tooltip').addTargets( * document.querySelector('files-tooltip').addTargets(
* document.querySelectorAll('[has-tooltip]')) * document.querySelectorAll('[has-tooltip]'))
*/ */
const FilesTooltip = Polymer({ /* #export */ const FilesTooltip = Polymer({
is: 'files-tooltip', is: 'files-tooltip',
properties: { properties: {
...@@ -62,7 +62,7 @@ const FilesTooltip = Polymer({ ...@@ -62,7 +62,7 @@ const FilesTooltip = Polymer({
/** /**
* Add <files-tooltip files-ng> for files-ng specific CSS styles. * Add <files-tooltip files-ng> for files-ng specific CSS styles.
*/ */
this.toggleAttribute('files-ng', util.isFilesNg()); this.toggleAttribute('files-ng', true);
}, },
/** /**
...@@ -82,9 +82,6 @@ const FilesTooltip = Polymer({ ...@@ -82,9 +82,6 @@ const FilesTooltip = Polymer({
*/ */
addTargets: function(targets) { addTargets: function(targets) {
for (let i = 0; i < targets.length; i++) { for (let i = 0; i < targets.length; i++) {
if (targets[i].hasAttribute('show-card-tooltip') && !util.isFilesNg()) {
continue;
}
this.addTarget(targets[i]); this.addTarget(targets[i]);
} }
}, },
...@@ -185,7 +182,7 @@ const FilesTooltip = Polymer({ ...@@ -185,7 +182,7 @@ const FilesTooltip = Polymer({
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
let top = rect.top + rect.height; let top = rect.top + rect.height;
if (util.isFilesNg() && !useCardTooltip) { if (!useCardTooltip) {
top += 8; top += 8;
} }
......
...@@ -2,6 +2,14 @@ ...@@ -2,6 +2,14 @@
// 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
import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://test/chai_assert.js';
import {reportPromise} from '../../../base/js/test_error_reporting.m.js';
import {FilesTooltip} from './files_tooltip.m.js';
// clang-format on
/** @type {Element} */ /** @type {Element} */
let chocolateButton; let chocolateButton;
...@@ -57,20 +65,10 @@ const bodyContent = ` ...@@ -57,20 +65,10 @@ const bodyContent = `
const windowEdgePadding = 6; const windowEdgePadding = 6;
function setUp() { export function setUp() {
/** @const {boolean} Assume files-ng in unittest. */ /** @const {boolean} Assume files-ng in unittest. */
const enableFilesNg = true; const enableFilesNg = true;
// Mock LoadTimeData strings for files-ng case. These tests check top and
// left position values, which can differ in files-ng vs not-files-ng.
window.loadTimeData.data = {
FILES_NG_ENABLED: enableFilesNg,
};
window.loadTimeData.getString = id => {
return window.loadTimeData.data_[id] || id;
};
/** @return {boolean} */ /** @return {boolean} */
window.isFilesNg = () => { window.isFilesNg = () => {
return enableFilesNg; return enableFilesNg;
...@@ -83,7 +81,7 @@ function setUp() { ...@@ -83,7 +81,7 @@ function setUp() {
otherButton = document.querySelector('#other'); otherButton = document.querySelector('#other');
tooltip = document.querySelector('files-tooltip'); tooltip = document.querySelector('files-tooltip');
assertNotEqual('none', window.getComputedStyle(tooltip).display); assertNotEquals('none', window.getComputedStyle(tooltip).display);
assertEquals('0', window.getComputedStyle(tooltip).opacity); assertEquals('0', window.getComputedStyle(tooltip).opacity);
assertEquals(enableFilesNg, tooltip.hasAttribute('files-ng')); assertEquals(enableFilesNg, tooltip.hasAttribute('files-ng'));
...@@ -100,7 +98,7 @@ function waitForMutation(target) { ...@@ -100,7 +98,7 @@ function waitForMutation(target) {
}); });
} }
function testFocus(callback) { export function testFocus(callback) {
chocolateButton.focus(); chocolateButton.focus();
return reportPromise( return reportPromise(
...@@ -145,7 +143,7 @@ function testFocus(callback) { ...@@ -145,7 +143,7 @@ function testFocus(callback) {
callback); callback);
} }
function testHover(callback) { export function testHover(callback) {
chocolateButton.dispatchEvent(new MouseEvent('mouseover')); chocolateButton.dispatchEvent(new MouseEvent('mouseover'));
return reportPromise( return reportPromise(
...@@ -191,7 +189,7 @@ function testHover(callback) { ...@@ -191,7 +189,7 @@ function testHover(callback) {
callback); callback);
} }
function testClickHides(callback) { export function testClickHides(callback) {
chocolateButton.dispatchEvent(new MouseEvent('mouseover', {bubbles: true})); chocolateButton.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
return reportPromise( return reportPromise(
...@@ -214,7 +212,7 @@ function testClickHides(callback) { ...@@ -214,7 +212,7 @@ function testClickHides(callback) {
callback); callback);
} }
function testCardTooltipHover(callback) { export function testCardTooltipHover(callback) {
cheeseButton.dispatchEvent(new MouseEvent('mouseover')); cheeseButton.dispatchEvent(new MouseEvent('mouseover'));
return reportPromise( return reportPromise(
...@@ -240,7 +238,7 @@ function testCardTooltipHover(callback) { ...@@ -240,7 +238,7 @@ function testCardTooltipHover(callback) {
callback); callback);
} }
function testCardtooltipRTL(callback) { export function testCardtooltipRTL(callback) {
document.documentElement.setAttribute('dir', 'rtl'); document.documentElement.setAttribute('dir', 'rtl');
document.body.setAttribute('dir', 'rtl'); document.body.setAttribute('dir', 'rtl');
...@@ -269,4 +267,4 @@ function testCardtooltipRTL(callback) { ...@@ -269,4 +267,4 @@ function testCardtooltipRTL(callback) {
document.body.setAttribute('dir', 'ltr'); document.body.setAttribute('dir', 'ltr');
}), }),
callback); callback);
} }
\ No newline at end of file
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