import {describe, it, expect} from 'vitest';
import {extractLayout} from '../../src/transformers/layout.js';
describe('extractLayout', () => {
it('returns undefined for no layoutMode', () => {
expect(extractLayout({})).toBeUndefined();
});
it('returns undefined for layoutMode NONE', () => {
expect(extractLayout({layoutMode: 'NONE'})).toBeUndefined();
});
it('maps HORIZONTAL to flex-direction: row', () => {
const result = extractLayout({layoutMode: 'HORIZONTAL'});
expect(result?.display).toBe('flex');
expect(result?.flexDirection).toBe('row');
});
it('maps VERTICAL to flex-direction: column', () => {
const result = extractLayout({layoutMode: 'VERTICAL'});
expect(result?.flexDirection).toBe('column');
});
it('maps primaryAxisAlignItems to justifyContent', () => {
expect(extractLayout({layoutMode: 'HORIZONTAL', primaryAxisAlignItems: 'MIN'})?.justifyContent).toBe('flex-start');
expect(extractLayout({layoutMode: 'HORIZONTAL', primaryAxisAlignItems: 'CENTER'})?.justifyContent).toBe('center');
expect(extractLayout({layoutMode: 'HORIZONTAL', primaryAxisAlignItems: 'MAX'})?.justifyContent).toBe('flex-end');
expect(extractLayout({layoutMode: 'HORIZONTAL', primaryAxisAlignItems: 'SPACE_BETWEEN'})?.justifyContent).toBe('space-between');
});
it('maps counterAxisAlignItems to alignItems', () => {
expect(extractLayout({layoutMode: 'HORIZONTAL', counterAxisAlignItems: 'MIN'})?.alignItems).toBe('flex-start');
expect(extractLayout({layoutMode: 'HORIZONTAL', counterAxisAlignItems: 'CENTER'})?.alignItems).toBe('center');
expect(extractLayout({layoutMode: 'HORIZONTAL', counterAxisAlignItems: 'BASELINE'})?.alignItems).toBe('baseline');
});
it('maps itemSpacing to gap', () => {
expect(extractLayout({layoutMode: 'HORIZONTAL', itemSpacing: 16})?.gap).toBe('16px');
});
it('omits gap when itemSpacing is 0', () => {
expect(extractLayout({layoutMode: 'HORIZONTAL', itemSpacing: 0})?.gap).toBeUndefined();
});
it('formats uniform padding', () => {
expect(
extractLayout({
layoutMode: 'HORIZONTAL',
paddingTop: 16,
paddingRight: 16,
paddingBottom: 16,
paddingLeft: 16,
})?.padding,
).toBe('16px');
});
it('formats symmetric padding', () => {
expect(
extractLayout({
layoutMode: 'HORIZONTAL',
paddingTop: 16,
paddingRight: 24,
paddingBottom: 16,
paddingLeft: 24,
})?.padding,
).toBe('16px 24px');
});
it('formats 4-value padding', () => {
expect(
extractLayout({
layoutMode: 'HORIZONTAL',
paddingTop: 10,
paddingRight: 20,
paddingBottom: 30,
paddingLeft: 40,
})?.padding,
).toBe('10px 20px 30px 40px');
});
it('omits padding when all zero', () => {
expect(
extractLayout({layoutMode: 'HORIZONTAL', paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0})
?.padding,
).toBeUndefined();
});
it('maps FILL sizing to 100%', () => {
const result = extractLayout({layoutMode: 'HORIZONTAL', layoutSizingHorizontal: 'FILL'});
expect(result?.width).toBe('100%');
});
it('maps HUG sizing to auto', () => {
const result = extractLayout({layoutMode: 'HORIZONTAL', layoutSizingVertical: 'HUG'});
expect(result?.height).toBe('auto');
});
it('maps FIXED sizing to px value from bounding box', () => {
const result = extractLayout({
layoutMode: 'HORIZONTAL',
layoutSizingHorizontal: 'FIXED',
absoluteBoundingBox: {x: 0, y: 0, width: 320, height: 200},
});
expect(result?.width).toBe('320px');
});
});
