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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Page = require('./Page');

var _Page2 = _interopRequireDefault(_Page);

var _Page3 = require('./Page.driver');

var _Page4 = _interopRequireDefault(_Page3);

var _PagePrivate = require('./Page.private.driver');

var _driverFactory = require('wix-ui-test-utils/driver-factory');

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

var Content = function Content() {
  return _react2.default.createElement(
    'div',
    null,
    'content'
  );
}; /* eslint-disable no-console */


var Tail = function Tail() {
  return _react2.default.createElement(
    'div',
    null,
    'tail'
  );
};

var renderPageWithProps = function renderPageWithProps() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return _react2.default.createElement(
    _Page2.default,
    props,
    _react2.default.createElement(_Page2.default.Header, { title: 'title' }),
    _react2.default.createElement(
      _Page2.default.Content,
      null,
      _react2.default.createElement(Content, null)
    )
  );
};

describe('Page', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_Page4.default);

  it('should initialize component', function () {
    var driver = createDriver(renderPageWithProps());
    expect(driver.exists()).toBeTruthy();
  });

  describe('backgroundImage', function () {
    it('should initialize component with background image', function () {
      var driver = createDriver(renderPageWithProps({ backgroundImageUrl: '/some/image' }));
      expect(driver.backgroundImageExists()).toBeTruthy();
    });

    it('should not initialize component with background image', function () {
      var driver = createDriver(renderPageWithProps());
      expect(driver.backgroundImageExists()).toBeFalsy();
    });
  });

  describe('customClassName', function () {
    it('should have custom className', function () {
      var driver = createDriver(renderPageWithProps({ className: 'myClass' }));
      expect(driver.hasClass('myClass')).toBeTruthy();
    });
  });

  describe('gradientClassName', function () {
    it('should initialize component with gradient class name', function () {
      var driver = createDriver(renderPageWithProps({ gradientClassName: 'class' }));
      expect(driver.gradientClassNameExists()).toBeTruthy();
    });

    it('should not initialize component with gradiet class name by default', function () {
      var driver = createDriver(renderPageWithProps());
      expect(driver.gradientClassNameExists()).toBeFalsy();
    });
  });

  describe('gradient size', function () {
    it('should be 39px by default', function () {
      var driver = createDriver(renderPageWithProps({ gradientClassName: 'class' }));
      expect(driver.gradientContainerHeight()).toBe('39px');
    });

    it('should not render 0 when maximized but header height delta is 0', function () {
      var driver = createDriver(renderPageWithProps());
      expect(driver.getPageHtml()).not.toContain('>0<');
    });

    it('should be zero when Tail exist and gradientCoverTail is false', function () {
      var props = { gradientClassName: 'class', gradientCoverTail: false };
      var driver = createDriver(_react2.default.createElement(
        _Page2.default,
        props,
        _react2.default.createElement(_Page2.default.Header, null),
        _react2.default.createElement(
          _Page2.default.Tail,
          null,
          _react2.default.createElement(Tail, null)
        ),
        _react2.default.createElement(
          _Page2.default.Content,
          null,
          _react2.default.createElement(Content, null)
        )
      ));
      expect(driver.gradientContainerHeight()).toBe('0px');
    });
  });

  describe('Page.Tail', function () {
    it('should attach a tail component', function () {
      var driver = createDriver(_react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(_Page2.default.Header, { title: 'title' }),
        _react2.default.createElement(
          _Page2.default.Tail,
          null,
          _react2.default.createElement(Tail, null)
        ),
        _react2.default.createElement(
          _Page2.default.Content,
          null,
          _react2.default.createElement(Content, null)
        )
      ));

      expect(driver.tailExists()).toBeTruthy();
    });

    it('should not attach a tail component', function () {
      var driver = createDriver(renderPageWithProps());
      expect(driver.tailExists()).toBeFalsy();
    });
  });
  describe('Scroll Header', function () {
    it('should scroll ScrollableContent when getting wheel event on Header', function () {
      var driver = _PagePrivate.PagePrivateDriver.fromJsxElement(_react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(_Page2.default.Header, { title: 'title' }),
        _react2.default.createElement(
          _Page2.default.Content,
          null,
          _react2.default.createElement(Content, null)
        )
      ));
      expect(driver.getScrollAmount()).toBe(0);
      driver.wheelOnFixedContainer(10);
      expect(driver.getScrollAmount()).toBe(10);
    });
  });

  describe('Prop Validation', function () {
    var stub = console.error = jest.fn();
    var prefixWarning = 'Warning: Failed prop type: ';
    var suffixWarning = '\n    in Page';

    beforeEach(function () {
      require('react');
    });

    afterEach(function () {
      jest.resetModules();
      stub.mockReset();
    });

    it('should not initialize without a PageContent component', function () {
      var page = _react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(_Page2.default.Header, { title: 'title' }),
        _react2.default.createElement('div', null)
      );

      createDriver(page);
      expect(stub).toHaveBeenCalledWith(prefixWarning + 'Page: Invalid Prop children, must contain Page.Content' + suffixWarning);
    });

    it('should not initialize without a PageHeader component', function () {
      var page = _react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(
          _Page2.default.Content,
          null,
          _react2.default.createElement('div', null)
        ),
        _react2.default.createElement('div', null)
      );

      createDriver(page);
      expect(stub).toHaveBeenCalledWith(prefixWarning + 'Page: Invalid Prop children, must contain Page.Header' + suffixWarning);
    });

    it('should not initialize component with an unknown type', function () {
      var page = _react2.default.createElement(
        _Page2.default,
        null,
        _react2.default.createElement(_Page2.default.Header, { title: 'title' }),
        _react2.default.createElement(
          _Page2.default.Content,
          null,
          _react2.default.createElement('div', null)
        ),
        _react2.default.createElement(
          'div',
          null,
          'Unwanted child'
        )
      );

      createDriver(page);
      expect(stub).toHaveBeenCalledWith(prefixWarning + 'Page: Invalid Prop children, unknown child div' + suffixWarning);
    });
  });
});