import {describe, it, expect} from 'vitest';
import {extractEffects} from '../../src/transformers/effects.js';
import {sampleEffects} from '../fixtures/figma-responses.js';
describe('extractEffects', () => {
it('returns undefined for empty effects', () => {
expect(extractEffects([])).toBeUndefined();
});
it('returns undefined for null/undefined effects', () => {
expect(extractEffects(undefined as unknown as [])).toBeUndefined();
});
it('converts DROP_SHADOW to box-shadow', () => {
const result = extractEffects([
{
type: 'DROP_SHADOW',
visible: true,
radius: 10,
color: {r: 0, g: 0, b: 0, a: 0.25},
offset: {x: 0, y: 4},
spread: 0,
},
]);
expect(result?.boxShadow).toBe('0px 4px 10px 0px rgba(0, 0, 0, 0.25)');
});
it('converts INNER_SHADOW with inset prefix', () => {
const result = extractEffects([
{
type: 'INNER_SHADOW',
visible: true,
radius: 4,
color: {r: 0, g: 0, b: 0, a: 0.1},
offset: {x: 0, y: 2},
spread: 0,
},
]);
expect(result?.boxShadow).toBe('inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1)');
});
it('converts LAYER_BLUR to filter', () => {
const result = extractEffects([{type: 'LAYER_BLUR', visible: true, radius: 8}]);
expect(result?.filter).toBe('blur(8px)');
});
it('converts BACKGROUND_BLUR to backdropFilter', () => {
const result = extractEffects([{type: 'BACKGROUND_BLUR', visible: true, radius: 20}]);
expect(result?.backdropFilter).toBe('blur(20px)');
});
it('skips invisible effects', () => {
const result = extractEffects([
{type: 'DROP_SHADOW', visible: false, radius: 10, color: {r: 0, g: 0, b: 0, a: 1}, offset: {x: 0, y: 0}, spread: 0},
]);
expect(result).toBeUndefined();
});
it('combines multiple shadows', () => {
const result = extractEffects([
{type: 'DROP_SHADOW', visible: true, radius: 10, color: {r: 0, g: 0, b: 0, a: 0.25}, offset: {x: 0, y: 4}, spread: 0},
{type: 'INNER_SHADOW', visible: true, radius: 4, color: {r: 0, g: 0, b: 0, a: 0.1}, offset: {x: 0, y: 2}, spread: 0},
]);
expect(result?.boxShadow).toContain(', ');
});
it('handles all effect types from sample fixture', () => {
const result = extractEffects(sampleEffects);
expect(result?.boxShadow).toBeDefined();
expect(result?.filter).toBe('blur(8px)');
expect(result?.backdropFilter).toBe('blur(20px)');
// Should have 2 shadows (drop + inner), invisible one excluded
// Both contain rgba() so we count by splitting on "), " + "px "
expect(result!.boxShadow).toContain('0px 4px 10px 0px');
expect(result!.boxShadow).toContain('inset 0px 2px 4px 0px');
// Invisible shadow (opacity 0.5) should NOT be present
expect(result!.boxShadow).not.toContain('0.5)');
});
});
