banner_studio/packages/layout-engine/test/push-siblings.test.ts

import { describe, expect, it } from 'vitest';
import { applyPushSiblings } from '../src/index.js';
import type { Layer, TextLayer } from '@banner-studio/types';

function textLayer(
  id: string,
  y: number,
  pushSiblings: TextLayer['behavior']['push_siblings']
): TextLayer {
  return {
    id,
    name: id,
    type: 'text',
    x: 0,
    y,
    width: 100,
    height: 20,
    z_index: 1,
    visible: true,
    locked: false,
    opacity: 1,
    rotation: 0,
    anchors: {},
    content_field: id,
    typography: {
      font_family: 'Inter',
      font_size: 16,
      font_weight: 400,
      line_height: 1.2,
      color: '#000'
    },
    behavior: {
      auto_resize: false,
      min_font_size: 12,
      max_font_size: 16,
      expansion_direction: 'down',
      overflow_behavior: 'clip',
      push_siblings: pushSiblings,
      padding: { top: 0, right: 0, bottom: 0, left: 0 }
    },
    character_constraints: { per_artboard: {}, warning_threshold: 1, hard_enforce: false },
    copy_bound: true
  };
}

describe('applyPushSiblings', () => {
  it('returns empty deltas when delta_px is 0', () => {
    const layers: Layer[] = [
      textLayer('a', 0, [{ layer_id: 'b', direction: 'down', maintain_gap: 0, max_push: 50 }]),
      textLayer('b', 30, [])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 0 });
    expect(r.position_deltas).toEqual({});
    expect(r.overflowed_layers).toEqual([]);
  });

  it('pushes a sibling down by delta when below max_push', () => {
    const layers: Layer[] = [
      textLayer('a', 0, [{ layer_id: 'b', direction: 'down', maintain_gap: 0, max_push: 50 }]),
      textLayer('b', 30, [])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 20 });
    expect(r.position_deltas.b).toEqual({ dx: 0, dy: 20 });
    expect(r.overflowed_layers).toEqual([]);
  });

  it('caps the push at max_push and reports overflow', () => {
    const layers: Layer[] = [
      textLayer('a', 0, [{ layer_id: 'b', direction: 'down', maintain_gap: 0, max_push: 10 }]),
      textLayer('b', 30, [])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 30 });
    expect(r.position_deltas.b).toEqual({ dx: 0, dy: 10 });
    expect(r.overflowed_layers).toContain('b');
  });

  it('cascades push rules with the applied (capped) delta', () => {
    const layers: Layer[] = [
      textLayer('a', 0, [{ layer_id: 'b', direction: 'down', maintain_gap: 0, max_push: 100 }]),
      textLayer('b', 30, [{ layer_id: 'c', direction: 'down', maintain_gap: 0, max_push: 100 }]),
      textLayer('c', 60, [])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 15 });
    expect(r.position_deltas.b).toEqual({ dx: 0, dy: 15 });
    expect(r.position_deltas.c).toEqual({ dx: 0, dy: 15 });
    expect(r.overflowed_layers).toEqual([]);
  });

  it('supports direction: up', () => {
    const layers: Layer[] = [
      textLayer('a', 50, [{ layer_id: 'b', direction: 'up', maintain_gap: 0, max_push: 50 }]),
      textLayer('b', 0, [])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 10 });
    expect(r.position_deltas.b).toEqual({ dx: 0, dy: -10 });
  });

  it('does not loop if rules form a cycle', () => {
    const layers: Layer[] = [
      textLayer('a', 0, [{ layer_id: 'b', direction: 'down', maintain_gap: 0, max_push: 100 }]),
      textLayer('b', 30, [{ layer_id: 'a', direction: 'down', maintain_gap: 0, max_push: 100 }])
    ];
    const r = applyPushSiblings({ layers, expanded_layer_id: 'a', delta_px: 10 });
    expect(r.position_deltas.b).toEqual({ dx: 0, dy: 10 });
    // 'a' was the originating layer; the cycle attempt is dropped by the visited set.
    expect(r.position_deltas.a).toBeUndefined();
  });
});