84 lines
5.4 KiB
JavaScript
84 lines
5.4 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var modalize_1 = require("./modalize");
|
|
function getHiddenElements() {
|
|
function walkTree(el) {
|
|
if (el.getAttribute('aria-hidden') === 'true') {
|
|
hiddenIds.push(el.id);
|
|
}
|
|
Array.from(el.children).forEach(walkTree);
|
|
}
|
|
var hiddenIds = [];
|
|
walkTree(document.body);
|
|
return hiddenIds;
|
|
}
|
|
describe('modalize', function () {
|
|
afterEach(function () {
|
|
document.body.innerHTML = '';
|
|
});
|
|
var modalizeId = 'childToModalize';
|
|
it('sets and removes aria-hidden', function () {
|
|
document.body.innerHTML = "\n <div id=\"root\">\n <div id=\"parentBefore\">\n <div id=\"parentBeforeChild\"></div>\n </div>\n <div id=\"parent\">\n <div id=\"siblingBefore\">\n <div id=\"siblingBeforeChild\"></div>\n </div>\n <div id=\"".concat(modalizeId, "\">\n <div id=\"grandchild\"></div>\n </div>\n <div id=\"siblingAfter\">\n <div id=\"siblingAfterChild\"></div>\n </div>\n </div>\n <div id=\"parentAfter\">\n <div id=\"parentAfterChild\"></div>\n </div>\n </div>\n ");
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
// modalize the target element, verify aria-hidden is correct on all elements
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['parentBefore', 'siblingBefore', 'siblingAfter', 'parentAfter']);
|
|
// unmodalize, verify aria-hidden is correct on all elements
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
});
|
|
it('does not remove aria-hidden from initially hidden element when unmodalizing', function () {
|
|
document.body.innerHTML = "\n <div id=\"root\">\n <div id=\"".concat(modalizeId, "\"></div>\n <div id=\"alreadyHidden\" aria-hidden=\"true\"></div>\n <div id=\"siblingAfter\"></div>\n </div>\n ");
|
|
expect(getHiddenElements()).toStrictEqual(['alreadyHidden']);
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['alreadyHidden', 'siblingAfter']);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual(['alreadyHidden']);
|
|
});
|
|
it('handles if there is nothing to hide', function () {
|
|
document.body.innerHTML = "\n <div id=\"root\">\n <div id=\"".concat(modalizeId, "\">\n <div id=\"grandchild\"></div>\n </div>\n </div>\n ");
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
});
|
|
it('restores original aria-hidden state (false or unset)', function () {
|
|
document.body.innerHTML = "\n <div id=\"siblingBefore\" aria-hidden=\"false\"></div>\n <div id=\"".concat(modalizeId, "\"></div>\n <div id=\"siblingAfter\"></div>\n ");
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['siblingBefore', 'siblingAfter']);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
expect(document.getElementById('siblingBefore').getAttribute('aria-hidden')).toBe('false');
|
|
expect(document.getElementById('siblingAfter').getAttribute('aria-hidden')).toBeNull();
|
|
});
|
|
it('handles if element is direct child of body', function () {
|
|
document.body.innerHTML = "\n <div id=\"siblingBefore\"></div>\n <div id=\"".concat(modalizeId, "\"></div>\n <div id=\"siblingAfter\"></div>\n ");
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['siblingBefore', 'siblingAfter']);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
});
|
|
it('handles text nodes', function () {
|
|
// The text nodes can't be hidden, but at least shouldn't cause exceptions
|
|
document.body.innerHTML = "\n <div id=\"siblingBefore\"></div>\n some text\n <div id=\"".concat(modalizeId, "\"></div>\n some other text\n <div id=\"siblingAfter\"></div>\n ");
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['siblingBefore', 'siblingAfter']);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
});
|
|
it('ignores template, script, and style tags', function () {
|
|
document.body.innerHTML = "\n <script></script>\n <style></style>\n <template></template>\n <div id=\"siblingBefore\"></div>\n <div id=\"".concat(modalizeId, "\"></div>\n <div id=\"siblingAfter\"></div>\n ");
|
|
var child = document.getElementById(modalizeId);
|
|
var unmodalize = (0, modalize_1.modalize)(child);
|
|
expect(getHiddenElements()).toStrictEqual(['siblingBefore', 'siblingAfter']);
|
|
unmodalize();
|
|
expect(getHiddenElements()).toStrictEqual([]);
|
|
});
|
|
});
|
|
//# sourceMappingURL=modalize.test.js.map
|