Browse Source

testing(web): pin the row card against the editor it expands into

The previous assertion pinned the literal `bg-layer-3` fill that was just
reverted. What matters is the relationship it broke: `bg-layer-3` and
`bg-module-platform` both resolve to neutral-bluish-800 under the dark
theme, so filling the row with either erases the nested editor's boundary.
Yichen Jiang 2 months ago
parent
commit
d6af60f5ec
1 changed files with 19 additions and 1 deletions
  1. 19 1
      packages/client/ui-models/tests/styles.spec.ts

+ 19 - 1
packages/client/ui-models/tests/styles.spec.ts

@@ -4,10 +4,28 @@ import { describe, expect, it } from 'vitest'
 
 const css = readFileSync(fileURLToPath(new URL('../src/client/ModelsSection.module.css', import.meta.url)), 'utf8')
 
+/** The declarations of one top-level rule, by selector. */
+function block(selector: string): string {
+  const match = new RegExp(`^\\${selector} \\{([^}]*)\\}`, 'm').exec(css)
+  if (match === null) throw new Error(`ModelsSection.module.css has no \`${selector}\` rule`)
+  return match[1] ?? ''
+}
+
 describe('ModelsSection theme styles', () => {
   it('uses the shared theme tokens without light-only fallbacks', () => {
+    // The section once named `--border`/`--surface`/`--text-*`/`--accent-strong`,
+    // which nothing in this app defines, so it rendered the light-mode literals
+    // written as their fallbacks and stayed light under the dark theme.
     expect(css).not.toMatch(/var\(--(?:surface|text-|border|accent-strong)/)
-    expect(css).toContain('background: var(--dsw-alias-bg-layer-3)')
     expect(css).toContain('color: var(--dsw-alias-label-primary)')
   })
+
+  it('separates the row card from the editor it expands into', () => {
+    // `bg-layer-3` and `bg-module-platform` both resolve to neutral-bluish-800
+    // under the dark theme, so filling the row with either erases the nested
+    // editor's boundary. The row is outlined; the fill is the editor's alone.
+    expect(block('.editor')).toContain('background: var(--dsw-alias-bg-module-platform)')
+    expect(block('.rowCard')).toContain('border: 1px solid var(--dsw-alias-border-l2)')
+    expect(block('.rowCard')).not.toMatch(/\bbackground\s*:/)
+  })
 })