expand test coverage

addon/components/menu.hbs

@@ -13,6 +13,7 @@
       isOpen=this.isOpen
       onClick=this.toggle
       openMenu=this.open
+      closeMenu=this.close
       goToFirstItem=this.goToFirstItem
       goToLastItem=this.goToLastItem
       goToNextItem=this.goToNextItem

addon/components/menu/button.js

@@ -10,13 +10,16 @@ export default class Button extends Component {
       case "Enter":
       case "ArrowDown":
         event.preventDefault();
-        this.args.openMenu();
 
-        next(() => {
-          this.args.goToFirstItem();
-        });
+        if (this.args.isOpen && event.key === "Enter") {
+          this.args.closeMenu();
+        } else {
+          this.args.openMenu();
+          next(() => {
+            this.args.goToFirstItem();
+          });
+        }
         break;
-
       case "ArrowUp":
         event.preventDefault();
         this.args.openMenu();

addon/components/menu/item-element.hbs

@@ -1,7 +1,7 @@
 {{#let (element (or @tagName "a")) as |Tag|}}
   <Tag
     {{did-insert @registerItemElement}}
-    {{on "mousemove" @onMouseMove}}
+    {{on "mouseover" @onMouseOver}}
     {{on "click" @onClick}}
     {{will-destroy @unregisterItemElement}}
     id={{@guid}}

addon/components/menu/item.hbs

@@ -5,7 +5,7 @@
     'menu/item-element'
     guid=this.guid
     isDisabled=@isDisabled
-    onMouseMove=this.onMouseMove
+    onMouseOver=this.onMouseOver
     registerItemElement=this.registerItemElement
     unregisterItemElement=this.unregisterItemElement
     onClick=this.onElementClick

addon/components/menu/item.js

@@ -51,7 +51,7 @@ export default class Item extends Component {
   }
 
   @action
-  onMouseMove() {
+  onMouseOver() {
     if (this.args.isDisabled) return;
     if (this.isActive) return;
 

tests/integration/components/menu-test.js

@@ -1,6 +1,14 @@
 import QUnit, { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { click, render, pauseTest } from "@ember/test-helpers";
+import {
+  click,
+  render,
+  pauseTest,
+  focus,
+  find,
+  triggerEvent,
+  triggerKeyEvent,
+} from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 
 function assertClosedMenuButton(selector) {
@@ -95,4 +103,178 @@ module("Integration | Component | menu", function (hooks) {
       });
     });
   });
+
+  module("Keyboard", function () {
+    test("Enter open and closes the menu", async function (assert) {
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            <items.Item as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item A
+              </item.Element>
+            </items.Item>
+            <items.Item as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item B
+              </item.Element>
+            </items.Item>
+            <items.Item as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item C
+              </item.Element>
+            </items.Item>
+          </menu.Items>
+        </Menu>
+      `);
+
+      assertClosedMenuButton("[data-test-menu-button]");
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      assert
+        .dom("[data-test-is-selected]")
+        .hasText("Item A", "The first item is selected");
+    });
+
+    test("it should have no active item when no items are provided", async function (assert) {
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items />
+        </Menu>
+      `);
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      assert.dom("[data-test-is-selected]").doesNotExist();
+    });
+
+    test("it should focus the first non disabled menu item when opening with Enter", async function (assert) {
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item A
+              </item.Element>
+            </items.Item>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item B
+              </item.Element>
+            </items.Item>
+            <items.Item as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item C
+              </item.Element>
+            </items.Item>
+          </menu.Items>
+        </Menu>
+      `);
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      assert
+        .dom("[data-test-is-selected]")
+        .hasText("Item C", "The first non-disabled item is selected");
+    });
+
+    test("it should have no active menu item upon Enter key press, when there are no non-disabled menu items", async function (assert) {
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item A
+              </item.Element>
+            </items.Item>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item B
+              </item.Element>
+            </items.Item>
+          </menu.Items>
+        </Menu>
+      `);
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      assert.dom("[data-test-is-selected]").doesNotExist();
+    });
+
+    test("it should be possible to close the menu with Enter when there is no active menuitem", async function (assert) {
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item A
+              </item.Element>
+            </items.Item>
+            <items.Item @isDisabled={{true}} as |item|>
+              <item.Element data-test-is-selected={{item.isActive}}>
+                Item B
+              </item.Element>
+            </items.Item>
+          </menu.Items>
+        </Menu>
+      `);
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertClosedMenuButton("[data-test-menu-button]");
+    });
+
+    test("it should be possible to close the menu with Enter and invoke the active menu item", async function (assert) {
+      let itemClicked = 0;
+      this.set("onClick", (item) => (itemClicked = item.target));
+
+      await render(hbs`
+        <Menu data-test-menu as |menu|>
+          <menu.Button data-test-menu-button>Trigger</menu.Button>
+          <menu.Items data-test-menu-items as |items|>
+            <items.Item as |item|>
+              <item.Element  {{on "click" this.onClick}}>
+                Item A
+              </item.Element>
+            </items.Item>
+            <items.Item as |item|>
+              <item.Element data-test-item-b {{on "click" this.onClick}}>
+                Item B
+              </item.Element>
+            </items.Item>
+          </menu.Items>
+        </Menu>
+      `);
+
+      await triggerKeyEvent("[data-test-menu-button]", "keydown", "Enter");
+
+      assertOpenMenuButton("[data-test-menu-button]");
+
+      await triggerEvent("[data-test-item-b]", "mouseover");
+
+      await triggerKeyEvent("[data-test-item-b]", "keydown", "Enter");
+
+      assert.dom(itemClicked).hasText("Item B");
+
+      assertClosedMenuButton("[data-test-menu-button]");
+    });
+  });
 });