"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _testUtils = _interopRequireDefault(require("react-dom/test-utils"));

var _immutable = require("immutable");

var _IconBank = _interopRequireDefault(require("@instructure/ui-icons/lib/Line/IconBank"));

var _dndTestUtils = require("../../../../../../../tests/util/dndTestUtils");

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

var _presenter = _interopRequireWildcard(require("../presenter"));

var _ActionButtons = _interopRequireDefault(require("../../../ActionButtons"));

var _Item = _interopRequireDefault(require("../../../../../../common/records/Item"));

var _QuizEntry = _interopRequireDefault(require("../../../../../../common/records/QuizEntry"));

var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank"));

var _PositionBox = _interopRequireDefault(require("../../../../../../common/components/resources/positionBox/PositionBox"));

var styles = {
  componentId: 'bxAMG',
  template: function template(theme) {
    return "\n\n.QuizEntryShow__styles__quizEntryWrapper {\n  transform: translate3d(0, 0, 0); \n}\n\n.QuizEntryShow__styles__quizEntryShow {\n  padding: ".concat(theme.quizEntryShowPadding || 'inherit', ";\n  background-color: ").concat(theme.quizEntryShowBackgroundColor || 'inherit', ";\n}\n\n.QuizEntryShow__styles__header {\n  height: ").concat(theme.headerHeight || 'inherit', ";\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  align-items: stretch;\n  padding-right: ").concat(theme.headerRightPadding || 'inherit', ";\n}\n\n.QuizEntryShow__styles__dndBorder {\n  border: ").concat(theme.dndBorder || 'inherit', ";\n}\n\n.QuizEntryShow__styles__leftHeader {\n  flex: 8 0 0;\n  display: inline-flex;\n  overflow: hidden;\n  align-items: center;\n}\n\n.QuizEntryShow__styles__rightHeader {\n  flex: 0 0 auto;\n  display: inline-flex;\n  text-align: right;\n  z-index: ").concat(theme.rightHeaderZIndex || 'inherit', ";\n  color: ").concat(theme.rightHeaderColor || 'inherit', ";\n}\n\n[dir=\"ltr\"] .QuizEntryShow__styles__rightHeader {\n  text-align: right;\n}\n\n[dir=\"rtl\"] .QuizEntryShow__styles__rightHeader {\n  text-align: right;\n}\n\n.QuizEntryShow__styles__rightHeader button {\n  background-color: transparent;\n  background-color: initial;\n}\n\n.QuizEntryShow__styles__title,\n.QuizEntryShow__styles__interactionTypeName,\n.QuizEntryShow__styles__points {\n  color: ").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";\n  font-size: ").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";\n  margin-left: ").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";\n  margin-right: ").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.QuizEntryShow__styles__itemHolder {\n  margin: ").concat(theme.itemHolderMargin || 'inherit', ";\n}\n\n.QuizEntryShow__styles__optionsButton,\n.QuizEntryShow__styles__dragAndDropHandle {\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  font-size: ").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";\n  margin: ").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', ";\n}\n\n.QuizEntryShow__styles__optionsButton {\n  cursor: pointer;\n}\n");
  },
  'quizEntryWrapper': 'QuizEntryShow__styles__quizEntryWrapper',
  'quizEntryShow': 'QuizEntryShow__styles__quizEntryShow',
  'header': 'QuizEntryShow__styles__header',
  'dndBorder': 'QuizEntryShow__styles__dndBorder',
  'leftHeader': 'QuizEntryShow__styles__leftHeader',
  'rightHeader': 'QuizEntryShow__styles__rightHeader',
  'title': 'QuizEntryShow__styles__title',
  'interactionTypeName': 'QuizEntryShow__styles__interactionTypeName',
  'points': 'QuizEntryShow__styles__points',
  'itemHolder': 'QuizEntryShow__styles__itemHolder',
  'optionsButton': 'QuizEntryShow__styles__optionsButton',
  'dragAndDropHandle': 'QuizEntryShow__styles__dragAndDropHandle'
};
var overlayStyles = {
  componentId: 'bxAMG',
  template: function template(theme) {
    return "\n\n.overlay__styles__root {\n  position: relative;\n  align-self: center;\n}\n\n.overlay__styles__overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  cursor: pointer;\n  z-index: ".concat(theme.overlayZIndex || 'inherit', ";\n\n  height: 100%;\n  width: 100%;\n}\n\n.overlay__styles__overlay:hover {\n    box-sizing: border-box;\n    border-left: ").concat(theme.overlayBarSize || 'inherit', " solid ").concat(theme.overlayBarColor || 'inherit', ";\n  }\n");
  },
  'root': 'overlay__styles__root',
  'overlay': 'overlay__styles__overlay'
};
describe('QuizEntryShow', function () {
  var QuizEntryShowWithContext = withContext(_presenter.default);
  var moveQuizEntryStub = sinon.stub();
  var moveTemporaryQuizEntryStub = sinon.stub();
  var removeQuizEntryStub = sinon.stub();
  var screenreaderNotificationStub = sinon.stub();
  var switchOnEditingStub = sinon.stub();
  var quizEntry = new _QuizEntry.default({
    id: 55,
    entryType: 'Item',
    entryId: 66,
    pointsPossible: 12,
    position: 3
  });
  var item = new _Item.default({
    id: 66,
    title: 'The Title'
  });
  var bank = new _Bank.default({
    id: '1',
    entryCount: 120
  });
  var quizEntry1 = new _QuizEntry.default({
    position: 1
  });
  var quizEntry2 = new _QuizEntry.default({
    position: 2
  });
  var quizEntry4 = new _QuizEntry.default({
    position: 4
  });
  var quizEntry5 = new _QuizEntry.default({
    position: 5
  });
  var quizEntries = (0, _immutable.List)([quizEntry1, quizEntry2, quizEntry, quizEntry4, quizEntry5]);
  var defaultProps = {
    moveQuizEntry: moveQuizEntryStub,
    moveTemporaryQuizEntry: moveTemporaryQuizEntryStub,
    removeQuizEntry: removeQuizEntryStub,
    screenreaderNotification: screenreaderNotificationStub,
    switchOnEditing: switchOnEditingStub,
    errorsAreShowing: (0, _immutable.Map)(),
    quizEntry: quizEntry,
    entry: item,
    displayPosition: 3,
    quizEntries: quizEntries,
    scrollKey: 'scrollKey',
    editQuizEntryToggle: false
  };
  var testbed = createTestbed((0, _dndTestUtils.wrapInDragAndDropTestContext)(QuizEntryShowWithContext), defaultProps);
  beforeEach(function () {
    moveQuizEntryStub.resetHistory();
    moveTemporaryQuizEntryStub.resetHistory();
    removeQuizEntryStub.resetHistory();
    screenreaderNotificationStub.resetHistory();
    switchOnEditingStub.resetHistory();
  });
  shouldRenderComponent(testbed, {}, QuizEntryShowWithContext);
  it('renders the title', function () {
    testbed.render();
    expect(testbed.rootNode.innerText.match(/The Title/)).to.exist();
  });
  it('renders a bank entry', function () {
    var qe = quizEntry.set('entryType', 'Bank');
    sinon.stub(qe, 'getEntry').returns(bank);
    testbed.render({
      quizEntry: qe
    });
    var elem = testbed.findChildrenByType(_IconBank.default)[0];
    expect(elem).to.not.be.undefined();
  });
  context('item-type entry', function () {
    it('renders points possible', function () {
      testbed.render();
      var pointsPossible = testbed.findChildrenByClass(styles.points)[0].innerText;
      expect(pointsPossible).to.eq('12 points');
    });
    it('defaults points possible to 0', function () {
      testbed.render({
        quizEntry: quizEntry.set('pointsPossible', void 0)
      });
      var pointsPossible = testbed.findChildrenByClass(styles.points)[0].innerText;
      expect(pointsPossible).to.eq('0 points');
    });
  });
  it('switches to editing mode on click', function () {
    testbed.render();
    var header = testbed.findChildrenByClass(overlayStyles.overlay)[0];

    _testUtils.default.Simulate.click(header);

    expect(switchOnEditingStub.called).to.be.true();
    expect(screenreaderNotificationStub.called).to.be.true();
  });
  it('does not switch to edit mode if there are errors on another quiz entry', function () {
    testbed.render({
      quizEntryWithErrorsShowing: {
        position: 1
      }
    });
    var header = testbed.findChildrenByClass(overlayStyles.overlay)[0];

    _testUtils.default.Simulate.click(header);

    expect(switchOnEditingStub.called).to.be.false();
    expect(screenreaderNotificationStub.called).to.be.false();
  });
  it('passes scrollKey to ActionButtons', function () {
    testbed.render();
    var actionButtons = testbed.findChildByType(_ActionButtons.default);
    expect(actionButtons.props.scrollKey).to.equal(defaultProps.scrollKey);
  });
  describe('display position', function () {
    it('renders the displayPosition rather than the quizEntry position', function () {
      testbed.render();
      var box = testbed.findChildrenByType(_PositionBox.default)[0];
      expect(box.props.position).to.eql("".concat(defaultProps.displayPosition));
    });
  });
  describe('#shouldDisableDragHandle', function () {
    var runTest = function runTest(position, quizEntries, expected) {
      testbed.render({
        quizEntry: quizEntry.set('position', position),
        quizEntries: quizEntries
      });
      var subject = testbed.findChildByType(_presenter.QuizEntryShowRaw);
      expect(subject.shouldDisableDragHandle()).to.eq(expected);
    };

    it('is true if there is only one item', function () {
      runTest(1, (0, _immutable.List)([quizEntry]), true);
    });
    it('is false if there are successor items', function () {
      runTest(1, (0, _immutable.List)([quizEntry, quizEntry2]), false);
    });
    it('is false if there are predecessor items', function () {
      runTest(2, (0, _immutable.List)([quizEntry1, quizEntry]), false);
    });
  });
  describe('a11y tests', function () {
    it('should meet a11y standards', function (done) {
      testbed.render();
      testbed.checkA11yStandards(done, {
        ignores: ['label', 'label-title-only']
      });
    });
  });
  describe('test with connect', function () {
    var connectedTestbed = createTestbed((0, _dndTestUtils.wrapInDragAndDropTestContext)(withContext(_index.default)), defaultProps);
    shouldRenderComponent(connectedTestbed, {}, _presenter.default);
  });
});