chore(test): modernize test infrastructure from Karma/Jasmine to Vitest

.github/workflows/ci.yml

@@ -0,0 +1,105 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, 22]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        run: yarn test
+
+      - name: Build
+        run: yarn build
+
+  test-browser:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Run browser tests
+        run: yarn test:browser
+
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run tests with coverage
+        run: yarn test:coverage
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Flow check
+        run: yarn flow
+
+      - name: TypeScript check
+        run: yarn tsc -p typings

CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+
+**This project uses Yarn, not npm.** Always use `yarn` for package management.
+
+This project uses Make for builds. Key commands:
+
+- `make build` - Full build (cleans, then builds CJS and web bundles)
+- `make lint` - Runs Flow type checker, ESLint, and TypeScript type checking on typings
+- `make test` - Runs unit tests via Vitest
+- `make test-browser` - Runs browser tests via Puppeteer (requires build first)
+- `make test-all` - Runs both unit and browser tests
+- `make dev` - Starts webpack dev server with example page
+
+Yarn scripts:
+- `yarn test` - Run unit tests (jsdom environment)
+- `yarn test:watch` - Run unit tests in watch mode
+- `yarn test:browser` - Build and run browser tests (Puppeteer)
+- `yarn test:all` - Run all tests
+- `yarn test:coverage` - Run tests with coverage report
+
+## Test Architecture
+
+Tests are split into two categories:
+
+1. **Unit tests** (`test/*.test.{js,jsx}`) - Run in jsdom via Vitest
+   - Fast, no browser required
+   - Test component logic, callbacks, prop handling
+   - Some coordinate-based tests skipped (require real browser)
+
+2. **Browser tests** (`test/browser/*.test.js`) - Run in headless Chrome via Puppeteer
+   - Test actual drag behavior with real coordinate calculations
+   - Test transforms, axis constraints, bounds, scale
+
+## Architecture
+
+### Component Hierarchy
+
+**DraggableCore** (`lib/DraggableCore.js`) - Low-level component that handles raw drag events
+- Maintains minimal internal state (just `dragging`, `lastX`, `lastY`)
+- Manages mouse/touch event binding and cleanup
+- Provides `onStart`, `onDrag`, `onStop` callbacks with position data
+- Use this when you need full control over positioning
+
+**Draggable** (`lib/Draggable.js`) - High-level wrapper around DraggableCore
+- Manages position state, bounds checking, axis constraints
+- Applies CSS transforms or SVG transform attributes
+- Supports controlled (`position` prop) and uncontrolled (`defaultPosition`) modes
+- Adds dragging-related CSS classes
+
+### Key Utilities
+
+- `lib/utils/domFns.js` - DOM helpers: event binding, CSS transforms, user-select hacks
+- `lib/utils/positionFns.js` - Position calculations: bounds checking, grid snapping, delta computations
+- `lib/utils/getPrefix.js` - Browser prefix detection for CSS transforms
+
+### Build Outputs
+
+- `build/cjs/` - CommonJS build (Babel)
+- `build/web/react-draggable.min.js` - UMD browser bundle (Webpack)
+
+### Type Systems
+
+The codebase uses Flow for internal type checking (`// @flow` annotations) and ships TypeScript definitions in `typings/index.d.ts`. Both must stay in sync.
+
+## Key Patterns
+
+### nodeRef Pattern
+To avoid ReactDOM.findDOMNode deprecation warnings in Strict Mode, components accept a `nodeRef` prop:
+```jsx
+const nodeRef = React.useRef(null);
+<Draggable nodeRef={nodeRef}>
+  <div ref={nodeRef}>Content</div>
+</Draggable>
+```
+
+### Callback Return Values
+Returning `false` from `onStart`, `onDrag`, or `onStop` cancels the drag operation.
+
+### CSS Transform Approach
+Dragging uses CSS transforms (`translate`) rather than absolute positioning, allowing draggable elements to work regardless of their CSS position value.

Makefile

@@ -13,7 +13,7 @@ clean:
 
 lint:
 	@$(BIN)/flow
-	@$(BIN)/eslint lib/* lib/utils/* specs/*
+	@$(BIN)/eslint lib/* lib/utils/*
 	@$(BIN)/tsc -p typings
 
 build: clean build-cjs build-esm build-web
@@ -29,10 +29,12 @@ install link:
 	@yarn $@
 
 test: $(BIN)
-	@$(BIN)/karma start
+	@$(BIN)/vitest run
 
-test-phantom: $(BIN)
-	@$(BIN)/karma start karma-phantomjs.conf.js
+test-browser: build $(BIN)
+	@$(BIN)/vitest run --config vitest.browser.config.js
+
+test-all: test test-browser
 
 dev: $(BIN) clean
 	env DRAGGABLE_DEBUG=1 $(BIN)/webpack serve --mode=development