import prettier from 'prettier';

import { getBreakpointValue } from '../../../../utils/responsiveBreakpoints';
import { mapBreakpointCss } from '..';

const formatCss = (string: string) =>
  prettier.format(string, { parser: 'css' });

describe('mapBreakpointCss', () => {
  it('returns css for each breakpoint', () => {
    const array: [string, string, string, string, string] = [
      'test.1',
      'test.2',
      'test.10',
      'test.n',
      'test.n+1',
    ];
    const fn = (value: string) => `
      cssProperty: ${value};
    `;

    const expected = `
      cssProperty: test.1;

      @media (min-width: ${getBreakpointValue('sm')}px) {
        cssProperty: test.2;
      }

      @media (min-width: ${getBreakpointValue('md')}px) {
        cssProperty: test.10;
      }

      @media (min-width: ${getBreakpointValue('lg')}px) {
        cssProperty: test.n;
      }

      @media (min-width: ${getBreakpointValue('xl')}px) {
        cssProperty: test.n+1;
      }
    `;

    expect(formatCss(mapBreakpointCss(array, fn))).toEqual(formatCss(expected));
  });
});