@3fn/core 14.1.0 → 15.0.0

package/src/figma/__tests__/DesignExtractor.resolveUnknownVariableIds.test.ts

@@ -1,259 +0,0 @@
-/**
- * Tests for DesignExtractor.resolveUnknownVariableIds()
- *
- * Validates that unresolved boundVariable IDs (not found in
- * figma_get_token_values) are batch-resolved via Plugin API
- * (figma_execute) and returned as additional TokenBinding entries.
- *
- * @spec 054b-figma-design-extract
- */
-
-import { DesignExtractor } from '../DesignExtractor';
-import type { TokenBinding } from '../DesignExtractor';
-import type { ConsoleMCPClient } from '../ConsoleMCPClient';
-import type { TokenTranslator } from '../TokenTranslator';
-import type { VariantAnalyzer } from '../VariantAnalyzer';
-
-// ---------------------------------------------------------------------------
-// Mock factories
-// ---------------------------------------------------------------------------
-
-function makeMockConsoleMcp(): jest.Mocked<ConsoleMCPClient> {
-  return {
-    batchCreateVariables: jest.fn().mockResolvedValue(undefined),
-    batchUpdateVariables: jest.fn().mockResolvedValue(undefined),
-    createVariableAliases: jest.fn().mockResolvedValue(undefined),
-    getVariables: jest.fn().mockResolvedValue([]),
-    execute: jest.fn().mockResolvedValue(undefined),
-    setupDesignTokens: jest.fn().mockResolvedValue(undefined),
-    getStatus: jest.fn().mockResolvedValue({}),
-    getStyles: jest.fn().mockResolvedValue([]),
-    getComponent: jest.fn().mockResolvedValue({}),
-    getComponentImage: jest.fn().mockResolvedValue({ imageUrl: '' }),
-  };
-}
-
-function makeMockTranslator(): jest.Mocked<TokenTranslator> {
-  return {
-    translate: jest.fn(),
-    translateByBinding: jest.fn(),
-    translateByValue: jest.fn(),
-    enrichResponse: jest.fn(),
-    lookupToken: jest.fn(),
-  } as unknown as jest.Mocked<TokenTranslator>;
-}
-
-const stubAnalyzer = {} as VariantAnalyzer;
-
-function makeBinding(overrides: Partial<TokenBinding> = {}): TokenBinding {
-  return {
-    variableName: 'space/100',
-    variableId: 'VariableID:1:0',
-    collectionName: 'Primitives',
-    resolvedType: 'FLOAT',
-    valuesByMode: { 'Mode 1': 8 },
-    isAlias: false,
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('DesignExtractor.resolveUnknownVariableIds', () => {
-  let mockMcp: jest.Mocked<ConsoleMCPClient>;
-  let extractor: DesignExtractor;
-
-  beforeEach(() => {
-    mockMcp = makeMockConsoleMcp();
-    extractor = new DesignExtractor(mockMcp, makeMockTranslator(), stubAnalyzer);
-  });
-
-  it('returns empty array when boundVariableMap is empty', async () => {
-    const result = await extractor.resolveUnknownVariableIds(
-      'file-key',
-      new Map(),
-      [makeBinding()],
-    );
-    expect(result).toEqual([]);
-    expect(mockMcp.execute).not.toHaveBeenCalled();
-  });
-
-  it('returns empty array when all IDs are already in bindings', async () => {
-    const bvMap = new Map([['paddingLeft', 'VariableID:1:0']]);
-    const bindings = [makeBinding({ variableId: 'VariableID:1:0' })];
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-    expect(result).toEqual([]);
-    expect(mockMcp.execute).not.toHaveBeenCalled();
-  });
-
-  it('resolves unknown variable IDs via Plugin API', async () => {
-    const bvMap = new Map([
-      ['color', 'VariableID:1224:14083'],
-    ]);
-    const bindings = [makeBinding({ variableId: 'VariableID:1:0' })];
-
-    // Simulate Plugin API response
-    mockMcp.execute.mockResolvedValueOnce({
-      'VariableID:1224:14083': {
-        name: 'color/white/500',
-        resolvedType: 'COLOR',
-        id: 'VariableID:1224:14083',
-      },
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    expect(mockMcp.execute).toHaveBeenCalledTimes(1);
-    expect(result).toHaveLength(1);
-    expect(result[0]).toMatchObject({
-      variableName: 'color/white/500',
-      variableId: 'VariableID:1224:14083',
-      resolvedType: 'COLOR',
-    });
-  });
-
-  it('resolves multiple unknown IDs in a single batch call', async () => {
-    const bvMap = new Map([
-      ['color', 'VariableID:1224:14083'],
-      ['paddingLeft', 'VariableID:99:1'],
-    ]);
-    const bindings: TokenBinding[] = [];
-
-    mockMcp.execute.mockResolvedValueOnce({
-      'VariableID:1224:14083': {
-        name: 'color/white/500',
-        resolvedType: 'COLOR',
-        id: 'VariableID:1224:14083',
-      },
-      'VariableID:99:1': {
-        name: 'space/200',
-        resolvedType: 'FLOAT',
-        id: 'VariableID:99:1',
-      },
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    expect(mockMcp.execute).toHaveBeenCalledTimes(1);
-    expect(result).toHaveLength(2);
-
-    const names = result.map(b => b.variableName).sort();
-    expect(names).toEqual(['color/white/500', 'space/200']);
-  });
-
-  it('deduplicates variable IDs before resolving', async () => {
-    // Same variable ID used for two different properties
-    const bvMap = new Map([
-      ['paddingLeft', 'VariableID:99:1'],
-      ['paddingRight', 'VariableID:99:1'],
-    ]);
-    const bindings: TokenBinding[] = [];
-
-    mockMcp.execute.mockResolvedValueOnce({
-      'VariableID:99:1': {
-        name: 'space/100',
-        resolvedType: 'FLOAT',
-        id: 'VariableID:99:1',
-      },
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    // Should only resolve once despite two properties using the same ID
-    expect(result).toHaveLength(1);
-    expect(result[0].variableName).toBe('space/100');
-
-    // Verify the Plugin API code only includes the ID once
-    const executeCall = mockMcp.execute.mock.calls[0];
-    const code = executeCall[1] as string;
-    const idMatches = code.match(/VariableID:99:1/g);
-    expect(idMatches).toHaveLength(1);
-  });
-
-  it('handles wrapped result format from figma_execute', async () => {
-    const bvMap = new Map([['color', 'VariableID:1224:14083']]);
-    const bindings: TokenBinding[] = [];
-
-    // figma_execute sometimes wraps result in { result: ... }
-    mockMcp.execute.mockResolvedValueOnce({
-      result: {
-        'VariableID:1224:14083': {
-          name: 'color/cyan/500',
-          resolvedType: 'COLOR',
-          id: 'VariableID:1224:14083',
-        },
-      },
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    expect(result).toHaveLength(1);
-    expect(result[0].variableName).toBe('color/cyan/500');
-  });
-
-  it('returns empty array when Plugin API call fails', async () => {
-    const bvMap = new Map([['color', 'VariableID:1224:14083']]);
-    const bindings: TokenBinding[] = [];
-
-    mockMcp.execute.mockRejectedValueOnce(new Error('Plugin execution failed'));
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    expect(result).toEqual([]);
-  });
-
-  it('skips variables that Plugin API cannot find', async () => {
-    const bvMap = new Map([
-      ['color', 'VariableID:1224:14083'],
-      ['paddingLeft', 'VariableID:999:999'],
-    ]);
-    const bindings: TokenBinding[] = [];
-
-    // Only one variable resolves; the other is missing from response
-    mockMcp.execute.mockResolvedValueOnce({
-      'VariableID:1224:14083': {
-        name: 'color/white/500',
-        resolvedType: 'COLOR',
-        id: 'VariableID:1224:14083',
-      },
-      // VariableID:999:999 not in response (variable not found)
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    expect(result).toHaveLength(1);
-    expect(result[0].variableName).toBe('color/white/500');
-  });
-
-  it('infers collection name from resolved variable name', async () => {
-    const bvMap = new Map([
-      ['color', 'VariableID:1:1'],
-      ['paddingLeft', 'VariableID:2:2'],
-    ]);
-    const bindings: TokenBinding[] = [];
-
-    mockMcp.execute.mockResolvedValueOnce({
-      'VariableID:1:1': {
-        name: 'color.primary',  // dot notation → Semantics
-        resolvedType: 'COLOR',
-        id: 'VariableID:1:1',
-      },
-      'VariableID:2:2': {
-        name: 'space/100',  // slash notation → Primitives
-        resolvedType: 'FLOAT',
-        id: 'VariableID:2:2',
-      },
-    });
-
-    const result = await extractor.resolveUnknownVariableIds('file-key', bvMap, bindings);
-
-    const semantic = result.find(b => b.variableName === 'color.primary');
-    const primitive = result.find(b => b.variableName === 'space/100');
-
-    expect(semantic?.collectionName).toBe('Semantics');
-    expect(primitive?.collectionName).toBe('Primitives');
-  });
-});

package/src/figma/__tests__/DesignExtractor.translateTokens.test.ts

@@ -1,433 +0,0 @@
-/**
- * Tests for DesignExtractor.translateTokens() — Task 3.6
- *
- * Validates token translation orchestration: binding lookup map construction,
- * property extraction from component layout and raw design context,
- * delegation to TokenTranslator, and aggregation into TokenUsage.
- *
- * @spec 054b-figma-design-extract
- * @requirements Req 2
- */
-
-import { DesignExtractor } from '../DesignExtractor';
-import type { ExtractedComponent, TokenBinding } from '../DesignExtractor';
-import type { ConsoleMCPClient } from '../ConsoleMCPClient';
-import type { TokenTranslator, TranslationResult, TokenCategory } from '../TokenTranslator';
-import type { VariantAnalyzer } from '../VariantAnalyzer';
-
-// ---------------------------------------------------------------------------
-// Mock factories
-// ---------------------------------------------------------------------------
-
-function makeMockConsoleMcp(): jest.Mocked<ConsoleMCPClient> {
-  return {
-    batchCreateVariables: jest.fn().mockResolvedValue(undefined),
-    batchUpdateVariables: jest.fn().mockResolvedValue(undefined),
-    createVariableAliases: jest.fn().mockResolvedValue(undefined),
-    getVariables: jest.fn().mockResolvedValue([]),
-    execute: jest.fn().mockResolvedValue(undefined),
-    setupDesignTokens: jest.fn().mockResolvedValue(undefined),
-    getStatus: jest.fn().mockResolvedValue({}),
-    getStyles: jest.fn().mockResolvedValue([]),
-    getComponent: jest.fn().mockResolvedValue({}),
-    getComponentImage: jest.fn().mockResolvedValue({ imageUrl: '' }),
-  };
-}
-
-function makeMockTranslator(): jest.Mocked<TokenTranslator> {
-  return {
-    translate: jest.fn().mockReturnValue({
-      token: '',
-      confidence: 'no-match',
-      matchMethod: 'value',
-      rawValue: '',
-    } as TranslationResult),
-    translateByBinding: jest.fn(),
-    translateByValue: jest.fn(),
-    enrichResponse: jest.fn(),
-    lookupToken: jest.fn(),
-  } as unknown as jest.Mocked<TokenTranslator>;
-}
-
-const stubAnalyzer = {} as VariantAnalyzer;
-
-function makeComponent(overrides: Partial<ExtractedComponent> = {}): ExtractedComponent {
-  return {
-    name: 'ButtonCTA',
-    description: 'A call-to-action button',
-    variants: [],
-    states: [],
-    properties: [],
-    layout: { mode: 'horizontal' },
-    source: 'kiro-power',
-    ...overrides,
-  };
-}
-
-function makeBinding(overrides: Partial<TokenBinding> = {}): TokenBinding {
-  return {
-    variableName: 'space/300',
-    variableId: 'var-1',
-    collectionName: 'Primitives',
-    resolvedType: 'FLOAT',
-    valuesByMode: { 'Mode 1': 24 },
-    isAlias: false,
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('DesignExtractor.translateTokens', () => {
-
-  it('returns empty TokenUsage when component has no layout or raw context', () => {
-    const translator = makeMockTranslator();
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({ layout: { mode: 'none' } });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result).toEqual({
-      spacing: [],
-      colors: [],
-      typography: [],
-      radius: [],
-      shadows: [],
-    });
-    expect(translator.translate).not.toHaveBeenCalled();
-  });
-
-  it('translates layout.itemSpacing as spacing token', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'space.300',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '24',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: { mode: 'horizontal', itemSpacing: 24 },
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.spacing).toHaveLength(1);
-    expect(result.spacing[0].property).toBe('item-spacing');
-    expect(result.spacing[0].token).toBe('space.300');
-    expect(result.spacing[0].confidence).toBe('exact');
-  });
-
-  it('translates layout.padding sides as spacing tokens', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'space.200',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '16',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: {
-        mode: 'vertical',
-        padding: { top: 16, right: 16, bottom: 16, left: 16 },
-      },
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.spacing).toHaveLength(4);
-    expect(result.spacing.map(r => r.property)).toEqual([
-      'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
-    ]);
-  });
-
-  it('uses binding name when a matching binding is found for spacing', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'space.300',
-      confidence: 'exact',
-      matchMethod: 'binding',
-      rawValue: '24',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: { mode: 'horizontal', itemSpacing: 24 },
-    });
-    const bindings: TokenBinding[] = [
-      makeBinding({ variableName: 'space/300', resolvedType: 'FLOAT', valuesByMode: { 'Mode 1': 24 } }),
-    ];
-
-    extractor.translateTokens(component, bindings);
-
-    // translator.translate should be called with the binding name
-    expect(translator.translate).toHaveBeenCalledWith('space/300', 24, 'spacing');
-  });
-
-  it('passes undefined binding when no matching binding found', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'space.300',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '24',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: { mode: 'horizontal', itemSpacing: 24 },
-    });
-
-    extractor.translateTokens(component, []);
-
-    // No bindings → undefined binding name
-    expect(translator.translate).toHaveBeenCalledWith(undefined, 24, 'spacing');
-  });
-
-  it('extracts colors from raw design context', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'color.purple.300',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '#7C3AED',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: `
-        .button {
-          background-color: #7C3AED;
-          color: #FFFFFF;
-        }
-      `,
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.colors).toHaveLength(2);
-    expect(result.colors[0].property).toBe('background');
-    expect(result.colors[1].property).toBe('color');
-  });
-
-  it('extracts typography properties from raw design context', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'typography.body.md',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '16px',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: `
-        .label {
-          font-size: 16px;
-          font-weight: 600;
-          line-height: 24px;
-        }
-      `,
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.typography).toHaveLength(3);
-    expect(result.typography.map(r => r.property)).toEqual([
-      'font-size', 'font-weight', 'line-height',
-    ]);
-  });
-
-  it('extracts border-radius from raw design context', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'radius.100',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '4px',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: '.button { border-radius: 4px; }',
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.radius).toHaveLength(1);
-    expect(result.radius[0].property).toBe('border-radius');
-    expect(result.radius[0].token).toBe('radius.100');
-  });
-
-  it('extracts box-shadow from raw design context', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'shadow.elevation200',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '0 2px 4px rgba(0,0,0,0.1)',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: '.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }',
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.shadows).toHaveLength(1);
-    expect(result.shadows[0].property).toBe('box-shadow');
-  });
-
-  it('tracks no-match values in results', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: '',
-      confidence: 'no-match',
-      matchMethod: 'value',
-      rawValue: '30',
-      suggestion: 'space.300',
-      delta: '±6px',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: { mode: 'horizontal', itemSpacing: 30 },
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.spacing).toHaveLength(1);
-    expect(result.spacing[0].confidence).toBe('no-match');
-    expect(result.spacing[0].token).toBe('');
-  });
-
-  it('matches color bindings by resolved type COLOR', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'color.purple.300',
-      confidence: 'exact',
-      matchMethod: 'binding',
-      rawValue: '#7C3AED',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: '.button { fill: #7C3AED; }',
-    });
-    const bindings: TokenBinding[] = [
-      makeBinding({
-        variableName: 'color/purple/300',
-        resolvedType: 'COLOR',
-        valuesByMode: { 'Light': '#7C3AED' },
-      }),
-    ];
-
-    extractor.translateTokens(component, bindings);
-
-    // Should find the color binding and pass its name
-    expect(translator.translate).toHaveBeenCalledWith(
-      'color/purple/300', '#7C3AED', 'color',
-    );
-  });
-
-  it('skips alias objects in binding value matching', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: '',
-      confidence: 'no-match',
-      matchMethod: 'value',
-      rawValue: '24',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: { mode: 'horizontal', itemSpacing: 24 },
-    });
-    // Binding with alias object value (semantic alias) — should be skipped
-    const bindings: TokenBinding[] = [
-      makeBinding({
-        variableName: 'space.inset',
-        resolvedType: 'FLOAT',
-        valuesByMode: { 'Mode 1': { aliasOf: 'space/300' } as unknown as number },
-        isAlias: true,
-      }),
-    ];
-
-    extractor.translateTokens(component, bindings);
-
-    // Should not match the alias binding, so undefined binding name
-    expect(translator.translate).toHaveBeenCalledWith(undefined, 24, 'spacing');
-  });
-
-  it('handles component with both layout and raw context properties', () => {
-    const translator = makeMockTranslator();
-    let callCount = 0;
-    translator.translate.mockImplementation(
-      (_binding: string | undefined, rawValue: number | string, category: TokenCategory) => {
-        callCount++;
-        return {
-          token: `mock.token.${callCount}`,
-          confidence: 'exact' as const,
-          matchMethod: 'value' as const,
-          rawValue: String(rawValue),
-        };
-      },
-    );
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: {
-        mode: 'horizontal',
-        itemSpacing: 8,
-        padding: { top: 16, bottom: 16 },
-      },
-      rawDesignContext: `
-        .button {
-          background: #7C3AED;
-          font-size: 14px;
-          border-radius: 8px;
-          box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-        }
-      `,
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    // 1 itemSpacing + 2 padding + 1 background + 1 font-size + 1 radius + 1 shadow = 7
-    expect(result.spacing).toHaveLength(3);
-    expect(result.colors).toHaveLength(1);
-    expect(result.typography).toHaveLength(1);
-    expect(result.radius).toHaveLength(1);
-    expect(result.shadows).toHaveLength(1);
-  });
-
-  it('does not extract non-color values from color CSS properties', () => {
-    const translator = makeMockTranslator();
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      rawDesignContext: '.button { background: url(image.png); color: inherit; }',
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    // "url(image.png)" and "inherit" should not be treated as colors
-    expect(result.colors).toHaveLength(0);
-  });
-
-  it('skips undefined padding sides', () => {
-    const translator = makeMockTranslator();
-    translator.translate.mockReturnValue({
-      token: 'space.200',
-      confidence: 'exact',
-      matchMethod: 'value',
-      rawValue: '16',
-    });
-    const extractor = new DesignExtractor(makeMockConsoleMcp(), translator, stubAnalyzer);
-    const component = makeComponent({
-      layout: {
-        mode: 'horizontal',
-        padding: { top: 16, left: 16 },
-        // right and bottom are undefined
-      },
-    });
-
-    const result = extractor.translateTokens(component, []);
-
-    expect(result.spacing).toHaveLength(2);
-    expect(result.spacing.map(r => r.property)).toEqual(['padding-top', 'padding-left']);
-  });
-});