test(theme-switcher): add unit tests for setThemeStyle function

google-labs-jules[bot]

5 hours ago 255f0960a988b6571bc3ac15bdf100187150e3c3

test(theme-switcher): add unit tests for setThemeStyle function

- Added `jest` and `jest-environment-jsdom` to `devDependencies`
- Configured npm test script to use jest
- Created unit tests for `setThemeStyle` function located in `assets/js/anatole-theme-switcher.js`
- Mocks `window.matchMedia` for correct jsdom execution
- Tests changing the theme successfully updates `localStorage` and `document.documentElement`

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

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

New file
@@ -0,0 +1,55 @@
const fs = require('fs');
const path = require('path');

describe('setThemeStyle', () => {
  let setThemeStyle;

  beforeEach(() => {
    localStorage.clear();
    document.documentElement.className = '';

    // Mock matchMedia
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      })),
    });

    const jsCode = fs.readFileSync(path.resolve(__dirname, 'anatole-theme-switcher.js'), 'utf8');

    // Evaluate the code and capture `setThemeStyle` by returning it from a function context
    const init = new Function(
      `
      ${jsCode}
      return setThemeStyle;
      `
    );

    setThemeStyle = init();
  });

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

  it('sets the theme in localStorage and adds the class to document.documentElement', () => {
    setThemeStyle('dark');
    expect(localStorage.getItem('theme')).toBe('dark');
    expect(document.documentElement.classList.contains('theme--dark')).toBe(true);
  });

  it('removes the previous theme before adding the new one', () => {
    document.documentElement.classList.add('theme--light');
    setThemeStyle('dark');
    expect(document.documentElement.classList.contains('theme--light')).toBe(false);
    expect(document.documentElement.classList.contains('theme--dark')).toBe(true);
  });
});

 jest.config.js

New file
@@ -0,0 +1,3 @@
module.exports = {
  testEnvironment: 'jsdom',
};

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