Skip to content
cccskills
FreePublished on GitHub

walkontable-testing

Maintain existing tests for Walkontable, Handsontable's table rendering engine. The skill explains its separate test commands and covers frozen rows and columns, visible area calculations, scroll alignment, and pitfalls that can hide failures or produce misleading results.

OriginalShow the original description

Use when writing tests for the Walkontable rendering engine - has its own separate test pipeline, runner, and configuration distinct from main Handsontable E2E tests

Works withPlaywright
See how to install

Good for

  • Maintaining existing Walkontable rendering tests
  • Checking frozen rows and columns during scrolling
  • Testing visible areas after container resizing
  • Investigating missing test results

Files included (1)

  • SKILL.md3.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Testing the Walkontable Rendering Engine

Walkontable follows the same freeze as the main suite. Its Playwright home is tests/e2e/walkontable/ (page objects in tests/fixtures/pages/walkontable/). Maintenance edits to existing *.spec.js are allowed; new or flaky walkontable tests go to Playwright (the presence gate blocks a new walkontable *.spec.js). In CI the legacy Jasmine/Puppeteer walkontable job and the Playwright e2e job run in parallel. This guide is for maintaining the frozen Jasmine specs.

Separate test pipeline

  • Run: npm run test:walkontable --prefix handsontable (the test/spec/ specs). test:e2e does not pick them up.
  • Location: src/3rdparty/walkontable/test/
    • test/spec/: Jasmine + Puppeteer with a separate Rspack config and bootstrap. Only test:walkontable runs them.
    • test/unit/: Jest tests for calculators, filters, renderers, utilities (48 *.unit.ts/*.unit.js files). The core jest.config.js picks them up, so npm run test:unit and the core Unit / test CI job run them, and test:walkontable does not.

Writing tests

  • it() callbacks that call rendering APIs are async and await those calls.
  • Tests are organized by subsystem (overlay/, scroll/, selection/, renderer/, table/, viewport.spec.js); place new ones in the matching directory.

What to cover

  • Frozen rows and columns: the 6 overlay types are the most fragile part; include frozen scenarios for overlay positioning and sync.
  • Viewport calculations: small containers that clip, containers larger than the data, dynamic resize.
  • Scroll synchronization: horizontal and vertical scroll keep frozen overlays aligned.
  • Large datasets: 10k+ rows. Populate arrays with forEach; arr.push(...largeArray) overflows the stack.

Common mistakes

  • Running Walkontable tests via test:e2e.
  • Changing the test bootstrap or Rspack config without confirming test/spec/ passes under test:walkontable and test/unit/ under the core test:unit.
  • Clearing an inline overflow longhand with jQuery: $el.css('overflow-x', '') leaves an inline overflow-x in this harness, so the "clip removed" branch asserts against the wrong layout. Write el.style.overflowX = '' and assert the intermediate fact (getComputedStyle(el).overflowX === 'visible') before the behavior.
  • Trusting the spec count. A failing spec whose expected/actual was a cyclic object (toBe(window), toEqual([overlay, ...])) used to be dropped at the Puppeteer bridge (Running 16 specs., then 15 specs, 0 failures, exit 0; the getOverlays spec sat like that from #12951). test/helpers/jasmine-bridge-reporter.js now reports it as a failure ([unserializable Window]). If a count comes up short, compare the Running N specs. line with the summary via npm run test:walkontable -- --testPathPattern=<file> --verbose.
  • Turning on rowHeightsUniform/columnWidthsUniform in a bare Walkontable spec and asserting scrollbar-dependent row/column counts: the bare harness overflows content without a real scrollbar while the single-pass layout snapshot predicts one, so they diverge. Assert the snapshot booleans directly, or use a fixture that renders a real scrollbar.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

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/handsontable22.1KUpdated Oct 19, 2026

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/handsontable22.1KUpdated Oct 19, 2026

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/handsontable22.1KUpdated Oct 19, 2026

code-graph

FreeSummary

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/handsontable22.1KUpdated Oct 19, 2026

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/handsontable22.1KUpdated Oct 19, 2026

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/handsontable22.1KUpdated Oct 19, 2026

See all skills by handsontable

Report a problem with this skill