netlify-cms-widget-list/src/__tests__/ListControl.spec.js

Widget for editing lists in Netlify CMS.

import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { fromJS } from 'immutable';

import ListControl from '../ListControl';

jest.mock('netlify-cms-widget-object', () => {
  const React = require('react');

  class MockObjectControl extends React.Component {
    render() {
      return <mock-object-control {...this.props}>{this.props.children}</mock-object-control>;
    }
  }

  return {
    controlComponent: MockObjectControl,
  };
});
jest.mock('netlify-cms-ui-default', () => {
  const actual = jest.requireActual('netlify-cms-ui-default');

  function ListItemTopBar(props) {
    return (
      <mock-list-item-top-bar {...props} onClick={props.onCollapseToggle}>
        <button onClick={props.onRemove}>Remove</button>
        {props.children}
      </mock-list-item-top-bar>
    );
  }

  return {
    ...actual,
    ListItemTopBar,
  };
});
jest.mock('uuid/v4');

describe('ListControl', () => {
  const props = {
    onChange: jest.fn(),
    onChangeObject: jest.fn(),
    onValidateObject: jest.fn(),
    validate: jest.fn(),
    mediaPaths: fromJS({}),
    getAsset: jest.fn(),
    onOpenMediaLibrary: jest.fn(),
    onAddAsset: jest.fn(),
    onRemoveInsertedMedia: jest.fn(),
    classNameWrapper: 'classNameWrapper',
    setActiveStyle: jest.fn(),
    setInactiveStyle: jest.fn(),
    editorControl: jest.fn(),
    resolveWidget: jest.fn(),
    clearFieldErrors: jest.fn(),
    fieldsErrors: fromJS({}),
    entry: fromJS({
      path: 'posts/index.md',
    }),
    forID: 'forID',
    t: key => key,
  };

  beforeEach(() => {
    jest.clearAllMocks();
    const uuid = require('uuid/v4');
    let id = 0;
    uuid.mockImplementation(() => {
      return id++;
    });
  });
  it('should render empty list', () => {
    const field = fromJS({ name: 'list', label: 'List' });
    const { asFragment } = render(<ListControl {...props} field={field} />);

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render list with string array', () => {
    const field = fromJS({ name: 'list', label: 'List' });
    const { asFragment } = render(
      <ListControl {...props} field={field} value={fromJS(['item 1', 'item 2'])} />,
    );

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render list with nested object', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { asFragment, getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render list with nested object with collapse = false', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { asFragment, getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

    expect(asFragment()).toMatchSnapshot();
  });

  it('should collapse all items on top bar collapse click', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

    fireEvent.click(getByTestId('expand-button'));

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
  });

  it('should collapse a single item on collapse item click', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

    fireEvent.click(getByTestId('styled-list-item-top-bar-0'));

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
  });

  it('should expand all items on top bar expand click', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

    fireEvent.click(getByTestId('expand-button'));

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');
  });

  it('should expand a single item on expand item click', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      field: {
        name: 'object',
        widget: 'object',
        label: 'Object',
        fields: [{ name: 'title', widget: 'string', label: 'Title' }],
      },
    });
    const { getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ object: { title: 'item 1' } }, { object: { title: 'item 2' } }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

    fireEvent.click(getByTestId('styled-list-item-top-bar-0'));

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
  });

  it('should use widget name when no summary or label are configured for mixed types', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      types: [
        {
          name: 'type_1_object',
          widget: 'object',
          fields: [
            { label: 'First Name', name: 'first_name', widget: 'string' },
            { label: 'Last Name', name: 'last_name', widget: 'string' },
          ],
        },
      ],
    });

    const { getAllByText } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ first_name: 'hello', last_name: 'world', type: 'type_1_object' }])}
      />,
    );
    expect(getAllByText('type_1_object')[1]).toBeInTheDocument();
  });

  it('should use label when no summary is configured for mixed types', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      types: [
        {
          label: 'Type 1 Object',
          name: 'type_1_object',
          widget: 'object',
          fields: [
            { label: 'First Name', name: 'first_name', widget: 'string' },
            { label: 'Last Name', name: 'last_name', widget: 'string' },
          ],
        },
      ],
    });

    const { getAllByText } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ first_name: 'hello', last_name: 'world', type: 'type_1_object' }])}
      />,
    );
    expect(getAllByText('Type 1 Object')[1]).toBeInTheDocument();
  });

  it('should use summary when configured for mixed types', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      types: [
        {
          label: 'Type 1 Object',
          name: 'type_1_object',
          summary: '{{first_name}} - {{last_name}} - {{filename}}.{{extension}}',
          widget: 'object',
          fields: [
            { label: 'First Name', name: 'first_name', widget: 'string' },
            { label: 'Last Name', name: 'last_name', widget: 'string' },
          ],
        },
      ],
    });

    const { getByText } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ first_name: 'hello', last_name: 'world', type: 'type_1_object' }])}
      />,
    );
    expect(getByText('hello - world - index.md')).toBeInTheDocument();
  });

  it('should use widget name when no summary or label are configured for a single field', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      field: { name: 'name', widget: 'string' },
    });

    const { getByText } = render(<ListControl {...props} field={field} value={fromJS(['Name'])} />);
    expect(getByText('name')).toBeInTheDocument();
  });

  it('should use label when no summary is configured for a single field', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      field: { name: 'name', widget: 'string', label: 'Name' },
    });

    const { getByText } = render(<ListControl {...props} field={field} value={fromJS(['Name'])} />);
    expect(getByText('Name')).toBeInTheDocument();
  });

  it('should use summary when configured for a single field', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      summary: 'Name - {{fields.name}}',
      field: { name: 'name', widget: 'string', label: 'Name' },
    });

    const { getByText } = render(<ListControl {...props} field={field} value={fromJS(['Name'])} />);
    expect(getByText('Name - Name')).toBeInTheDocument();
  });

  it('should use first field value when no summary or label are configured for multiple fields', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      fields: [
        { name: 'first_name', widget: 'string', label: 'First Name' },
        { name: 'last_name', widget: 'string', label: 'Last Name' },
      ],
    });

    const { getByText } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ first_name: 'hello', last_name: 'world' }])}
      />,
    );
    expect(getByText('hello')).toBeInTheDocument();
  });

  it('should show `No <field>` when value is missing from first field for multiple fields', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      fields: [
        { name: 'first_name', widget: 'string', label: 'First Name' },
        { name: 'last_name', widget: 'string', label: 'Last Name' },
      ],
    });

    const { getByText } = render(
      <ListControl {...props} field={field} value={fromJS([{ last_name: 'world' }])} />,
    );
    expect(getByText('No first_name')).toBeInTheDocument();
  });

  it('should use summary when configured for multiple fields', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: true,
      summary: '{{first_name}} - {{last_name}} - {{filename}}.{{extension}}',
      fields: [
        { name: 'first_name', widget: 'string', label: 'First Name' },
        { name: 'last_name', widget: 'string', label: 'Last Name' },
      ],
    });

    const { getByText } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ first_name: 'hello', last_name: 'world' }])}
      />,
    );
    expect(getByText('hello - world - index.md')).toBeInTheDocument();
  });

  it('should render list with fields with default collapse ("true") and minimize_collapsed ("false")', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ string: 'item 1' }, { string: 'item 2' }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render list with fields with collapse = "false" and default minimize_collapsed ("false")', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ string: 'item 1' }, { string: 'item 2' }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

    expect(asFragment()).toMatchSnapshot();
  });

  it('should render list with fields with default collapse ("true") and minimize_collapsed = "true"', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      minimize_collapsed: true,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getByTestId, queryByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ string: 'item 1' }, { string: 'item 2' }])}
      />,
    );

    expect(queryByTestId('styled-list-item-top-bar-0')).toBeNull();
    expect(queryByTestId('styled-list-item-top-bar-1')).toBeNull();

    expect(queryByTestId('object-control-0')).toBeNull();
    expect(queryByTestId('object-control-1')).toBeNull();

    expect(asFragment()).toMatchSnapshot();

    fireEvent.click(getByTestId('expand-button'));

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'true');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'true');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'true');
  });

  it('should render list with fields with collapse = "false" and default minimize_collapsed = "true"', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getByTestId, queryByTestId } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ string: 'item 1' }, { string: 'item 2' }])}
      />,
    );

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('styled-list-item-top-bar-1')).toHaveAttribute('collapsed', 'false');

    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-1')).toHaveAttribute('collapsed', 'false');

    expect(asFragment()).toMatchSnapshot();

    fireEvent.click(getByTestId('expand-button'));

    expect(queryByTestId('styled-list-item-top-bar-0')).toBeNull();
    expect(queryByTestId('styled-list-item-top-bar-1')).toBeNull();

    expect(queryByTestId('object-control-0')).toBeNull();
    expect(queryByTestId('object-control-1')).toBeNull();
  });

  it('should add to list when add button is clicked', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getByText, queryByTestId, rerender, getByTestId } = render(
      <ListControl {...props} field={field} value={fromJS([])} />,
    );

    expect(queryByTestId('object-control-0')).toBeNull();

    fireEvent.click(getByText('editor.editorWidgets.list.add'));

    expect(props.onChange).toHaveBeenCalledTimes(1);
    expect(props.onChange).toHaveBeenCalledWith(fromJS([{}]));

    rerender(<ListControl {...props} field={field} value={fromJS([{}])} />);

    expect(getByTestId('styled-list-item-top-bar-0')).toHaveAttribute('collapsed', 'false');
    expect(getByTestId('object-control-0')).toHaveAttribute('collapsed', 'false');

    expect(asFragment()).toMatchSnapshot();
  });

  it('should remove from list when remove button is clicked', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const { asFragment, getAllByText, rerender } = render(
      <ListControl
        {...props}
        field={field}
        value={fromJS([{ string: 'item 1' }, { string: 'item 2' }])}
      />,
    );

    expect(asFragment()).toMatchSnapshot();

    let mock;
    try {
      mock = jest.spyOn(console, 'error').mockImplementation(() => undefined);

      const items = getAllByText('Remove');
      fireEvent.click(items[0]);

      expect(props.onChange).toHaveBeenCalledTimes(1);
      expect(props.onChange).toHaveBeenCalledWith(fromJS([{ string: 'item 2' }]), undefined);

      rerender(<ListControl {...props} field={field} value={fromJS([{ string: 'item 2' }])} />);

      expect(asFragment()).toMatchSnapshot();
    } finally {
      mock.mockRestore();
    }
  });

  it('should give validation error if below min elements', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: true,
      min: 2,
      max: 3,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([{ string: 'item 1' }]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', [
      {
        message: 'editor.editorControlPane.widget.rangeCount',
        type: 'RANGE',
      },
    ]);
  });

  it('should give min validation error if below min elements', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: true,
      min: 2,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([{ string: 'item 1' }]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', [
      {
        message: 'editor.editorControlPane.widget.rangeMin',
        type: 'RANGE',
      },
    ]);
  });

  it('should give validation error if above max elements', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: true,
      min: 2,
      max: 3,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([
        { string: 'item 1' },
        { string: 'item 2' },
        { string: 'item 3' },
        { string: 'item 4' },
      ]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', [
      {
        message: 'editor.editorControlPane.widget.rangeCount',
        type: 'RANGE',
      },
    ]);
  });

  it('should give max validation error if above max elements', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: true,
      max: 3,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([
        { string: 'item 1' },
        { string: 'item 2' },
        { string: 'item 3' },
        { string: 'item 4' },
      ]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', [
      {
        message: 'editor.editorControlPane.widget.rangeMax',
        type: 'RANGE',
      },
    ]);
  });

  it('should give no validation error if between min and max elements', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: true,
      min: 2,
      max: 3,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([{ string: 'item 1' }, { string: 'item 2' }, { string: 'item 3' }]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', []);
  });

  it('should give no validation error if no elements and optional', () => {
    const field = fromJS({
      name: 'list',
      label: 'List',
      collapsed: false,
      minimize_collapsed: true,
      required: false,
      min: 2,
      max: 3,
      fields: [{ label: 'String', name: 'string', widget: 'string' }],
    });
    const listControl = new ListControl({
      ...props,
      field,
      value: fromJS([]),
    });

    listControl.validate();
    expect(props.onValidateObject).toHaveBeenCalledWith('forID', []);
  });
});