wagtail/client/src/components/Explorer/ExplorerPanel.test.js

import React from 'react';
import { shallow } from 'enzyme';
import ExplorerPanel from './ExplorerPanel';

const mockProps = {
  page: {
    children: {
      items: [],
    },
    meta: {
      parent: null,
    },
  },
  depth: 1,
  onClose: jest.fn(),
  gotoPage: jest.fn(),
  nodes: {},
};

describe('ExplorerPanel', () => {
  describe('general rendering', () => {
    beforeEach(() => {
      document.body.innerHTML = '<div data-explorer-menu-item></div>';
    });

    it('exists', () => {
      expect(ExplorerPanel).toBeDefined();
    });

    it('renders', () => {
      expect(shallow(<ExplorerPanel {...mockProps} />)).toMatchSnapshot();
    });

    it('#isFetching', () => {
      expect(
        shallow(
          <ExplorerPanel
            {...mockProps}
            page={Object.assign({ isFetching: true }, mockProps.page)}
          />,
        ),
      ).toMatchSnapshot();
    });

    it('#isError', () => {
      expect(
        shallow(
          <ExplorerPanel
            {...mockProps}
            page={Object.assign({ isError: true }, mockProps.page)}
          />,
        ),
      ).toMatchSnapshot();
    });

    it('no children', () => {
      expect(
        shallow(<ExplorerPanel {...mockProps} page={{ children: {} }} />),
      ).toMatchSnapshot();
    });

    it('#items', () => {
      expect(
        shallow(
          <ExplorerPanel
            {...mockProps}
            page={{ children: { items: [1, 2] } }}
            nodes={{
              1: {
                id: 1,
                admin_display_title: 'Test',
                meta: { status: {}, type: 'test' },
              },
              2: {
                id: 2,
                admin_display_title: 'Foo',
                meta: { status: {}, type: 'foo' },
              },
            }}
          />,
        ),
      ).toMatchSnapshot();
    });
  });

  describe('onHeaderClick', () => {
    beforeEach(() => {
      mockProps.gotoPage.mockReset();
    });

    it('calls gotoPage', () => {
      shallow(
        <ExplorerPanel
          {...mockProps}
          depth={2}
          page={{ children: { items: [] }, meta: { parent: { id: 1 } } }}
        />,
      )
        .find('ExplorerHeader')
        .prop('onClick')({
        preventDefault() {},
        stopPropagation() {},
      });

      expect(mockProps.gotoPage).toHaveBeenCalled();
    });

    it('does not call gotoPage for first page', () => {
      shallow(
        <ExplorerPanel
          {...mockProps}
          depth={0}
          page={{ children: { items: [] }, meta: { parent: { id: 1 } } }}
        />,
      )
        .find('ExplorerHeader')
        .prop('onClick')({
        preventDefault() {},
        stopPropagation() {},
      });

      expect(mockProps.gotoPage).not.toHaveBeenCalled();
    });
  });

  describe('onItemClick', () => {
    beforeEach(() => {
      mockProps.gotoPage.mockReset();
    });

    it('calls gotoPage', () => {
      shallow(
        <ExplorerPanel
          {...mockProps}
          path={[1]}
          page={{ children: { items: [1] } }}
          nodes={{
            1: {
              id: 1,
              admin_display_title: 'Test',
              meta: { status: {}, type: 'test' },
            },
          }}
        />,
      )
        .find('ExplorerItem')
        .prop('onClick')({
        preventDefault() {},
        stopPropagation() {},
      });

      expect(mockProps.gotoPage).toHaveBeenCalled();
    });
  });

  describe('hooks', () => {
    it('componentWillReceiveProps push', () => {
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      expect(wrapper.setProps({ depth: 2 }).state('transition')).toBe('push');
    });

    it('componentWillReceiveProps pop', () => {
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      expect(wrapper.setProps({ depth: 0 }).state('transition')).toBe('pop');
    });

    it('componentDidMount', () => {
      document.body.innerHTML = '<div data-explorer-menu-item></div>';
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      wrapper.instance().componentDidMount();
      expect(
        document
          .querySelector('[data-explorer-menu-item]')
          .classList.contains('submenu-active'),
      ).toBe(true);
      expect(document.body.classList.contains('explorer-open')).toBe(true);
    });

    it('componentWillUnmount', () => {
      document.body.innerHTML =
        '<div class="submenu-active" data-explorer-menu-item></div>';
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      wrapper.instance().componentWillUnmount();
      expect(
        document
          .querySelector('[data-explorer-menu-item]')
          .classList.contains('submenu-active'),
      ).toBe(false);
      expect(document.body.classList.contains('explorer-open')).toBe(false);
    });
  });

  describe('clickOutside', () => {
    afterEach(() => {
      mockProps.onClose.mockReset();
    });

    it('triggers onClose when click is outside', () => {
      document.body.innerHTML =
        '<div data-explorer-menu-item></div><div data-explorer-menu></div><div id="t"></div>';
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      wrapper.instance().clickOutside({
        target: document.querySelector('#t'),
      });
      expect(mockProps.onClose).toHaveBeenCalled();
    });

    it('does not trigger onClose when click is inside', () => {
      document.body.innerHTML =
        '<div data-explorer-menu-item></div><div data-explorer-menu><div id="t"></div></div>';
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      wrapper.instance().clickOutside({
        target: document.querySelector('#t'),
      });
      expect(mockProps.onClose).not.toHaveBeenCalled();
    });

    it('pauses focus trap inside toggle', () => {
      document.body.innerHTML =
        '<div data-explorer-menu-item><div id="t"></div></div><div data-explorer-menu></div>';
      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
      wrapper.instance().clickOutside({
        target: document.querySelector('#t'),
      });
      expect(wrapper.state('paused')).toEqual(true);
    });
  });
});