From 3b7fa9321bff41fc7f09b10b2460c42682139a91 Mon Sep 17 00:00:00 2001 From: Johannes Emerich Date: Mon, 26 Aug 2024 15:56:10 +0200 Subject: [PATCH] Add failing tests --- cypress/e2e/spec.cy.ts | 36 ++++++++++++---- cypress/fixtures/group-linear-sidebar.html | 48 ---------------------- cypress/fixtures/group-linear-stretch.html | 29 +++++++++++++ index.js | 2 +- 4 files changed, 58 insertions(+), 57 deletions(-) delete mode 100644 cypress/fixtures/group-linear-sidebar.html create mode 100644 cypress/fixtures/group-linear-stretch.html diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index 3d875cd..cd06ca9 100644 --- a/cypress/e2e/spec.cy.ts +++ b/cypress/e2e/spec.cy.ts @@ -187,14 +187,34 @@ describe("focus-shift spec", () => { ) it( - "implicit linear-type group with full-height sidebar", - testFor("./cypress/fixtures/group-linear-sidebar.html", { className: "rows" }, [ - { eventType: "keydown", selector: "#button-1", options: keyevent({ key: "ArrowDown" }) }, - { eventType: "keydown", selector: "#after", options: keyevent({ key: "ArrowRight" }) }, - // Reset activeElement to body element - { eventType: "focus", selector: "body" }, - { eventType: "keydown", selector: "#button-3", options: keyevent({ key: "ArrowUp" }) }, - { eventType: "keydown", selector: "#after", options: keyevent({ key: "ArrowRight" }) }, + "linear-type group with stretched item LR", + testFor("./cypress/fixtures/group-linear-stretch.html", { className: "rows" }, [ + { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowLeft" }) }, + { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowDown" }) } + ]) + ) + + it( + "linear-type group with stretched item RL", + testFor("./cypress/fixtures/group-linear-stretch.html", { className: "rows" }, [ + { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowRight" }) }, + { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowDown" }) } + ]) + ) + + it( + "linear-type group with stretched item TD", + testFor("./cypress/fixtures/group-linear-stretch.html", { className: "columns" }, [ + { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowDown" }) }, + { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowRight" }) } + ]) + ) + + it( + "linear-type group with stretched item DT", + testFor("./cypress/fixtures/group-linear-stretch.html", { className: "columns" }, [ + { eventType: "keydown", selector: "#button-big", options: keyevent({ key: "ArrowUp" }) }, + { eventType: "keydown", selector: "#button-small", options: keyevent({ key: "ArrowRight" }) } ]) ) diff --git a/cypress/fixtures/group-linear-sidebar.html b/cypress/fixtures/group-linear-sidebar.html deleted file mode 100644 index 2e2fffb..0000000 --- a/cypress/fixtures/group-linear-sidebar.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - -
- linear group -
-
-
-
-
- - - diff --git a/cypress/fixtures/group-linear-stretch.html b/cypress/fixtures/group-linear-stretch.html new file mode 100644 index 0000000..577541b --- /dev/null +++ b/cypress/fixtures/group-linear-stretch.html @@ -0,0 +1,29 @@ + + + + + + + + + +
+ + +
+ + + diff --git a/index.js b/index.js index 060593a..c0f7cd3 100644 --- a/index.js +++ b/index.js @@ -515,7 +515,7 @@ function focusActiveElement(direction, origin, group) { function focusLinear(direction, origin, group) { const originPoint = makeOrigin(opposite(direction), origin) const candidates = getFocusableElements(group).map((candidate) => - annotate(direction, origin, candidate) + annotate(opposite(direction), origin, candidate) ) const bestCandidate = getMinimumBy(candidates, (candidate) => euclidean(originPoint, candidate.point)