import { generateResponsiveClassNames, mergeResponsiveProps } from './responsive-props';
describe('mergeResponsiveProps', function () {
  it('returns object with each breakpoint being array of corresponding breakpoint values from each item', function () {
    expect(mergeResponsiveProps([['xs', 'sm', 'xl'], ['align-left', 'align-right', 'align-center']])).toEqual({
      sm: ['xs', 'align-left'],
      md: ['sm', 'align-right'],
      lg: ['xl', 'align-center']
    });
  });
  it("when one prop has missing value on breakpoint\n  and has value for smaller breakpoint\n  and others props have value on that breakpoint,\n  then it returns smaller breakpoint value", function () {
    expect(mergeResponsiveProps([['xs', null, 'xl'], ['align-left', 'align-right', null]])).toEqual({
      sm: ['xs', 'align-left'],
      md: ['xs', 'align-right'],
      lg: ['xl', 'align-right']
    });
  });
  it("when any of objects doesnt have value for same breakpoint, then it skips this breakpoint", function () {
    expect(mergeResponsiveProps([['xs', null, 'xl'], ['align-left', null, 'align-right']])).toEqual({
      sm: ['xs', 'align-left'],
      lg: ['xl', 'align-right']
    });
  });
  it('when item is primitive value, then it uses this value for all breakpoints', function () {
    expect(mergeResponsiveProps(['xs', ['align-left', null, 'align-right']])).toEqual({
      sm: ['xs', 'align-left'],
      md: ['xs', 'align-left'],
      lg: ['xs', 'align-right'],
      xl: ['xs', 'align-right']
    });
  });
});
describe('generateResponsiveClassNames', function () {
  var generateClass = function generateClass(prop) {
    return prop ? 'foo' : 'bar';
  };

  var responsivePropsCases = [['object', 'all breakpoints', {
    sm: true,
    md: false,
    lg: true,
    xl: true
  }, ['foo', 'md:bar', 'lg:foo', 'xl:foo']], ['object', 'some breakpoints', {
    sm: true,
    md: false,
    lg: true
  }, ['foo', 'md:bar', 'lg:foo']], ['object', 'no breakpoints', {}, []], ['object', 'invalid breakpoints', {
    foo: 'bar'
  }, []], ['array', 'all breakpoints', [true, true, false, false], ['foo', 'md:foo', 'lg:bar', 'xl:bar']], ['array', 'null breakpoints', [true, true, null, false], ['foo', 'md:foo', 'xl:bar']], ['array', 'undefined breakpoints', [true, true, undefined, false], ['foo', 'md:foo', 'xl:bar']], ['array', 'skipped breakpoints', // eslint-disable-next-line no-sparse-arrays
  [true, true,, false], ['foo', 'md:foo', 'xl:bar']], ['array', 'no breakpoints', [], []], ['array', 'too many breakpoints', [true, true, false, false, true, true, true], ['foo', 'md:foo', 'lg:bar', 'xl:bar']]];
  it.each(responsivePropsCases)('renders responsive classNames when prop passed as %s with %s', function (type, testCase, prop, classNames) {
    expect(generateResponsiveClassNames(generateClass, prop)).toEqual(classNames);
  });
});