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

wix-style-react

import React from 'react';
import { shallow } from 'enzyme';
import classNames from 'classnames';

import { Container, Col, Columns } from './Grid';

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

    it('should pass classNames to columns element', function () {
      var element = shallow(React.createElement(Container, { className: classNames('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 = shallow(React.createElement(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 = shallow(React.createElement(Col, null));
      expect(element.hasClass('colXs12')).toEqual(true);
    });

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

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

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

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

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

    it('should add multiple col classes when using breakpoints attributes', function () {
      var element = shallow(React.createElement(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 = shallow(React.createElement(Col, { xs: 'hidden' }));
      expect(element.hasClass('hiddenXs')).toEqual(true);
    });

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

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

    it('should add hidden lg class when using hiddenlg attribute ', function () {
      var element = shallow(React.createElement(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 = shallow(React.createElement(Col, { xs: 'visible' }));
      expect(element.hasClass('visibleXs')).toEqual(true);
    });

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

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

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

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

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

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

    it('for Columns', function () {
      var element = shallow(React.createElement(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 = shallow(React.createElement(Columns, { className: 'test' }));
      expect(element.hasClass('test')).toEqual(true);
    });

    it('should pass support mutliple classes', function () {
      var element = shallow(React.createElement(Columns, { className: classNames('test1', 'test2') }));
      expect(element.hasClass('test1')).toEqual(true);
      expect(element.hasClass('test2')).toEqual(true);
    });
  });
});