115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
import Menu from './menu';
|
|
|
|
jest.useFakeTimers();
|
|
|
|
const menuHtml = `
|
|
<button class="menu">
|
|
<span class="menu__line"></span>
|
|
<span class="menu__line"></span>
|
|
<span class="menu__line"></span>
|
|
<span class="menu__text">Open menu</span>
|
|
</button>`;
|
|
|
|
describe('Menu button', () => {
|
|
let menu;
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = menuHtml;
|
|
menu = new Menu({
|
|
container: document.querySelector('.menu'),
|
|
});
|
|
});
|
|
|
|
it('Should initialise', () => {
|
|
menu.init();
|
|
expect(menu).toMatchObject({});
|
|
});
|
|
|
|
it('Should fail to initialise if container is missing', () => {
|
|
menu.init();
|
|
expect((new Menu()).state).toBeUndefined();
|
|
});
|
|
|
|
it('Should default to visible state', () => {
|
|
expect(menu.state).toBe('visible');
|
|
});
|
|
|
|
it('Should be hidden initially', () => {
|
|
menu.init();
|
|
expect(menu.container.classList.contains('is-visible')).toBe(false);
|
|
});
|
|
|
|
it('Should be visible after 1 second', () => {
|
|
menu.init();
|
|
jest.runAllTimers();
|
|
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000);
|
|
expect(menu.container.classList.contains('is-visible')).toBe(true);
|
|
});
|
|
|
|
test('Menu can be shown', () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
expect(menu.state).toBe('visible');
|
|
expect(menu.container.classList.contains('is-visible')).toBe(true);
|
|
expect(menu.container.classList.contains('is-minimized')).toBe(false);
|
|
});
|
|
|
|
test('Menu can be hidden', () => {
|
|
menu.init();
|
|
menu.hideMenu();
|
|
expect(menu.state).toBe('hidden');
|
|
expect(menu.container.classList.contains('is-visible')).toBe(false);
|
|
expect(menu.container.classList.contains('is-minimized')).toBe(false);
|
|
});
|
|
|
|
test('Menu can be minimized', () => {
|
|
menu.init();
|
|
menu.minimizeMenu();
|
|
expect(menu.state).toBe('minimized');
|
|
expect(menu.container.classList.contains('is-visible')).toBe(false);
|
|
expect(menu.container.classList.contains('is-minimized')).toBe(true);
|
|
});
|
|
|
|
test('The state should not change on scroll if it is hidden', () => {
|
|
menu.init();
|
|
menu.hideMenu();
|
|
menu.updateState(10, 0);
|
|
expect(menu.state).toBe('hidden');
|
|
menu.updateState(0, 10);
|
|
expect(menu.state).toBe('hidden');
|
|
});
|
|
|
|
test('The state should change to minimized when scrolling down', () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
menu.updateState(0, 10);
|
|
expect(menu.state).toBe('minimized');
|
|
});
|
|
|
|
test('The state should change to visible when scrolling up', () => {
|
|
menu.init();
|
|
menu.minimizeMenu();
|
|
menu.updateState(10, 0);
|
|
expect(menu.state).toBe('visible');
|
|
});
|
|
|
|
it('Should have initial ARIA attributes', () => {
|
|
menu.init();
|
|
expect(menu.container.getAttribute('aria-haspopup')).toBe('true');
|
|
expect(menu.container.getAttribute('aria-expanded')).toBe('false');
|
|
});
|
|
|
|
it('Should have updated ARIA attribute when menu is opened', () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
expect(menu.container.getAttribute('aria-expanded')).toBe('false');
|
|
});
|
|
|
|
it('Should have updated ARIA attribute when menu is closed', () => {
|
|
menu.init();
|
|
menu.showMenu();
|
|
menu.hideMenu();
|
|
expect(menu.container.getAttribute('aria-expanded')).toBe('true');
|
|
});
|
|
});
|