redaktilo-toolbar/__specs__/Toolbar.test.js

Redaktilo toolbar

/* eslint-disable import/no-internal-modules */
import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Slate, withReact } from 'slate-react';
import { createEditor } from 'slate';

// eslint-disable-next-line import/named
import { render, fireEvent } from 'redaktilo-spec-helpers/render';

import { Toolbar } from '..';

let demoButton = {
  isHighlighted: () => false,
  icon: () => {},
  type: 'demo',
  label: 'demo',
  isDisabled: () => false,
  onClick: (event, editor) => {},
};

const className = 'toolbar';

// Toolbar

const ToolbarWrapper = ({ initialValue = [], buttons = [], className }) => {
  const [value, setValue] = useState(initialValue);
  const editor = useMemo(() => withReact(createEditor()), []);

  return (
    <Slate
      editor={editor}
      onChange={newValue => setValue(newValue)}
      value={value}
    >
      <Toolbar className={className} buttons={buttons} />
    </Slate>
  );
};

ToolbarWrapper.propTypes = {
  initialValue: PropTypes.array,
  buttons: PropTypes.arrayOf(PropTypes.func),
  className: PropTypes.string,
};

describe('Toolbar', () => {
  window.getSelection = jest.fn();

  it('renders loading skeleton', () => {
    const { container } = render(React.createElement(ToolbarWrapper, {}));

    expect(container).toMatchSnapshot();
  });

  // Toolbar buttons

  it('renders it with 1 button', async () => {
    const buttons = [[demoButton]];

    const { container } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    expect(container).toMatchSnapshot();
  });

  it('renders highlighted button', async () => {
    const isHighlighted = () => true;
    const hightlightedButton = { ...demoButton, isHighlighted };
    const buttons = [[hightlightedButton]];

    const { container } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    expect(container).toMatchSnapshot();
  });

  it('renders disabled button', async () => {
    const isDisabled = () => true;
    const disabledButton = { ...demoButton, isDisabled };
    const buttons = [[disabledButton]];

    const { container } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    expect(container).toMatchSnapshot();
  });

  it('renders it with n groups of buttons', async () => {
    const buttons = [[demoButton], [demoButton]];

    const { container } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    const groups = container.querySelectorAll('.toolbarButtonGroup');

    expect(groups).toHaveLength(buttons.length);
  });

  it('does not render empty groups', async () => {
    const buttons = [[]];

    const { container } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    const groups = container.querySelectorAll('.buttonGroup');

    expect(groups).toHaveLength(0);
  });

  it(`calls button's function onClick`, async () => {
    const spy = jest.spyOn(demoButton, 'onClick');
    const buttons = [[demoButton]];

    const { queryByLabelText } = render(
      React.createElement(ToolbarWrapper, {
        className,
        buttons,
      })
    );

    const button = queryByLabelText(demoButton.label);
    fireEvent.mouseDown(button);

    expect(spy).toBeCalled();
  });
});