Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Osama Sayegh 2022-08-17 11:51:29 +03:00 committed by GitHub
parent eba05c5d48
commit 129885c260
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/assets/javascripts/discourse/tests/integration/components/site-header-test.js
View File

@ -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"
);
});
});