wix-style-react/src/Collapse/Collapse.spec.js

wix-style-react

import React from 'react';
import { mount } from 'enzyme';

import Collapse from '.';
import { createRendererWithUniDriver } from '../../test/utils/react';
import { collapsePrivateDriverFactory } from './test/Collapse.private.uni.driver';

describe('Collapse', () => {
  const render = createRendererWithUniDriver(collapsePrivateDriverFactory);

  it('should render', async () => {
    const { driver } = render(<Collapse />);
    expect(await driver.exists()).toBe(true);
  });

  it('should render children', () => {
    const wrapper = mount(<Collapse children="hello" />);
    expect(wrapper.text()).toEqual('hello');
  });

  describe('`open` prop', () => {
    it('should not render children when false', () => {
      const wrapper = mount(<Collapse open={false} children="hello" />);
      expect(wrapper.children().text()).toEqual('');
    });

    it('should be reported as false by testkit`s isOpen() when false', async () => {
      const { driver } = render(<Collapse open={false} children="hello" />);
      expect(await driver.isOpen()).toEqual(false);
    });

    it('should be reported as true by testkit`s isOpen() when true', async () => {
      const { driver } = render(<Collapse open children="hello" />);
      expect(await driver.isOpen()).toEqual(true);
    });
  });

  describe('`dataHook` prop', () => {
    it('should be passed to children', () => {
      const hookForRoot = "I'm Hooked!";
      const hookOfChild = 'Leave britney alone!';

      const wrapper = mount(
        <Collapse
          dataHook={hookForRoot}
          children={<div data-hook={hookOfChild}>arbitrary content</div>}
        />,
      );

      expect(wrapper.children().getDOMNode().getAttribute('data-hook')).toEqual(
        hookForRoot,
      );
      expect(wrapper.find(`[data-hook="${hookOfChild}"]`).exists()).toBe(true);
    });
  });
});