Split hamburger-menu out into menu-panel

test/javascripts/acceptance/hamburger-menu-staff-test.js.es6

@@ -6,8 +6,8 @@ test("Menu Items", (assert) => {
   visit("/");
   click("#toggle-hamburger-menu");
   andThen(() => {
-    assert.ok(exists("#hamburger-menu .admin-link"));
-    assert.ok(exists("#hamburger-menu .flagged-posts-link"));
-    assert.ok(exists("#hamburger-menu .flagged-posts.badge-notification"), "it displays flag notifications");
+    assert.ok(exists(".hamburger-panel .admin-link"));
+    assert.ok(exists(".hamburger-panel .flagged-posts-link"));
+    assert.ok(exists(".hamburger-panel .flagged-posts.badge-notification"), "it displays flag notifications");
   });
 });

test/javascripts/acceptance/hamburger-menu-test.js.es6

@@ -2,38 +2,20 @@ import { acceptance } from "helpers/qunit-helpers";
 
 acceptance("Hamburger Menu");
 
-test("Toggle Menu", (assert) => {
-  visit("/");
-  andThen(() => {
-    assert.ok(exists("#hamburger-menu.hidden"), "hidden by default");
-  });
-
-  click("#toggle-hamburger-menu");
-  andThen(() => {
-    assert.ok(!exists("#hamburger-menu.hidden"), "a click makes it appear");
-  });
-
-  click('#main-outlet')
-  andThen(() => {
-    assert.ok(exists("#hamburger-menu.hidden"), "clicking the body hides the menu");
-  });
-
-});
-
 test("Menu Items", (assert) => {
   visit("/");
   click("#toggle-hamburger-menu");
   andThen(() => {
-    assert.ok(!exists("#hamburger-menu .admin-link"), 'does not have admin link');
-    assert.ok(!exists("#hamburger-menu .flagged-posts-link"), 'does not have flagged posts link');
+    assert.ok(!exists(".hamburger-panel .admin-link"), 'does not have admin link');
+    assert.ok(!exists(".hamburger-panel .flagged-posts-link"), 'does not have flagged posts link');
 
-    assert.ok(exists("#hamburger-menu .latest-topics-link"), 'last link to latest');
-    assert.ok(exists("#hamburger-menu .badge-link"), 'has link to badges');
-    assert.ok(exists("#hamburger-menu .user-directory-link"), 'has user directory link');
-    assert.ok(exists("#hamburger-menu .faq-link"), 'has faq link');
-    assert.ok(exists("#hamburger-menu .about-link"), 'has about link');
-    assert.ok(exists("#hamburger-menu .categories-link"), 'has categories link');
+    assert.ok(exists(".hamburger-panel .latest-topics-link"), 'last link to latest');
+    assert.ok(exists(".hamburger-panel .badge-link"), 'has link to badges');
+    assert.ok(exists(".hamburger-panel .user-directory-link"), 'has user directory link');
+    assert.ok(exists(".hamburger-panel .faq-link"), 'has faq link');
+    assert.ok(exists(".hamburger-panel .about-link"), 'has about link');
+    assert.ok(exists(".hamburger-panel .categories-link"), 'has categories link');
 
-    assert.ok(exists('#hamburger-menu .category-link'), 'has at least one category');
+    assert.ok(exists('.hamburger-panel .category-link'), 'has at least one category');
   });
 });

test/javascripts/components/menu-panel-test.js.es6

@@ -0,0 +1,80 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('menu-panel', {integration: true});
+
+componentTest('as a dropdown', {
+  template: `
+    <div id='outside-area'>click me</div>
+
+    <div class='menu-selected'></div>
+
+    {{#menu-panel visible=panelVisible markActive=".menu-selected" force="drop-down"}}
+      Some content
+    {{/menu-panel}}
+  `,
+
+  setup() {
+    this.set('panelVisible', false);
+  },
+
+  test(assert) {
+    assert.ok(exists(".menu-panel.hidden"), "hidden by default");
+    assert.ok(!exists(".menu-selected.active"), "does not mark anything as active");
+
+    this.set('panelVisible', true);
+    andThen(() => {
+      assert.ok(!exists('.menu-panel .close-panel'), "the close X is not shown");
+      assert.ok(!exists(".menu-panel.hidden"), "toggling visible makes it appear");
+      assert.ok(exists(".menu-selected.active"), "marks the panel as active");
+    });
+
+    click('#outside-area')
+    andThen(() => {
+      assert.ok(exists(".menu-panel.hidden"), "clicking the body hides the menu");
+      assert.ok(!exists(".menu-selected.active"), "removes the active class");
+      assert.equal(this.get('panelVisible'), false, 'it updates the bound variable');
+    });
+  }
+});
+
+componentTest('as a slide-in', {
+  template: `
+    <div id='outside-area'>click me</div>
+    <div class='menu-selected'></div>
+
+    {{#menu-panel visible=panelVisible markActive=".menu-selected" force="slide-in"}}
+      Some content
+    {{/menu-panel}}
+  `,
+
+  setup() {
+    this.set('panelVisible', false);
+  },
+
+  test(assert) {
+    assert.ok(exists(".menu-panel.hidden"), "hidden by default");
+    assert.ok(!exists(".menu-selected.active"), "does not mark anything as active");
+
+    this.set('panelVisible', true);
+    andThen(() => {
+      assert.ok(!exists(".menu-panel.hidden"), "toggling visible makes it appear");
+      assert.ok(!exists(".menu-selected.active"), "slide ins don't mark as active");
+    });
+
+    click('#outside-area')
+    andThen(() => {
+      assert.ok(exists(".menu-panel.hidden"), "clicking the body hides the menu");
+      assert.equal(this.get('panelVisible'), false, 'it updates the bound variable');
+      this.set('panelVisible', true);
+    });
+
+    andThen(() => {
+      assert.ok(exists('.menu-panel .close-panel'), "the close X is shown");
+    });
+
+    click('.close-panel');
+    andThen(() => {
+      assert.ok(exists(".menu-panel.hidden"), "clicking the close button closes it");
+      assert.equal(this.get('panelVisible'), false, 'it updates the bound variable');
+    });
+  }
+});

test/javascripts/helpers/component-test.js.es6

@@ -1,3 +1,4 @@
+import AppEvents from 'discourse/lib/app-events';
 import createStore from 'helpers/create-store';
 
 export default function(name, opts) {
@@ -8,8 +9,12 @@ export default function(name, opts) {
       const store = createStore();
       opts.setup.call(this, store);
     }
+    const appEvents = AppEvents.create();
+
     this.container.register('site-settings:main', Discourse.SiteSettings, { instantiate: false });
+    this.container.register('app-events:main', appEvents, { instantiate: false });
     this.container.injection('component', 'siteSettings', 'site-settings:main');
+    this.container.injection('component', 'appEvents', 'app-events:main');
 
     andThen(() => {
       this.render(opts.template);