跳到正文
cccskills
免费在 GitHub 公开

handsontable-unit-testing

Write and update Handsontable unit tests with Jest and type tests with TypeScript. Explains file placement, focused test runs, boundary cases, and checks for public types, while helping choose between isolated logic tests and browser tests.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Use when writing or modifying Jest unit tests (*.unit.js or *.unit.ts) or TypeScript type tests (*.types.ts) for Handsontable core, plugins, or utilities, or when a bug fix or internal refactor needs unit or type test coverage - covers Jest setup, test location conventions, mocking patterns, module aliases, type test patterns (no declare, real assignments, ESM + UMD patterns), and when to choose unit tests over E2E tests

集成工具Playwright
查看安装方法

适用场景

  • Adding unit tests for calculations and data transformations
  • Covering bug fixes and internal refactoring
  • Checking TypeScript declarations and public exports
  • Choosing between unit tests and browser tests

包含的文件(1)

  • SKILL.md5.3 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Writing Jest Unit Tests for Handsontable

Unit vs E2E

"E2E" means a new Playwright test in tests/e2e/ (skill handsontable-playwright-e2e). The handsontable() / selectCell() globals are legacy Jasmine helpers, unavailable in unit tests; add no new *.spec.js.

Favor E2E: a unit test that needs a mocked module becomes an E2E test, because module mocks couple tests to internal shape and block refactoring.

  • Unit candidates: pure logic, utilities, data transformations, calculations (no mocking).
  • E2E: DOM interaction, rendering, browser events, visual behavior.

Conventions

  • File naming: *.unit.js or *.unit.ts (testRegex in handsontable/jest.config.js).
  • Location: src/**/__tests__/ beside the source (e.g. src/plugins/filters/__tests__/dataFilter.unit.ts).
  • A helper only unit tests use goes straight in __tests__/ (e.g. undoRedo/__tests__/grid.js), never in a helpers/ folder. test/helpers/index.js bundles every .js under src/{plugins,editors}/**/helpers/ into the E2E build and puts its exports on window. A handsontable/... import there breaks the Integration / ESM and CJS jobs, whose E2E build aliases handsontable to the single file dist/handsontable.js. Those jobs run on trunk only, so no-restricted-imports in handsontable/.eslintrc.js blocks handsontable/* in every *.spec.js and helpers/ file.
  • Framework: Jest, jsdom, jest-jasmine2 runner. Import everything explicitly.
  • Aliases: 'handsontable' and 'handsontable/...' resolve to src/; 'walkontable' and 'walkontable/...' to src/3rdparty/walkontable/src/; CSS/SCSS to test/__mocks__/styleMock.js.
  • test/bootstrap.js provides ResizeObserver (test/__mocks__/resizeObserverMock.js) and IntersectionObserver (test/__mocks__/intersectionObserverMock.js) mocks. Other mocking: jest.fn(), jest.spyOn(object, 'method').

Run commands

  • All: npm run test:unit --prefix handsontable
  • Targeted: npm run test:unit --prefix handsontable --testPathPattern=<regex> (matched against test file paths, e.g. filters, ghostTable.unit, metaManager)

Two ways a unit run reports green while testing nothing

  • One pattern per --testPathPattern call. test:unit.jest runs through cross-env-shell, so --testPathPattern=a|b becomes a shell pipe: Jest runs a, prints a green summary, then fails with /bin/sh: b: command not found (exit 127), and a grep on Tests: shows only passes. Run one pattern per call, or pass file paths directly. (The Puppeteer test:e2e runner carries its pattern in an environment variable and is unaffected.)
  • Run files with the task's own command. A bare npx jest from handsontable/ fails to parse every file ("Jest encountered an unexpected token") without BABEL_ENV=commonjs and prints Tests: 0 total, which a mutation check grepping for ✕ reads as no failures. Without the styles build use: BABEL_ENV=commonjs npx env-cmd -f ../hot.config.js jest src/plugins/a src/plugins/b and compare the Test Suites: count with the number of files you expected.

Large datasets

For code that handles data arrays, include 50k+ row tests. Populate with forEach; arr.push(...largeArray) overflows the stack.

Edge cases

Cover edge cases, error states, and boundaries beyond the happy path. For plugin logic, test updateSettings() and enablePlugin()/disablePlugin() cycles.

import { calculateSomething } from '../utils';

describe('calculateSomething', () => {
  it('should return the sum for positive inputs', () => {
    expect(calculateSomething(2, 3)).toBe(5);
  });
});

TypeScript type tests

*.types.ts files verify the generated declarations in tmp/ after npm run build:types. They live in src/**/__tests__/ (e.g. src/__tests__/core/core.types.ts, src/__tests__/core/namespace.types.ts); test/types/ holds only the tsconfig.json that drives compilation.

