MD WebUI: Move settings' dialog-drawer element into a shared cr-element

chrome/test/data/webui/cr_elements/cr_drawer_tests.js

Index: chrome/test/data/webui/cr_elements/cr_drawer_tests.js
diff --git a/chrome/test/data/webui/cr_elements/cr_drawer_tests.js b/chrome/test/data/webui/cr_elements/cr_drawer_tests.js
new file mode 100644
index 0000000000000000000000000000000000000000..4306e1e6b8ebaa22d75a1a82b0e99fd91fb8782b
--- /dev/null
+++ b/chrome/test/data/webui/cr_elements/cr_drawer_tests.js
@@ -0,0 +1,45 @@
+// Copyright 2017 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.
+
+suite('cr-drawer', function() {

[dpapad, 2017/01/12 22:38:57]

BTW, thanks for adding tests!

[tsergeant, 2017/01/12 22:53:51]

No problem! I figured the existing test is pretty settings-specific, so adding
another one was worthwhile.

+  var drawer;
+
+  setup(function() {
+    PolymerTest.clearBody();
+    document.body.innerHTML = `
+      <dialog is="cr-drawer" id="drawer">
+        <div class="drawer-header">Test</div>
+        <div class="drawer-content">Test content</div>
+      </dialog>
+    `;
+
+    drawer = document.getElementById('drawer');
+  });
+
+  test('open and close', function(done) {
+    drawer.openDrawer();
+    assertTrue(drawer.open);
+
+    listenOnce(drawer, 'transitionend', function() {
+      listenOnce(drawer, 'close', function() {
+        assertFalse(drawer.open);
+        done();
+      });
+
+      // Clicking the content does not close the drawer.
+      MockInteractions.tap(document.querySelector('.drawer-content'));
+      assertFalse(drawer.classList.contains('closing'));
+
+      drawer.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 300,  // Must be larger than the drawer width (256px).
+        clientY: 300,
+      }));
+
+      // Clicking outside the drawer does close it.
+      assertTrue(drawer.classList.contains('closing'));
+    });
+  });
+});