@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/marketing/footers/footer-section-data.test.tsx

@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from '@testing-library/react'
+import { AtSign } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  FooterSection,
+  type FooterSectionProps,
+  type FooterSocialLink,
+} from './footer-section'
+
+const baseProps = {
+  presentation: 'contact',
+  brandName: 'Thor Provider',
+  linkColumns: [],
+} satisfies FooterSectionProps
+
+const instagram = {
+  label: 'Instagram',
+  href: '/redes/instagram',
+  icon: 'instagram',
+} satisfies FooterSocialLink
+
+describe('FooterSection serializable social content and list identities', () => {
+  it('round-trips social identifiers as plain JSON data', () => {
+    const serialized = JSON.stringify([instagram])
+
+    expect(serialized).toBe(
+      '[{"label":"Instagram","href":"/redes/instagram","icon":"instagram"}]',
+    )
+    expect(JSON.parse(serialized)).toEqual([instagram])
+  })
+
+  it('renders a host-bound icon for its serializable identifier', () => {
+    render(
+      <FooterSection
+        {...baseProps}
+        socialLinks={[instagram]}
+        socialIcons={{ instagram: AtSign }}
+        onSocialClick={() => undefined}
+      />,
+    )
+
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+    expect(socialLink.getAttribute('href')).toBe('/redes/instagram')
+    expect(socialLink.querySelector('svg')).not.toBeNull()
+  })
+
+  it('uses an optional accessible name without changing the raw social label', () => {
+    const onSocialClick = vi.fn()
+    const socialLink = { ...instagram, ariaLabel: 'Seguir en Instagram' }
+
+    render(
+      <FooterSection
+        {...baseProps}
+        socialLinks={[socialLink]}
+        socialIcons={{ instagram: AtSign }}
+        onSocialClick={onSocialClick}
+      />,
+    )
+
+    const control = screen.getByRole('link', { name: 'Seguir en Instagram' })
+    expect(control.textContent).toContain('Instagram')
+    fireEvent.click(control)
+    expect(onSocialClick).toHaveBeenCalledWith('Instagram')
+  })
+
+  it('keeps the provider label visible when its icon identifier is unmapped', () => {
+    render(
+      <FooterSection
+        {...baseProps}
+        socialLinks={[instagram]}
+        socialIcons={{}}
+        onSocialClick={() => undefined}
+      />,
+    )
+
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+    expect(socialLink.textContent).toContain('Instagram')
+    expect(socialLink.querySelector('svg')).toBeNull()
+  })
+
+  it('rejects duplicate column identities instead of emitting duplicate keys', () => {
+    expect(() =>
+      render(
+        <FooterSection
+          {...baseProps}
+          linkColumns={[
+            { title: 'Servicios', links: [{ label: 'Talleres' }] },
+            { title: 'Servicios', links: [{ label: 'Repuestos' }] },
+          ]}
+        />,
+      ),
+    ).toThrow(/column.*keys must be unique/i)
+  })
+
+  it('rejects duplicate link identities within a column', () => {
+    expect(() =>
+      render(
+        <FooterSection
+          {...baseProps}
+          linkColumns={[
+            {
+              title: 'Servicios',
+              links: [
+                { label: 'Talleres', href: '/talleres' },
+                { label: 'Talleres', href: '/talleres' },
+              ],
+            },
+          ]}
+        />,
+      ),
+    ).toThrow(/link.*keys must be unique/i)
+  })
+
+  it('rejects duplicate social identities instead of emitting duplicate keys', () => {
+    expect(() =>
+      render(
+        <FooterSection
+          {...baseProps}
+          socialLinks={[instagram, instagram]}
+          onSocialClick={() => undefined}
+        />,
+      ),
+    ).toThrow(/social.*keys must be unique/i)
+  })
+})