Run: node_modules/.bin/tsc --noEmit -p test/types/tsconfig.json

Write every line as a real const x: Type = actualValue assignment so the compiler checks assignability against tmp/; declare let x: SomeType bypasses the check.

Cover both access patterns:

// ESM/modular: import from subpath, assign to namespace type
import { DateEditor } from 'handsontable/editors';
const _editor: Handsontable.editors.DateEditor = new DateEditor(hot);

// UMD/namespace: extract constructor from namespace object, instantiate it
const EditorCtor = Handsontable.editors.DateEditor;
const _umdEditor: Handsontable.editors.DateEditor = new EditorCtor(hot);

Negative assertions use @ts-expect-error to prove internal symbols are not exported:

// @ts-expect-error SelectionManager is not part of the public API
import type { SelectionManager } from 'handsontable';

Further reading

handsontable/.ai/TESTING.md, handsontable/jest.config.js, handsontable/test/__mocks__/, handsontable/test/bootstrap.js.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Develop and modify the Handsontable Angular wrapper with guidance on component lifecycle, settings updates, and NgZone, which controls change detection. It also covers standalone examples, global configuration, and the build and test workflow.

中文简介正在准备中。当前显示英语简介。

  • Fix settings updates in the Angular wrapper
  • Review change detection around grid operations
  • Update examples to standalone components
handsontable/handsontable2.2万2026年10月19日 更新

Open local or public web pages in BrowserStack Live for checks on real mobile devices or desktop browsers. The skill prepares temporary access to a local server, launches the requested session, and shares its dashboard link.

中文简介正在准备中。当前显示英语简介。

  • Check a local page on an Android device
  • Open a page in Safari on an iPhone or iPad
  • Inspect behavior in a specific desktop browser
handsontable/handsontable2.2万2026年10月19日 更新

Prepare user-facing changelog entries for source code changes. The skill determines whether an entry is needed, classifies the change, writes a clear title, and uses the project CLI to create a JSON file tied to the pull request.

中文简介正在准备中。当前显示英语简介。

  • Add a changelog entry for a bug fix
  • Classify a new feature or behavior change
  • Explain a breaking change and its replacement
handsontable/handsontable2.2万2026年10月19日 更新

Explore relationships between functions and files using a prebuilt code graph, a map of code dependencies. Trace bugs, inspect callers and execution paths, and assess the impact of refactoring or proposed changes.

中文简介正在准备中。当前显示英语简介。

  • Explore callers and dependencies in unfamiliar code
  • Trace a bug across multiple files
  • Assess the impact of renaming or removing code
handsontable/handsontable2.2万2026年10月19日 更新

Work with Handsontable row and column positions by distinguishing source data, displayed order, and rendered cells. It guides index conversion and helps investigate misplaced data when sorting, filtering, hiding, or moving rows and columns.

中文简介正在准备中。当前显示英语简介。

  • Investigating misplaced rows or columns
  • Converting between source and displayed indexes
  • Combining filters with manual column movement
handsontable/handsontable2.2万2026年10月19日 更新

Create Handsontable documentation examples for JavaScript, TypeScript, React, Angular, and Vue. The skill explains source files, generated JavaScript, required imports and license settings, embedding examples in guides, and checking that each framework version displays correctly.

中文简介正在准备中。当前显示英语简介。

  • Adding a code example to a feature guide
  • Preparing examples for multiple frameworks
  • Generating JavaScript examples from TypeScript
handsontable/handsontable2.2万2026年10月19日 更新

查看 handsontable 的全部技能

报告此技能的问题