Add regression test for linear groups with full size items

dividat · Aug 26, 2024 · 0ae55d3 · 0ae55d3
1 parent 2797a92
commit 0ae55d3
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts
@@ -186,6 +186,38 @@ describe("focus-shift spec", () => {
     ])
   )
 
+  it(
+    "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" }) }
+    ])
+  )
+
   it(
     "memorize-type group TD",
     testFor("./cypress/fixtures/group-memorize.html", { className: "rows" }, [

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>