optimizely-oui/dist/js/utils/tests/accessibility.js

Optimizely's Component Library.

"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

var _enzyme = require("enzyme");

var _accessibility = require("../accessibility");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var InputListComponent = (0, _accessibility.keyboardTracker)(function (props) {
  var handleKeyDown = props.handleKeyDown,
      currentFauxFocusIndex = props.currentFauxFocusIndex,
      setItemCount = props.setItemCount;
  (0, _react.useEffect)(function () {
    setItemCount(3);
  }, []);
  return _react["default"].createElement("div", null, _react["default"].createElement("input", {
    onKeyDown: handleKeyDown
  }), _react["default"].createElement("ul", null, [1, 2, 3].map(function (item, idx) {
    return _react["default"].createElement("li", {
      className: currentFauxFocusIndex === idx ? "selected" : "",
      key: idx
    }, "Item ", item);
  })));
});
var InputListComponentWithAdditionalItems = (0, _accessibility.keyboardTracker)(function (props) {
  var handleKeyDown = props.handleKeyDown,
      currentFauxFocusIndex = props.currentFauxFocusIndex,
      setItemCount = props.setItemCount;
  (0, _react.useEffect)(function () {
    setItemCount(3);
  }, []);
  return _react["default"].createElement("div", null, _react["default"].createElement("input", {
    onKeyDown: handleKeyDown
  }), _react["default"].createElement("ul", null, _react["default"].createElement("li", {
    className: currentFauxFocusIndex === 0 ? "selected" : "",
    key: 0
  }, "Additional Item 1"), _react["default"].createElement("li", {
    className: currentFauxFocusIndex === 1 ? "selected" : "",
    key: 1
  }, "Additional Item 2")), _react["default"].createElement("ul", null, [1, 2, 3].map(function (item, idx) {
    return _react["default"].createElement("li", {
      className: currentFauxFocusIndex === idx + 2 ? "selected" : "",
      key: idx + 2
    }, "Item ", item);
  })));
});
describe("utils/accessibility", function () {
  describe("#getAssistiveTextFromColorClass", function () {
    it("should throw error if non-existent class is provided", function () {
      expect(function () {
        (0, _accessibility.getAssistiveTextFromColorClass)("foo-bar");
      }).toThrow();
    });
    it("should return a word if a correct color class is provided", function () {
      expect((0, _accessibility.getAssistiveTextFromColorClass)("good-news")).toBe("Success");
    });
  });
  describe("#keyboardTracker", function () {
    var component;
    describe("without additionalItems", function () {
      beforeEach(function () {
        component = (0, _enzyme.mount)(_react["default"].createElement(InputListComponent, null));
      });
      it("should default to index 0", function () {
        var selected = component.find("li.selected");
        expect(selected).toHaveLength(1);
        expect(selected.at(0).text()).toBe("Item 1");
      });
      it("should track ArrowDown and ArrowUp keys", function () {
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        var selected = component.find("li.selected");
        expect(selected).toHaveLength(1);
        expect(selected.at(0).text()).toBe("Item 2");
      });
      it("should limit key tracking to the size of the list", function () {
        // Simulate arrow key'ing all the way down, then all the way back up
        var selected = component.find.bind(component, "li.selected");
        expect(selected().first().text()).toBe("Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 3");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 3");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Item 1");
      });
    });
    describe("with additional items", function () {
      beforeEach(function () {
        component = (0, _enzyme.mount)(_react["default"].createElement(InputListComponentWithAdditionalItems, {
          additionalItems: 2
        }));
      });
      it("should default to index 0", function () {
        var selected = component.find("li.selected");
        expect(selected).toHaveLength(1);
        expect(selected.at(0).text()).toBe("Additional Item 1");
      });
      it("should track ArrowDown and ArrowUp keys", function () {
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        var selected = component.find("li.selected");
        expect(selected).toHaveLength(1);
        expect(selected.at(0).text()).toBe("Additional Item 2");
      });
      it("should limit key tracking to the size of the list", function () {
        // Simulate arrow key'ing all the way down, then all the way back up
        var selected = component.find.bind(component, "li.selected");
        expect(selected().first().text()).toBe("Additional Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Additional Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 3");
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowDown"
        });
        expect(selected().first().text()).toBe("Item 3");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Additional Item 2");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Additional Item 1");
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        component.find("input").simulate("keydown", {
          key: "ArrowUp"
        });
        expect(selected().first().text()).toBe("Additional Item 1");
      });
    });
  });
});