feat(ui): Improve UI layout adaptation for narrow terminals (#5651)

Co-authored-by: Jacob Richman <[email protected]>

1 files changed, 44 insertions, 0 deletions

diff --git a/packages/cli/src/ui/components/Header.test.tsx b/packages/cli/src/ui/components/Header.test.tsx
new file mode 100644
index 00000000..95ed3f07
--- /dev/null
+++ b/packages/cli/src/ui/components/Header.test.tsx
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Header } from './Header.js';
+import * as useTerminalSize from '../hooks/useTerminalSize.js';
+import { longAsciiLogo } from './AsciiArt.js';
+
+vi.mock('../hooks/useTerminalSize.js');
+
+describe('<Header />', () => {
+  beforeEach(() => {});
+
+  it('renders the long logo on a wide terminal', () => {
+    vi.spyOn(useTerminalSize, 'useTerminalSize').mockReturnValue({
+      columns: 120,
+      rows: 20,
+    });
+    const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
+    expect(lastFrame()).toContain(longAsciiLogo);
+  });
+
+  it('renders custom ASCII art when provided', () => {
+    const customArt = 'CUSTOM ART';
+    const { lastFrame } = render(
+      <Header version="1.0.0" nightly={false} customAsciiArt={customArt} />,
+    );
+    expect(lastFrame()).toContain(customArt);
+  });
+
+  it('displays the version number when nightly is true', () => {
+    const { lastFrame } = render(<Header version="1.0.0" nightly={true} />);
+    expect(lastFrame()).toContain('v1.0.0');
+  });
+
+  it('does not display the version number when nightly is false', () => {
+    const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
+    expect(lastFrame()).not.toContain('v1.0.0');
+  });
+});