import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createTestContainer } from '@fluentui/test-utilities';
import { isElementVisible, isElementTabbable, focusAsync, getElementIndexPath, getFirstTabbable, getFocusableByIndexPath, getLastTabbable, } from './focus';
function renderIntoDocument(element, container) {
    var component = ReactDOM.render(element, container);
    var renderedDOM = ReactDOM.findDOMNode(component);
    return renderedDOM;
}
// JSDOM does not currently set `delegatesFocus`
// https://github.com/jsdom/jsdom/blob/b7683ed68ebe259cd2c68e5faf12d484a785f45f/lib/jsdom/living/nodes/Element-impl.js#L420-L424
function createDivWithShadowRoot(initOptions) {
    var div = {
        getAttribute: function (qualifiedName) { return null; },
        shadowRoot: {
            mode: initOptions.mode,
            delegatesFocus: initOptions.delegatesFocus,
        },
    };
    return div;
}
function makeShadowDiv(innerHTML) {
    var ShadowDiv = function () {
        var setRef = function (node) {
            if (node) {
                node.attachShadow({ mode: 'open' });
                node.shadowRoot.innerHTML = innerHTML;
            }
        };
        return React.createElement("div", { className: "parent", ref: setRef });
    };
    return ShadowDiv;
}
describe('isElementVisible', function () {
    var testContainer;
    afterEach(function () {
        if (testContainer) {
            ReactDOM.unmountComponentAtNode(testContainer);
            testContainer.remove();
            testContainer = undefined;
        }
    });
    it('returns false if data-is-visible is false', function () {
        testContainer = createTestContainer();
        var _hiddenElement = renderIntoDocument(React.createElement("div", { "data-is-visible": false },
            React.createElement("button", null)), testContainer);
        expect(isElementVisible(_hiddenElement)).toEqual(false);
    });
    it('returns true if data-is-visible is true', function () {
        testContainer = createTestContainer();
        var _visibleElement = renderIntoDocument(React.createElement("div", { "data-is-visible": true },
            React.createElement("button", null)), testContainer);
        expect(isElementVisible(_visibleElement)).toEqual(true);
    });
    it('returns true if data-is-visible is undefined but element is visible', function () {
        testContainer = createTestContainer();
        var _element = renderIntoDocument(React.createElement("div", null,
            React.createElement("button", null)), testContainer);
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        _element.isVisible = true;
        expect(isElementVisible(_element)).toEqual(true);
    });
});
describe('isElementTabbable', function () {
    it('returns false on null', function () {
        expect(isElementVisible(null)).toEqual(false);
    });
    it('returns false on normal divs', function () {
        var div = document.createElement('div');
        expect(isElementTabbable(div)).toEqual(false);
    });
    it('returns false on disabled buttons', function () {
        var button = document.createElement('button');
        button.setAttribute('disabled', 'true');
        expect(isElementTabbable(button)).toEqual(false);
    });
    it('returns true on buttons', function () {
        var button = document.createElement('button');
        expect(isElementTabbable(button)).toEqual(true);
    });
    it('returns true on anchors', function () {
        var anchor = document.createElement('a');
        expect(isElementTabbable(anchor)).toEqual(true);
    });
    it('returns true on input elements', function () {
        var input = document.createElement('input');
        expect(isElementTabbable(input)).toEqual(true);
    });
    it('returns true on select elements', function () {
        var select = document.createElement('select');
        expect(isElementTabbable(select)).toEqual(true);
    });
    it('returns true on textarea elements', function () {
        var textarea = document.createElement('textarea');
        expect(isElementTabbable(textarea)).toEqual(true);
    });
    it('works with tabbable divs', function () {
        var div = document.createElement('div');
        div.tabIndex = 0;
        expect(isElementTabbable(div)).toEqual(true);
    });
    it('returns false with role=button divs', function () {
        var div = document.createElement('div');
        div.setAttribute('role', 'button');
        expect(isElementTabbable(div)).toEqual(false);
    });
    it('returns false with role=button disabled buttons', function () {
        var button = document.createElement('button');
        button.setAttribute('role', 'button');
        button.setAttribute('disabled', 'true');
        expect(isElementTabbable(button)).toEqual(false);
    });
    it('returns false with -1 tabIndex', function () {
        var button = document.createElement('button');
        button.tabIndex = -1;
        expect(isElementTabbable(button, true)).toEqual(false);
    });
    it('returns true for elements with shadowRoot.delegatesFocus=true', function () {
        var _a;
        var div = createDivWithShadowRoot({ mode: 'open', delegatesFocus: true });
        expect((_a = div.shadowRoot) === null || _a === void 0 ? void 0 : _a.delegatesFocus).toEqual(true);
        expect(isElementTabbable(div)).toEqual(true);
    });
    it('returns true for elements with shadowRoot.delegatesFocus=false', function () {
        var div = createDivWithShadowRoot({ mode: 'open' });
        expect(isElementTabbable(div)).toEqual(false);
    });
    it('returns true for elements with shadowRoot.delegatesFocus=true when set to ignore shadow roots', function () {
        var div = createDivWithShadowRoot({ mode: 'open', delegatesFocus: true });
        expect(isElementTabbable(div, undefined, false)).toEqual(false);
    });
});
describe('focusAsync', function () {
    var testContainer;
    afterEach(function () {
        if (testContainer) {
            ReactDOM.unmountComponentAtNode(testContainer);
            testContainer.remove();
            testContainer = undefined;
        }
    });
    beforeAll(function () {
        jest.useFakeTimers();
    });
    afterAll(function () {
        jest.useRealTimers();
    });
    it('focuses on an item on the next frame', function () {
        testContainer = createTestContainer();
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement("button", { className: "a" }, "a"),
            React.createElement("button", { className: "b" }, "b"),
            React.createElement("button", { className: "c" }, "c")), testContainer);
        var buttonA = container.querySelector('.a');
        var buttonB = container.querySelector('.b');
        var buttonC = container.querySelector('.c');
        // Focus the first button.
        focusAsync(buttonA);
        window.requestAnimationFrame(function () {
            expect(container.ownerDocument.activeElement).toBe(buttonA);
            // Focus the second button, then the third before the next frame
            focusAsync(buttonB);
            focusAsync(buttonC);
            window.requestAnimationFrame(function () {
                expect(container.ownerDocument.activeElement).toBe(buttonC);
            });
        });
        jest.runAllTimers();
    });
    it('can focus a component which implements focus()', function () {
        var calledFocus = false;
        var fakeComponent = {
            ownerDocument: {},
            focus: function () { return (calledFocus = true); },
        };
        focusAsync(fakeComponent);
        jest.runAllTimers();
        expect(calledFocus).toEqual(true);
    });
});
describe('getFocusableByIndexPath', function () {
    it('can recover a path', function () {
        var parent = document.createElement('div');
        parent.innerHTML = "\n      <div>\n        <div></div>\n        <div></div>\n        <div>\n          <div></div>\n          <button id='child' data-is-visible='true' />\n        </div>\n      </div>\n    ";
        var child = parent.querySelector('#child');
        expect(getFocusableByIndexPath(parent, [0, 2, 1])).toEqual(child);
    });
    it('ignores hidden elements', function () {
        var parent = document.createElement('div');
        parent.innerHTML = "\n      <div>\n        <div></div>\n        <div></div>\n        <div>\n          <div></div>\n          <button id='child' data-is-visible='false' />\n        </div>\n      </div>\n    ";
        parent.querySelector('#child');
        expect(getFocusableByIndexPath(parent, [0, 2, 1])).toEqual(null);
    });
    it('can fallback to a previous element', function () {
        var parent = document.createElement('div');
        parent.innerHTML = "\n      <div>\n        <button id='child' data-is-visible='true'>\n          <div>\n            <div/>\n          </div>\n        </button>\n      </div>\n    ";
        var child = parent.querySelector('#child');
        expect(getFocusableByIndexPath(parent, [0, 0, 0, 0, 0, 0])).toEqual(child);
    });
});
describe('getElementIndexPath', function () {
    it('can get a path', function () {
        var parent = document.createElement('div');
        parent.innerHTML = "\n        <div>\n          <div></div>\n          <div></div>\n          <div>\n            <div></div>\n            <div id='child'></div>\n          </div>\n        </div>\n      ";
        var child = parent.querySelector('#child');
        expect(getElementIndexPath(parent, child)).toEqual([0, 2, 1]);
    });
    it('can handle the same element', function () {
        var parent = document.createElement('div');
        expect(getElementIndexPath(parent, parent)).toEqual([]);
    });
});
describe('getFirstTabbable', function () {
    var testContainer;
    afterEach(function () {
        if (testContainer) {
            ReactDOM.unmountComponentAtNode(testContainer);
            testContainer.remove();
            testContainer = undefined;
        }
    });
    it('focuses on the next tabbable item', function () {
        testContainer = createTestContainer();
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement("div", { className: "parent" },
                React.createElement("button", { className: "a", "data-is-visible": true }, "a"),
                React.createElement("button", { className: "b", "data-is-visible": true }, "b"),
                React.createElement("button", { className: "c", "data-is-visible": true }, "c"))), testContainer);
        var parent = container.querySelector('.parent');
        var buttonA = container.querySelector('.a');
        var buttonB = container.querySelector('.b');
        expect(getFirstTabbable(parent, buttonA, true, false)).toEqual(buttonB);
    });
    it('focuses on the next tabbable item in shadow DOM', function () {
        var _a, _b;
        testContainer = createTestContainer();
        var innerHTML = "\n    <button class=\"a\" data-is-visible=\"true\">\n      a\n    </button>\n    <button class=\"b\" data-is-visible=\"true\">\n      b\n    </button>\n    <button class=\"c\" data-is-visible=\"true\">\n      c\n    </button>\n    ";
        var ShadowDiv = makeShadowDiv(innerHTML);
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement(ShadowDiv, null)), testContainer);
        var parent = container.querySelector('.parent');
        var buttonA = (_a = parent === null || parent === void 0 ? void 0 : parent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.a');
        var buttonB = (_b = parent === null || parent === void 0 ? void 0 : parent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.b');
        expect(getFirstTabbable(parent, buttonA, true, false, true)).toEqual(buttonB);
    });
    it('does not focus on an item with tabIndex of -1', function () {
        testContainer = createTestContainer();
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement("div", { className: "parent" },
                React.createElement("button", { className: "a", "data-is-visible": true, tabIndex: -1 }, "a"),
                React.createElement("button", { className: "b", "data-is-visible": true, tabIndex: -1 }, "b"),
                React.createElement("button", { className: "c", "data-is-visible": true, tabIndex: -1 }, "c"))), testContainer);
        var parent = container.querySelector('.parent');
        var buttonA = container.querySelector('.a');
        expect(getFirstTabbable(parent, buttonA, true, false)).toEqual(null);
    });
});
describe('getLastTabbable', function () {
    var testContainer;
    afterEach(function () {
        if (testContainer) {
            ReactDOM.unmountComponentAtNode(testContainer);
            testContainer.remove();
            testContainer = undefined;
        }
    });
    it('focuses on the last tabbable item', function () {
        testContainer = createTestContainer();
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement("div", { className: "parent" },
                React.createElement("button", { className: "a", "data-is-visible": true }, "a"),
                React.createElement("button", { className: "b", "data-is-visible": true }, "b"),
                React.createElement("button", { className: "c", "data-is-visible": true }, "c"))), testContainer);
        var parent = container.querySelector('.parent');
        var buttonB = container.querySelector('.b');
        var buttonC = container.querySelector('.c');
        expect(getLastTabbable(parent, buttonC, true, false)).toEqual(buttonB);
    });
    it('focuses on the last tabbable item in shadow DOM', function () {
        var _a, _b;
        testContainer = createTestContainer();
        var innerHTML = "\n    <button class=\"a\" data-is-visible=\"true\">\n      a\n    </button>\n    <button class=\"b\" data-is-visible=\"true\">\n      b\n    </button>\n    <button class=\"c\" data-is-visible=\"true\">\n      c\n    </button>\n    ";
        var ShadowDiv = makeShadowDiv(innerHTML);
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement(ShadowDiv, null)), testContainer);
        var parent = container.querySelector('.parent');
        var buttonB = (_a = parent === null || parent === void 0 ? void 0 : parent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b');
        var buttonC = (_b = parent === null || parent === void 0 ? void 0 : parent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.c');
        expect(getLastTabbable(parent, buttonC, true, false, true)).toEqual(buttonB);
    });
    it('does not focus on an item with tabIndex of -1', function () {
        testContainer = createTestContainer();
        var container = renderIntoDocument(React.createElement("div", null,
            React.createElement("div", { className: "parent" },
                React.createElement("button", { className: "a", "data-is-visible": true, tabIndex: -1 }, "a"),
                React.createElement("button", { className: "b", "data-is-visible": true, tabIndex: -1 }, "b"),
                React.createElement("button", { className: "c", "data-is-visible": true, tabIndex: -1 }, "c"))), testContainer);
        var parent = container.querySelector('.parent');
        var buttonC = container.querySelector('.c');
        expect(getLastTabbable(parent, buttonC, true, false)).toEqual(null);
    });
});
//# sourceMappingURL=focus.test.js.map