619 lines
25 KiB
JavaScript
619 lines
25 KiB
JavaScript
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
|
|
import React from 'react';
|
|
import { render, screen } from '@testing-library/react';
|
|
import user from '@testing-library/user-event';
|
|
import '@testing-library/jest-dom';
|
|
import { Offcanvas, OffcanvasBody, OffcanvasHeader, Button } from '..';
|
|
import { testForCustomClass } from '../testUtils';
|
|
describe('Offcanvas', function () {
|
|
var toggle;
|
|
beforeEach(function () {
|
|
toggle = function toggle() {};
|
|
jest.useFakeTimers();
|
|
});
|
|
afterEach(function () {
|
|
jest.clearAllTimers();
|
|
document.body.removeAttribute('style');
|
|
});
|
|
it('should render offcanvas portal into DOM', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(screen.getByText(/yo/i)).toBeInTheDocument();
|
|
});
|
|
it('should render with the class "offcanvas"', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i)).toHaveClass('offcanvas');
|
|
});
|
|
it('should render with the backdrop with the class "offcanvas-backdrop" by default', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(document.getElementsByClassName('offcanvas-backdrop')).toHaveLength(1);
|
|
});
|
|
it('should not render with the backdrop with the class "offcanvas-backdrop" when backdrop is "false"', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
backdrop: false
|
|
}, "Yo!"));
|
|
expect(document.getElementsByClassName('offcanvas').length).toBe(1);
|
|
expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(0);
|
|
});
|
|
it('should have custom class name if provided', function () {
|
|
testForCustomClass(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
});
|
|
});
|
|
it('should render with additional props if provided', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
style: {
|
|
maxWidth: '95%'
|
|
}
|
|
}, "Yo!"));
|
|
expect(document.getElementsByClassName('offcanvas')[0].style.maxWidth).toBe('95%');
|
|
});
|
|
it('should render without fade transition if provided with fade={false}', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
fade: false,
|
|
className: "fadeless-offcanvas"
|
|
}, "Howdy!"));
|
|
expect(document.getElementsByClassName('fadeless-offcanvas')[0]).not.toHaveClass('fade');
|
|
});
|
|
it('should render when expected when passed offcanvasTransition and backdropTransition props', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
offcanvasTransition: {
|
|
timeout: 2
|
|
},
|
|
backdropTransition: {
|
|
timeout: 10
|
|
},
|
|
className: "custom-timeout-offcanvas"
|
|
}, "Hello, world!"));
|
|
expect(document.getElementsByClassName('custom-timeout-offcanvas')[0]).toHaveClass('fade');
|
|
expect(document.getElementsByClassName('custom-timeout-offcanvas')[0]).not.toHaveClass('show');
|
|
expect(document.getElementsByClassName('offcanvas-backdrop')[0]).not.toHaveClass('show');
|
|
jest.advanceTimersByTime(20);
|
|
expect(document.getElementsByClassName('custom-timeout-offcanvas')[0]).toHaveClass('show');
|
|
expect(document.getElementsByClassName('offcanvas-backdrop')[0]).toHaveClass('show');
|
|
});
|
|
it('should render with class "offcanvas-backdrop" and have custom class name if provided with backdropClassName', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
backdropClassName: "my-custom-offcanvas"
|
|
}, "Yo!"));
|
|
expect(document.getElementsByClassName('offcanvas-backdrop my-custom-offcanvas')[0]).toBeInTheDocument();
|
|
});
|
|
it('should render with the class "offcanvas-${direction}" when direction is passed', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
direction: "top"
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i)).toHaveClass('offcanvas-top');
|
|
});
|
|
it('should render offcanvas when isOpen is true', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i)).toHaveClass('offcanvas');
|
|
expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(1);
|
|
});
|
|
it('should render offcanvas with default role of "dialog"', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i).getAttribute('role')).toBe('dialog');
|
|
});
|
|
it('should render offcanvas with provided role', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
role: "alert"
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i).getAttribute('role')).toBe('alert');
|
|
});
|
|
it('should render offcanvas with aria-labelledby provided labelledBy', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
labelledBy: "myOffcanvasTitle"
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i).getAttribute('aria-labelledby')).toBe('myOffcanvasTitle');
|
|
});
|
|
it('should not render offcanvas when isOpen is false', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.queryByText(/yo/i)).not.toBeInTheDocument();
|
|
});
|
|
it('should toggle offcanvas', function () {
|
|
var _render = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle
|
|
}, "Yo!")),
|
|
rerender = _render.rerender;
|
|
expect(screen.queryByText(/yo/i)).not.toBeInTheDocument();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.queryByText(/yo/i)).toBeInTheDocument();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
expect(screen.queryByText(/yo/i)).toBeInTheDocument();
|
|
});
|
|
it('should call onClosed & onOpened', function () {
|
|
var onOpened = jest.fn();
|
|
var onClosed = jest.fn();
|
|
var _render2 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle
|
|
}, "Yo!")),
|
|
rerender = _render2.rerender;
|
|
expect(onOpened).not.toHaveBeenCalled();
|
|
expect(onClosed).not.toHaveBeenCalled();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(onOpened).toHaveBeenCalledTimes(1);
|
|
expect(onClosed).not.toHaveBeenCalled();
|
|
onOpened.mockClear();
|
|
onClosed.mockClear();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(onClosed).toHaveBeenCalledTimes(1);
|
|
expect(onOpened).not.toHaveBeenCalled();
|
|
});
|
|
it('should call onClosed & onOpened when fade={false}', function () {
|
|
var onOpened = jest.fn();
|
|
var onClosed = jest.fn();
|
|
var _render3 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle,
|
|
fade: false
|
|
}, "Yo!")),
|
|
rerender = _render3.rerender;
|
|
expect(onOpened).not.toHaveBeenCalled();
|
|
expect(onClosed).not.toHaveBeenCalled();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle,
|
|
fade: false
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(onOpened).toHaveBeenCalledTimes(1);
|
|
expect(onClosed).not.toHaveBeenCalled();
|
|
onOpened.mockClear();
|
|
onClosed.mockClear();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
onOpened: onOpened,
|
|
onClosed: onClosed,
|
|
toggle: toggle,
|
|
fade: false
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(onClosed).toHaveBeenCalledTimes(1);
|
|
expect(onOpened).not.toHaveBeenCalled();
|
|
});
|
|
it('should call toggle when escape key pressed', function () {
|
|
var toggle = jest.fn();
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
user.keyboard('{esc}');
|
|
expect(toggle).toHaveBeenCalled();
|
|
});
|
|
it('should not call toggle when escape key pressed when keyboard is false', function () {
|
|
var toggle = jest.fn();
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
keyboard: false
|
|
}, "Yo!"));
|
|
user.keyboard('{esc}');
|
|
expect(toggle).not.toHaveBeenCalled();
|
|
});
|
|
it('should call toggle when clicking backdrop', function () {
|
|
var toggle = jest.fn();
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
id: "clicker"
|
|
}, "Does Nothing")));
|
|
user.click(screen.getByText(/does nothing/i));
|
|
expect(toggle).not.toHaveBeenCalled();
|
|
user.click(document.getElementsByClassName('offcanvas-backdrop')[0]);
|
|
expect(toggle).toHaveBeenCalled();
|
|
});
|
|
it('should call toggle when clicking backdrop when fade is false', function () {
|
|
var toggle = jest.fn();
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
fade: false
|
|
}, /*#__PURE__*/React.createElement("button", {
|
|
id: "clicker"
|
|
}, "Does Nothing")));
|
|
user.click(screen.getByText(/does nothing/i));
|
|
expect(toggle).not.toHaveBeenCalled();
|
|
user.click(document.getElementsByClassName('offcanvas-backdrop')[0]);
|
|
expect(toggle).toHaveBeenCalled();
|
|
});
|
|
it('should destroy this._element', function () {
|
|
var _render4 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "thor and dr.johns")),
|
|
rerender = _render4.rerender;
|
|
var element = screen.getByText(/thor and dr.johns/i);
|
|
expect(element).toBeInTheDocument();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle
|
|
}, "thor and dr.johns"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(element).not.toBeInTheDocument();
|
|
});
|
|
it('should destroy this._element when unmountOnClose prop set to true', function () {
|
|
var _render5 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
unmountOnClose: true
|
|
}, "thor and dr.johns")),
|
|
rerender = _render5.rerender;
|
|
var element = screen.getByText(/thor and dr.johns/i);
|
|
expect(element).toBeInTheDocument();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle,
|
|
unmountOnClose: true
|
|
}, "thor and dr.johns"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(element).not.toBeInTheDocument();
|
|
});
|
|
it('should not destroy this._element when unmountOnClose prop set to false', function () {
|
|
var _render6 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle,
|
|
unmountOnClose: false
|
|
}, "thor and dr.johns")),
|
|
rerender = _render6.rerender;
|
|
var element = screen.getByText(/thor and dr.johns/i);
|
|
expect(element).toBeInTheDocument();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle,
|
|
unmountOnClose: false
|
|
}, "thor and dr.johns"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(element).toBeInTheDocument();
|
|
});
|
|
it('should destroy this._element on unmount', function () {
|
|
var _render7 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "thor and dr.johns")),
|
|
unmount = _render7.unmount;
|
|
var element = screen.getByText(/thor and dr.johns/i);
|
|
expect(element).toBeInTheDocument();
|
|
unmount();
|
|
jest.advanceTimersByTime(300);
|
|
expect(element).not.toBeInTheDocument();
|
|
});
|
|
it('should remove exactly visibility styles from body', function () {
|
|
// set a body class which includes offcanvas-open
|
|
document.body.style.background = 'blue';
|
|
var _render8 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle
|
|
}, "Yo!")),
|
|
rerender = _render8.rerender;
|
|
|
|
// assert that the offcanvas is closed and the body class is what was set initially
|
|
jest.advanceTimersByTime(300);
|
|
expect(document.body.style.background).toBe('blue');
|
|
expect(document.body.style.overflow).toBe('');
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
|
|
// assert that the offcanvas is open and the body class is what was set initially + offcanvas-open
|
|
jest.advanceTimersByTime(300);
|
|
expect(document.body.style.background).toBe('blue');
|
|
expect(document.body.style.overflow).toBe('hidden');
|
|
|
|
// append another body class which includes offcanvas-open
|
|
// using this to test if replace will leave a space when removing offcanvas-open
|
|
document.body.style.color = 'red';
|
|
expect(document.body.style.background).toBe('blue');
|
|
expect(document.body.style.color).toBe('red');
|
|
expect(document.body.style.overflow).toBe('hidden');
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
|
|
// assert that the offcanvas is closed and the body class is what was set initially
|
|
jest.advanceTimersByTime(301);
|
|
expect(document.body.style.background).toBe('blue');
|
|
expect(document.body.style.color).toBe('red');
|
|
expect(document.body.style.overflow).toBe('');
|
|
});
|
|
it('should call onEnter & onExit props if provided', function () {
|
|
var onEnter = jest.fn();
|
|
var onExit = jest.fn();
|
|
var _render9 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false,
|
|
onEnter: onEnter,
|
|
onExit: onExit,
|
|
toggle: toggle
|
|
}, "Yo!")),
|
|
rerender = _render9.rerender,
|
|
unmount = _render9.unmount;
|
|
expect(onEnter).toHaveBeenCalled();
|
|
expect(onExit).not.toHaveBeenCalled();
|
|
onEnter.mockReset();
|
|
onExit.mockReset();
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
onEnter: onEnter,
|
|
onExit: onExit,
|
|
toggle: toggle
|
|
}, "Yo!"));
|
|
jest.advanceTimersByTime(300);
|
|
expect(onEnter).not.toHaveBeenCalled();
|
|
expect(onExit).not.toHaveBeenCalled();
|
|
onEnter.mockReset();
|
|
onExit.mockReset();
|
|
unmount();
|
|
expect(onEnter).not.toHaveBeenCalled();
|
|
expect(onExit).toHaveBeenCalled();
|
|
});
|
|
it('should update element z index when prop changes', function () {
|
|
var _render10 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
zIndex: 0
|
|
}, "Yo!")),
|
|
rerender = _render10.rerender;
|
|
expect(screen.getByText(/yo/i).parentElement).toHaveStyle('z-index: 0');
|
|
rerender( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
zIndex: 1
|
|
}, "Yo!"));
|
|
expect(screen.getByText(/yo/i).parentElement).toHaveStyle('z-index: 1');
|
|
});
|
|
it('should allow focus on only focusable elements', function () {
|
|
render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, /*#__PURE__*/React.createElement(OffcanvasHeader, {
|
|
toggle: toggle
|
|
}, "Offcanvas title"), /*#__PURE__*/React.createElement(OffcanvasBody, null, /*#__PURE__*/React.createElement("a", {
|
|
alt: "test",
|
|
href: "/"
|
|
}, "First Test"), /*#__PURE__*/React.createElement("map", {
|
|
name: "test"
|
|
}, /*#__PURE__*/React.createElement("area", {
|
|
alt: "test",
|
|
href: "/",
|
|
coords: "200,5,200,30"
|
|
})), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
"aria-label": "test text input"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
type: "hidden"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
type: "text",
|
|
disabled: true,
|
|
value: "Test"
|
|
}), /*#__PURE__*/React.createElement("select", {
|
|
name: "test",
|
|
id: "select_test"
|
|
}, /*#__PURE__*/React.createElement("option", null, "Second item")), /*#__PURE__*/React.createElement("select", {
|
|
name: "test",
|
|
id: "select_test_disabled",
|
|
disabled: true
|
|
}, /*#__PURE__*/React.createElement("option", null, "Third item")), /*#__PURE__*/React.createElement("textarea", {
|
|
name: "textarea_test",
|
|
id: "textarea_test",
|
|
cols: "30",
|
|
rows: "10",
|
|
"aria-label": "test text area"
|
|
}), /*#__PURE__*/React.createElement("textarea", {
|
|
name: "textarea_test_disabled",
|
|
id: "textarea_test_disabled",
|
|
cols: "30",
|
|
rows: "10",
|
|
disabled: true
|
|
}), /*#__PURE__*/React.createElement("object", null, "Test"), /*#__PURE__*/React.createElement("span", {
|
|
tabIndex: "0"
|
|
}, "test tab index"))));
|
|
user.tab();
|
|
expect(screen.getByLabelText(/close/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByText(/first test/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByLabelText(/test text input/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByText(/second item/i).parentElement).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByLabelText(/test text area/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByText(/test tab index/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByLabelText(/close/i)).toHaveFocus();
|
|
});
|
|
it('should return the focus to the last focused element before the offcanvas has opened', function () {
|
|
var _render11 = render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever")))),
|
|
rerender = _render11.rerender;
|
|
user.tab();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
jest.runAllTimers();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
});
|
|
it('should not return the focus to the last focused element before the offcanvas has opened when "returnFocusAfterClose" is false', function () {
|
|
var _render12 = render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever")))),
|
|
rerender = _render12.rerender;
|
|
user.tab();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
isOpen: true
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
jest.runAllTimers();
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
});
|
|
it('should return the focus to the last focused element before the offcanvas has opened when "unmountOnClose" is false', function () {
|
|
var _render13 = render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
unmountOnClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever")))),
|
|
rerender = _render13.rerender;
|
|
user.tab();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
unmountOnClose: false,
|
|
isOpen: true
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
unmountOnClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
jest.runAllTimers();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
});
|
|
it('should not return the focus to the last focused element before the offcanvas has opened when "returnFocusAfterClose" is false and "unmountOnClose" is false', function () {
|
|
var _render14 = render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
unmountOnClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever")))),
|
|
rerender = _render14.rerender;
|
|
user.tab();
|
|
expect(screen.getByText(/focused/i)).toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
unmountOnClose: false,
|
|
isOpen: true
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
rerender( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
className: "focus"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
returnFocusAfterClose: false,
|
|
unmountOnClose: false,
|
|
isOpen: false
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Whatever"))));
|
|
jest.runAllTimers();
|
|
expect(screen.getByText(/focused/i)).not.toHaveFocus();
|
|
});
|
|
it('should attach/detach trapFocus for dialogs', function () {
|
|
var addEventListener = jest.spyOn(document, 'addEventListener');
|
|
var removeEventListener = jest.spyOn(document, 'removeEventListener');
|
|
var _render15 = render( /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
toggle: toggle
|
|
}, "Yo!")),
|
|
unmount = _render15.unmount;
|
|
expect(addEventListener).toHaveBeenCalledTimes(1);
|
|
expect(addEventListener).toHaveBeenCalledWith('focus', expect.any(Function), true);
|
|
unmount();
|
|
expect(removeEventListener).toHaveBeenCalledTimes(1);
|
|
expect(removeEventListener).toHaveBeenCalledWith('focus', expect.any(Function), true);
|
|
addEventListener.mockRestore();
|
|
removeEventListener.mockRestore();
|
|
});
|
|
it('should trap focus inside the open dialog', function () {
|
|
render( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
className: "first"
|
|
}, "Focused"), /*#__PURE__*/React.createElement(Offcanvas, {
|
|
isOpen: true,
|
|
trapFocus: true
|
|
}, /*#__PURE__*/React.createElement(OffcanvasBody, null, "Something else to see", /*#__PURE__*/React.createElement(Button, {
|
|
className: "focus"
|
|
}, "focusable element")))));
|
|
user.tab();
|
|
expect(screen.getByText(/focusable element/i)).toHaveFocus();
|
|
user.tab();
|
|
expect(screen.getByText(/focusable element/i)).toHaveFocus();
|
|
});
|
|
}); |