// @flow
import { getStackeeRules } from './stackee.css-rules';

describe('stackee', () => {
  describe('getStackeeRules - non-responsive options', () => {
    it('sets flex-grow based on grow prop', () => {
      const rules = getStackeeRules({ grow: 4 });
      expect(rules).toContain('flex-grow: 4;');
    });

    it('sets flex-basis in pixels based on basis prop', () => {
      const rules = getStackeeRules({ basis: 300 });
      expect(rules).toContain('flex-basis: 300px;');
    });

    it('sets flex-shrink based on shrink prop', () => {
      const rules = getStackeeRules({ shrink: 2 });
      expect(rules).toContain('flex-shrink: 2;');
    });
  });

  describe('getStackeeRules - responsive options', () => {
    describe('small bp', () => {
      it('sets stackee rules with a small-bp media query', () => {
        const rules = getStackeeRules({
          grow: { sm: 2 },
          shrink: { sm: 3 },
          basis: { sm: 100 },
        });
        expect(rules.trim()).toContain(
          '@media (max-width: 768px) {' +
            'flex-grow: 2; ' +
            'flex-shrink: 3; ' +
            'flex-basis: 100px;' +
            '}',
        );
      });
    });

    describe('medium bp', () => {
      it('sets stacking rules with a medium-bp media query', () => {
        const rules = getStackeeRules({
          grow: { md: 2 },
          shrink: { md: 3 },
          basis: { md: 100 },
        });
        expect(rules).toContain(
          '@media (min-width: 768px) {' +
            'flex-grow: 2; ' +
            'flex-shrink: 3; ' +
            'flex-basis: 100px;' +
            '}',
        );
      });
    });

    describe('large bp', () => {
      it('sets stacking rules with a large-bp media query', () => {
        const rules = getStackeeRules({
          grow: { lg: 2 },
          shrink: { lg: 3 },
          basis: { lg: 100 },
        });
        expect(rules).toContain(
          '@media (min-width: 1024px) {' +
            'flex-grow: 2; ' +
            'flex-shrink: 3; ' +
            'flex-basis: 100px;' +
            '}',
        );
      });
    });

    describe('extra large bp', () => {
      it('sets stacking rules with a large-bp media query', () => {
        const rules = getStackeeRules({
          grow: { xl: 2 },
          shrink: { xl: 3 },
          basis: { xl: 100 },
        });
        expect(rules).toContain(
          '@media (min-width: 1280px) {' +
            'flex-grow: 2; ' +
            'flex-shrink: 3; ' +
            'flex-basis: 100px;' +
            '}',
        );
      });
    });
  });
});
