Feature 13: Discover - Side Quest Suggestions (#110)

Co-authored-by: orchestrator-agent <20+orchestrator-agent@code.cubecraftcreations.com>

web/src/ui/IconButton.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
+import { declaredStyle } from '../test/cssRules.ts'
 import { hitArea, expectMinHitArea } from '../test/hitArea.ts'
 import { IconButton } from './IconButton.tsx'
 
@@ -31,4 +32,21 @@ describe('IconButton', () => {
     expectMinHitArea(button)
     expect(hitArea(button)).toEqual({ width: 62, height: 62 })
   })
+
+  it('shows its label as an 11 px caption under the circle, which names it', () => {
+    render(
+      <IconButton label="Pass" size={62} tone="neutral" showLabel>
+        <svg />
+      </IconButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Pass' })
+    expect(button).not.toHaveAttribute('aria-label')
+    expect(button).toHaveTextContent('Pass')
+    expect(getComputedStyle(button).fontSize).toBe('11px')
+    expect(getComputedStyle(button).flexDirection).toBe('column')
+    expectMinHitArea(button)
+    const face = button.firstElementChild!
+    expect(hitArea(face)).toEqual({ width: 62, height: 62 })
+    expect(declaredStyle(face).background).toBe('var(--color-neutral-100)')
+  })
 })