Create implementation of the side panel using a dialog.

chrome/test/data/webui/settings/settings_ui_browsertest.js

 // Copyright 2016 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.
 
 /** @fileoverview Suite of tests for the Settings layout. */
 
 GEN_INCLUDE(['settings_page_browsertest.js']);
 
 /**
  * @constructor
@@ skipping 29 matching lines @@
       Polymer.dom.flush();
     });
 
     test('basic', function() {
       toolbar = assert(ui.$$('cr-toolbar'));
       assertTrue(toolbar.showMenu);
     });
 
     test('app drawer', function(done) {
       assertEquals(null, ui.$$('settings-menu'));
-      var drawer = assert(ui.$$('app-drawer'));
-      assertFalse(drawer.opened);
+      var drawer = ui.$.drawer;
+      assertFalse(!!drawer.open);
 
-      // Slide the drawer partway open. (These events are copied from Polymer's
-      // app-drawer tests.)
-      drawer.fire('track', {state: 'start'});
-      drawer.fire('track', {state: 'track', dx: 10, ddx: 10});
-      drawer.fire('track', {state: 'end', dx: 10, ddx: 0});
+      drawer.openDrawer();
 
-      // Menu is rendered asynchronously, but the drawer stays closed.
       Polymer.dom.flush();
-      assertFalse(drawer.opened);
+      // Validate that dialog is open and menu is shown so it will animate.
+      assertTrue(drawer.open);
       assertTrue(!!ui.$$('settings-menu'));
 
-      // Slide most of the way open.
-      drawer.fire('track', {state: 'start'});
-      drawer.fire('track', {state: 'track', dx: 200, ddx: 200});
-      drawer.fire('track', {state: 'end', dx: 200, ddx: 0});
+      // Close the dialog after it fully opens.
+      drawer.addEventListener('transitionend', function() {
+        if (drawer.classList.contains('opening')) {
+          // Click away from the drawer. MockInteractions don't expose a way to
+          // click at a specific location.
+          var midScreen = MockInteractions.middleOfNode(ui);

[Dan Beam, 2016/12/13 03:59:28]

TIL: middleOfNode

+          drawer.dispatchEvent(new MouseEvent('click', {
+            'bubbles': true,
+            'cancelable': true,
+            'clientX': midScreen.x,
+            'clientY': midScreen.y,
+          }));
+        }
+      });
 
-      // Drawer is shown.
-      Polymer.dom.flush();
-      assertTrue(drawer.opened);
-
-      // Click away from the drawer.
-      MockInteractions.tap(drawer.$.scrim);
-      Polymer.Base.async(function() {
+      drawer.addEventListener('close', function() {
         // Drawer is closed, but menu is still stamped so its contents remain
         // visible as the drawer slides out.
-        assertFalse(drawer.opened);
+        assertFalse(drawer.open);
         assertTrue(!!ui.$$('settings-menu'));
         done();
       });
     });
 
     test('advanced UIs stay in sync', function() {
       var main = ui.$$('settings-main');
       assertTrue(!!main);
 
       assertFalse(!!ui.$$('settings-menu'));
@@ skipping 67 matching lines @@
       assertEquals('foo ', urlParams.get('search'));
 
       searchField.setValue('   ');
       urlParams = settings.getQueryParameters();
       assertFalse(urlParams.has('search'));
     });
   });
 
   mocha.run();
 });