import { describe, it, expect, beforeEach } from 'vitest';
import { resizable } from './resizable.js';
import { mountHost, connectTrait, resetDOM } from '../test-helpers.js';

describe('resizable', () => {
  beforeEach(resetDOM);

  it('connect attaches without throwing', () => {
    const host = mountHost();
    expect(() => connectTrait(resizable, host)).not.toThrow();
  });

  it('disconnect clears resizing state attributes', () => {
    const host = mountHost();
    const inst = connectTrait(resizable, host);
    expect(() => inst.disconnect(host)).not.toThrow();
    expect(host.hasAttribute('data-resizable-resizing')).toBe(false);
    expect(host.hasAttribute('data-resizable-edge')).toBe(false);
  });

  it('creates 8 hit-zones — 4 edges + 4 corners (resize in x, y, and x/y)', () => {
    const host = mountHost();
    connectTrait(resizable, host);
    const names = [...host.querySelectorAll('[data-resizable-handle]')]
      .map((el) => el.dataset.resizableHandle);
    expect(names).toHaveLength(8);
    expect(names).toEqual(expect.arrayContaining([
      'top', 'right', 'bottom', 'left',
      'top-left', 'top-right', 'bottom-right', 'bottom-left',
    ]));
  });

  it('disconnect removes all hit-zones', () => {
    const host = mountHost();
    const inst = connectTrait(resizable, host);
    inst.disconnect(host);
    expect(host.querySelectorAll('[data-resizable-handle]')).toHaveLength(0);
  });
});
