wix-style-react/dist/src/Grid/Grid.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Grid = require('./Grid');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

describe('Grid `<Container/>`', function () {
  describe('`className` prop', function () {
    it('should pass className to columns element', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Container, { className: 'test' }));
      expect(element.hasClass('test')).toEqual(true);
    });

    it('should pass classNames to columns element', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Container, { className: (0, _classnames2.default)('test1', 'test2') }));
      expect(element.hasClass('test1')).toEqual(true);
      expect(element.hasClass('test2')).toEqual(true);
    });
  });
});

describe('Grid <Col/>', function () {
  describe('breakpoints col options', function () {
    it('should add col xs class when using span attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { span: '6' }));
      expect(element.hasClass('colXs6')).toEqual(true);
    });

    it('should add col xs class when no span attribute is given and 12 is default', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, null));
      expect(element.hasClass('colXs12')).toEqual(true);
    });

    it('should add col sm class when using sm attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { sm: '3' }));
      expect(element.hasClass('colSm3')).toEqual(true);
    });

    it('should add col md class when using md attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { md: '12' }));
      expect(element.hasClass('colMd12')).toEqual(true);
    });

    it('should add col lg class when using lg attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { lg: '1' }));
      expect(element.hasClass('colLg1')).toEqual(true);
    });

    it('should add col xl class when using xl attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { xl: '5' }));
      expect(element.hasClass('colXl5')).toEqual(true);
    });

    it('should accept numeric values', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { md: 12 }));
      expect(element.hasClass('colMd12')).toEqual(true);
    });

    it('should add multiple col classes when using breakpoints attributes', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { sm: '3', md: '12', lg: '1', xl: '5' }));
      expect(element.hasClass('colXl5')).toEqual(true);
      expect(element.hasClass('colLg1')).toEqual(true);
      expect(element.hasClass('colMd12')).toEqual(true);
      expect(element.hasClass('colSm3')).toEqual(true);
    });
  });

  describe('breakpoints hide options', function () {
    it('should add hidden xs class when using hiddenxs attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { xs: 'hidden' }));
      expect(element.hasClass('hiddenXs')).toEqual(true);
    });

    it('should add hidden sm class when using hiddensm attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { sm: 'hidden' }));
      expect(element.hasClass('hiddenSm')).toEqual(true);
    });

    it('should add hidden md class when using hiddenmd attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { md: 'hidden' }));
      expect(element.hasClass('hiddenMd')).toEqual(true);
    });

    it('should add hidden lg class when using hiddenlg attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { lg: 'hidden' }));
      expect(element.hasClass('hiddenLg')).toEqual(true);
    });
  });

  describe('breakpoints show options', function () {
    it('should add visible xs class when using xs attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { xs: 'visible' }));
      expect(element.hasClass('visibleXs')).toEqual(true);
    });

    it('should add visible sm class when using sm attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { sm: 'visible' }));
      expect(element.hasClass('visibleSm')).toEqual(true);
    });

    it('should add visible md class when using md attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { md: 'visible' }));
      expect(element.hasClass('visibleMd')).toEqual(true);
    });

    it('should add visible lg class when using lg attribute ', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { lg: 'visible' }));
      expect(element.hasClass('visibleLg')).toEqual(true);
    });
  });

  describe('`className` prop', function () {
    it('should pass to element', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { className: 'test' }));
      expect(element.hasClass('test')).toEqual(true);
    });

    it('should support multiple classNames', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { className: (0, _classnames2.default)('test1', 'test2') }));
      expect(element.hasClass('test1')).toEqual(true);
      expect(element.hasClass('test2')).toEqual(true);
    });
  });

  describe('support dataHook', function () {
    it('for Col', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Col, { dataHook: 'test' }));
      expect(element.find('[data-hook="test"]')).toHaveLength(1);
    });

    it('for Columns', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Columns, { dataHook: 'test' }));
      expect(element.find('[data-hook="test"]')).toHaveLength(1);
    });
  });
});

describe('Grid `<Columns/>`', function () {
  describe('`className` prop', function () {
    it('should pass className to element', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Columns, { className: 'test' }));
      expect(element.hasClass('test')).toEqual(true);
    });

    it('should pass support mutliple classes', function () {
      var element = (0, _enzyme.shallow)(_react2.default.createElement(_Grid.Columns, { className: (0, _classnames2.default)('test1', 'test2') }));
      expect(element.hasClass('test1')).toEqual(true);
      expect(element.hasClass('test2')).toEqual(true);
    });
  });
});