From 178642efe0063524422d26203ccb6ce8d7ca3153 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Thu, 26 Jul 2018 15:36:07 -0700
Subject: [PATCH] Test coverage for gutter menu interactions

---
 ui/app/templates/components/global-header.hbs |  2 +-
 ui/app/templates/components/gutter-menu.hbs   |  6 +-
 ui/tests/integration/page-layout-test.js      | 73 +++++++++++++++++++
 3 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 ui/tests/integration/page-layout-test.js

diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs
index 404740c00..50cb7752e 100644
--- a/ui/app/templates/components/global-header.hbs
+++ b/ui/app/templates/components/global-header.hbs
@@ -1,6 +1,6 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
-    <span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
+    <span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
       {{partial "partials/hamburger-menu"}}
     </span>
     <span class="navbar-item is-logo">
diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs
index 2a2c6ae23..13a38bae6 100644
--- a/ui/app/templates/components/gutter-menu.hbs
+++ b/ui/app/templates/components/gutter-menu.hbs
@@ -1,7 +1,7 @@
-<div class="page-column is-left {{if isOpen "is-open"}}">
+<div data-test-gutter-menu class="page-column is-left {{if isOpen "is-open"}}">
   <div class="gutter {{if isOpen "is-open"}}">
     <header class="collapsed-menu {{if isOpen "is-open"}}">
-      <span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
+      <span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
         {{partial "partials/hamburger-menu"}}
       </span>
       <span class="logo-container">
@@ -50,4 +50,4 @@
 <div data-test-page-content class="page-column is-right">
   {{yield}}
 </div>
-<div class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>
+<div data-test-gutter-backdrop class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>
diff --git a/ui/tests/integration/page-layout-test.js b/ui/tests/integration/page-layout-test.js
new file mode 100644
index 000000000..d082886db
--- /dev/null
+++ b/ui/tests/integration/page-layout-test.js
@@ -0,0 +1,73 @@
+import { test, moduleForComponent } from 'ember-qunit';
+import { find, click } from 'ember-native-dom-helpers';
+import wait from 'ember-test-helpers/wait';
+import hbs from 'htmlbars-inline-precompile';
+import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+
+moduleForComponent('page-layout', 'Integration | Component | page layout', {
+  integration: true,
+  beforeEach() {
+    this.server = startMirage();
+  },
+  afterEach() {
+    this.server.shutdown();
+  },
+});
+
+test('the global-header hamburger menu opens the gutter menu', function(assert) {
+  this.render(hbs`{{page-layout}}`);
+
+  assert.notOk(
+    find('[data-test-gutter-menu]').classList.contains('is-open'),
+    'Gutter menu is not open'
+  );
+  click('[data-test-header-gutter-toggle]');
+
+  return wait().then(() => {
+    assert.ok(find('[data-test-gutter-menu]').classList.contains('is-open'), 'Gutter menu is open');
+  });
+});
+
+test('the gutter-menu hamburger menu closes the gutter menu', function(assert) {
+  this.render(hbs`{{page-layout}}`);
+
+  click('[data-test-header-gutter-toggle]');
+
+  return wait()
+    .then(() => {
+      assert.ok(
+        find('[data-test-gutter-menu]').classList.contains('is-open'),
+        'Gutter menu is open'
+      );
+      click('[data-test-gutter-gutter-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.notOk(
+        find('[data-test-gutter-menu]').classList.contains('is-open'),
+        'Gutter menu is not open'
+      );
+    });
+});
+
+test('the gutter-menu backdrop closes the gutter menu', function(assert) {
+  this.render(hbs`{{page-layout}}`);
+
+  click('[data-test-header-gutter-toggle]');
+
+  return wait()
+    .then(() => {
+      assert.ok(
+        find('[data-test-gutter-menu]').classList.contains('is-open'),
+        'Gutter menu is open'
+      );
+      click('[data-test-gutter-backdrop]');
+      return wait();
+    })
+    .then(() => {
+      assert.notOk(
+        find('[data-test-gutter-menu]').classList.contains('is-open'),
+        'Gutter menu is not open'
+      );
+    });
+});