"use strict";

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

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

var _immutable = require("immutable");

var _Button = _interopRequireDefault(require("@instructure/ui-buttons/lib/components/Button"));

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

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

var _Pin = _interopRequireDefault(require("../Pin"));

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

var styles = {
  componentId: 'etiih',
  template: function template(theme) {
    return "\n\n.Sidebar__styles__sidebar {\n  box-sizing: border-box;\n  width: ".concat(theme.sidebarWidthClosed || 'inherit', ";\n  background-color: ").concat(theme.sidebarBackgroundColor || 'inherit', ";\n  border: ").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";\n  color: ").concat(theme.sidebarColor || 'inherit', ";\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  z-index: ").concat(theme.sidebarZIndex || 'inherit', ";\n  transition: ").concat(theme.sidebarTransitionDuration || 'inherit', " ease;\n}\n\n.Sidebar__styles__sidebarWrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.Sidebar__styles__sidebarContent {\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.Sidebar__styles__actionableInfo {\n  border-bottom: ").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";\n  border-right: ").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";\n  text-align: center;\n}\n\n[dir=\"ltr\"] .Sidebar__styles__actionableInfo {\n  text-align: center;\n}\n\n[dir=\"rtl\"] .Sidebar__styles__actionableInfo {\n  text-align: center;\n}\n\n.Sidebar__styles__actionableInfo:hover {\n  border-right: ").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', ";\n}\n\n.Sidebar__styles__description {\n  color: ").concat(theme.descriptionFontColor || 'inherit', ";\n  display: none;\n  font-size: ").concat(theme.descriptionFontSize || 'inherit', ";\n}\n\n.Sidebar__styles__headerSpacing {\n  display: flex;\n  flex-direction: row;\n  padding: ").concat(theme.headerSpacingPadding || 'inherit', ";\n}\n\n.Sidebar__styles__headerBottomBorder {\n  border-bottom: solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";\n  border-color: ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";\n}\n\n.Sidebar__styles__iconWrapper {\n  margin-left: auto;\n}\n\n.Sidebar__styles__pinnedSection {\n  width: 100%;\n  background-color: ").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";\n}\n\n.Sidebar__styles__pinnedSection .Sidebar__styles__headerSpacing {\n  flex-grow: 1;\n}\n\n.Sidebar__styles__questionNavigatorPadding {\n  padding-top: ").concat(theme.questionNavigatorPadding || 'inherit', ";\n}\n\n\n\n\n\n.Sidebar__styles__sidebar.Sidebar__styles__sidebarIsOpen {\n  width: ").concat(theme.sidebarWidthOpen || 'inherit', ";\n  transition: ").concat(theme.sidebarTransitionDuration || 'inherit', " ease;\n  opacity: 1;\n}\n\n.Sidebar__styles__sidebarIsOpen .Sidebar__styles__description {\n    cursor: pointer;\n    display: inline-block;\n  }\n\n.Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n[dir=\"ltr\"] .Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n[dir=\"rtl\"] .Sidebar__styles__sidebarIsOpen .Sidebar__styles__actionableInfo {\n    text-align: inherit;\n  }\n\n.Sidebar__styles__sidebarClosed {\n  display: none;\n}\n\n.Sidebar__styles__sidebarClosed.Sidebar__styles__iconWrapper {\n  margin: auto;\n  display: block;\n}\n\n.Sidebar__styles__commonContainer {\n  height: 100%;\n}\n\n\n\n\n\n@media screen and (--phoneBreakPoint) {\n  .Sidebar__styles__commonContainer {\n    position: relative;\n  }\n\n  .Sidebar__styles__sidebar {\n    position: absolute;\n    width: 0;\n    transition: ").concat(theme.sidebarTransitionDuration || 'inherit', " ease;\n  }\n\n  .Sidebar__styles__sidebar.Sidebar__styles__sidebarIsOpen {\n    display: inline;\n    width: 100vw;\n    max-width: 100vw;\n    transition: ").concat(theme.sidebarTransitionDuration || 'inherit', " ease;\n  }\n}\n");
  },
  'sidebar': 'Sidebar__styles__sidebar',
  'sidebarWrapper': 'Sidebar__styles__sidebarWrapper',
  'sidebarContent': 'Sidebar__styles__sidebarContent',
  'actionableInfo': 'Sidebar__styles__actionableInfo',
  'description': 'Sidebar__styles__description',
  'headerSpacing': 'Sidebar__styles__headerSpacing',
  'headerBottomBorder': 'Sidebar__styles__headerBottomBorder',
  'iconWrapper': 'Sidebar__styles__iconWrapper',
  'pinnedSection': 'Sidebar__styles__pinnedSection',
  'questionNavigatorPadding': 'Sidebar__styles__questionNavigatorPadding',
  'sidebarIsOpen': 'Sidebar__styles__sidebarIsOpen',
  'sidebarClosed': 'Sidebar__styles__sidebarClosed',
  'commonContainer': 'Sidebar__styles__commonContainer'
};
describe('Common Sidebar Presenter', function () {
  var scrollToItemStub = sinon.stub();
  var toggleSidebarStub = sinon.stub();
  var props = {
    children: [_react.default.createElement("div", {
      key: "1"
    }, "child1"), _react.default.createElement("div", {
      key: "2"
    }, "child2")],
    scrollToItem: function scrollToItem() {
      return scrollToItemStub;
    },
    sidebarOpen: true,
    screenreaderNotification: sinon.stub(),
    toggleSidebar: toggleSidebarStub,
    pinnedItems: (0, _immutable.List)([{
      sessionItemId: '11',
      position: 1
    }])
  };
  afterEach(function () {
    scrollToItemStub.resetHistory();
    toggleSidebarStub.resetHistory();
  });
  var testbed = createTestbed(_index.default, props);
  shouldRenderComponent(testbed, {}, _index.default);
  it('displays children', function () {
    testbed.render();
    var text = testbed.getText();
    expect(text).to.contain('child1');
    expect(text).to.contain('child2');
  });
  it('passes the role prop to the wrapper div', function () {
    var role = 'complementary';
    testbed.render({
      role: role
    });
    expect(testbed.findChildrenByTagNameAndAttribute('div', 'role', role)).to.have.length(1);
  });
  describe('sidebar is open', function () {
    it('should append a sidebarIsOpen class', function () {
      testbed.render({
        sidebarOpen: true
      });
      var nodeWithIsOpenClass = testbed.findChildrenByClass(styles.sidebarIsOpen)[0];
      expect(nodeWithIsOpenClass).to.not.be.undefined();
    });
  });
  describe('sidebar is closed', function () {
    it('should not have a sidebarIsOpen class', function () {
      testbed.render({
        sidebarOpen: false
      });
      var nodeWithIsOpenClass = testbed.findChildrenByClass(styles.sidebarIsOpen)[0];
      expect(nodeWithIsOpenClass).to.be.undefined();
    });
  });
  describe('#scrollToTitle', function () {
    it('calls the sidebarActions#scrollToItem with title', function () {
      testbed.render();
      var subject = testbed.findChildByType(_index.default);
      subject.scrollToTitle();
      expect(scrollToItemStub.getCall(0).args[0]).to.eq('title');
    });
  });
  describe('#scrollToInfo', function () {
    it('calls the sidebarActions#scrollToItem with info', function () {
      testbed.render();
      var subject = testbed.findChildByType(_index.default);
      subject.scrollToInfo();
      expect(scrollToItemStub.getCall(0).args[0]).to.eq('instructions');
    });
  });
  describe('sidebar handleBlur', function () {
    it('should close the sidebar on mobile', function (done) {
      testbed.render({
        sidebarOpen: true
      });
      var sidebar = testbed.findChildByType(_index.default);
      sinon.stub(sidebar, 'onPhone').returns(true);
      sidebar.handleBlur();
      setTimeout(function () {
        expect(toggleSidebarStub).to.have.been.called();
        done();
      });
    });
    it('should keep the sidebar open when not on mobile', function (done) {
      testbed.render({
        sidebarOpen: true
      });
      var sidebar = testbed.findChildByType(_index.default);
      sinon.stub(sidebar, 'onPhone').returns(false);
      sidebar.handleBlur();
      setTimeout(function () {
        expect(toggleSidebarStub).to.have.not.been.called();
        done();
      });
    });
    it('should not toggle the sidebar if the sidebar was closed', function (done) {
      testbed.render({
        sidebarOpen: false
      });
      var sidebar = testbed.findChildByType(_index.default);
      sinon.stub(sidebar, 'onPhone').returns(true);
      sidebar.handleBlur();
      setTimeout(function () {
        expect(toggleSidebarStub).to.have.not.been.called();
        done();
      });
    });
  });
  describe('sidebar handleTransitionEnd', function () {
    it('fires a window resize event on transition end', function () {
      testbed.render();
      var resizeStub = sinon.stub();
      window.onresize = resizeStub;
      var sidebar = testbed.findChildByType(_index.default);
      sidebar.handleTransitionEnd();
      expect(resizeStub).to.have.been.called();
    });
  });
  describe('header', function () {
    context('open', function () {
      it('shows \'Question Navigator\' text', function () {
        testbed.render();
        var text = testbed.getText();
        expect(text).to.include('Question Navigator');
      });
      it('renders the IconMoveLeftLine icon', function () {
        testbed.render();
        var icon = testbed.findChildrenByType(_IconMoveLeft.default)[0];
        expect(icon).to.not.be.undefined();
      });
      it('renders the correct button text', function () {
        testbed.render();
        var text = testbed.getText();
        expect(text).to.include('Close Menu');
      });
    });
    context('closed', function () {
      it('hides \'Question Navigator\' text', function () {
        testbed.render({
          sidebarOpen: false
        });
        var navDiv = testbed.findChildrenByClass(styles.sidebarClosed)[0];
        expect(navDiv.innerText).to.include('Question Navigator');
      });
      it('renders the IconMoveRightLine icon', function () {
        testbed.render({
          sidebarOpen: false
        });
        var icon = testbed.findChildrenByType(_IconMoveRight.default)[0];
        expect(icon).to.not.be.undefined();
      });
      it('renders the correct button text', function () {
        testbed.render({
          sidebarOpen: false
        });
        var text = testbed.getText();
        expect(text).to.include('Open Menu');
      });
    });
    it('calls toggle sidebar when menu button clicked', function () {
      testbed.render();
      var btn = testbed.findChildrenByType(_Button.default)[0];
      testbed.click(btn);
      expect(toggleSidebarStub).to.have.been.called();
    });
  });
  describe('title', function () {
    it('renders the string \'Title\' if no prop is given', function () {
      testbed.render();
      var text = testbed.getText();
      expect(text).to.include('Title');
    });
    it('shows the title prop if given', function () {
      testbed.render({
        title: 'hola'
      });
      var text = testbed.getText();
      expect(text).to.include('hola');
      expect(text).not.to.include('Title');
    });
  });
  describe('shows instructions', function () {
    it("Renders 'Instructions' in sidebar", function () {
      testbed.render({
        taking: true
      });
      var instructions = testbed.findChildrenByClass(styles.description)[1];
      expect(instructions.innerText).to.eql('Instructions');
    });
    it('shows instructions by default', function () {
      testbed.render();
      var descriptionElements = testbed.findChildrenByClass(styles.description);
      expect(descriptionElements.length).to.equal(2);
    });
  });
  describe('pinned section', function () {
    context('taking is true', function () {
      it('renders the title of the section', function () {
        testbed.render({
          taking: true
        });
        expect(testbed.getText()).to.include('Pinned Questions');
      });
      it('renders the proper number of pins', function () {
        testbed.render({
          taking: true
        });
        expect(testbed.findChildrenByType(_Pin.default).length).to.eq(1);
      });
      it('calls the scrollToItem stub when clicked', function () {
        testbed.render({
          taking: true
        });
        var pin = testbed.findChildByType(_Pin.default);
        testbed.click(pin);
        expect(scrollToItemStub).to.be.calledWith('11');
      });
    });
    context('taking is not true', function () {
      it('does not render the title of the section', function () {
        testbed.render();
        expect(testbed.getText()).to.not.include('Pinned Questions');
      });
    });
  });
  describe('a11y tests', function () {
    it('should meet a11y standards', function (done) {
      testbed.render();
      testbed.checkA11yStandards(done);
    });
  });
});