"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const test_utilities_1 = require("../../test-utilities");
const Icon_1 = require("../Icon");
const Tabs_1 = require("./Tabs");
describe('<Tabs />', () => {
    describe('selected', () => {
        it('selects the corresponding tab and panel', () => {
            const index = 1;
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2']} selected={index} onChange={jest.fn()} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
        </Tabs_1.Tabs>);
            const buttons = tabs.findAll('button');
            const panels = tabs.findAll('div', { role: 'tabpanel' }) || [];
            expect(buttons[index].prop('aria-selected')).toBe(true);
            expect(panels[index].prop('hidden')).toBe(false);
            expect(buttons[0].prop('aria-selected')).toBe(false);
            expect(panels[0].prop('hidden')).toBe(true);
        });
    });
    describe('onChange', () => {
        it('is called with the corresponding index', () => {
            var _a;
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2']} selected={1} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
        </Tabs_1.Tabs>);
            (_a = tabs.find('button')) === null || _a === void 0 ? void 0 : _a.trigger('onClick');
            expect(onChangeSpy).toHaveBeenCalledWith(0);
        });
    });
    describe('keyboard events', () => {
        it('"Right" selects the next tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={0} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'Right');
            expect(onChangeSpy).toHaveBeenCalledWith(1);
        });
        it('"Right" wraps to the first tab if on the last tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={2} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'Right');
            expect(onChangeSpy).toHaveBeenCalledWith(0);
        });
        it('"Left" selects the prev tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={1} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'Left');
            expect(onChangeSpy).toHaveBeenCalledWith(0);
        });
        it('"Left" wraps to the last tab if on the first tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={0} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'Left');
            expect(onChangeSpy).toHaveBeenCalledWith(2);
        });
        it('"Home" selects the first tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={2} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'Home');
            expect(onChangeSpy).toHaveBeenCalledWith(0);
        });
        it('"End" selects the last tab', () => {
            const onChangeSpy = jest.fn();
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} selected={0} onChange={onChangeSpy} ariaLabel="Tabs test">
          <>Content for tab 1</>
          <>Content for tab 2</>
          <>Content for tab 3</>
        </Tabs_1.Tabs>);
            keydown(tabs, 'End');
            expect(onChangeSpy).toHaveBeenCalledWith(2);
        });
    });
    describe('<Tab />', () => {
        it('`icon` is rendered', () => {
            const tabs = test_utilities_1.mountWithContext(<Tabs_1.Tabs tabs={[{ label: 'Tab 1', icon: 'truck' }]} selected={0} onChange={jest.fn()} ariaLabel="Tabs test">
          <>Content for tab 1</>
        </Tabs_1.Tabs>);
            expect(tabs).toContainReactComponent(Icon_1.Icon, { source: 'truck' });
        });
    });
});
function keydown(tabs, event) {
    var _a;
    const tabList = (_a = tabs.find('div', { role: 'tablist' })) === null || _a === void 0 ? void 0 : _a.domNode;
    tabs.act(() => tabList.dispatchEvent(new KeyboardEvent('keydown', { key: event })));
}