react-draft-wysiwyg/src/renderer/Image/__test__/imageRendererTest.js

A wysiwyg on top of DraftJS.

/* @flow */

import React from 'react';
import { expect, assert } from 'chai';
import { shallow, mount } from 'enzyme';
import { getAllBlocks } from 'draftjs-utils';
import { convertFromHTML, AtomicBlockUtils, ContentState, EditorState } from 'draft-js';

import getImageComponent from '../index';

describe('ImageRenderer test suite', () => {
  const contentBlocks = convertFromHTML('<div>test</div>');
  const contentState = ContentState.createFromBlockArray(contentBlocks);
  const editorState = EditorState.createWithContent(contentState);
  const entityKey = contentState
    .createEntity('IMAGE', 'MUTABLE', { src: 'testing' })
    .getLastCreatedEntityKey();
  const newEditorState = AtomicBlockUtils.insertAtomicBlock(
    editorState,
    entityKey,
    ' ',
  );

  it('should have a div when rendered', () => {
    const Image = getImageComponent({
      isReadOnly: () => false,
      isImageAlignmentEnabled: () => true,
    });
    expect(
      mount(
        <Image block={getAllBlocks(newEditorState).get(1)} contentState={contentState} />,
      ).childAt(0).type(),
    )
      .to.equal('span');
  });

  it('should have state initialized correctly', () => {
    const Image = getImageComponent({
      isReadOnly: () => false,
      isImageAlignmentEnabled: () => true,
    });
    const control = shallow(
      <Image block={getAllBlocks(newEditorState).get(1)} contentState={contentState} />,
    );
    assert.isNotTrue(control.state().hovered);
  });

  it('should have 1 child element by default', () => {
    const Image = getImageComponent({
      isReadOnly: () => false,
      isImageAlignmentEnabled: () => true,
    });
    const control = shallow(
      <Image block={getAllBlocks(newEditorState).get(1)} contentState={contentState} />,
    );
    expect(control.children().length).to.equal(1);
  });
});