Add Jest tests

Automate CSS and JS Banners
Remove image fading for now
Reference docker-compose.yml restored

js/menu.spec.js

@@ -0,0 +1,114 @@
+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');
+  });
+});