Add failing tests

dividat · Aug 26, 2024 · 3b7fa93 · 3b7fa93
1 parent b1bf849
commit 3b7fa93
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 57 deletions.
diff --git 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
diff --git a/cypress/fixtures/group-linear-stretch.html b/cypress/fixtures/group-linear-stretch.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <style>
+      .nav-group {
+        width: 800px;
+        height: 600px;
+      }
+      #button-big {
+        align-self: stretch;
+      }
+      #button-small {
+        align-self: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- With two group items, one spanning the entire length along the
+      direction of movement, we expect this expansive item to be chosen.
+    -->
+    <div class="nav-group" data-focus-group="linear">
+      <button id="button-big">Big Button</button>
+      <button id="button-small">Small Button</button>
+    </div>
+    <script src="../../index.js"></script>
+  </body>
+</html>
diff --git 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)