wix-style-react/dist/es/src/Card/CollapsedHeader/CollapsedHeader.spec.js

wix-style-react

import React from 'react';
import collapsedHeaderDriverFactory from './CollapsedHeader.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import CollapsedHeader from './CollapsedHeader';

import { requestAnimationFramePolyfill } from '../../../testkit/polyfills';

var dataHook = 'content';
var content = React.createElement(
  'div',
  { 'data-hook': dataHook },
  'Some Content'
);

describe('CollapsedHeader', function () {
  var createDriver = createDriverFactory(collapsedHeaderDriverFactory);
  requestAnimationFramePolyfill.install();

  it('should have a title', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { title: 'Header Title' },
      React.createElement('div', null)
    ));
    expect(driver.title()).toBe('Header Title');
  });

  it('should have a subtitle', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { title: 'Header Title', subtitle: 'Header Subtitle' },
      React.createElement('div', null)
    ));
    expect(driver.subtitle()).toBe('Header Subtitle');
  });

  it('should show content', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { title: 'Header Title' },
      content
    ));

    expect(driver.findByDatahook('content').innerHTML).toBe('Some Content');
  });

  it('should hide content', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { collapsed: true, title: 'Header Title' },
      content
    ));

    expect(driver.findByDatahook(dataHook)).toBe(null);
  });

  it('should call with collapse status', function () {
    var onCollapsedChange = jest.fn();
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      {
        title: 'Header Title',
        onCollapsedChange: onCollapsedChange
      },
      content
    ));

    driver.click();
    expect(onCollapsedChange).toBeCalledWith(true);

    driver.click();
    expect(onCollapsedChange).toBeCalledWith(false);
  });

  it('should hide content on collapse', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { title: 'Header Title' },
      content
    ));

    driver.click();

    expect(driver.findByDatahook(dataHook)).toBe(null);
  });

  it('should show content on collapse', function () {
    var driver = createDriver(React.createElement(
      CollapsedHeader,
      { collapsed: true, title: 'Header Title' },
      content
    ));

    driver.click();

    expect(driver.findByDatahook(dataHook).innerHTML).toBe('Some Content');
  });

  describe('controlled collapse', function () {
    it('should call with collapsed status', function () {
      var onCollapsedChange = jest.fn();
      var driver = createDriver(React.createElement(
        CollapsedHeader,
        {
          title: 'Header Title',
          controlled: true,
          onCollapsedChange: onCollapsedChange
        },
        content
      ));

      driver.click();
      expect(onCollapsedChange).toBeCalledWith(false);
    });

    it('should not hide content when controlled', function () {
      var driver = createDriver(React.createElement(
        CollapsedHeader,
        {
          title: 'Header Title',
          controlled: true,
          onCollapsedChange: jest.fn()
        },
        content
      ));

      driver.click();

      expect(driver.findByDatahook(dataHook).innerHTML).toBe('Some Content');
    });
  });
});