fix: expand Today desktop layout
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import type { APIRequestContext } from '@playwright/test'
|
import type { APIRequestContext } from '@playwright/test'
|
||||||
import { expect, test } from './fixtures'
|
import { expect, test } from './fixtures'
|
||||||
|
|
||||||
const widths = [1440, 721, 720, 390, 375]
|
const widths = [1600, 1440, 721, 720, 390, 375]
|
||||||
|
|
||||||
async function csrf(request: APIRequestContext) {
|
async function csrf(request: APIRequestContext) {
|
||||||
const state = await request.storageState()
|
const state = await request.storageState()
|
||||||
@@ -50,7 +50,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
|
|||||||
}
|
}
|
||||||
})).toEqual({
|
})).toEqual({
|
||||||
media720: width <= 720,
|
media720: width <= 720,
|
||||||
contentWidth: width >= 1440 ? 900 : width === 721 ? 630 : width - 58,
|
contentWidth: width >= 1440 ? 1080 : width === 721 ? 630 : width - 58,
|
||||||
environmentHeight: width >= 721 ? 55 : width === 375 ? 90 : 93,
|
environmentHeight: width >= 721 ? 55 : width === 375 ? 90 : 93,
|
||||||
})
|
})
|
||||||
await expect(taskRowLocator).toHaveCount(1)
|
await expect(taskRowLocator).toHaveCount(1)
|
||||||
@@ -120,6 +120,8 @@ test('Today plain-list layout matches the approved responsive geometry', async (
|
|||||||
content: { left: content.left, right: content.right, width: content.width },
|
content: { left: content.left, right: content.right, width: content.width },
|
||||||
environment: { ...environment.getBoundingClientRect().toJSON(), scrollWidth: environment.scrollWidth, clientWidth: environment.clientWidth },
|
environment: { ...environment.getBoundingClientRect().toJSON(), scrollWidth: environment.scrollWidth, clientWidth: environment.clientWidth },
|
||||||
directions: { calendar: getComputedStyle(calendar).flexDirection, weather: getComputedStyle(weather).flexDirection, gold: getComputedStyle(gold).flexDirection },
|
directions: { calendar: getComputedStyle(calendar).flexDirection, weather: getComputedStyle(weather).flexDirection, gold: getComputedStyle(gold).flexDirection },
|
||||||
|
itemWidths: [calendar, weather, gold].map((element) => element.getBoundingClientRect().width),
|
||||||
|
itemHeights: [calendar, weather, gold].map((element) => element.getBoundingClientRect().height),
|
||||||
uniqueRows,
|
uniqueRows,
|
||||||
collisions,
|
collisions,
|
||||||
collisionRects: [calendar, weather, gold].map(element => element.getBoundingClientRect().toJSON()),
|
collisionRects: [calendar, weather, gold].map(element => element.getBoundingClientRect().toJSON()),
|
||||||
@@ -190,11 +192,20 @@ test('Today plain-list layout matches the approved responsive geometry', async (
|
|||||||
expect(metrics.styles.fabIconWidth).toBeCloseTo(30, 0)
|
expect(metrics.styles.fabIconWidth).toBeCloseTo(30, 0)
|
||||||
if (width >= 721) {
|
if (width >= 721) {
|
||||||
expect(metrics.uniqueRows).toHaveLength(1)
|
expect(metrics.uniqueRows).toHaveLength(1)
|
||||||
expect(metrics.content.width).toBeCloseTo(width >= 1440 ? 900 : 630, 0)
|
expect(metrics.content.width).toBeCloseTo(width >= 1440 ? 1080 : 630, 0)
|
||||||
|
expect(Math.max(...metrics.itemWidths) - Math.min(...metrics.itemWidths)).toBeLessThanOrEqual(1)
|
||||||
|
expect(Math.max(...metrics.itemHeights) - Math.min(...metrics.itemHeights)).toBeLessThanOrEqual(1)
|
||||||
expect(metrics.environment.height).toBeLessThanOrEqual(72)
|
expect(metrics.environment.height).toBeLessThanOrEqual(72)
|
||||||
expect(metrics.styles.titleFontSize).toBe('34px')
|
expect(metrics.styles.titleFontSize).toBe('34px')
|
||||||
} else {
|
} else {
|
||||||
expect(metrics.uniqueRows).toHaveLength(2)
|
expect(metrics.uniqueRows).toHaveLength(2)
|
||||||
|
expect(metrics.collisionRects[0].width).toBeCloseTo(metrics.content.width, 0)
|
||||||
|
expect(metrics.collisionRects[0].left).toBeCloseTo(metrics.content.left, 0)
|
||||||
|
expect(metrics.collisionRects[0].right).toBeCloseTo(metrics.content.right, 0)
|
||||||
|
expect(metrics.collisionRects[1].width).toBeCloseTo(metrics.collisionRects[2].width, 0)
|
||||||
|
expect(metrics.collisionRects[1].left).toBeCloseTo(metrics.content.left, 0)
|
||||||
|
expect(metrics.collisionRects[2].right).toBeCloseTo(metrics.content.right, 0)
|
||||||
|
expect(metrics.collisionRects[1].right).toBeCloseTo(metrics.collisionRects[2].left, 0)
|
||||||
expect(metrics.directions.calendar).toBe('row')
|
expect(metrics.directions.calendar).toBe('row')
|
||||||
expect(metrics.directions.weather).toBe('column')
|
expect(metrics.directions.weather).toBe('column')
|
||||||
expect(metrics.directions.gold).toBe('column')
|
expect(metrics.directions.gold).toBe('column')
|
||||||
@@ -207,7 +218,7 @@ test('Today plain-list layout matches the approved responsive geometry', async (
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (width >= 721) {
|
if (width >= 721) {
|
||||||
expect(metrics.content.width).toBeLessThanOrEqual(width >= 1440 ? 900 : 721)
|
expect(metrics.content.width).toBeLessThanOrEqual(width >= 1440 ? 1080 : 721)
|
||||||
expect(Math.abs(metrics.content.left - (metrics.main.left + (metrics.main.width - metrics.content.width) / 2))).toBeLessThanOrEqual(2)
|
expect(Math.abs(metrics.content.left - (metrics.main.left + (metrics.main.width - metrics.content.width) / 2))).toBeLessThanOrEqual(2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,7 +59,8 @@ describe('Today environment integration', () => {
|
|||||||
expect(app).toContain("'today-active': activeView==='today'")
|
expect(app).toContain("'today-active': activeView==='today'")
|
||||||
expect(css).toContain('.shell.today-active .unified-fab{box-shadow:0 8px 18px rgba(174,65,29,.22)}')
|
expect(css).toContain('.shell.today-active .unified-fab{box-shadow:0 8px 18px rgba(174,65,29,.22)}')
|
||||||
expect(css).not.toContain('\n.unified-fab{box-shadow:0 8px 18px rgba(174,65,29,.22)}')
|
expect(css).not.toContain('\n.unified-fab{box-shadow:0 8px 18px rgba(174,65,29,.22)}')
|
||||||
expect(css).toContain('main.today-main{padding-left:max(44px,calc((100% - 900px)/2));padding-right:max(44px,calc((100% - 900px)/2))}')
|
expect(css).toContain('main.today-main{padding-left:max(44px,calc((100% - 1080px)/2));padding-right:max(44px,calc((100% - 1080px)/2))}')
|
||||||
|
expect(css).toContain('.today-environment{grid-template-columns:repeat(3,minmax(0,1fr));')
|
||||||
expect(css).toContain('@media(max-width:930px){main.today-main{padding-left:max(44px,calc((100% - 630px)/2));padding-right:max(44px,calc((100% - 630px)/2))}}')
|
expect(css).toContain('@media(max-width:930px){main.today-main{padding-left:max(44px,calc((100% - 630px)/2));padding-right:max(44px,calc((100% - 630px)/2))}}')
|
||||||
expect(css).toContain('@media(max-width:720.98px){main.today-main{padding-left:29px!important;padding-right:29px!important}')
|
expect(css).toContain('@media(max-width:720.98px){main.today-main{padding-left:29px!important;padding-right:29px!important}')
|
||||||
expect(css).toContain('.today-context{margin:0 0 14px;border-bottom:0}')
|
expect(css).toContain('.today-context{margin:0 0 14px;border-bottom:0}')
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user