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

import TutorialHero from '.';

import { Button } from '@ui/components';

const getClientRectSpy = jest.fn(() => ({ width: 100 }));
Range.prototype.getBoundingClientRect = getClientRectSpy;
Range.prototype.getClientRects = getClientRectSpy;

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

  beforeEach(() => {
    props = {
      openTutorial: jest.fn(),
      hero: {
        backgroundColor: 'fff',
        description: 'test tutorial desc',
        title: 'test tutorial title',
        emoji: '🦉',
        _id: '123',
        steps: [
          {
            title: 'Step one',
            body: 'body uno',
            lineNumbers: [''],
          },
        ],
        snippet: {
          codeOptions: [
            {
              code: 'const res = true;',
              language: 'javascript',
              name: 'Node',
            },
          ],
        },
      },
    };
    node = mount(<TutorialHero {...props} />);
  });

  it('should display the TutorialTile component', () => {
    expect(node.find('.TutorialHero').hasClass('TutorialHero')).toBe(true);
  });

  it('should handle button click event', () => {
    node.find(Button).first().simulate('click');
    expect(props.openTutorial).toHaveBeenCalledWith('View', props.hero);
  });
});
