refactor: RouteLine hover 跟随封装为组件自带能力——自动监听场景内 a[data-comp=course-card]（章 id 取自 href），消费方零接线；演示场景从样例页移入组件页（两 app 同步）；E2E 契约随迁 components 页（站点断言改场景内定位），27/27 绿
This commit is contained in:
cqh963852 committed
1 parent
3c9aaf5faf
commit
061b16cf79
12 files changed
+842
-87
No files matched your search
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"status": "passed",
|
||||
"failedTests": []
|
||||
"status": "failed",
|
||||
"failedTests": [
|
||||
"9bb6bb2ed574bebb3c58-2e1e350328229cbf09f4"
|
||||
]
|
||||
}
|
||||
+369
@@ -0,0 +1,369 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: pages.spec.ts >> RouteLine 规格契约 >> hover 卡片：线与站点跟随浮起（-3px 同步，直线变斜线）
|
||||
- Location: e2e/pages.spec.ts:159:3
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(received).toBe(expected) // Object.is equality
|
||||
|
||||
Expected: "0px -3px"
|
||||
Received: "none"
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- main [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- generic [ref=e5]: <Components />
|
||||
- heading "组件 · 入口载体与状态" [level=1] [ref=e6]
|
||||
- paragraph [ref=e7]: CourseCard（入口）· 票券（状态）· 指派块＋脱靶标记（任务与警示）· 入口画像。线条的形式规格见 02 符号形状，与卡片的实际组合见 04 样例。
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]:
|
||||
- heading "CourseCard卡头三件套＝靶子；hover 拿起播放 GIF，8000ms 翻转；末张＝价值区标记用法" [level=2] [ref=e10]
|
||||
- generic [ref=e11]:
|
||||
- link "快速开始：本地跑起一个可交互的页面" [ref=e13] [cursor=pointer]:
|
||||
- /url: "#ch1"
|
||||
- generic "推荐入口 1" [ref=e14]: ①
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]: 🌐
|
||||
- generic [ref=e17]: 预期结果
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e24]: 快速开始
|
||||
- generic "积木 3/4" [ref=e25]
|
||||
- link "React：用组件拼出一个可维护的界面" [ref=e31] [cursor=pointer]:
|
||||
- /url: "#ch2"
|
||||
- generic "推荐入口 2" [ref=e32]: ②
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]: ⚛️
|
||||
- generic [ref=e35]: 预期结果
|
||||
- generic [ref=e39]:
|
||||
- generic [ref=e42]: React
|
||||
- generic "积木 2/4" [ref=e43]
|
||||
- link "全栈基础：把前端连上真实服务并部署上线" [ref=e49] [cursor=pointer]:
|
||||
- /url: "#ch5"
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: 🔗
|
||||
- generic [ref=e52]: 预期结果
|
||||
- generic [ref=e56]: 全栈基础
|
||||
- link "更多：把示例扩展成自己的第一个完整小站" [ref=e61] [cursor=pointer]:
|
||||
- /url: "#ch4"
|
||||
- generic [ref=e62]:
|
||||
- generic [ref=e63]:
|
||||
- text: 这一步过程就地写清：
|
||||
- mark [ref=e64]: 环境与依赖如何咬合
|
||||
- generic [ref=e65]: 预期结果
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e72]: 更多
|
||||
- generic "积木 0/1" [ref=e73]
|
||||
- generic [ref=e75]:
|
||||
- heading "RouteLine实=先后 虚=相关 点=同族；hover 卡片，线与站点自动跟随（组件自带）" [level=2] [ref=e76]
|
||||
- generic [ref=e77]:
|
||||
- link "快速开始：本地跑起一个可交互的页面" [ref=e79] [cursor=pointer]:
|
||||
- /url: "#ch1"
|
||||
- generic [ref=e80]:
|
||||
- generic [ref=e81]: 🌐
|
||||
- generic [ref=e82]: 预期结果
|
||||
- generic [ref=e86]:
|
||||
- generic [ref=e89]: 快速开始
|
||||
- generic "积木 3/4" [ref=e90]
|
||||
- link "React：用组件拼出一个可维护的界面" [ref=e96] [cursor=pointer]:
|
||||
- /url: "#ch2"
|
||||
- generic [ref=e97]:
|
||||
- generic [ref=e98]: ⚛️
|
||||
- generic [ref=e99]: 预期结果
|
||||
- generic [ref=e103]:
|
||||
- generic [ref=e106]: React
|
||||
- generic "积木 2/4" [ref=e107]
|
||||
- link "全栈基础：把前端连上真实服务并部署上线" [ref=e113] [cursor=pointer]:
|
||||
- /url: "#ch5"
|
||||
- generic [ref=e114]:
|
||||
- generic [ref=e115]: 🔗
|
||||
- generic [ref=e116]: 预期结果
|
||||
- generic [ref=e120]: 全栈基础
|
||||
- generic [ref=e124]:
|
||||
- heading "票券 ＆ 指派学习块票=完成状态；块=位置/预期/场景＋脱靶标记" [level=2] [ref=e125]
|
||||
- generic [ref=e126]:
|
||||
- generic [ref=e128]:
|
||||
- generic [ref=e129]: 🌐
|
||||
- generic [ref=e130]:
|
||||
- text: 快速开始
|
||||
- generic [ref=e131]: No. 001 · 已完成（打孔）
|
||||
- generic [ref=e132]: №01
|
||||
- generic [ref=e134]:
|
||||
- generic [ref=e135]: 🔗
|
||||
- generic [ref=e136]:
|
||||
- text: 全栈基础
|
||||
- generic [ref=e137]: No. 005 · 未开始（无孔）
|
||||
- generic [ref=e138]: №05
|
||||
- generic [ref=e139]:
|
||||
- generic [ref=e140]: 指派学习 · npm
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]: 位置：包管理家族——npm 的坐标与邻居
|
||||
- generic [ref=e147]: 预期：能说清 lockfile 锁住了什么
|
||||
- generic [ref=e148]: 场景：加一个依赖 / 换源重装
|
||||
- generic [ref=e153]:
|
||||
- generic [ref=e154]: 脱靶 · 装了但没跑
|
||||
- paragraph [ref=e155]: 命令成功、页面空白——缺「真机验收」这块积木
|
||||
- generic [ref=e156]:
|
||||
- heading "入口梳理推荐不是强制——无锁" [level=2] [ref=e157]
|
||||
- generic [ref=e158]:
|
||||
- generic [ref=e159]:
|
||||
- generic [ref=e160]:
|
||||
- generic [ref=e161]: 🌱
|
||||
- generic [ref=e162]: 零基础入门
|
||||
- generic [ref=e163]:
|
||||
- generic [ref=e164]: ① 快速开始
|
||||
- generic [ref=e166]:
|
||||
- generic [ref=e167]: →
|
||||
- generic [ref=e168]: React
|
||||
- generic [ref=e169]:
|
||||
- generic [ref=e170]: →
|
||||
- generic [ref=e171]: 更多示例
|
||||
- generic [ref=e172]:
|
||||
- generic [ref=e173]: →
|
||||
- generic [ref=e174]: 全栈基础
|
||||
- paragraph [ref=e175]: 完整链按序走；每步先核对预期再前进。
|
||||
- generic [ref=e176]:
|
||||
- generic [ref=e177]:
|
||||
- generic [ref=e178]: ⚡
|
||||
- generic [ref=e179]: 写过页面的人
|
||||
- generic [ref=e180]:
|
||||
- generic [ref=e181]: ② React
|
||||
- generic [ref=e183]:
|
||||
- generic [ref=e184]: →
|
||||
- generic [ref=e185]: 更多示例
|
||||
- generic [ref=e186]:
|
||||
- generic [ref=e187]: →
|
||||
- generic [ref=e188]: 高级教程
|
||||
- paragraph [ref=e189]: 跳过装环境；从组件拼接进入。
|
||||
- generic [ref=e190]:
|
||||
- generic [ref=e191]:
|
||||
- generic [ref=e192]: 🧠
|
||||
- generic [ref=e193]: 重度 AI 依赖
|
||||
- generic [ref=e194]:
|
||||
- generic [ref=e195]: ③ 高级教程
|
||||
- generic [ref=e197]:
|
||||
- generic [ref=e198]: →
|
||||
- generic [ref=e199]: 全栈基础
|
||||
- paragraph [ref=e200]: 从指挥 agent 做整件事切入，回头补认知基础。
|
||||
- generic [ref=e201]:
|
||||
- text: design-lab · 孟菲斯 × 拟物卡 · stack idealjs ·
|
||||
- link "返回目录" [ref=e202] [cursor=pointer]:
|
||||
- /url: /index.html
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
77 | return { bg: cs.backgroundColor, rot: cs.rotate, inZone: !!card.querySelector('.aspect-video mark'), txt: mark.textContent }
|
||||
78 | })
|
||||
79 | expect(m).not.toBeNull()
|
||||
80 | expect(m!.inZone).toBeTruthy() // 标记骑在相框内的过程文字上
|
||||
81 | expect(m!.bg).toBe('rgb(255, 217, 61)') // 荧光笔 mustard
|
||||
82 | expect(m!.rot).toContain('deg')
|
||||
83 | expect(m!.txt).toContain('咬合')
|
||||
84 | })
|
||||
85 |
|
||||
86 | test('16:9 相框：比例、3px 黑边、内阴影、章节撞色', async ({ page }) => {
|
||||
87 | const zone = page.locator('a[href="#ch1"] .aspect-video').first()
|
||||
88 | const s = await zone.evaluate((el) => {
|
||||
89 | const cs = getComputedStyle(el)
|
||||
90 | const r = el.getBoundingClientRect()
|
||||
91 | return { ratio: r.width / r.height, bw: cs.borderTopWidth, shadow: cs.boxShadow, bg: cs.backgroundColor }
|
||||
92 | })
|
||||
93 | expect(Math.abs(s.ratio - 16 / 9)).toBeLessThan(0.02)
|
||||
94 | expect(s.bw).toBe('3px')
|
||||
95 | expect(s.shadow).toContain('inset')
|
||||
96 | expect(s.bg).toBe('rgb(255, 107, 107)') // ch1 coral 只进相框
|
||||
97 | })
|
||||
98 |
|
||||
99 | test('卡头三件套：▲ + 标题 + 积木点（实心=已学）', async ({ page }) => {
|
||||
100 | const card = page.locator('a[href="#ch2"]').first()
|
||||
101 | const dots = card.locator('span[aria-label^="积木"] i')
|
||||
102 | expect(await dots.count()).toBe(4)
|
||||
103 | const filled = await dots.evaluateAll((ns) => ns.filter((n) => getComputedStyle(n).backgroundColor === 'rgb(17, 17, 17)').length)
|
||||
104 | expect(filled).toBe(2) // ch2 已学 2/4
|
||||
105 | // ▲ 在卡头（相框 ○ 环之后）：用 evaluate 通道断言，规避 toBeVisible 协议偶发崩溃
|
||||
106 | const hasTri = await card.evaluate((el) => !!el.querySelector('.mt-2 svg'))
|
||||
107 | expect(hasTri).toBeTruthy()
|
||||
108 | })
|
||||
109 |
|
||||
110 | test('入口徽章 ①②（推荐起点，非强制）', async ({ page }) => {
|
||||
111 | await expect(page.locator('span[aria-label="推荐入口 1"]')).toBeVisible()
|
||||
112 | await expect(page.locator('span[aria-label="推荐入口 2"]')).toBeVisible()
|
||||
113 | })
|
||||
114 | })
|
||||
115 |
|
||||
116 | test.describe('RouteLine 规格契约', () => {
|
||||
117 | test.beforeEach(async ({ page }) => await page.goto('/components.html'))
|
||||
118 |
|
||||
119 | test('线形：实线先后 2.5px 无 dash；点线同族 0.1/6 圆帽', async ({ page }) => {
|
||||
120 | const specs = await page.locator('svg path').evaluateAll((ns) =>
|
||||
121 | ns.map((n) => ({ w: n.getAttribute('stroke-width'), dash: n.getAttribute('stroke-dasharray'), cap: n.getAttribute('stroke-linecap') })),
|
||||
122 | )
|
||||
123 | expect(specs.some((s) => s.w === '2.5' && !s.dash)).toBeTruthy()
|
||||
124 | expect(specs.some((s) => s.dash === '0.1 6' && s.cap === 'round')).toBeTruthy()
|
||||
125 | })
|
||||
126 |
|
||||
127 | test('虚线相关 4:2（symbols 页线形样张）', async ({ page }) => {
|
||||
128 | await page.goto('/symbols.html')
|
||||
129 | const specs = await page.locator('svg path').evaluateAll((ns) => ns.map((n) => n.getAttribute('stroke-dasharray')))
|
||||
130 | expect(specs).toContain('4 2')
|
||||
131 | })
|
||||
132 |
|
||||
133 | test('站点 r6 半嵌：源/目标圆心都骑卡描边（各半在卡上），线层在卡之上', async ({ page }) => {
|
||||
134 | const r = await page.evaluate(() => {
|
||||
135 | const svg = [...document.querySelectorAll('svg')].find((s) => s.getAttribute('width') === '1160')
|
||||
136 | if (!svg) return null
|
||||
137 | const wrap = svg.parentElement
|
||||
138 | const wb = wrap.getBoundingClientRect()
|
||||
139 | const c1 = wrap.querySelector('a[href="#ch1"]').getBoundingClientRect()
|
||||
140 | const c2 = wrap.querySelector('a[href="#ch2"]').getBoundingClientRect()
|
||||
141 | const stations = [...svg.querySelectorAll('circle')]
|
||||
142 | .map((n) => ({ cx: +(n.getAttribute('cx') ?? 0), r: +(n.getAttribute('r') ?? 0) }))
|
||||
143 | .filter((s) => s.r === 6) // 排除散落 ○ 预期环
|
||||
144 | return {
|
||||
145 | n: stations.length,
|
||||
146 | cxs: stations.map((s) => s.cx),
|
||||
147 | c1Right: c1.x - wb.x + c1.width, // 卡右描边（不接阴影）
|
||||
148 | c2Border: c2.x - wb.x,
|
||||
149 | z: getComputedStyle(svg).zIndex,
|
||||
150 | }
|
||||
151 | })
|
||||
152 | expect(r).not.toBeNull()
|
||||
153 | expect(r!.n).toBeGreaterThanOrEqual(4)
|
||||
154 | expect(r!.cxs.some((cx) => Math.abs(cx - r!.c1Right) <= 3), `源站点圆心应骑卡右描边 x≈${r!.c1Right}`).toBeTruthy()
|
||||
155 | expect(r!.cxs.some((cx) => Math.abs(cx - r!.c2Border) <= 3), `目标站点圆心应骑左描边 x≈${r!.c2Border}`).toBeTruthy()
|
||||
156 | expect(r!.z).toBe('10') // 线层置于卡之上——否则半嵌站点被卡盖住
|
||||
157 | })
|
||||
158 |
|
||||
159 | test('hover 卡片：线与站点跟随浮起（-3px 同步，直线变斜线）', async ({ page }) => {
|
||||
160 | const get = () =>
|
||||
161 | page.evaluate(() => {
|
||||
162 | const svg = [...document.querySelectorAll('svg')].find((s) => s.getAttribute('width') === '1160')
|
||||
163 | return {
|
||||
164 | stations: [...svg.querySelectorAll('g[style]')].map((g) => (g as HTMLElement).style.transform),
|
||||
165 | d25: [...svg.querySelectorAll('path')].map((el) => el.getAttribute('d') || '').find((d) => d.startsWith('M 630')),
|
||||
166 | cardTranslate: getComputedStyle(document.querySelector('a[data-comp="course-card"][href="#ch2"]')).translate,
|
||||
167 | }
|
||||
168 | })
|
||||
169 | const before = await get()
|
||||
170 | await page.locator('div.absolute.left-\\[380px\\]').hover()
|
||||
171 | await page.waitForTimeout(250)
|
||||
172 | const after = await get()
|
||||
173 | expect(before.d25).toBe('M 630 108 L 700 108') // 静置：几何水平（L 结构可平滑插值）
|
||||
174 | expect(after.d25).toBe('M 630 105 L 700 108') // hover 卡2：源端随站点抬升，直线变斜线
|
||||
175 | expect(before.stations.every((t) => t === 'translateY(0px)')).toBeTruthy()
|
||||
176 | expect(after.stations.filter((t) => t === 'translateY(-3px)').length).toBe(2) // 源+目标站点跟随
|
||||
> 177 | expect(after.cardTranslate).toBe('0px -3px') // 卡片本体同步浮起
|
||||
| ^ Error: expect(received).toBe(expected) // Object.is equality
|
||||
178 | })
|
||||
179 |
|
||||
180 | test('实线端点落在水平端口（M x y H 起、H x 止）', async ({ page }) => {
|
||||
181 | const d = await page.locator('svg path[stroke-width="2.5"]').first().getAttribute('d')
|
||||
182 | expect(d).toMatch(/^M [\d.]+ [\d.]+ H/)
|
||||
183 | expect(d).toMatch(/H [\d.]+$/)
|
||||
184 | })
|
||||
185 | })
|
||||
186 |
|
||||
187 | test.describe('散落形状摆放契约', () => {
|
||||
188 | test.beforeEach(async ({ page }) => await page.goto('/shelf.html'))
|
||||
189 |
|
||||
190 | test('卡片附近空当＋随机：不压卡、都在卡附近、不出容器、旋转各异', async ({ page }) => {
|
||||
191 | const r = await page.evaluate(() => {
|
||||
192 | const layer = document.querySelector('[data-scatter-layer]') as HTMLElement | null
|
||||
193 | if (!layer) return null
|
||||
194 | const host = layer.parentElement as HTMLElement
|
||||
195 | const hb = host.getBoundingClientRect()
|
||||
196 | const shapes = [...layer.querySelectorAll('[data-scatter]')] as HTMLElement[]
|
||||
197 | const comps = [...host.querySelectorAll('[data-comp]')].map((el) => el.getBoundingClientRect())
|
||||
198 | const hit = (a: DOMRect, b: DOMRect) => a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
|
||||
199 | return {
|
||||
200 | n: shapes.length,
|
||||
201 | inHost: shapes.every((s) => {
|
||||
202 | const r = s.getBoundingClientRect()
|
||||
203 | return r.left >= hb.left - 1 && r.right <= hb.right + 1 && r.top >= hb.top - 1 && r.bottom <= hb.bottom + 1
|
||||
204 | }),
|
||||
205 | onComp: shapes.filter((s) => comps.some((c) => hit(s.getBoundingClientRect(), c))).length,
|
||||
206 | nearAll: shapes.every((s) => {
|
||||
207 | const r = s.getBoundingClientRect()
|
||||
208 | const cx = (r.left + r.right) / 2
|
||||
209 | const cy = (r.top + r.bottom) / 2
|
||||
210 | return comps.some((c) => cx >= c.left - 200 && cx <= c.right + 200 && cy >= c.top - 200 && cy <= c.bottom + 200)
|
||||
211 | }),
|
||||
212 | transforms: shapes.map((s) => s.style.transform),
|
||||
213 | }
|
||||
214 | })
|
||||
215 | expect(r).not.toBeNull()
|
||||
216 | expect(r!.n).toBeGreaterThanOrEqual(5)
|
||||
217 | expect(r!.inHost).toBeTruthy() // 不出场景容器
|
||||
218 | expect(r!.onComp).toBe(0) // 空当＝不压任何内容盒
|
||||
219 | expect(r!.nearAll).toBeTruthy() // 只散在卡片附近，不胡乱撒
|
||||
220 | expect(new Set(r!.transforms).size).toBe(r!.n) // 落点/旋转各不相同
|
||||
221 | r!.transforms.forEach((t) => expect(t).toMatch(/^translate\(-50%, -50%\) rotate\(-?\d+deg\)$/))
|
||||
222 | })
|
||||
223 | })
|
||||
224 |
|
||||
225 | test.describe('价值区荧光标记契约', () => {
|
||||
226 | test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
|
||||
227 |
|
||||
228 | test('荧光笔标记文字：mustard 底、无描边、微斜——是标记不是形状', async ({ page }) => {
|
||||
229 | const s = await page.evaluate(() => {
|
||||
230 | const m = document.querySelector('mark')
|
||||
231 | if (!m) return null
|
||||
232 | const cs = getComputedStyle(m)
|
||||
233 | const r = m.getBoundingClientRect()
|
||||
234 | return { bg: cs.backgroundColor, bw: cs.borderTopWidth, rot: cs.rotate, h: r.height }
|
||||
235 | })
|
||||
236 | expect(s).not.toBeNull()
|
||||
237 | expect(s!.bg).toBe('rgb(255, 217, 61)') // clash2a mustard——荧光笔
|
||||
238 | expect(s!.bw).toBe('0px') // 标记无描边：2px ink 是形状的规则，标记划在文字上
|
||||
239 | expect(s!.rot).toContain('deg') // 微斜（rotate 属性生效，手划手感）
|
||||
240 | expect(s!.h).toBeGreaterThan(14) // 骑在文字上，有字高
|
||||
241 | })
|
||||
242 | })
|
||||
243 |
|
||||
244 | test.describe('票券规格契约', () => {
|
||||
245 | test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
|
||||
246 |
|
||||
247 | test('裁切式：overflow hidden + 单一 2px 描边 + 头部色块无独立边框', async ({ page }) => {
|
||||
248 | const done = page.locator('.ticket-pk').first()
|
||||
249 | await expect(done).toBeVisible()
|
||||
250 | const s = await done.evaluate((el) => {
|
||||
251 | const cs = getComputedStyle(el)
|
||||
252 | const head = el.firstElementChild as HTMLElement
|
||||
253 | const hcs = getComputedStyle(head)
|
||||
254 | return { ov: cs.overflow, bw: cs.borderTopWidth, headBorder: hcs.borderTopWidth, headBg: hcs.backgroundColor }
|
||||
255 | })
|
||||
256 | expect(s.ov).toBe('hidden')
|
||||
257 | expect(s.bw).toBe('2px')
|
||||
258 | expect(s.headBorder).toBe('0px') // 头部色块永不自带描边
|
||||
259 | expect(s.headBg).not.toBe('rgba(0, 0, 0, 0)')
|
||||
260 | })
|
||||
261 |
|
||||
262 | test('打孔三件套：mask 差集挖空 + 孔缘弧线 + 阴影跟随轮廓', async ({ page }) => {
|
||||
263 | const done = page.locator('.ticket-pk').first()
|
||||
264 | const mask = await done.evaluate((el) => {
|
||||
265 | const cs = getComputedStyle(el)
|
||||
266 | return cs.maskImage || cs.webkitMaskImage || 'none'
|
||||
267 | })
|
||||
268 | expect(mask).toContain('radial-gradient')
|
||||
269 | expect(mask.split('radial-gradient').length - 1).toBe(2) // 上下各一孔
|
||||
270 | // 阴影在 wrapper 以 drop-shadow 生效——跟随挖空后的 alpha 轮廓（box-shadow 会被 mask 裁掉）
|
||||
271 | const f = await done.evaluate((el) => {
|
||||
272 | const w = el.parentElement as HTMLElement
|
||||
273 | return { filter: getComputedStyle(w).filter, innerShadow: getComputedStyle(el).boxShadow }
|
||||
274 | })
|
||||
275 | expect(f.filter).toBe('drop-shadow(rgb(17, 17, 17) 5px 5px 0px)')
|
||||
276 | expect(f.innerShadow).toBe('none')
|
||||
277 | // 孔缘弧线：2px ink 半圆环，clip 只留票内一半，圆心骑撕线两端（hole-x=172.75）
|
||||
```
|
||||
+369
@@ -0,0 +1,369 @@
|
||||
# Instructions
|
||||
|
||||
- Following Playwright test failed.
|
||||
- Explain why, be concise, respect Playwright best practices.
|
||||
- Provide a snippet of code with the fix, if possible.
|
||||
|
||||
# Test info
|
||||
|
||||
- Name: pages.spec.ts >> RouteLine 规格契约 >> hover 卡片：线与站点跟随浮起（-3px 同步，直线变斜线）
|
||||
- Location: e2e/pages.spec.ts:159:3
|
||||
|
||||
# Error details
|
||||
|
||||
```
|
||||
Error: expect(received).toBe(expected) // Object.is equality
|
||||
|
||||
Expected: "0px -3px"
|
||||
Received: "none"
|
||||
```
|
||||
|
||||
# Page snapshot
|
||||
|
||||
```yaml
|
||||
- main [ref=e3]:
|
||||
- generic [ref=e4]:
|
||||
- generic [ref=e5]: <Components />
|
||||
- heading "组件 · 入口载体与状态" [level=1] [ref=e6]
|
||||
- paragraph [ref=e7]: CourseCard（入口）· 票券（状态）· 指派块＋脱靶标记（任务与警示）· 入口画像。线条的形式规格见 02 符号形状，与卡片的实际组合见 04 样例。
|
||||
- generic [ref=e8]:
|
||||
- generic [ref=e9]:
|
||||
- heading "CourseCard卡头三件套＝靶子；hover 拿起播放 GIF，8000ms 翻转；末张＝价值区标记用法" [level=2] [ref=e10]
|
||||
- generic [ref=e11]:
|
||||
- link "快速开始：本地跑起一个可交互的页面" [ref=e13] [cursor=pointer]:
|
||||
- /url: "#ch1"
|
||||
- generic "推荐入口 1" [ref=e14]: ①
|
||||
- generic [ref=e15]:
|
||||
- generic [ref=e16]: 🌐
|
||||
- generic [ref=e17]: 预期结果
|
||||
- generic [ref=e21]:
|
||||
- generic [ref=e24]: 快速开始
|
||||
- generic "积木 3/4" [ref=e25]
|
||||
- link "React：用组件拼出一个可维护的界面" [ref=e31] [cursor=pointer]:
|
||||
- /url: "#ch2"
|
||||
- generic "推荐入口 2" [ref=e32]: ②
|
||||
- generic [ref=e33]:
|
||||
- generic [ref=e34]: ⚛️
|
||||
- generic [ref=e35]: 预期结果
|
||||
- generic [ref=e39]:
|
||||
- generic [ref=e42]: React
|
||||
- generic "积木 2/4" [ref=e43]
|
||||
- link "全栈基础：把前端连上真实服务并部署上线" [ref=e49] [cursor=pointer]:
|
||||
- /url: "#ch5"
|
||||
- generic [ref=e50]:
|
||||
- generic [ref=e51]: 🔗
|
||||
- generic [ref=e52]: 预期结果
|
||||
- generic [ref=e56]: 全栈基础
|
||||
- link "更多：把示例扩展成自己的第一个完整小站" [ref=e61] [cursor=pointer]:
|
||||
- /url: "#ch4"
|
||||
- generic [ref=e62]:
|
||||
- generic [ref=e63]:
|
||||
- text: 这一步过程就地写清：
|
||||
- mark [ref=e64]: 环境与依赖如何咬合
|
||||
- generic [ref=e65]: 预期结果
|
||||
- generic [ref=e69]:
|
||||
- generic [ref=e72]: 更多
|
||||
- generic "积木 0/1" [ref=e73]
|
||||
- generic [ref=e75]:
|
||||
- heading "RouteLine实=先后 虚=相关 点=同族；hover 卡片，线与站点自动跟随（组件自带）" [level=2] [ref=e76]
|
||||
- generic [ref=e77]:
|
||||
- link "快速开始：本地跑起一个可交互的页面" [ref=e79] [cursor=pointer]:
|
||||
- /url: "#ch1"
|
||||
- generic [ref=e80]:
|
||||
- generic [ref=e81]: 🌐
|
||||
- generic [ref=e82]: 预期结果
|
||||
- generic [ref=e86]:
|
||||
- generic [ref=e89]: 快速开始
|
||||
- generic "积木 3/4" [ref=e90]
|
||||
- link "React：用组件拼出一个可维护的界面" [ref=e96] [cursor=pointer]:
|
||||
- /url: "#ch2"
|
||||
- generic [ref=e97]:
|
||||
- generic [ref=e98]: ⚛️
|
||||
- generic [ref=e99]: 预期结果
|
||||
- generic [ref=e103]:
|
||||
- generic [ref=e106]: React
|
||||
- generic "积木 2/4" [ref=e107]
|
||||
- link "全栈基础：把前端连上真实服务并部署上线" [ref=e113] [cursor=pointer]:
|
||||
- /url: "#ch5"
|
||||
- generic [ref=e114]:
|
||||
- generic [ref=e115]: 🔗
|
||||
- generic [ref=e116]: 预期结果
|
||||
- generic [ref=e120]: 全栈基础
|
||||
- generic [ref=e124]:
|
||||
- heading "票券 ＆ 指派学习块票=完成状态；块=位置/预期/场景＋脱靶标记" [level=2] [ref=e125]
|
||||
- generic [ref=e126]:
|
||||
- generic [ref=e128]:
|
||||
- generic [ref=e129]: 🌐
|
||||
- generic [ref=e130]:
|
||||
- text: 快速开始
|
||||
- generic [ref=e131]: No. 001 · 已完成（打孔）
|
||||
- generic [ref=e132]: №01
|
||||
- generic [ref=e134]:
|
||||
- generic [ref=e135]: 🔗
|
||||
- generic [ref=e136]:
|
||||
- text: 全栈基础
|
||||
- generic [ref=e137]: No. 005 · 未开始（无孔）
|
||||
- generic [ref=e138]: №05
|
||||
- generic [ref=e139]:
|
||||
- generic [ref=e140]: 指派学习 · npm
|
||||
- generic [ref=e145]:
|
||||
- generic [ref=e146]: 位置：包管理家族——npm 的坐标与邻居
|
||||
- generic [ref=e147]: 预期：能说清 lockfile 锁住了什么
|
||||
- generic [ref=e148]: 场景：加一个依赖 / 换源重装
|
||||
- generic [ref=e153]:
|
||||
- generic [ref=e154]: 脱靶 · 装了但没跑
|
||||
- paragraph [ref=e155]: 命令成功、页面空白——缺「真机验收」这块积木
|
||||
- generic [ref=e156]:
|
||||
- heading "入口梳理推荐不是强制——无锁" [level=2] [ref=e157]
|
||||
- generic [ref=e158]:
|
||||
- generic [ref=e159]:
|
||||
- generic [ref=e160]:
|
||||
- generic [ref=e161]: 🌱
|
||||
- generic [ref=e162]: 零基础入门
|
||||
- generic [ref=e163]:
|
||||
- generic [ref=e164]: ① 快速开始
|
||||
- generic [ref=e166]:
|
||||
- generic [ref=e167]: →
|
||||
- generic [ref=e168]: React
|
||||
- generic [ref=e169]:
|
||||
- generic [ref=e170]: →
|
||||
- generic [ref=e171]: 更多示例
|
||||
- generic [ref=e172]:
|
||||
- generic [ref=e173]: →
|
||||
- generic [ref=e174]: 全栈基础
|
||||
- paragraph [ref=e175]: 完整链按序走；每步先核对预期再前进。
|
||||
- generic [ref=e176]:
|
||||
- generic [ref=e177]:
|
||||
- generic [ref=e178]: ⚡
|
||||
- generic [ref=e179]: 写过页面的人
|
||||
- generic [ref=e180]:
|
||||
- generic [ref=e181]: ② React
|
||||
- generic [ref=e183]:
|
||||
- generic [ref=e184]: →
|
||||
- generic [ref=e185]: 更多示例
|
||||
- generic [ref=e186]:
|
||||
- generic [ref=e187]: →
|
||||
- generic [ref=e188]: 高级教程
|
||||
- paragraph [ref=e189]: 跳过装环境；从组件拼接进入。
|
||||
- generic [ref=e190]:
|
||||
- generic [ref=e191]:
|
||||
- generic [ref=e192]: 🧠
|
||||
- generic [ref=e193]: 重度 AI 依赖
|
||||
- generic [ref=e194]:
|
||||
- generic [ref=e195]: ③ 高级教程
|
||||
- generic [ref=e197]:
|
||||
- generic [ref=e198]: →
|
||||
- generic [ref=e199]: 全栈基础
|
||||
- paragraph [ref=e200]: 从指挥 agent 做整件事切入，回头补认知基础。
|
||||
- generic [ref=e201]:
|
||||
- text: design-lab · 孟菲斯 × 拟物卡 · stack idealjs ·
|
||||
- link "返回目录" [ref=e202] [cursor=pointer]:
|
||||
- /url: /index.html
|
||||
```
|
||||
|
||||
# Test source
|
||||
|
||||
```ts
|
||||
77 | return { bg: cs.backgroundColor, rot: cs.rotate, inZone: !!card.querySelector('.aspect-video mark'), txt: mark.textContent }
|
||||
78 | })
|
||||
79 | expect(m).not.toBeNull()
|
||||
80 | expect(m!.inZone).toBeTruthy() // 标记骑在相框内的过程文字上
|
||||
81 | expect(m!.bg).toBe('rgb(255, 217, 61)') // 荧光笔 mustard
|
||||
82 | expect(m!.rot).toContain('deg')
|
||||
83 | expect(m!.txt).toContain('咬合')
|
||||
84 | })
|
||||
85 |
|
||||
86 | test('16:9 相框：比例、3px 黑边、内阴影、章节撞色', async ({ page }) => {
|
||||
87 | const zone = page.locator('a[href="#ch1"] .aspect-video').first()
|
||||
88 | const s = await zone.evaluate((el) => {
|
||||
89 | const cs = getComputedStyle(el)
|
||||
90 | const r = el.getBoundingClientRect()
|
||||
91 | return { ratio: r.width / r.height, bw: cs.borderTopWidth, shadow: cs.boxShadow, bg: cs.backgroundColor }
|
||||
92 | })
|
||||
93 | expect(Math.abs(s.ratio - 16 / 9)).toBeLessThan(0.02)
|
||||
94 | expect(s.bw).toBe('3px')
|
||||
95 | expect(s.shadow).toContain('inset')
|
||||
96 | expect(s.bg).toBe('rgb(255, 107, 107)') // ch1 coral 只进相框
|
||||
97 | })
|
||||
98 |
|
||||
99 | test('卡头三件套：▲ + 标题 + 积木点（实心=已学）', async ({ page }) => {
|
||||
100 | const card = page.locator('a[href="#ch2"]').first()
|
||||
101 | const dots = card.locator('span[aria-label^="积木"] i')
|
||||
102 | expect(await dots.count()).toBe(4)
|
||||
103 | const filled = await dots.evaluateAll((ns) => ns.filter((n) => getComputedStyle(n).backgroundColor === 'rgb(17, 17, 17)').length)
|
||||
104 | expect(filled).toBe(2) // ch2 已学 2/4
|
||||
105 | // ▲ 在卡头（相框 ○ 环之后）：用 evaluate 通道断言，规避 toBeVisible 协议偶发崩溃
|
||||
106 | const hasTri = await card.evaluate((el) => !!el.querySelector('.mt-2 svg'))
|
||||
107 | expect(hasTri).toBeTruthy()
|
||||
108 | })
|
||||
109 |
|
||||
110 | test('入口徽章 ①②（推荐起点，非强制）', async ({ page }) => {
|
||||
111 | await expect(page.locator('span[aria-label="推荐入口 1"]')).toBeVisible()
|
||||
112 | await expect(page.locator('span[aria-label="推荐入口 2"]')).toBeVisible()
|
||||
113 | })
|
||||
114 | })
|
||||
115 |
|
||||
116 | test.describe('RouteLine 规格契约', () => {
|
||||
117 | test.beforeEach(async ({ page }) => await page.goto('/components.html'))
|
||||
118 |
|
||||
119 | test('线形：实线先后 2.5px 无 dash；点线同族 0.1/6 圆帽', async ({ page }) => {
|
||||
120 | const specs = await page.locator('svg path').evaluateAll((ns) =>
|
||||
121 | ns.map((n) => ({ w: n.getAttribute('stroke-width'), dash: n.getAttribute('stroke-dasharray'), cap: n.getAttribute('stroke-linecap') })),
|
||||
122 | )
|
||||
123 | expect(specs.some((s) => s.w === '2.5' && !s.dash)).toBeTruthy()
|
||||
124 | expect(specs.some((s) => s.dash === '0.1 6' && s.cap === 'round')).toBeTruthy()
|
||||
125 | })
|
||||
126 |
|
||||
127 | test('虚线相关 4:2（symbols 页线形样张）', async ({ page }) => {
|
||||
128 | await page.goto('/symbols.html')
|
||||
129 | const specs = await page.locator('svg path').evaluateAll((ns) => ns.map((n) => n.getAttribute('stroke-dasharray')))
|
||||
130 | expect(specs).toContain('4 2')
|
||||
131 | })
|
||||
132 |
|
||||
133 | test('站点 r6 半嵌：源/目标圆心都骑卡描边（各半在卡上），线层在卡之上', async ({ page }) => {
|
||||
134 | const r = await page.evaluate(() => {
|
||||
135 | const svg = [...document.querySelectorAll('svg')].find((s) => s.getAttribute('width') === '1160')
|
||||
136 | if (!svg) return null
|
||||
137 | const wrap = svg.parentElement
|
||||
138 | const wb = wrap.getBoundingClientRect()
|
||||
139 | const c1 = wrap.querySelector('a[href="#ch1"]').getBoundingClientRect()
|
||||
140 | const c2 = wrap.querySelector('a[href="#ch2"]').getBoundingClientRect()
|
||||
141 | const stations = [...svg.querySelectorAll('circle')]
|
||||
142 | .map((n) => ({ cx: +(n.getAttribute('cx') ?? 0), r: +(n.getAttribute('r') ?? 0) }))
|
||||
143 | .filter((s) => s.r === 6) // 排除散落 ○ 预期环
|
||||
144 | return {
|
||||
145 | n: stations.length,
|
||||
146 | cxs: stations.map((s) => s.cx),
|
||||
147 | c1Right: c1.x - wb.x + c1.width, // 卡右描边（不接阴影）
|
||||
148 | c2Border: c2.x - wb.x,
|
||||
149 | z: getComputedStyle(svg).zIndex,
|
||||
150 | }
|
||||
151 | })
|
||||
152 | expect(r).not.toBeNull()
|
||||
153 | expect(r!.n).toBeGreaterThanOrEqual(4)
|
||||
154 | expect(r!.cxs.some((cx) => Math.abs(cx - r!.c1Right) <= 3), `源站点圆心应骑卡右描边 x≈${r!.c1Right}`).toBeTruthy()
|
||||
155 | expect(r!.cxs.some((cx) => Math.abs(cx - r!.c2Border) <= 3), `目标站点圆心应骑左描边 x≈${r!.c2Border}`).toBeTruthy()
|
||||
156 | expect(r!.z).toBe('10') // 线层置于卡之上——否则半嵌站点被卡盖住
|
||||
157 | })
|
||||
158 |
|
||||
159 | test('hover 卡片：线与站点跟随浮起（-3px 同步，直线变斜线）', async ({ page }) => {
|
||||
160 | const get = () =>
|
||||
161 | page.evaluate(() => {
|
||||
162 | const svg = [...document.querySelectorAll('svg')].find((s) => s.getAttribute('width') === '1160')
|
||||
163 | return {
|
||||
164 | stations: [...svg.querySelectorAll('g[style]')].map((g) => (g as HTMLElement).style.transform),
|
||||
165 | d25: [...svg.querySelectorAll('path')].map((el) => el.getAttribute('d') || '').find((d) => d.startsWith('M 630')),
|
||||
166 | cardTranslate: getComputedStyle(document.querySelector('a[data-comp="course-card"][href="#ch2"]')).translate,
|
||||
167 | }
|
||||
168 | })
|
||||
169 | const before = await get()
|
||||
170 | await page.locator('div.absolute.left-\\[380px\\]').hover()
|
||||
171 | await page.waitForTimeout(250)
|
||||
172 | const after = await get()
|
||||
173 | expect(before.d25).toBe('M 630 108 L 700 108') // 静置：几何水平（L 结构可平滑插值）
|
||||
174 | expect(after.d25).toBe('M 630 105 L 700 108') // hover 卡2：源端随站点抬升，直线变斜线
|
||||
175 | expect(before.stations.every((t) => t === 'translateY(0px)')).toBeTruthy()
|
||||
176 | expect(after.stations.filter((t) => t === 'translateY(-3px)').length).toBe(2) // 源+目标站点跟随
|
||||
> 177 | expect(after.cardTranslate).toBe('0px -3px') // 卡片本体同步浮起
|
||||
| ^ Error: expect(received).toBe(expected) // Object.is equality
|
||||
178 | })
|
||||
179 |
|
||||
180 | test('实线端点落在水平端口（M x y H 起、H x 止）', async ({ page }) => {
|
||||
181 | const d = await page.locator('svg path[stroke-width="2.5"]').first().getAttribute('d')
|
||||
182 | expect(d).toMatch(/^M [\d.]+ [\d.]+ H/)
|
||||
183 | expect(d).toMatch(/H [\d.]+$/)
|
||||
184 | })
|
||||
185 | })
|
||||
186 |
|
||||
187 | test.describe('散落形状摆放契约', () => {
|
||||
188 | test.beforeEach(async ({ page }) => await page.goto('/shelf.html'))
|
||||
189 |
|
||||
190 | test('卡片附近空当＋随机：不压卡、都在卡附近、不出容器、旋转各异', async ({ page }) => {
|
||||
191 | const r = await page.evaluate(() => {
|
||||
192 | const layer = document.querySelector('[data-scatter-layer]') as HTMLElement | null
|
||||
193 | if (!layer) return null
|
||||
194 | const host = layer.parentElement as HTMLElement
|
||||
195 | const hb = host.getBoundingClientRect()
|
||||
196 | const shapes = [...layer.querySelectorAll('[data-scatter]')] as HTMLElement[]
|
||||
197 | const comps = [...host.querySelectorAll('[data-comp]')].map((el) => el.getBoundingClientRect())
|
||||
198 | const hit = (a: DOMRect, b: DOMRect) => a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
|
||||
199 | return {
|
||||
200 | n: shapes.length,
|
||||
201 | inHost: shapes.every((s) => {
|
||||
202 | const r = s.getBoundingClientRect()
|
||||
203 | return r.left >= hb.left - 1 && r.right <= hb.right + 1 && r.top >= hb.top - 1 && r.bottom <= hb.bottom + 1
|
||||
204 | }),
|
||||
205 | onComp: shapes.filter((s) => comps.some((c) => hit(s.getBoundingClientRect(), c))).length,
|
||||
206 | nearAll: shapes.every((s) => {
|
||||
207 | const r = s.getBoundingClientRect()
|
||||
208 | const cx = (r.left + r.right) / 2
|
||||
209 | const cy = (r.top + r.bottom) / 2
|
||||
210 | return comps.some((c) => cx >= c.left - 200 && cx <= c.right + 200 && cy >= c.top - 200 && cy <= c.bottom + 200)
|
||||
211 | }),
|
||||
212 | transforms: shapes.map((s) => s.style.transform),
|
||||
213 | }
|
||||
214 | })
|
||||
215 | expect(r).not.toBeNull()
|
||||
216 | expect(r!.n).toBeGreaterThanOrEqual(5)
|
||||
217 | expect(r!.inHost).toBeTruthy() // 不出场景容器
|
||||
218 | expect(r!.onComp).toBe(0) // 空当＝不压任何内容盒
|
||||
219 | expect(r!.nearAll).toBeTruthy() // 只散在卡片附近，不胡乱撒
|
||||
220 | expect(new Set(r!.transforms).size).toBe(r!.n) // 落点/旋转各不相同
|
||||
221 | r!.transforms.forEach((t) => expect(t).toMatch(/^translate\(-50%, -50%\) rotate\(-?\d+deg\)$/))
|
||||
222 | })
|
||||
223 | })
|
||||
224 |
|
||||
225 | test.describe('价值区荧光标记契约', () => {
|
||||
226 | test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
|
||||
227 |
|
||||
228 | test('荧光笔标记文字：mustard 底、无描边、微斜——是标记不是形状', async ({ page }) => {
|
||||
229 | const s = await page.evaluate(() => {
|
||||
230 | const m = document.querySelector('mark')
|
||||
231 | if (!m) return null
|
||||
232 | const cs = getComputedStyle(m)
|
||||
233 | const r = m.getBoundingClientRect()
|
||||
234 | return { bg: cs.backgroundColor, bw: cs.borderTopWidth, rot: cs.rotate, h: r.height }
|
||||
235 | })
|
||||
236 | expect(s).not.toBeNull()
|
||||
237 | expect(s!.bg).toBe('rgb(255, 217, 61)') // clash2a mustard——荧光笔
|
||||
238 | expect(s!.bw).toBe('0px') // 标记无描边：2px ink 是形状的规则，标记划在文字上
|
||||
239 | expect(s!.rot).toContain('deg') // 微斜（rotate 属性生效，手划手感）
|
||||
240 | expect(s!.h).toBeGreaterThan(14) // 骑在文字上，有字高
|
||||
241 | })
|
||||
242 | })
|
||||
243 |
|
||||
244 | test.describe('票券规格契约', () => {
|
||||
245 | test.beforeEach(async ({ page }) => await page.goto('/symbols.html'))
|
||||
246 |
|
||||
247 | test('裁切式：overflow hidden + 单一 2px 描边 + 头部色块无独立边框', async ({ page }) => {
|
||||
248 | const done = page.locator('.ticket-pk').first()
|
||||
249 | await expect(done).toBeVisible()
|
||||
250 | const s = await done.evaluate((el) => {
|
||||
251 | const cs = getComputedStyle(el)
|
||||
252 | const head = el.firstElementChild as HTMLElement
|
||||
253 | const hcs = getComputedStyle(head)
|
||||
254 | return { ov: cs.overflow, bw: cs.borderTopWidth, headBorder: hcs.borderTopWidth, headBg: hcs.backgroundColor }
|
||||
255 | })
|
||||
256 | expect(s.ov).toBe('hidden')
|
||||
257 | expect(s.bw).toBe('2px')
|
||||
258 | expect(s.headBorder).toBe('0px') // 头部色块永不自带描边
|
||||
259 | expect(s.headBg).not.toBe('rgba(0, 0, 0, 0)')
|
||||
260 | })
|
||||
261 |
|
||||
262 | test('打孔三件套：mask 差集挖空 + 孔缘弧线 + 阴影跟随轮廓', async ({ page }) => {
|
||||
263 | const done = page.locator('.ticket-pk').first()
|
||||
264 | const mask = await done.evaluate((el) => {
|
||||
265 | const cs = getComputedStyle(el)
|
||||
266 | return cs.maskImage || cs.webkitMaskImage || 'none'
|
||||
267 | })
|
||||
268 | expect(mask).toContain('radial-gradient')
|
||||
269 | expect(mask.split('radial-gradient').length - 1).toBe(2) // 上下各一孔
|
||||
270 | // 阴影在 wrapper 以 drop-shadow 生效——跟随挖空后的 alpha 轮廓（box-shadow 会被 mask 裁掉）
|
||||
271 | const f = await done.evaluate((el) => {
|
||||
272 | const w = el.parentElement as HTMLElement
|
||||
273 | return { filter: getComputedStyle(w).filter, innerShadow: getComputedStyle(el).boxShadow }
|
||||
274 | })
|
||||
275 | expect(f.filter).toBe('drop-shadow(rgb(17, 17, 17) 5px 5px 0px)')
|
||||
276 | expect(f.innerShadow).toBe('none')
|
||||
277 | // 孔缘弧线：2px ink 半圆环，clip 只留票内一半，圆心骑撕线两端（hole-x=172.75）
|
||||
```
|
||||
Reference in new issue
Block a user