optimizely-oui/dist/js/components/DragAndDrop/tests/index.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _enzyme = require("enzyme");

var _index = _interopRequireDefault(require("../index"));

var _Token = _interopRequireDefault(require("../../Token"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/* eslint-disable react/prop-types */
var itemsWithoutGroups = [{
  id: 1,
  type: "item",
  text: "Item A"
}, {
  id: 2,
  type: "item",
  text: "Item B"
}, {
  id: 3,
  type: "item",
  text: "Item C"
}, {
  id: 4,
  type: "item",
  text: "Item D"
}, {
  id: 5,
  type: "item",
  text: "Item E"
}];

var renderTokenItem = function renderTokenItem(_ref) {
  var item = _ref.item,
      index = _ref.index,
      snapshot = _ref.snapshot;
  return _react["default"].createElement("div", null, _react["default"].createElement(_Token["default"], {
    isDraggable: true,
    name: item["text"] + "- isDragging? " + snapshot.isDragging,
    order: index + 1,
    showWell: false
  }));
};

var renderTokenItemWithAdjustedDragging = function renderTokenItemWithAdjustedDragging(_ref2) {
  var item = _ref2.item,
      index = _ref2.index,
      snapshot = _ref2.snapshot,
      dragHandleProps = _ref2.dragHandleProps;
  return _react["default"].createElement("div", null, _react["default"].createElement(_Token["default"], {
    isDraggable: true,
    name: item["text"] + "- isDragging? " + snapshot.isDragging,
    showWell: false,
    usesDragHandle: true,
    dragHandleProps: dragHandleProps
  }));
};

describe("components/DragAndDrop", function () {
  it("renders multiple draggable items", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: itemsWithoutGroups,
      renderItem: renderTokenItem,
      idForDroppableRegion: "droppable-test-demo"
    }));
    expect(component.find("li").length).toBe(5);
    expect(component.find(".oui-token").length).toBe(5);
  });
  it("passes drag handle props into child when needed", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      idForDroppableRegion: "droppable-test-demo",
      items: itemsWithoutGroups,
      useCustomDragHandle: true,
      renderItem: renderTokenItemWithAdjustedDragging
    }));
    expect(component.find('.oui-token__move[data-rbd-drag-handle-draggable-id="5"]').length).toBe(1);
  });
  describe("when given a className", function () {
    it("appends it to the oui-sortable element", function () {
      var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
        className: "extra-class",
        items: itemsWithoutGroups,
        renderItem: renderTokenItem,
        idForDroppableRegion: "droppable-test-demo"
      }));
      expect(component.find(".oui-sortable").first().prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the oui-sortable element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
        unknownProp: "some value",
        items: itemsWithoutGroups,
        renderItem: renderTokenItem,
        idForDroppableRegion: "droppable-test-demo"
      }));
      expect(component.find(".oui-sortable").first()).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});