feat: migrate to ESLint flat config and implement smart spyOn proxy

Author: trurl-master

.eslintignore

@@ -19,7 +19,8 @@ A set of tools for emulating browser behavior in jsdom environment
 [matchMedia](#mock-viewport)  
 [Intersection Observer](#mock-intersectionobserver)  
 [Resize Observer](#mock-resizeobserver)  
-[Web Animations API](#mock-web-animations-api)
+[Web Animations API](#mock-web-animations-api)  
+[CSS Typed OM](#mock-css-typed-om)
 
 ## Installation
 
@@ -410,6 +411,37 @@ it('adds an element into the dom and fades it in', async () => {
 
 It's perfectly usable with fake timers, except for the [issue with promises](https://github.com/facebook/jest/issues/2157). Also note that you would need to manually advance timers by the duration of the animation taking frame duration (which currently is set to 16ms in `jest`/`sinon.js`) into account. So if you, say, have an animation with a duration of `300ms`, you will need to advance your timers by the value that is at least the closest multiple of the frame duration, which in this case is `304ms` (`19` frames \* `16ms`). Otherwise the last frame may not fire and the animation won't finish.
 
+## Mock CSS Typed OM
+
+Provides a complete implementation of the CSS Typed Object Model Level 1 specification for testing CSS numeric values and calculations. While primarily used internally by the Web Animations API mock, it's available as a standalone feature supporting all major CSS units, mathematical operations, and type checking.
+
+```jsx
+import { mockCSSTypedOM } from 'jsdom-testing-mocks';
+
+mockCSSTypedOM();
+
+it('performs CSS calculations correctly', () => {
+  const width = CSS.px(100);
+  const height = CSS.px(200);
+  
+  expect(width.add(CSS.px(50)).toString()).toBe('150px');
+  expect(width.mul(height).toString()).toBe('calc(100px * 200px)');
+  expect(CSS.cm(2.54).to('in').toString()).toBe('1in');
+  expect(CSS.px(100).min(CSS.px(200), CSS.px(50)).toString()).toBe('50px');
+});
+
+it('enforces type safety', () => {
+  // Cannot add incompatible units or use raw numbers
+  expect(() => CSS.px(10).add(CSS.em(5))).toThrow();
+  expect(() => CSS.px(10).add(5)).toThrow();
+  
+  // Use CSS.number() for dimensionless values
+  expect(CSS.px(10).add(CSS.number(5)).toString()).toBe('calc(10px + 5)');
+});
+```
+
+Supports all CSS units (length, angle, time, frequency, resolution, flex, percentage), mathematical operations, and enforces type compatibility rules as defined in the [W3C specification](https://www.w3.org/TR/css-typed-om-1/).
+
 ## Current issues
 
 - Needs more tests

.eslintrc.cjs

@@ -0,0 +1,65 @@
+import js from '@eslint/js';
+import typescript from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import pluginJest from 'eslint-plugin-jest';
+import prettier from 'eslint-config-prettier';
+import vitest from '@vitest/eslint-plugin'
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': typescript,
+      'jsx-a11y': jsxA11y,
+    },
+    rules: {
+      ...typescript.configs.recommended.rules,
+      ...typescript.configs.strict.rules,
+      ...jsxA11y.configs.recommended.rules,
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { ignoreRestSiblings: true },
+      ],
+      // TS handles undefined types, turn off for TS files
+      'no-undef': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+  {
+    files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'],
+    plugins: {
+      jest: pluginJest,
+      vitest,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...pluginJest.environments.globals.globals,
+        ...vitest.environments.env.globals,
+      },
+    },
+    rules: {
+        ...vitest.configs.recommended.rules,
+        // You can also bring in Jest recommended rules if desired
+        // ...pluginJest.configs.recommended.rules,
+    }
+  },
+  {
+    ignores: ['dist/**'],
+  },
+  prettier,
+]; 

README.md

@@ -24,6 +24,14 @@ declare module 'vitest' {
 
 export {};
 
+// Smart proxy type that only implements what we need
+interface SmartSpy {
+  mockImplementation: (fn: () => void) => SmartSpy;
+  toHaveBeenCalledWith: (...args: unknown[]) => void;
+  mockRestore: () => void;
+  [key: string]: unknown; // For any other properties, will pass through to underlying spy
+}
+
 interface Runner {
   name: 'vi' | 'jest';
   useFakeTimers: () => void;
@@ -32,7 +40,7 @@ interface Runner {
   /** A generic function to create a mock function, compatible with both runners. */
   fn: () => jest.Mock<unknown[], unknown>;
   /** A generic function to spy on a method, compatible with both runners. */
-  spyOn: typeof jest.spyOn;
+  spyOn: <T extends object, K extends keyof T>(object: T, method: K) => SmartSpy;
 }
 
 declare global {

eslint.config.js

@@ -14,8 +14,33 @@ function fn() {
   return jest.fn();
 }
 
-function spyOn(...args: Parameters<typeof jest.spyOn>) {
-  return jest.spyOn(...args);
+// Smart proxy that only implements what we need
+function createSmartSpy(realSpy: unknown) {
+  return new Proxy(realSpy as object, {
+    get(target, prop) {
+      // Only implement the methods we actually use
+      if (prop === 'mockImplementation') {
+        return (fn: () => void) => {
+          (target as { mockImplementation: (fn: () => void) => unknown }).mockImplementation(fn);
+          return createSmartSpy(target);
+        };
+      }
+      if (prop === 'toHaveBeenCalledWith') {
+        return (target as { toHaveBeenCalledWith: (...args: unknown[]) => unknown }).toHaveBeenCalledWith.bind(target);
+      }
+      if (prop === 'mockRestore') {
+        return (target as { mockRestore: () => void }).mockRestore.bind(target);
+      }
+      
+      // For everything else, just pass through to the real spy
+      return (target as Record<string | symbol, unknown>)[prop];
+    }
+  });
+}
+
+function spyOn<T extends object, K extends keyof T>(object: T, method: K) {
+  const realSpy = (jest.spyOn as (obj: T, method: K) => unknown)(object, method);
+  return createSmartSpy(realSpy);
 }
 
 globalThis.runner = {

global.d.ts

@@ -4,14 +4,14 @@ module.exports = {
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
   testPathIgnorePatterns: ['/node_modules/', '/examples/', '.*\\.browser\\.test\\.ts$'],
-  globals: {
-    'ts-jest': {
+  transform: {
+    '^.+\\.(t|j)sx?$': ['ts-jest', {
       tsconfig: {
         jsx: 'react-jsx',
       },
       diagnostics: {
         warnOnly: true,
       },
-    },
+    }],
   },
 };