wix-style-react/src/Sidebar/test/Sidebar.BackButton.spec.js

wix-style-react

import React from 'react';
import Sidebar from '../Sidebar';
import { mount } from 'enzyme';
import WixStyleReactProvider from '../../WixStyleReactProvider';

describe.each([true, false])(
  'Sidebar with collapsible inner menu : %p',
  sidebarExperimentCollapsible => {
    it('should go back when clicked', () => {
      const sidebar = mount(
        <WixStyleReactProvider
          features={{
            sidebarExperimentCollapsible,
          }}
        >
          <Sidebar selectedKey={'item2'}>
            <Sidebar.Item
              itemKey={'item1'}
              innerMenu={[
                <Sidebar.BackButton key={'back'}>
                  <div data-hook="sidebar-back-button">BACK</div>
                </Sidebar.BackButton>,
                <Sidebar.Item key={'item2'} itemKey={'item2'}>
                  <div data-hook="simple2">456</div>
                </Sidebar.Item>,
              ]}
            >
              <div data-hook="simple1">123</div>
            </Sidebar.Item>
          </Sidebar>
        </WixStyleReactProvider>,
      );

      let subMenuChildren = sidebar.find(`[data-hook="driven-in-children"]`);
      expect(subMenuChildren.exists()).toBe(true);

      const backButtonEl = sidebar.find(`[data-hook="sidebar-back-button"]`);
      backButtonEl.simulate('click');

      subMenuChildren = sidebar.find(`[data-hook="driven-in-children"]`);
      expect(subMenuChildren.exists()).toBe(false);
    });
  },
);