@renderlesskit/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
100 lines (78 loc) • 3.92 kB
JavaScript
;
var _react = _interopRequireDefault(require("react"));
var _reakitTestUtils = require("reakit-test-utils");
var _jestAxe = require("jest-axe");
var _LiveAnnouncer = require("./LiveAnnouncer");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
beforeEach(function () {
(0, _LiveAnnouncer.destroyAnnouncer)();
});
describe("LiveAnnouncer", function () {
it("should render correctly", function () {
(0, _LiveAnnouncer.announce)("Hello world", "assertive", 0);
expect(document.body).toMatchSnapshot();
(0, _LiveAnnouncer.destroyAnnouncer)();
expect(document.body).toMatchInlineSnapshot("<body />");
});
test("LiveRegionAnnouncer", function () {
var assertiveMessage = "Hello Assertive";
var politeMessage = "Hello Polite";
var Announcer = function Announcer() {
var ref = _react.default.useRef();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LiveAnnouncer.LiveRegionAnnouncer, {
ref: ref
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
return ref.current.announce(assertiveMessage, "assertive", 0);
},
children: "announce assertive"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
return ref.current.announce(politeMessage, "polite", 0);
},
children: "announce polite"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
onClick: function onClick() {
return ref.current.clear();
},
children: "clear"
})]
});
};
var _render = (0, _reakitTestUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Announcer, {})),
text = _render.getByText,
testIdAll = _render.queryAllByTestId;
_reakitTestUtils.fireEvent.click(text("announce assertive"));
expect(testIdAll("announcer-assertive")[1]).toHaveTextContent(assertiveMessage); // Clear
_reakitTestUtils.fireEvent.click(text("clear"));
expect(testIdAll("announcer-assertive")[1]).toHaveTextContent(""); // Polite
_reakitTestUtils.fireEvent.click(text("announce polite"));
expect(testIdAll("announcer-polite")[1]).toHaveTextContent(politeMessage); // Clear
_reakitTestUtils.fireEvent.click(text("clear"));
expect(testIdAll("announcer-polite")[1]).toHaveTextContent("");
});
test("LiveAnnouncer renders with no a11y violations", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var results;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
(0, _LiveAnnouncer.announce)("Hello a11y");
_context.next = 3;
return (0, _jestAxe.axe)(document.body);
case 3:
results = _context.sent;
expect(results).toHaveNoViolations();
case 5:
case "end":
return _context.stop();
}
}
}, _callee);
})));
});
//# sourceMappingURL=LiveAnnouncer.test.js.map