From 129885c26024082791bbef6323bffec91af5eb56 Mon Sep 17 00:00:00 2001
From: Osama Sayegh <asooomaasoooma90@gmail.com>
Date: Wed, 17 Aug 2022 11:51:29 +0300
Subject: [PATCH] DEV: Add test for arrow keys navigation in the experimental
 user menu (#17961)

This test is extracted from the changes proposed in: https://github.com/discourse/discourse/pull/17379.
---
 .../components/site-header-test.js            | 51 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
index 26e767d981f..05823eff3a2 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
@@ -1,6 +1,12 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { click, render, settled, waitUntil } from "@ember/test-helpers";
+import {
+  click,
+  render,
+  settled,
+  triggerKeyEvent,
+  waitUntil,
+} from "@ember/test-helpers";
 import { count, exists, query } from "discourse/tests/helpers/qunit-helpers";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import { hbs } from "ember-cli-htmlbars";
@@ -135,4 +141,47 @@ module("Integration | Component | site-header", function (hooks) {
     await waitUntil(() => getProperty() === "60px", { timeout: 100 });
     assert.strictEqual(getProperty(), "60px");
   });
+
+  test("arrow up/down keys move focus between the tabs", async function (assert) {
+    this.currentUser.set("redesigned_user_menu_enabled", true);
+    await render(hbs`<SiteHeader />`);
+    await click(".header-dropdown-toggle.current-user");
+    let activeTab = query(".menu-tabs-container .btn.active");
+    assert.strictEqual(activeTab.id, "user-menu-button-all-notifications");
+
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    let focusedTab = document.activeElement;
+    assert.strictEqual(
+      focusedTab.id,
+      "user-menu-button-replies",
+      "pressing the down arrow key moves focus to the next tab towards the bottom"
+    );
+
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+
+    focusedTab = document.activeElement;
+    assert.ok(
+      focusedTab.href.endsWith("/u/eviltrout/preferences"),
+      "the down arrow key can move the focus to the bottom tabs"
+    );
+
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
+    focusedTab = document.activeElement;
+    assert.strictEqual(
+      focusedTab.id,
+      "user-menu-button-all-notifications",
+      "the focus moves back to the top after reaching the bottom"
+    );
+
+    await triggerKeyEvent(document, "keydown", "ArrowUp");
+    focusedTab = document.activeElement;
+    assert.ok(
+      focusedTab.href.endsWith("/u/eviltrout/preferences"),
+      "the up arrow key moves the focus in the opposite direction"
+    );
+  });
 });