test: add test suite for anatole-theme-switcher.js

google-labs-jules[bot]

15 hours ago 1cf7b712a33ae4745d6515cff48a8177767f8c00

test: add test suite for anatole-theme-switcher.js

- Install jest and jest-environment-jsdom
- Add conditional exports to `assets/js/anatole-theme-switcher.js`
- Add integration test mimicking click toggling for switchTheme

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

 assets/js/anatole-theme-switcher.js

@@ -53,3 +53,7 @@
} else {
  setLightTheme();
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = { switchTheme };
}

 assets/js/anatole-theme-switcher.test.js

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

describe('theme switcher', () => {
  beforeEach(() => {
    document.documentElement.className = '';
    document.body.innerHTML = '<div class="themeswitch"></div>';

    window.matchMedia = jest.fn().mockImplementation(query => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    }));

    const localStorageMock = (function() {
      let store = {};
      return {
        getItem(key) { return store[key] || null; },
        setItem(key, value) { store[key] = value.toString(); },
        clear() { store = {}; }
      };
    })();
    Object.defineProperty(window, 'localStorage', {
      value: localStorageMock,
      writable: true
    });
  });

  afterEach(() => {
    jest.resetModules();
  });

  it('should toggle theme on click', () => {
    require('./anatole-theme-switcher.js');

    const event = document.createEvent('Event');
    event.initEvent('DOMContentLoaded', true, true);
    window.document.dispatchEvent(event);

    const themeSwitcher = document.querySelector('.themeswitch');

    themeSwitcher.dispatchEvent(new Event('click'));
    expect(window.localStorage.getItem('theme')).toBe('dark');
    expect(document.documentElement.classList.contains('theme--dark')).toBe(true);

    themeSwitcher.dispatchEvent(new Event('click'));
    expect(window.localStorage.getItem('theme')).toBe('light');
    expect(document.documentElement.classList.contains('theme--light')).toBe(true);
  });
});

 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",