@akinon/pz-theme 2.0.143-rc.0 → 2.0.143

package/src/utils/__tests__/card-media.test.tsx

@@ -0,0 +1,789 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { hydrateRoot } from 'react-dom/client';
+import { act, render } from '@testing-library/react';
+
+// The registry first, as the app loads it: importing a block module ahead of
+// it would close the registry ↔ group-block loop with `group` unregistered.
+import '../../blocks/block-renderer-registry';
+import GroupBlock from '../../blocks/group-block';
+import ImageBlock from '../../blocks/image-block';
+import ProductGridBlock from '../../blocks/product-grid-block';
+import {
+  buildCardSliderCss,
+  CardListSlider,
+  readGapLength
+} from '../../components/card-list-slider';
+import type { Block } from '../../theme-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+import type { Section } from '../../theme-section';
+import {
+  CARD_ZOOM_CSS,
+  CARD_ZOOM_STYLE_ID,
+  type CardsSliderSettings,
+  isCardPictureBlock,
+  readCardsPerView,
+  readCardsSliderArrows
+} from '../card-media';
+import {
+  applyPropertySwitchesToSections,
+  resolveOwnCardsSlider,
+  resolveOwnCardZoom
+} from '../property-switches';
+
+/**
+ * ZERO-5173 — the product card list as a slider ("Görsel Sayısı" cards in
+ * view, the chevrons in the top-right corner, as the GANT rail draws it) and
+ * the card picture zooming in on hover. The settings live where the card's
+ * switches live; a list nobody configured must render what it always did.
+ */
+
+const node = (
+  id: string,
+  type: string,
+  properties: Record<string, unknown> = {},
+  blocks: Block[] = [],
+  extra: Partial<Block> = {}
+): Block => ({
+  id,
+  type,
+  label: id,
+  value: type === 'image' ? '/placeholder.jpg' : undefined,
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks,
+  ...extra
+});
+
+/** The Product Card's picture column, as `product-card.json` composes it. */
+const productCard = (cardProperties: Record<string, unknown> = {}): Block =>
+  node(
+    'card',
+    'group',
+    {
+      tag: 'div',
+      role: 'item-template',
+      blockTemplate: 'product-card',
+      hoverScope: true,
+      ...cardProperties
+    },
+    [
+      node('media', 'group', { tag: 'div' }, [
+        node(
+          'image-link',
+          'group',
+          { tag: 'a', dataBinding: 'item.url', dataBindingTarget: 'href' },
+          [node('picture', 'image', { dataBinding: 'item.image' })]
+        )
+      ])
+    ]
+  );
+
+const section = (
+  blocks: Block[],
+  properties: Record<string, unknown> = {}
+): Section => ({
+  id: 's1',
+  type: 'custom',
+  name: 's1',
+  label: 'S1',
+  order: 0,
+  hidden: false,
+  properties,
+  styles: {},
+  blocks
+});
+
+const find = (blocks: Block[] | undefined, id: string): Block | undefined => {
+  for (const entry of blocks || []) {
+    if (entry.id === id) return entry;
+    const nested = find(entry.blocks, id);
+    if (nested) return nested;
+  }
+  return undefined;
+};
+
+const resolve = (
+  blocks: Block[],
+  sectionProperties: Record<string, unknown> = {}
+) =>
+  applyPropertySwitchesToSections([section(blocks, sectionProperties)])[0]
+    .blocks;
+
+/** The generated iterator a collection wraps around the Product Cards card. */
+const productCardsRepeat = (card = productCard()) =>
+  node('repeat', 'group', { tag: 'div' }, [card], {
+    isIterator: true,
+    iteratorDataPath: 'products'
+  });
+
+/** The rail's title as a list sets it, the way the flash deals slider sets its own. */
+const RAIL_TITLE = { cardsSliderTitle: 'SİZİN İÇİN SEÇTİKLERİMİZ' };
+
+describe('the zoom', () => {
+  it('is read for the picture bound to item.image only', () => {
+    expect(
+      isCardPictureBlock(
+        node('a', 'image', { dataBinding: '{{ item.image }}' })
+      )
+    ).toBe(true);
+    expect(
+      isCardPictureBlock(
+        node('b', 'image', { dataBinding: 'item.badge.image' })
+      )
+    ).toBe(false);
+  });
+
+  it('leaves an unconfigured card untouched', () => {
+    const picture = find(
+      resolve([node('grid', 'product-grid', {}, [productCard()])]),
+      'picture'
+    );
+    expect(picture?.cardZoom).toBeUndefined();
+  });
+
+  it('comes from the list, and a card can say otherwise', () => {
+    const fromGrid = resolve([
+      node('grid', 'product-grid', { cardImageHoverZoom: true }, [
+        productCard()
+      ])
+    ]);
+    expect(find(fromGrid, 'picture')?.cardZoom).toBe(true);
+    // Only the picture: the link and the card around it are untouched.
+    expect(find(fromGrid, 'image-link')?.cardZoom).toBeUndefined();
+
+    const cardOff = resolve([
+      node('grid', 'product-grid', { cardImageHoverZoom: true }, [
+        productCard({ cardImageHoverZoom: 'false' })
+      ])
+    ]);
+    expect(find(cardOff, 'picture')?.cardZoom).toBeUndefined();
+
+    const fromSection = resolve([productCardsRepeat()], {
+      cardImageHoverZoom: true
+    });
+    expect(find(fromSection, 'picture')?.cardZoom).toBe(true);
+  });
+
+  it('wraps the picture in a clipping frame, and leaves it alone otherwise', () => {
+    const picture = (over: Partial<Block> = {}): Block => ({
+      ...node('picture', 'image', { dataBinding: 'item.image', alt: 'Oxford' }),
+      value: '/ox-1.jpg',
+      ...over
+    });
+    const draw = (block: Block) =>
+      render(
+        <ImageBlock
+          block={block}
+          placeholderId="p"
+          sectionId="s"
+          isDesigner={false}
+        />
+      ).container;
+
+    const plain = draw(picture());
+    expect(plain.querySelector('[data-card-zoom]')).toBeNull();
+    expect(plain.firstElementChild?.tagName).toBe('IMG');
+
+    const zoomed = draw(picture({ cardZoom: true }));
+    const frame = zoomed.querySelector('[data-card-zoom]') as HTMLElement;
+    expect(frame.style.overflow).toBe('hidden');
+    expect(frame.querySelector('img')?.getAttribute('src')).toBe('/ox-1.jpg');
+
+    const styles = document.querySelectorAll(`style#${CARD_ZOOM_STYLE_ID}`);
+    expect(styles).toHaveLength(1);
+    expect(styles[0].textContent).toBe(CARD_ZOOM_CSS);
+    // Hover devices only, so a tap never leaves a picture enlarged.
+    expect(CARD_ZOOM_CSS).toContain('@media (hover:hover){');
+  });
+});
+
+describe('the slider', () => {
+  it('is off unless asked for, whatever else is set', () => {
+    expect(resolveOwnCardsSlider({})).toBeUndefined();
+    expect(resolveOwnCardsSlider({ cardsPerView: 3 })).toBeUndefined();
+  });
+
+  it('shows four in view on desktop and two below, with the arrows top right', () => {
+    expect(resolveOwnCardsSlider({ cardsSlider: true })).toEqual({
+      perView: 4,
+      perViewMobile: 2,
+      arrows: 'top-right'
+    });
+    expect(
+      resolveOwnCardsSlider({
+        cardsSlider: 'true',
+        cardsPerView: '5',
+        cardsPerViewMobile: 9,
+        cardsSliderArrows: 'sides'
+      })
+    ).toEqual({
+      perView: 5,
+      perViewMobile: 3,
+      arrows: 'sides'
+    });
+  });
+
+  it('reaches the repeat that holds a section’s cards, and nothing else', () => {
+    const resolved = resolve([productCardsRepeat()], {
+      cardsSlider: true,
+      cardsPerView: 4
+    });
+    expect(find(resolved, 'repeat')?.cardsSlider).toEqual(
+      expect.objectContaining({ perView: 4, perViewMobile: 2 })
+    );
+    expect(find(resolved, 'card')?.cardsSlider).toBeUndefined();
+
+    // A swatch strip is a repeat too, but of colours, not cards.
+    const swatches = node(
+      'swatches',
+      'group',
+      { tag: 'div' },
+      [node('chip', 'group', { tag: 'a' })],
+      { isIterator: true, iteratorDataPath: 'item.colors' }
+    );
+    const withStrip = resolve([productCardsRepeat(), swatches], {
+      cardsSlider: true
+    });
+    expect(find(withStrip, 'swatches')?.cardsSlider).toBeUndefined();
+
+    expect(
+      find(resolve([productCardsRepeat()]), 'repeat')?.cardsSlider
+    ).toBeUndefined();
+  });
+
+  it('carries the list’s title with its slider, typed as the rail types its own', () => {
+    const titled = (properties: Record<string, unknown>) =>
+      find(
+        resolve([productCardsRepeat()], { cardsSlider: true, ...properties }),
+        'repeat'
+      )?.cardsSlider?.title;
+
+    // The rail's defaults: 14px, regular, black, capitals, the body font.
+    expect(titled(RAIL_TITLE)).toEqual({
+      text: 'SİZİN İÇİN SEÇTİKLERİMİZ',
+      color: '#000000',
+      size: 14,
+      weight: '400',
+      font: '',
+      transform: 'uppercase'
+    });
+    // Per breakpoint, as the editor stores it; each part of its type authored.
+    expect(
+      titled({
+        cardsSliderTitle: { desktop: 'Seçtiklerimiz' },
+        cardsSliderTitleColor: { desktop: '#781526' },
+        cardsSliderTitleSize: { desktop: 18 },
+        cardsSliderTitleWeight: { desktop: '600' },
+        cardsSliderTitleFont: { desktop: "'GantModernV2-Regular', Jost" },
+        cardsSliderTitleTransform: { desktop: 'none' }
+      })
+    ).toEqual({
+      text: 'Seçtiklerimiz',
+      color: '#781526',
+      size: 18,
+      weight: '600',
+      font: "'GantModernV2-Regular', Jost",
+      transform: 'none'
+    });
+    // A value that could not be a colour, a size, a weight or a font stack
+    // falls back to the rail's own.
+    expect(
+      titled({
+        ...RAIL_TITLE,
+        cardsSliderTitleColor: 'red; background: url(x)',
+        cardsSliderTitleSize: 'huge',
+        cardsSliderTitleWeight: 'heavy',
+        cardsSliderTitleFont: 'x;}body{display:none'
+      })
+    ).toEqual(
+      expect.objectContaining({
+        color: '#000000',
+        size: 14,
+        weight: '400',
+        font: ''
+      })
+    );
+  });
+
+  it('draws no title when there is none, when it is off, or off a stale on/off value', () => {
+    const titled = (properties: Record<string, unknown>) =>
+      find(
+        resolve([productCardsRepeat()], { cardsSlider: true, ...properties }),
+        'repeat'
+      )?.cardsSlider;
+
+    expect(titled({})).not.toHaveProperty('title');
+    expect(titled({ cardsSliderTitle: '   ' })).not.toHaveProperty('title');
+    expect(
+      titled({ ...RAIL_TITLE, cardsSliderShowTitle: { desktop: false } })
+    ).not.toHaveProperty('title');
+    // An on/off value from before the title had text says nothing.
+    expect(titled({ cardsSliderTitle: { desktop: true } })).not.toHaveProperty(
+      'title'
+    );
+    // And a list that is not sliding has no title row at all.
+    expect(
+      find(resolve([productCardsRepeat()], RAIL_TITLE), 'repeat')?.cardsSlider
+    ).toBeUndefined();
+  });
+
+  it('reads the zoom off a block for the grid’s built-in card', () => {
+    expect(resolveOwnCardZoom({})).toBe(false);
+    expect(resolveOwnCardZoom({ cardImageHoverZoom: 'true' })).toBe(true);
+  });
+
+  it('reads counts, positions and gaps defensively', () => {
+    expect(readCardsPerView('', 6)).toBeUndefined();
+    expect(readCardsPerView(0, 6)).toBeUndefined();
+    expect(readCardsPerView('4', 6)).toBe(4);
+    expect(readCardsPerView(12, 6)).toBe(6);
+    expect(readCardsSliderArrows('top-right')).toBe('top-right');
+    expect(readCardsSliderArrows('bottom')).toBeUndefined();
+    expect(readGapLength(0)).toBe('0px');
+    expect(readGapLength('12')).toBe('12px');
+    expect(readGapLength('1rem')).toBe('1rem');
+    // It lands in a stylesheet: anything but a plain length is refused.
+    expect(readGapLength('1px;}body{display:none')).toBeUndefined();
+  });
+
+  it('sizes its cards per side of the 1024px line, before any script runs', () => {
+    const settings: CardsSliderSettings = {
+      perView: 4,
+      perViewMobile: 2,
+      arrows: 'top-right'
+    };
+    const css = buildCardSliderCss('g1', settings, '0px', '8px', false);
+    expect(css).toContain('[data-card-slider="g1"]{--card-slider-gap:0px}');
+    expect(css).toContain(
+      'flex:0 0 calc((100% - 3 * var(--card-slider-gap)) / 4)'
+    );
+    expect(css).toContain(
+      '@media (max-width:1023px){[data-card-slider="g1"]{--card-slider-gap:8px}'
+    );
+    expect(css).toContain(
+      'flex-basis:calc((100% - 1 * var(--card-slider-gap)) / 2)'
+    );
+
+    // The phone canvas takes the phone count outright.
+    const phone = buildCardSliderCss('g1', settings, '0px', '8px', true);
+    expect(phone).not.toContain('@media');
+    expect(phone).toContain(
+      'flex-basis:calc((100% - 1 * var(--card-slider-gap)) / 2)'
+    );
+  });
+});
+
+describe('drawing the slider', () => {
+  const settings: CardsSliderSettings = {
+    perView: 4,
+    perViewMobile: 2,
+    arrows: 'top-right'
+  };
+  const title = {
+    text: 'SİZİN İÇİN SEÇTİKLERİMİZ',
+    color: '#000000',
+    size: 14,
+    weight: '400',
+    font: '',
+    transform: 'uppercase' as const
+  };
+
+  const cards = (count: number) =>
+    Array.from({ length: count }, (_, index) => (
+      <a key={index} href={`/p${index}`} data-card="">
+        P{index}
+      </a>
+    ));
+
+  /** jsdom lays nothing out: give the strip the geometry a browser would. */
+  const layOut = (
+    container: HTMLElement,
+    {
+      client,
+      scroll,
+      left = 0
+    }: { client: number; scroll: number; left?: number }
+  ) => {
+    const track = container.querySelector(
+      '[data-card-slider-track]'
+    ) as HTMLElement;
+    Object.defineProperty(track, 'clientWidth', {
+      configurable: true,
+      value: client
+    });
+    Object.defineProperty(track, 'scrollWidth', {
+      configurable: true,
+      value: scroll
+    });
+    Object.defineProperty(track, 'scrollLeft', {
+      configurable: true,
+      writable: true,
+      value: left
+    });
+    return track;
+  };
+
+  it('puts the title on the left of the chevrons, over the cards', () => {
+    const { container } = render(
+      <CardListSlider sliderId="s1" settings={{ ...settings, title }}>
+        {cards(8)}
+      </CardListSlider>
+    );
+    const track = layOut(container, { client: 1200, scroll: 2400 });
+    act(() => {
+      track.dispatchEvent(new Event('scroll'));
+    });
+
+    const header = container.querySelector(
+      '[data-card-slider-header]'
+    ) as HTMLElement;
+    expect(header.getAttribute('data-part')).toBe('slider-header');
+    const heading = header.querySelector(
+      'h2[data-card-slider-title]'
+    ) as HTMLElement;
+    expect(heading.textContent).toBe('SİZİN İÇİN SEÇTİKLERİMİZ');
+    // No part of its own: a click selects the list that holds its settings.
+    expect(heading.hasAttribute('data-part')).toBe(false);
+    // Typed as the rail types its title, in the body font when none is named.
+    expect(heading.style.fontSize).toBe('14px');
+    expect(heading.style.fontWeight).toBe('400');
+    expect(heading.style.lineHeight).toBe('1.4');
+    expect(heading.style.textTransform).toBe('uppercase');
+    expect(heading.style.color).toBe('rgb(0, 0, 0)');
+    const arrows = header.querySelector(
+      '[data-card-slider-arrows="top-right"]'
+    );
+    expect(arrows?.querySelectorAll('button')).toHaveLength(2);
+    // The cards are the strip's own children — no wrapper per card.
+    expect(
+      container.querySelectorAll('[data-card-slider-track] > a[data-card]')
+    ).toHaveLength(8);
+    // First chevron disabled at the start and stamped for the panel's state,
+    // but drawn like the other, as the GANT rail draws its arrows.
+    const prev = container.querySelector(
+      '[data-card-slider-arrow="prev"]'
+    ) as HTMLButtonElement;
+    expect(prev.disabled).toBe(true);
+    expect(prev.getAttribute('data-state')).toBe('disabled');
+    expect(prev.style.opacity).toBe('');
+    // The rail's row: title 24px in, chevrons 14px in from the right (read
+    // off the server markup — jsdom drops a shorthand holding a var()), and
+    // the rail's own 8 × 12 chevron, mirrored for "next".
+    expect(
+      renderToString(
+        <CardListSlider sliderId="s1" settings={{ ...settings, title }}>
+          {cards(8)}
+        </CardListSlider>
+      )
+    ).toContain(
+      'padding:var(--card-slider-header-padding, 16px 14px 16px 24px)'
+    );
+    const chevron = prev.querySelector('svg') as SVGElement;
+    expect(chevron.getAttribute('viewBox')).toBe('0 0 8 12');
+    expect(chevron.querySelector('path')?.getAttribute('d')).toBe(
+      'M6.5 1L1.5 6l5 5'
+    );
+    const nextChevron = container.querySelector(
+      '[data-card-slider-arrow="next"] svg'
+    ) as SVGElement;
+    expect(nextChevron.style.transform).toBe('scaleX(-1)');
+  });
+
+  it('hands a click on its title to the list that owns it, in the canvas only', () => {
+    const select = jest.fn();
+    const onBlock = jest.fn();
+    const view = (isDesigner: boolean) =>
+      render(
+        <div onClick={onBlock}>
+          <CardListSlider
+            sliderId="s9"
+            settings={{ ...settings, title }}
+            isDesigner={isDesigner}
+            onTitleSelect={select}
+          >
+            {cards(8)}
+          </CardListSlider>
+        </div>
+      );
+
+    const canvas = view(true);
+    act(() => {
+      (
+        canvas.container.querySelector(
+          '[data-card-slider-title]'
+        ) as HTMLElement
+      ).click();
+    });
+    expect(select).toHaveBeenCalledTimes(1);
+    // The block it is drawn in never sees it: that is not where it is set.
+    expect(onBlock).not.toHaveBeenCalled();
+    canvas.unmount();
+
+    const storefront = view(false);
+    act(() => {
+      (
+        storefront.container.querySelector(
+          '[data-card-slider-title]'
+        ) as HTMLElement
+      ).click();
+    });
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('steps one card, and the click never reaches a link around it', () => {
+    const onLinkClick = jest.fn();
+    const { container } = render(
+      <a href="/list" onClick={onLinkClick}>
+        <CardListSlider sliderId="s2" settings={settings}>
+          {cards(8)}
+        </CardListSlider>
+      </a>
+    );
+    const track = layOut(container, { client: 1200, scroll: 2400 });
+    track.scrollBy = jest.fn();
+    (track.firstElementChild as HTMLElement).getBoundingClientRect = () =>
+      ({ width: 300 } as DOMRect);
+
+    act(() => {
+      track.dispatchEvent(new Event('scroll'));
+    });
+    const next = container.querySelector(
+      '[data-card-slider-arrow="next"]'
+    ) as HTMLButtonElement;
+    const click = new MouseEvent('click', { bubbles: true, cancelable: true });
+    act(() => {
+      next.dispatchEvent(click);
+    });
+
+    expect(track.scrollBy).toHaveBeenCalledWith(
+      expect.objectContaining({ left: 300 })
+    );
+    expect(click.defaultPrevented).toBe(true);
+    expect(onLinkClick).not.toHaveBeenCalled();
+  });
+
+  it('dims the last chevron at the end and drops both once everything fits', () => {
+    const untitled = settings;
+    const { container, rerender } = render(
+      <CardListSlider sliderId="s3" settings={untitled}>
+        {cards(8)}
+      </CardListSlider>
+    );
+    const track = layOut(container, {
+      client: 1200,
+      scroll: 2400,
+      left: 1200
+    });
+    act(() => {
+      track.dispatchEvent(new Event('scroll'));
+    });
+    expect(
+      (
+        container.querySelector(
+          '[data-card-slider-arrow="next"]'
+        ) as HTMLButtonElement
+      ).disabled
+    ).toBe(true);
+
+    layOut(container, { client: 1200, scroll: 1200 });
+    rerender(
+      <CardListSlider sliderId="s3" settings={untitled}>
+        {cards(3)}
+      </CardListSlider>
+    );
+    // No title and nothing to page: no row above the cards at all.
+    expect(container.querySelector('[data-card-slider-header]')).toBeNull();
+  });
+
+  it('can put one chevron on either side instead', () => {
+    const { container } = render(
+      <CardListSlider sliderId="s4" settings={{ ...settings, arrows: 'sides' }}>
+        {cards(8)}
+      </CardListSlider>
+    );
+    expect(container.querySelector('[data-card-slider-header]')).toBeNull();
+    const track = layOut(container, { client: 1200, scroll: 2400 });
+    act(() => {
+      track.dispatchEvent(new Event('scroll'));
+    });
+    const prev = container.querySelector(
+      '[data-card-slider-frame] > [data-card-slider-arrow="prev"]'
+    ) as HTMLElement;
+    expect(prev.style.left).toBe('8px');
+    expect(prev.style.top).toBe('50%');
+  });
+});
+
+describe('the product grid as a slider', () => {
+  const context = {
+    listing: {
+      title: 'Kazak',
+      path: '/kadin-kazak/',
+      products: Array.from({ length: 8 }, (_, index) => ({
+        pk: index + 1,
+        name: `Kazak ${index + 1}`,
+        url: `/kazak-${index + 1}/`,
+        image: `/kazak-${index + 1}.jpg`,
+        price: 100 + index
+      })),
+      facets: [],
+      sorters: [],
+      pagination: { current_page: 1, count: 8 }
+    }
+  };
+
+  const grid = (properties: Record<string, unknown>, blocks: Block[] = []) =>
+    node('grid-1', 'product-grid', properties, blocks);
+
+  const page = (block: Block) => (
+    <ThemePageContextProvider value={context}>
+      <ProductGridBlock
+        block={block}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+      />
+    </ThemePageContextProvider>
+  );
+
+  it('keeps the grid while the slider is off', () => {
+    const { container } = render(page(grid({ cardsPerView: 4 })));
+    expect(container.querySelector('[data-card-slider]')).toBeNull();
+    expect(
+      (container.querySelector('[data-product-grid]') as HTMLElement).style
+        .display
+    ).toBe('grid');
+  });
+
+  it('puts the built-in cards in one row, the strip carrying the list part', () => {
+    const { container } = render(page(grid({ cardsSlider: true })));
+    const track = container.querySelector(
+      '[data-card-slider-track]'
+    ) as HTMLElement;
+    expect(track.getAttribute('data-part')).toBe('list');
+    expect(
+      track.querySelectorAll(':scope > a[data-product-card]')
+    ).toHaveLength(8);
+    // The gap the grid had, through its own custom property.
+    expect(container.querySelector('style')?.textContent).toContain(
+      '--card-slider-gap:var(--product-grid-gap, 16px)'
+    );
+  });
+
+  it('keeps an authored grid gap', () => {
+    const block = {
+      ...grid({ cardsSlider: true }),
+      styles: { 'list/gap': { desktop: '0px', mobile: '4px' } }
+    };
+    const { container } = render(page(block));
+    const css = container.querySelector('style')?.textContent ?? '';
+    expect(css).toContain(
+      '[data-card-slider="grid-grid-1"]{--card-slider-gap:0px}'
+    );
+    expect(css).toContain('{--card-slider-gap:4px}');
+  });
+
+  it('repeats a Product Card in the row, and zooms its picture', () => {
+    const [resolved] = applyPropertySwitchesToSections([
+      section([
+        grid({ cardsSlider: true, cardImageHoverZoom: true }, [productCard()])
+      ])
+    ]);
+    const { container } = render(page(resolved.blocks[0]));
+    const track = container.querySelector(
+      '[data-card-slider-track]'
+    ) as HTMLElement;
+    // One card wrapper per product, each a direct child of the strip.
+    expect(track.children).toHaveLength(8);
+    const pictures = track.querySelectorAll('[data-card-zoom] img');
+    expect(pictures).toHaveLength(8);
+    expect(pictures[1].getAttribute('src')).toBe('/kazak-2.jpg');
+  });
+
+  it('the server renders the row complete and it hydrates without a mismatch', async () => {
+    const [resolved] = applyPropertySwitchesToSections([
+      section([grid({ cardsSlider: true, ...RAIL_TITLE }, [productCard()])])
+    ]);
+    const markup = page(resolved.blocks[0]);
+    const container = document.createElement('div');
+    container.innerHTML = renderToString(markup);
+    document.body.appendChild(container);
+
+    expect(
+      container.querySelectorAll('[data-card-slider-track] > *')
+    ).toHaveLength(8);
+    expect(
+      container.querySelector('[data-card-slider-title]')?.textContent
+    ).toBe('SİZİN İÇİN SEÇTİKLERİMİZ');
+    expect(container.querySelectorAll('[data-card-slider-arrow]')).toHaveLength(
+      2
+    );
+
+    const recoverable: unknown[] = [];
+    const errors = jest.spyOn(console, 'error').mockImplementation(() => {});
+    await act(async () => {
+      hydrateRoot(container, markup, {
+        onRecoverableError: (error) => recoverable.push(error)
+      });
+    });
+    const mismatches = errors.mock.calls.filter((call) =>
+      /hydrat/i.test(String(call[0]))
+    );
+    errors.mockRestore();
+
+    expect(recoverable).toEqual([]);
+    expect(mismatches).toEqual([]);
+    container.remove();
+  });
+});
+
+describe('the Product Cards section as a slider', () => {
+  it('draws the repeat’s cards in one row, inside the repeat’s grid', () => {
+    const repeat: Block = {
+      ...node('repeat-1', 'group', { tag: 'div' }, [
+        node('c1', 'text', {}, [], { value: 'Kart 1' }),
+        node('c2', 'text', {}, [], { value: 'Kart 2' })
+      ]),
+      cardsSlider: {
+        perView: 4,
+        perViewMobile: 2,
+        arrows: 'top-right',
+        title: {
+          text: 'Seçtiklerimiz',
+          color: '#000000',
+          size: 14,
+          weight: '400',
+          font: '',
+          transform: 'uppercase'
+        }
+      },
+      styles: { gap: { desktop: '0px', mobile: '0px' } }
+    };
+    const { container } = render(
+      <GroupBlock
+        block={repeat}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+      />
+    );
+
+    const slider = container.querySelector('[data-card-slider]') as HTMLElement;
+    // Spans the repeat's own column template.
+    expect(slider.style.gridColumn).toBe('1 / -1');
+    expect(
+      container.querySelector(
+        '[data-card-slider-header] [data-card-slider-title]'
+      )?.textContent
+    ).toBe('Seçtiklerimiz');
+    expect(
+      container.querySelectorAll('[data-card-slider-track] > [data-block-id]')
+    ).toHaveLength(2);
+    expect(container.querySelector('style')?.textContent).toContain(
+      '--card-slider-gap:0px'
+    );
+  });
+});