@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/navbars/navbar.mega.test.tsx

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { Navbar, type NavbarProps } from './navbar'
+
+/** jsdom lacks the layout and pointer APIs Radix's navigation menu relies on. */
+beforeAll(() => {
+  if (!window.matchMedia) {
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })) as unknown as typeof window.matchMedia
+  }
+
+  window.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver
+
+  Element.prototype.scrollIntoView = vi.fn()
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+const ShirtIcon = () => <svg data-testid='shirt-icon' aria-hidden='true' />
+
+const megaLinks: NavbarProps['links'] = [
+  {
+    label: 'Catalog',
+    groups: [
+      {
+        title: 'Essentials',
+        items: [
+          { label: 'Shirts', href: '/shirts', description: 'Everyday cuts', icon: 'shirt' },
+          { label: 'Hats', href: '/hats', icon: 'unknown-key' },
+        ],
+      },
+    ],
+  },
+  { label: 'About', href: '/about' },
+]
+
+const featured: NavbarProps['featured'] = {
+  eyebrow: 'New season',
+  title: 'Linen drop',
+  description: 'Breathable layers',
+  href: '/linen',
+  linkLabel: 'Discover',
+  image: '/linen.jpg',
+  imageAlt: 'Linen shirt on a hanger',
+}
+
+function renderMega(props: Partial<NavbarProps> = {}) {
+  return render(
+    <Navbar
+      presentation='mega'
+      logoText='Acme'
+      links={megaLinks}
+      featured={featured}
+      iconMap={{ shirt: ShirtIcon }}
+      {...props}
+    />
+  )
+}
+
+describe('Navbar — mega presentation interaction', () => {
+  it('opens a flyout from the keyboard', async () => {
+    const user = userEvent.setup()
+    renderMega()
+
+    const trigger = screen.getByRole('button', { name: 'Catalog' })
+    trigger.focus()
+    await user.keyboard('{Enter}')
+
+    await waitFor(() => {
+      expect(screen.getByRole('link', { name: /Shirts/ })).toBeTruthy()
+    })
+  })
+
+  it('resolves icons for mapped keys and renders nothing for unmapped keys', async () => {
+    const user = userEvent.setup()
+    renderMega()
+
+    const trigger = screen.getByRole('button', { name: 'Catalog' })
+    trigger.focus()
+    await user.keyboard('{Enter}')
+
+    const shirts = await screen.findByRole('link', { name: /Shirts/ })
+    const hats = screen.getByRole('link', { name: /Hats/ })
+
+    expect(shirts.querySelector('[data-testid="shirt-icon"]')).not.toBeNull()
+    expect(hats.querySelector('svg')).toBeNull()
+    expect(hats.textContent).toContain('Hats')
+  })
+
+  it('dismisses the flyout with Escape and returns focus to the trigger', async () => {
+    const user = userEvent.setup()
+    renderMega()
+
+    const trigger = screen.getByRole('button', { name: 'Catalog' })
+    trigger.focus()
+    await user.keyboard('{Enter}')
+    await screen.findByRole('link', { name: /Shirts/ })
+
+    await user.keyboard('{Escape}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('link', { name: /Shirts/ })).toBeNull()
+    })
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  it('moves between top-level entries with the arrow keys', async () => {
+    const user = userEvent.setup()
+    renderMega()
+
+    const trigger = screen.getByRole('button', { name: 'Catalog' })
+    trigger.focus()
+    await user.keyboard('{ArrowRight}')
+
+    await waitFor(() => {
+      expect(document.activeElement?.textContent).toBe('About')
+    })
+  })
+
+  it('renders the featured promo with a semantic surface and alt text', async () => {
+    const user = userEvent.setup()
+    renderMega()
+
+    await user.click(screen.getByRole('button', { name: 'Catalog' }))
+
+    const promo = await screen.findByRole('link', { name: /Linen drop/ })
+    const image = promo.querySelector('img')
+
+    expect(image?.getAttribute('alt')).toBe('Linen shirt on a hanger')
+    expect(promo.className).not.toContain('text-white')
+    expect(promo.innerHTML).not.toContain('from-black')
+    expect(promo.innerHTML).toContain('from-background')
+  })
+})

package/src/blocks/marketing/navbars/navbar.test.tsx

@@ -0,0 +1,155 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { Navbar, type NavbarProps } from './navbar'
+
+const links: NavbarProps['links'] = [
+  { label: 'Shop', href: '/shop' },
+  { label: 'Journal', href: '/journal' },
+]
+
+function render(props: Partial<NavbarProps> = {}) {
+  return renderToStaticMarkup(<Navbar logoText='Acme' links={links} {...props} />)
+}
+
+describe('Navbar — page-level header', () => {
+  describe('bar presentation', () => {
+    it('renders every top-level link in a labeled navigation landmark', () => {
+      const html = render()
+
+      expect(html).toMatch(/<nav[^>]*aria-label="Main"/)
+      expect(html).toMatch(/<a[^>]*href="\/shop"[^>]*>Shop<\/a>/)
+      expect(html).toMatch(/<a[^>]*href="\/journal"[^>]*>Journal<\/a>/)
+    })
+
+    it('indicates the current link with aria-current and a non-color cue', () => {
+      const html = render({ currentPath: '/shop' })
+
+      const current = html.match(/<a[^>]*href="\/shop"[^>]*>/)?.[0] ?? ''
+
+      expect(current).toContain('aria-current="page"')
+      expect(current).toContain('underline')
+      expect(current).toContain('decoration-2')
+      expect(html.match(/aria-current="page"/g)).toHaveLength(1)
+    })
+
+    it('renders the brand as a link only when a logo destination is supplied', () => {
+      expect(render({ logoHref: '/' })).toMatch(/<a[^>]*href="\/"[^>]*>.*Acme/s)
+      expect(render()).not.toMatch(/<a[^>]*href="\/"[^>]*>/)
+    })
+
+    it('renders the sign-in and primary actions', () => {
+      const html = render({
+        signIn: { label: 'Sign in', href: '/account' },
+        cta: { label: 'Shop now', href: '/shop' },
+      })
+
+      expect(html).toMatch(/<a[^>]*href="\/account"[^>]*>Sign in<\/a>/)
+      expect(html).toMatch(/<a[^>]*href="\/shop"[^>]*>Shop now<\/a>/)
+    })
+  })
+
+  describe('floating presentation', () => {
+    it('stays in document flow so it reserves its own space', () => {
+      const html = render({ presentation: 'floating' })
+
+      expect(html).toContain('sticky top-0')
+      expect(html).not.toContain('fixed')
+      expect(html).not.toContain('pt-16')
+      expect(html).not.toContain('scroll-padding')
+      expect(html).toMatch(/aria-label="Main"/)
+    })
+
+    it('renders the scroll sentinel out of flow', () => {
+      const html = render({ presentation: 'floating' })
+
+      expect(html).toMatch(/<div[^>]*aria-hidden="true"[^>]*pointer-events-none absolute inset-x-0 top-0 h-2/)
+    })
+  })
+
+  describe('mega presentation', () => {
+    it('renders grouped entries as flyout triggers and plain entries inline', () => {
+      const html = render({
+        presentation: 'mega',
+        links: [
+          {
+            label: 'Catalog',
+            groups: [
+              {
+                title: 'Essentials',
+                items: [{ label: 'Shirts', href: '/shirts', description: 'Everyday cuts' }],
+              },
+            ],
+          },
+          { label: 'About', href: '/about' },
+        ],
+      })
+
+      expect(html).toMatch(/<button[^>]*>Catalog/)
+      expect(html).toMatch(/<a[^>]*href="\/about"/)
+      // Flyout content is mounted on demand, so it is absent until opened.
+      expect(html).not.toContain('/shirts')
+    })
+  })
+
+  describe('absent optional content', () => {
+    it('renders no action region when neither action is supplied', () => {
+      const html = render()
+
+      expect(html).not.toContain('<hr')
+      expect(html).not.toContain('Sign in')
+      expect(html).not.toMatch(/<a[^>]*href="\/account"/)
+    })
+
+    it('renders no navigation container when there are no links', () => {
+      const html = render({ links: [] })
+
+      expect(html).not.toContain('aria-label="Main"')
+      expect(html).not.toContain('aria-label="Mobile"')
+      // The mobile trigger would open an empty drawer, so it is absent too.
+      expect(html).not.toContain('aria-label="Open menu"')
+    })
+
+    it('keeps the mobile trigger while actions exist without links', () => {
+      const html = render({ links: [], cta: { label: 'Shop now', href: '/shop' } })
+
+      expect(html).toContain('aria-label="Open menu"')
+      expect(html).not.toContain('aria-label="Main"')
+    })
+
+    it('renders no featured promo when none is supplied', () => {
+      const html = render({ presentation: 'mega' })
+
+      expect(html).not.toContain('min-h-56')
+    })
+  })
+
+  describe('commerce ownership', () => {
+    it.each<NavbarProps['presentation']>(['bar', 'mega', 'floating'])(
+      'renders no cart, account, or search affordance for %s',
+      presentation => {
+        const html = render({
+          presentation,
+          signIn: { label: 'Sign in', href: '/account' },
+          cta: { label: 'Shop now', href: '/shop' },
+        })
+
+        expect(html).not.toContain('aria-label="Cart"')
+        expect(html).not.toContain('ShoppingCart')
+        expect(html).not.toContain('Search')
+        expect(html).not.toContain('/cart')
+        expect(html).not.toContain('artículos')
+      }
+    )
+
+    it('does not accept cart props on the type boundary', () => {
+      // @ts-expect-error cart ownership belongs to the commerce shell, not this header
+      const withCart: NavbarProps = { logoText: 'Acme', links: [], cartCount: 3 }
+      // @ts-expect-error cart ownership belongs to the commerce shell, not this header
+      const withCartHandler: NavbarProps = { logoText: 'Acme', links: [], onOpenCart: () => {} }
+
+      expect(withCart.logoText).toBe('Acme')
+      expect(withCartHandler.logoText).toBe('Acme')
+    })
+  })
+})