test: add tests for anatole-header edge cases

google-labs-jules[bot]

3 days ago f0e5679e0c0b593afde94a4dc228248b10e769a6

test: add tests for anatole-header edge cases

Add Jest tests for `anatole-header.js` to cover the edge case where no navbar burgers are present, and the happy path where a click toggles the active nav state. Added Jest and JSDOM environment dependencies.

Co-authored-by: KarelZe <12801659+KarelZe@users.noreply.github.com>

 assets/js/anatole-header.test.js

New file
@@ -0,0 +1,57 @@
/**
 * @jest-environment jsdom
 */

// Load the script once
require('./anatole-header.js');

describe('anatole-header.js', () => {
  beforeEach(() => {
    // Clear DOM before each test
    document.body.innerHTML = '';
  });

  it('should handle edge case: no navbar burgers present', () => {
    // Setup empty DOM (no .navbar-burger elements)
    document.body.innerHTML = `
      <nav></nav>
    `;

    // Trigger DOMContentLoaded
    const event = new Event('DOMContentLoaded');

    // It should not throw any errors when executing the listener
    expect(() => {
      document.dispatchEvent(event);
    }).not.toThrow();
  });

  it('should toggle nav--active class when navbar burger is clicked', () => {
    // Setup DOM with navbar burger
    document.body.innerHTML = `
      <nav></nav>
      <div class="navbar-burger"></div>
    `;

    // Trigger DOMContentLoaded
    const event = new Event('DOMContentLoaded');
    document.dispatchEvent(event);

    const navbarBurger = document.querySelector('.navbar-burger');
    const nav = document.querySelector('nav');

    // Initial state
    expect(navbarBurger.classList.contains('nav--active')).toBeFalsy();
    expect(nav.classList.contains('nav--active')).toBeFalsy();

    // Click to toggle on
    navbarBurger.click();
    expect(navbarBurger.classList.contains('nav--active')).toBeTruthy();
    expect(nav.classList.contains('nav--active')).toBeTruthy();

    // Click to toggle off
    navbarBurger.click();
    expect(navbarBurger.classList.contains('nav--active')).toBeFalsy();
    expect(nav.classList.contains('nav--active')).toBeFalsy();
  });
});

 package-lock.json

Diff too large

 package.json

@@ -9,7 +9,7 @@
    "prepare": "husky",
    "release": "release-it",
    "setup": "npm install && npm run prepare",
    "test": ""
    "test": "jest"
  },
  "repository": {
    "type": "git",
@@ -34,6 +34,8 @@
    "@release-it/conventional-changelog": "^11.0.1",
    "conventional-commits-filter": "^6.0.1",
    "husky": "^9.1.7",
    "jest": "^30.5.2",
    "jest-environment-jsdom": "^30.5.2",
    "prettier": "^3.8.1",
    "prettier-plugin-go-template": "^0.0.15",
    "release-it": "^20.2.1",