[ntp][modules] Use ntp-grid in dummy module

This CL adds a dummy ntp-grid into the dummy module. This works as a
proof of concept that NTP-provided custom elements can be used in
modules.

Bug: 1110062
Change-Id: Ib106888c99680f14ed8b0a1282f9660a46f4ffab
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2339338
Commit-Queue: Yue Zhang <yuezhanggg@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795649}

chrome/browser/resources/new_tab_page/modules/dummy/BUILD.gn

@@ -7,6 +7,7 @@ import("//tools/polymer/html_to_js.gni")
 
 js_library("module") {
   deps = [
+    "../..:grid",
     "../..:module_descriptor",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]

chrome/browser/resources/new_tab_page/modules/dummy/module.html

-<a href="chrome://new-tab-page">Super duper module</a>
+<style>
+.tile-item {
+    background-color: var(--ntp-active-background-color);
+    border-color: var(--ntp-border-color);
+    border-radius: 8px;
+    border-style: solid;
+    border-width: thin;
+    color: var(--cr-primary-text-color);
+    height: 85px;
+    line-height: 85px;
+    margin: 10px;
+    text-align: center;
+    width: 170px;
+  }
+</style>
+<ntp-grid id="tiles" columns="3">
+  <template id="tileList" is="dom-repeat" items="[[tiles]]">
+    <div class="tile-item" title="[[item.label]]">[[item.value]]</div>
+  </template>
+</ntp-grid>

chrome/browser/resources/new_tab_page/modules/dummy/module.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../grid.js';
+
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ModuleDescriptor} from '../module_descriptor.js';
@@ -19,6 +21,19 @@ class DummyModuleElement extends PolymerElement {
   static get template() {
     return html`{__html_template__}`;
   }
+
+  static get properties() {
+    return {
+      tiles: {
+        type: Array,
+        value: () => ([
+          {label: 'item1', value: 'foo'},
+          {label: 'item2', value: 'bar'},
+          {label: 'item3', value: 'baz'},
+        ]),
+      }
+    };
+  }
 }
 
 customElements.define(DummyModuleElement.is, DummyModuleElement);

chrome/test/data/webui/new_tab_page/modules/dummy/module_test.js

@@ -3,14 +3,20 @@
 // found in the LICENSE file.
 
 import {$$, dummyDescriptor} from 'chrome://new-tab-page/new_tab_page.js';
+import {isVisible} from 'chrome://test/test_util.m.js';
 
 suite('NewTabPageModulesDummyModuleTest', () => {
   test('creates module', async () => {
     // Act.
     const module = await dummyDescriptor.create();
     document.body.append(module);
+    module.$.tileList.render();
 
     // Assert.
-    assertEquals('chrome://new-tab-page/', $$(module, 'a').href);
+    assertTrue(isVisible(module.$.tiles));
+    const tiles = module.shadowRoot.querySelectorAll('#tiles .tile-item');
+    assertEquals(3, tiles.length);
+    assertEquals('item3', tiles[2].getAttribute('title'));
+    assertEquals('baz', tiles[2].textContent);
   });
 });