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

wix-style-react

/* eslint-disable no-console */
import React from 'react';
import Page from './Page';
import pageDriverFactory from './Page.driver';
import { PagePrivateDriver } from './Page.private.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';

var Content = function Content() {
  return React.createElement(
    'div',
    null,
    'content'
  );
};

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

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

describe('Page', function () {
  var createDriver = createDriverFactory(pageDriverFactory);

  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(React.createElement(
        Page,
        props,
        React.createElement(Page.Header, null),
        React.createElement(
          Page.Tail,
          null,
          React.createElement(Tail, null)
        ),
        React.createElement(
          Page.Content,
          null,
          React.createElement(Content, null)
        )
      ));
      expect(driver.gradientContainerHeight()).toBe('0px');
    });
  });

  describe('Page.Tail', function () {
    it('should attach a tail component', function () {
      var driver = createDriver(React.createElement(
        Page,
        null,
        React.createElement(Page.Header, { title: 'title' }),
        React.createElement(
          Page.Tail,
          null,
          React.createElement(Tail, null)
        ),
        React.createElement(
          Page.Content,
          null,
          React.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 = PagePrivateDriver.fromJsxElement(React.createElement(
        Page,
        null,
        React.createElement(Page.Header, { title: 'title' }),
        React.createElement(
          Page.Content,
          null,
          React.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 = React.createElement(
        Page,
        null,
        React.createElement(Page.Header, { title: 'title' }),
        React.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 = React.createElement(
        Page,
        null,
        React.createElement(
          Page.Content,
          null,
          React.createElement('div', null)
        ),
        React.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 = React.createElement(
        Page,
        null,
        React.createElement(Page.Header, { title: 'title' }),
        React.createElement(
          Page.Content,
          null,
          React.createElement('div', null)
        ),
        React.createElement(
          'div',
          null,
          'Unwanted child'
        )
      );

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