{
await expect(rows.nth(2)).toContainText(/grid/i)
})
+test("a widget is drawn inside its tile rather than scrolled", async ({
+ page,
+}) => {
+ await openPanel(page)
+
+ // A picture that overflows its tile is a picture nobody can see the rest of.
+ // Only the widgets that are text or a list may scroll, and this panel holds
+ // none of them — so nothing here should.
+ const overflowing = await page.evaluate(() =>
+ [...document.querySelectorAll(".dui-frame-body")]
+ .filter((body) => body.scrollHeight > body.clientHeight + 1)
+ .map((body) => body.closest("[data-testid=widget-frame]")?.textContent),
+ )
+ expect(overflowing, "these widgets overflow their tile").toEqual([])
+})
+
test("the icon follows what the message says", async ({ page }) => {
await openPanel(page)
const glyph = page.getByTestId("icon-glyph")
@@ -461,6 +477,37 @@ test("a chart's cursor follows the pointer", async ({ page }) => {
).toBeLessThan(3)
})
+test("touch makes the controls bigger without changing what they do", async ({
+ page,
+}) => {
+ await openPanel(page)
+ const control = page.getByTestId("widget-frame").filter({ hasText: "Mode" })
+ const pointer = (await control.getByRole("button").first().boundingBox())!
+ .height
+
+ await setLook(page, dashboardName, { touch: { value: true } })
+ await openPanel(page)
+ await expect(page.getByTestId("canvas-surface")).toHaveAttribute(
+ "data-touch",
+ "",
+ )
+ const touched = (await control.getByRole("button").first().boundingBox())!
+ .height
+ expect(
+ touched,
+ `a segment is ${touched.toFixed(1)} touched and ${pointer.toFixed(1)} pointed at`,
+ ).toBeGreaterThan(pointer)
+
+ // The control is the same control: it still publishes what it always did.
+ await control.getByRole("button", { name: "Boost" }).click()
+ await expect(control.getByRole("button", { name: "Boost" })).toHaveAttribute(
+ "aria-pressed",
+ "true",
+ )
+
+ await setLook(page, dashboardName, { touch: { value: false } })
+})
+
/**
* What a dashboard was told to wear, as a wall panel would be told.
*