@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e3dbad

package/select/Select.accessibility.test.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Select = _interopRequireDefault(require("./Select"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _disabledRules = require("../../test/accessibility/rules/specific/select/disabledRules.js");
+// TODO: REMOVE
+
+var disabledRules = {
+  rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
+    rulesObj[rule] = {
+      enabled: false
+    };
+    return rulesObj;
+  }, {})
+};
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0,0h24v24H0V0z",
+  fill: "none"
+})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
+}))));
+var group_options = [{
+  label: "Group 001",
+  options: [{
+    label: "Option 001",
+    value: "1"
+  }, {
+    label: "Option 002",
+    value: "2"
+  }, {
+    label: "Option 003",
+    value: "3"
+  }]
+}, {
+  label: "Group 002",
+  options: [{
+    label: "Option 004",
+    value: "4"
+  }, {
+    label: "Option 005",
+    value: "5"
+  }, {
+    label: "Option 006",
+    value: "6"
+  }]
+}, {
+  label: "Group 003",
+  options: [{
+    label: "Option 007",
+    value: "7"
+  }, {
+    label: "Option 008",
+    value: "8"
+  }, {
+    label: "Option 009",
+    value: "9"
+  }]
+}, {
+  label: "Group 004",
+  options: [{
+    label: "Option 010",
+    value: "10"
+  }, {
+    label: "Option 011",
+    value: "11"
+  }, {
+    label: "Option 012",
+    value: "12"
+  }]
+}, {
+  label: "Group 005",
+  options: [{
+    label: "Option 013",
+    value: "13"
+  }, {
+    label: "Option 014",
+    value: "14"
+  }, {
+    label: "Option 015",
+    value: "15"
+  }]
+}];
+var single_options = [{
+  label: "Option 01",
+  value: "1",
+  icon: iconSVG
+}, {
+  label: "Option 02",
+  value: "2",
+  icon: iconSVG
+}, {
+  label: "Option 03",
+  value: "3",
+  icon: iconSVG
+}, {
+  label: "Option 04",
+  value: "4",
+  icon: iconSVG
+}];
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+describe("Select component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, baseElement, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            helperText: "test-select-helper-text",
+            placeholder: "Example text",
+            options: single_options,
+            defaultValue: "1",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            searchable: true
+          }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            helperText: "test-select-helper-text",
+            placeholder: "Example text",
+            options: single_options,
+            defaultValue: ["4", "2", "6"],
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            searchable: true,
+            multiple: true,
+            optional: true
+          }))), baseElement = _render.baseElement;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for group mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, baseElement, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            helperText: "test-select-helper-text",
+            placeholder: "Example text",
+            options: group_options,
+            defaultValue: ["4", "2", "6"],
+            error: "Error",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            searchable: true,
+            multiple: true
+          }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            helperText: "test-select-helper-text",
+            placeholder: "Example text",
+            options: group_options,
+            defaultValue: ["4", "2", "6"],
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            searchable: true,
+            multiple: true,
+            disabled: true
+          }))), baseElement = _render2.baseElement;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});