|
| 1 | +import { expect, type Page, test } from '@playwright/test' |
| 2 | + |
| 3 | +const ROUTES = ['/notice/', '/admins/', '/users/', '/users/edit/'] as const |
| 4 | +const EDIT_ROUTE = '/users/edit/' |
| 5 | + |
| 6 | +function permutations<T>(items: readonly T[]): T[][] { |
| 7 | + if (items.length <= 1) return [[...items]] |
| 8 | + return items.flatMap((item, index) => |
| 9 | + permutations([...items.slice(0, index), ...items.slice(index + 1)]).map( |
| 10 | + (rest) => [item, ...rest], |
| 11 | + ), |
| 12 | + ) |
| 13 | +} |
| 14 | + |
| 15 | +/** |
| 16 | + * The users list links to the edit page and so prefetches it, which also loads |
| 17 | + * the CSS its client bundle references. Refuse every request to the edit page |
| 18 | + * except its own document, so a page can only get the header CSS from what the |
| 19 | + * server rendered for it. |
| 20 | + */ |
| 21 | +async function blockEditPrefetch(page: Page) { |
| 22 | + await page.route('**/users/edit/**', (route) => { |
| 23 | + if (route.request().resourceType() === 'document') return route.continue() |
| 24 | + return route.abort() |
| 25 | + }) |
| 26 | +} |
| 27 | + |
| 28 | +async function expectHeaderStyled(page: Page, route: string) { |
| 29 | + const header = page.locator('[data-page-title]') |
| 30 | + await expect(header, route).toHaveCount(1) |
| 31 | + |
| 32 | + const applied = await header.evaluate((element) => { |
| 33 | + const read = (target: Element) => { |
| 34 | + const style = getComputedStyle(target) |
| 35 | + return { |
| 36 | + display: style.display, |
| 37 | + justifyContent: style.justifyContent, |
| 38 | + alignItems: style.alignItems, |
| 39 | + marginBottom: style.marginBottom, |
| 40 | + columnGap: style.columnGap, |
| 41 | + rowGap: style.rowGap, |
| 42 | + } |
| 43 | + } |
| 44 | + const group = element.firstElementChild! |
| 45 | + return { header: read(element), group: read(group) } |
| 46 | + }) |
| 47 | + expect(applied.header, `${route} header`).toMatchObject({ |
| 48 | + display: 'flex', |
| 49 | + justifyContent: 'space-between', |
| 50 | + alignItems: 'center', |
| 51 | + marginBottom: '20px', |
| 52 | + }) |
| 53 | + expect(applied.group, `${route} title group`).toMatchObject({ |
| 54 | + display: 'flex', |
| 55 | + alignItems: 'center', |
| 56 | + columnGap: '12px', |
| 57 | + rowGap: '12px', |
| 58 | + }) |
| 59 | + |
| 60 | + const layout = await header.evaluate((element) => { |
| 61 | + const bounds = element.getBoundingClientRect() |
| 62 | + const group = element.firstElementChild!.getBoundingClientRect() |
| 63 | + const right = element.lastElementChild!.getBoundingClientRect() |
| 64 | + return { bounds, group, right, hasRight: element.childElementCount > 1 } |
| 65 | + }) |
| 66 | + expect(layout.group.left, `${route} title group is at the start`).toBe( |
| 67 | + layout.bounds.left, |
| 68 | + ) |
| 69 | + if (layout.hasRight) { |
| 70 | + expect(layout.right.right, `${route} right slot is at the end`).toBe( |
| 71 | + layout.bounds.right, |
| 72 | + ) |
| 73 | + } |
| 74 | +} |
| 75 | + |
| 76 | +/** |
| 77 | + * Every class the header renders must have a rule in a stylesheet the page |
| 78 | + * really loaded (a `<link>` the browser fetched), whatever the files are |
| 79 | + * called. |
| 80 | + */ |
| 81 | +async function expectHeaderCssLoaded(page: Page, route: string) { |
| 82 | + const result = await page.locator('[data-page-title]').evaluate((element) => { |
| 83 | + const classes = [ |
| 84 | + ...element.classList, |
| 85 | + ...element.firstElementChild!.classList, |
| 86 | + ] |
| 87 | + const linked = [...document.styleSheets].filter( |
| 88 | + (sheet) => sheet.href !== null, |
| 89 | + ) |
| 90 | + const collect = (rules: CSSRuleList): string[] => |
| 91 | + [...rules].flatMap((rule) => |
| 92 | + rule instanceof CSSStyleRule |
| 93 | + ? [rule.selectorText] |
| 94 | + : 'cssRules' in rule |
| 95 | + ? collect(rule.cssRules as CSSRuleList) |
| 96 | + : [], |
| 97 | + ) |
| 98 | + const selectors = linked.flatMap((sheet) => collect(sheet.cssRules)) |
| 99 | + return { |
| 100 | + linkedSheets: linked.length, |
| 101 | + missing: classes.filter( |
| 102 | + (name) => |
| 103 | + !selectors.some((selector) => |
| 104 | + selector.includes(`.${CSS.escape(name)}`), |
| 105 | + ), |
| 106 | + ), |
| 107 | + classes: classes.length, |
| 108 | + } |
| 109 | + }) |
| 110 | + expect(result.classes, `${route} header has atomic classes`).toBeGreaterThan( |
| 111 | + 0, |
| 112 | + ) |
| 113 | + expect(result.linkedSheets, `${route} loaded stylesheets`).toBeGreaterThan(0) |
| 114 | + expect(result.missing, `${route} classes without a loaded rule`).toEqual([]) |
| 115 | +} |
| 116 | + |
| 117 | +async function expectRoute(page: Page, route: string) { |
| 118 | + await expectHeaderCssLoaded(page, route) |
| 119 | + await expectHeaderStyled(page, route) |
| 120 | +} |
| 121 | + |
| 122 | +test.describe('shared Devup UI header in the static vinext build', () => { |
| 123 | + for (const route of ROUTES) { |
| 124 | + test(`direct entry and reload: ${route}`, async ({ browser }) => { |
| 125 | + const context = await browser.newContext() |
| 126 | + const page = await context.newPage() |
| 127 | + await blockEditPrefetch(page) |
| 128 | + |
| 129 | + await page.goto(route) |
| 130 | + await expectRoute(page, route) |
| 131 | + |
| 132 | + await page.reload() |
| 133 | + await expectRoute(page, route) |
| 134 | + await context.close() |
| 135 | + }) |
| 136 | + } |
| 137 | + |
| 138 | + for (const order of permutations(ROUTES)) { |
| 139 | + test(`entered in order ${order.join(' -> ')}`, async ({ browser }) => { |
| 140 | + const context = await browser.newContext() |
| 141 | + const page = await context.newPage() |
| 142 | + await blockEditPrefetch(page) |
| 143 | + |
| 144 | + for (const route of order) { |
| 145 | + await page.goto(route) |
| 146 | + await expectRoute(page, route) |
| 147 | + } |
| 148 | + await context.close() |
| 149 | + }) |
| 150 | + } |
| 151 | + |
| 152 | + test('the edit page itself renders the same header', async ({ page }) => { |
| 153 | + await page.goto(EDIT_ROUTE) |
| 154 | + await expect(page.getByRole('textbox', { name: 'name' })).toBeVisible() |
| 155 | + await expectRoute(page, EDIT_ROUTE) |
| 156 | + }) |
| 157 | +}) |
0 commit comments