diff --git a/src/app/shared/terminal/terminal-dock.scss b/src/app/shared/terminal/terminal-dock.scss index d8434e2..a10a3ad 100644 --- a/src/app/shared/terminal/terminal-dock.scss +++ b/src/app/shared/terminal/terminal-dock.scss @@ -160,12 +160,10 @@ @keyframes terminal-dock-in { from { - opacity: 0; transform: translateY(0.4rem); } to { - opacity: 1; transform: translateY(0); } } diff --git a/src/app/shared/terminal/terminal-dock.spec.ts b/src/app/shared/terminal/terminal-dock.spec.ts index 5009076..4c53aca 100644 --- a/src/app/shared/terminal/terminal-dock.spec.ts +++ b/src/app/shared/terminal/terminal-dock.spec.ts @@ -1,3 +1,6 @@ +import { readFileSync } from 'node:fs'; +import { join } from 'node:path'; + import { DOCUMENT } from '@angular/common'; import { ApplicationRef, PLATFORM_ID } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; @@ -475,3 +478,32 @@ describe('TerminalDock', () => { expect(remove).toHaveBeenCalledWith('keydown', added?.[1]); }); }); + +describe('terminal dock stylesheet', () => { + const css = readFileSync(join(process.cwd(), 'src/app/shared/terminal/terminal-dock.scss'), 'utf8'); + + it('does not fade a text-bearing terminal container during entry', () => { + expect(css).toMatch(/\.terminal-dock-panel[\s\S]*?animation:\s*terminal-dock-in/); + + const keyframesStart = css.indexOf('@keyframes terminal-dock-in'); + expect(keyframesStart).toBeGreaterThan(-1); + const reducedMotion = css.indexOf('@media (prefers-reduced-motion: reduce)', keyframesStart); + expect(reducedMotion).toBeGreaterThan(keyframesStart); + + const keyframes = css.slice(keyframesStart, reducedMotion); + expect(keyframes).toMatch(/transform:\s*translateY/); + expect(keyframes).not.toMatch(/opacity\s*:/); + + const panelStart = css.indexOf('.terminal-dock-panel {'); + const panelBlock = css.slice(panelStart, css.indexOf('}', panelStart) + 1); + expect(panelBlock).toContain('animation: terminal-dock-in'); + expect(panelBlock).not.toMatch(/opacity\s*:/); + + const reduceBlock = css.slice(css.indexOf('prefers-reduced-motion')); + expect(reduceBlock).toMatch(/\.terminal-dock-panel\s*\{[^}]*animation:\s*none/); + + expect(css).toMatch( + /\.terminal-dock-form input::placeholder[\s\S]*?color:\s*var\(--color-text-subtle\)[\s\S]*?opacity:\s*1/, + ); + }); +});