fix(dashboard): compact bookmark dividers
This commit is contained in:
parent
769d624799
commit
ba904ef4f9
5 changed files with 65 additions and 9 deletions
|
|
@ -106,6 +106,49 @@ test.describe("dashboard page QA gate", () => {
|
|||
expect(metrics.clippedItems).toEqual([]);
|
||||
});
|
||||
|
||||
test("renders bookmark rows as a compact divider list", async ({ page }, testInfo) => {
|
||||
test.skip(testInfo.project.name !== "chromium-desktop");
|
||||
|
||||
await page.goto("/");
|
||||
|
||||
const bookmarkDensity = await page.evaluate(() => {
|
||||
const panelBody = document.querySelector(".service-panel .panel__body");
|
||||
const rows = Array.from(document.querySelectorAll<HTMLElement>(".service-panel .service-row"));
|
||||
const first = rows[0];
|
||||
const second = rows[1];
|
||||
if (!panelBody || !first || !second) {
|
||||
throw new Error("expected at least two bookmark rows");
|
||||
}
|
||||
|
||||
const bodyStyle = window.getComputedStyle(panelBody);
|
||||
const rowStyle = window.getComputedStyle(first);
|
||||
const firstRect = first.getBoundingClientRect();
|
||||
const secondRect = second.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
backgroundColor: rowStyle.backgroundColor,
|
||||
borderBottomWidth: Number.parseFloat(rowStyle.borderBottomWidth),
|
||||
borderLeftWidth: Number.parseFloat(rowStyle.borderLeftWidth),
|
||||
borderRightWidth: Number.parseFloat(rowStyle.borderRightWidth),
|
||||
columnGap: Number.parseFloat(rowStyle.columnGap),
|
||||
paddingBottom: Number.parseFloat(rowStyle.paddingBottom),
|
||||
paddingTop: Number.parseFloat(rowStyle.paddingTop),
|
||||
panelGap: Number.parseFloat(bodyStyle.rowGap),
|
||||
rowGap: secondRect.top - firstRect.bottom,
|
||||
};
|
||||
});
|
||||
|
||||
expect(bookmarkDensity.panelGap).toBe(0);
|
||||
expect(bookmarkDensity.rowGap).toBeLessThanOrEqual(1);
|
||||
expect(bookmarkDensity.paddingTop).toBeLessThanOrEqual(3);
|
||||
expect(bookmarkDensity.paddingBottom).toBeLessThanOrEqual(3);
|
||||
expect(bookmarkDensity.columnGap).toBeLessThanOrEqual(4);
|
||||
expect(bookmarkDensity.borderBottomWidth).toBeGreaterThanOrEqual(1);
|
||||
expect(bookmarkDensity.borderLeftWidth).toBe(0);
|
||||
expect(bookmarkDensity.borderRightWidth).toBe(0);
|
||||
expect(bookmarkDensity.backgroundColor).toBe("rgba(0, 0, 0, 0)");
|
||||
});
|
||||
|
||||
test("keeps the first screen usable on mobile", async ({ page }, testInfo) => {
|
||||
test.skip(testInfo.project.name !== "chromium-mobile");
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue