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

// Components
import TutorialStepNav from '.';
import TutorialStep from '../TutorialStep/index';
import Button from '@ui/components/Button';

import { PermissionContext } from '@ui/compositions/TutorialModal';

// Constants
import { DEFAULT_STEP } from '@ui/compositions/TutorialModal/constants/stepDefaults';

describe('TutorialStepNav', () => {
  let node;
  let props;

  const childProps = {
    step: DEFAULT_STEP,
    index: 0,
  };

  beforeEach(() => {
    props = {
      createStep: jest.fn(),
    };
    node = mount(
      <PermissionContext.Provider value={false}>
        <TutorialStepNav {...props}>
          <TutorialStep {...childProps} />
        </TutorialStepNav>
      </PermissionContext.Provider>
    );
  });

  it('should display the TutorialStepNav component', () => {
    expect(node.find('.TutorialStepNav')).toHaveLength(1);
  });

  it('should display the create step button when not readOnly', () => {
    expect(node.find('.TutorialStepNav').find(Button).find('.TutorialStepNav-Button').first()).toHaveLength(1);
  });

  it('should call create step when button is clicked', () => {
    const button = node.find('.TutorialStepNav').find(Button).find('.TutorialStepNav-Button').first();
    button.simulate('click');

    expect(props.createStep).toHaveBeenCalled();
  });
});
