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

wix-style-react

import React from 'react';
import PageHeader from './PageHeader';
import pageHeaderDriverFactory from './PageHeader.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import Button from '../Button';
import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
import PropTypes from 'prop-types';

var generateBreadcrumbs = function generateBreadcrumbs(title) {
  return React.createElement(Breadcrumbs, {
    items: [{ id: '1', value: title }],
    activeId: '1',
    size: 'medium',
    theme: 'onGrayBackground',
    onClick: function onClick() {}
  });
};

describe('PageHeader', function () {
  var title = 'This is a title';
  var subtitle = 'This is a subtitle';
  var breadcrumbs = generateBreadcrumbs(title);
  var actionsBar = React.createElement(
    Button,
    null,
    'Action'
  );
  var onBackClicked = function onBackClicked() {};
  var createDriver = createDriverFactory(pageHeaderDriverFactory);

  it('should initialize component with title', function () {
    var pageHeader = React.createElement(PageHeader, { title: title });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeFalsy();
  });

  it('should initialize component with minimized title', function () {
    var pageHeader = React.createElement(PageHeader, { minimized: true, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with title and subtitle', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.subtitleText()).toBe(subtitle);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeTruthy();
    expect(driver.isBreadcrumbsExists()).toBeFalsy();
  });

  it('should initialize component with title and subtitle with a special character', function () {
    var someTextWithSpecialCharachters = 'tom & jerry';
    var pageHeader = React.createElement(PageHeader, {
      title: someTextWithSpecialCharachters,
      subtitle: someTextWithSpecialCharachters
    });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toEqual(someTextWithSpecialCharachters);
    expect(driver.subtitleText()).toEqual(someTextWithSpecialCharachters);
  });

  it('should initialize component with minimized title and subtitle', function () {
    var pageHeader = React.createElement(PageHeader, { minimized: true, title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with breadcrumbs and title', function () {
    var pageHeader = React.createElement(PageHeader, { breadcrumbs: breadcrumbs, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with minimized breadcrumbs and title', function () {
    var pageHeader = React.createElement(PageHeader, { minimized: true, breadcrumbs: breadcrumbs, title: title });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with breadcrumbs, title and subtitle', function () {
    var pageHeader = React.createElement(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle });
    var driver = createDriver(pageHeader);
    expect(driver.titleText()).toBe(title);
    expect(driver.subtitleText()).toBe(subtitle);
    expect(driver.isTitleExists()).toBeTruthy();
    expect(driver.isSubtitleExists()).toBeTruthy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with minimized breadcrumbs, title and subtitle', function () {
    var pageHeader = React.createElement(PageHeader, {
      minimized: true,
      breadcrumbs: breadcrumbs,
      title: title,
      subtitle: subtitle
    });
    var driver = createDriver(pageHeader);
    expect(driver.isTitleExists()).toBeFalsy();
    expect(driver.isSubtitleExists()).toBeFalsy();
    expect(driver.isBreadcrumbsExists()).toBeTruthy();
  });

  it('should initialize component with title and actionsBar', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, actionsBar: actionsBar });
    var driver = createDriver(pageHeader);
    expect(driver.isActionBarExists()).toBeTruthy();
  });

  it('should initialize component with minimized title and actionsBar', function () {
    var pageHeader = React.createElement(PageHeader, { minimized: true, title: title, actionsBar: actionsBar });
    var driver = createDriver(pageHeader);
    expect(driver.isActionBarExists()).toBeTruthy();
  });

  it('should initialize component with title and back button without callback', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, showBackButton: true });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should initialize component with title and back button callback', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, onBackClicked: onBackClicked });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should initialize component with title and back button callback and back button', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, showBackButton: true, onBackClicked: onBackClicked });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeTruthy();
  });

  it('should initialize component with minimized title and back button callback and back button', function () {
    var pageHeader = React.createElement(PageHeader, {
      minimized: true,
      title: title,
      showBackButton: true,
      onBackClicked: onBackClicked
    });
    var driver = createDriver(pageHeader);
    expect(driver.isBackButtonExists()).toBeFalsy();
  });

  it('should execute the given back button callback once the back button is clicked', function () {
    var backButtonCallback = jest.fn();
    var pageHeader = React.createElement(PageHeader, {
      title: title,
      showBackButton: true,
      onBackClicked: backButtonCallback
    });
    var driver = createDriver(pageHeader);
    driver.clickBackButton();

    expect(backButtonCallback).toBeCalledTimes(1);
  });

  it('should have custom className', function () {
    var pageHeader = React.createElement(PageHeader, { title: title, className: 'myClass' });
    var driver = createDriver(pageHeader);
    expect(driver.hasClass('myClass')).toBeTruthy();
  });

  describe('should initialize component with render props title', function () {
    var altTitle = 'This is a different title';
    var HeaderTitleComponent = function HeaderTitleComponent(props) {
      return React.createElement(
        'span',
        null,
        props.minimized ? altTitle : title
      );
    };
    HeaderTitleComponent.propTypes = { minimized: PropTypes.bool };

    it('not minimized', function () {
      var pageHeader = React.createElement(PageHeader, {
        title: function title(minimized) {
          return React.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.titleText()).toBe(title);
      expect(driver.isTitleExists()).toBeTruthy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeFalsy();
    });

    it('minimized with breadcrumbs', function () {
      var pageHeader = React.createElement(PageHeader, {
        minimized: true,
        breadcrumbs: breadcrumbs,
        title: function title(minimized) {
          return React.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.isTitleExists()).toBeFalsy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeTruthy();
    });

    it('minimized without breadcrumbs', function () {
      var pageHeader = React.createElement(PageHeader, {
        minimized: true,
        title: function title(minimized) {
          return React.createElement(HeaderTitleComponent, { minimized: minimized });
        }
      });
      var driver = createDriver(pageHeader);
      expect(driver.isTitleExists()).toBeFalsy();
      expect(driver.isSubtitleExists()).toBeFalsy();
      expect(driver.isBreadcrumbsExists()).toBeTruthy();
      expect(driver.breadcrumbsText()).toBe(altTitle);
    });
  });
});