package/src/blocks/marketing/footers/footer-section-native-links.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react'
+import { AtSign } from 'lucide-react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FooterSection, type FooterSectionProps } from './footer-section'
+
+const nativeProps = {
+  presentation: 'brand-columns',
+  linkBehavior: 'native',
+  brandName: 'Thor Provider',
+  linkColumns: [
+    {
+      title: 'Repuestos',
+      links: [{ label: 'Catálogo de repuestos', href: '/repuestos' }],
+    },
+  ],
+  socialLinks: [
+    { label: 'Instagram', href: '/redes/instagram', icon: 'instagram' },
+  ],
+  socialIcons: { instagram: AtSign },
+}
+
+describe('FooterSection native link compatibility', () => {
+  it('keeps native column hrefs separate from host-controlled social links', () => {
+    render(
+      <FooterSection
+        {...(nativeProps as unknown as FooterSectionProps)}
+      />,
+    )
+
+    expect(
+      screen
+        .getByRole('link', { name: 'Catálogo de repuestos' })
+        .getAttribute('href'),
+    ).toBe('/repuestos')
+    expect(screen.getByText('Instagram').closest('a')).toBeNull()
+  })
+
+  it('notifies native column callbacks without preventing browser navigation', () => {
+    const onLinkClick = vi.fn()
+    const props = {
+      ...nativeProps,
+      onLinkClick,
+    } as unknown as FooterSectionProps
+
+    render(<FooterSection {...props} />)
+
+    const columnLink = screen.getByRole('link', {
+      name: 'Catálogo de repuestos',
+    })
+    const columnEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+    columnLink.dispatchEvent(columnEvent)
+
+    expect(onLinkClick).toHaveBeenCalledWith(
+      nativeProps.linkColumns[0]?.links[0],
+    )
+    expect(columnEvent.defaultPrevented).toBe(false)
+    expect(screen.getByText('Instagram').closest('a')).toBeNull()
+  })
+
+  it('keeps native social hrefs separate from host-controlled column links', () => {
+    const props = {
+      ...nativeProps,
+      linkBehavior: 'host',
+      socialLinkBehavior: 'native',
+    } as unknown as FooterSectionProps
+
+    render(<FooterSection {...props} />)
+
+    expect(screen.getByText('Catálogo de repuestos').closest('a')).toBeNull()
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+    expect(socialLink.getAttribute('href')).toBe('/redes/instagram')
+  })
+
+  it('notifies native social callbacks without preventing browser navigation', () => {
+    const onSocialClick = vi.fn()
+    const props = {
+      ...nativeProps,
+      linkBehavior: 'host',
+      socialLinkBehavior: 'native',
+      onSocialClick,
+    } as unknown as FooterSectionProps
+
+    render(<FooterSection {...props} />)
+
+    const socialLink = screen.getByRole('link', { name: 'Instagram' })
+    const socialEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+    socialLink.dispatchEvent(socialEvent)
+
+    expect(onSocialClick).toHaveBeenCalledWith('Instagram')
+    expect(socialEvent.defaultPrevented).toBe(false)
+  })
+})

package/src/blocks/marketing/footers/footer-section-public-api.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+import * as blockExports from '../../../index'
+
+describe('Blocks footer package exports', () => {
+  it('exposes the canonical footer and omits retired numbered adapters', () => {
+    expect(blockExports.FooterSection).toEqual(expect.any(Function))
+    expect('FooterSection1' in blockExports).toBe(false)
+    expect('FooterSection3' in blockExports).toBe(false)
+    expect('FooterSection4' in blockExports).toBe(false)
+  })
+})

package/src/blocks/marketing/footers/footer-section.test.tsx

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { FooterSection, type FooterSectionProps } from './footer-section'
+
+const presentations = ['brand-columns', 'newsletter-grid', 'contact'] as const
+
+const sharedProps = {
+  brandName: 'Thor Provider',
+  brandDescription: 'Repuestos y soluciones para talleres.',
+  linkColumns: [
+    {
+      title: 'Repuestos',
+      links: [{ label: 'Catálogo de repuestos', href: '/repuestos' }],
+    },
+  ],
+  copyright: '© 2026 Thor Provider',
+} satisfies Omit<FooterSectionProps, 'presentation'>
+
+describe('FooterSection', () => {
+  it('rejects a missing presentation instead of silently choosing a layout', () => {
+    expect(() =>
+      render(
+        <FooterSection
+          {...sharedProps}
+          presentation={undefined as unknown as FooterSectionProps['presentation']}
+        />,
+      ),
+    ).toThrow(/presentation/i)
+  })
+
+  it.each(presentations)(
+    'renders the shared page-level footer responsibilities for %s',
+    (presentation) => {
+      render(<FooterSection {...sharedProps} presentation={presentation} />)
+
+      expect(screen.getByRole('contentinfo')).toBeTruthy()
+      expect(screen.getByText('Thor Provider')).toBeTruthy()
+      expect(screen.getByText('Repuestos y soluciones para talleres.')).toBeTruthy()
+      expect(screen.getByText('Repuestos')).toBeTruthy()
+      expect(screen.getByText('Catálogo de repuestos')).toBeTruthy()
+      expect(screen.getByText('© 2026 Thor Provider')).toBeTruthy()
+    },
+  )
+})