Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions .rulesync/rules/ag-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@ For detailed information about preferred technologies and architectural constrai
- `yarn nx build:package <package>` – create ESM/CJS bundles to validate publishable output.
- `yarn nx build:umd <package>` – produce UMD bundles for browser distribution smoke-tests.
- `yarn nx run-many -t build` – rebuild all packages when changes span the dependency graph.
- `yarn nx test <package>` – execute Jest suites for the affected package.
- `yarn nx test ag-behavioural-testing --run` – run behavioural tests in `testing/behavioural/` (primary test suite, uses Vitest).
- `yarn nx test ag-behavioural-testing --run "<file-pattern>"` – run specific behavioural test file.
- `yarn nx test ag-behavioural-testing --run "<file-pattern>" -t "<test-name>"` – run specific behavioural test by name.
- `yarn nx test <package>` – execute Jest unit tests for the affected package.
- `yarn nx test <package> --testPathPattern="<file-name>"` - test specific test file
- `yarn nx test <package> --testPathPattern="<file-name>" --testNamePattern="<test-name>"` - test specific test name in a specific test file
- `yarn nx e2e <package>` – run Playwright flows when altering website behaviour.
Expand Down Expand Up @@ -128,11 +131,11 @@ Core dependency chain: `ag-grid-community` → `ag-grid-enterprise` → framewor

For comprehensive testing information, see [Testing Guide](.rulesync/rules/testing.md).

Key testing tools:
**Behavioural tests are the primary test suite.** When verifying grid changes, run behavioural tests first. Key testing tools:

- **Unit tests**: Jest with jsdom environment
- **Behavioural tests** (primary): `testing/behavioural/` for grid behaviour verification — use Vitest
- **Unit tests**: Jest with jsdom environment for package-level tests
- **E2E tests**: Playwright for website interaction testing
- **Behavioural tests**: `testing/behavioural/` for grid behaviour verification
- **Accessibility tests**: `testing/accessibility/` for a11y compliance
- **Performance tests**: `testing/performance/` for performance regression testing

Expand Down
50 changes: 35 additions & 15 deletions .rulesync/rules/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@ globs: ['**/*.test.ts', '**/*.spec.ts', 'testing/**/*']

This guide covers testing strategies and best practices for the AG Grid codebase.

## Behavioural Tests — Primary Test Suite

Behavioural tests in `testing/behavioural/` are the primary test suite for AG Grid. They test the grid as a **black box**, instantiating the full grid to verify complex behaviours and features.

**Key principles:**

- The unit under test is a **behaviour**, not a function, class, method, or file
- **Avoid mocking** — prefer fakes instead (e.g., fake DOM)
- Test at the edges of the system to ensure real integration using public APIs

## Test Structure

### Directory Layout
Expand Down Expand Up @@ -35,41 +45,51 @@ packages/ag-grid-community/src/

## Running Tests

### Unit Tests (Jest)
### Behavioural Tests (Vitest) – Primary Test Suite

Unit tests in `packages/` use Jest. Use `--testPathPattern` and `--testNamePattern`:
Behavioural tests in `testing/behavioural/` are the primary test suite for verifying grid behaviour. They use Vitest via Nx. Use `--run` to execute once (without watch mode):

```bash
# Run all tests for a package
yarn nx test ag-grid-community
# Run all behavioural tests
yarn nx test ag-behavioural-testing --run

# Run specific test file
yarn nx test ag-grid-community --testPathPattern="featureName"
yarn nx test ag-behavioural-testing --run "cell-editing-regression"

# Run specific test by name
yarn nx test ag-grid-community --testPathPattern="featureName" --testNamePattern="should handle"
yarn nx test ag-behavioural-testing --run "cell-editing-regression" -t "should handle"
```

### E2E Tests
### Benchmarks

```bash
# Run documentation E2E tests
yarn nx e2e ag-grid-docs
# Run all benchmarks
yarn nx run ag-behavioural-testing:benchmark

# Run specific benchmark file
yarn nx run ag-behavioural-testing:benchmark -- src/tree-data/datapath/benchmarks/tree-data-path.bench.ts
```

### Behavioural Tests (Vitest)
### Unit Tests (Jest)

Behavioural tests in `testing/behavioural/` use Vitest via Nx. Use `--run` to execute once (without watch mode):
Unit tests in `packages/` use Jest. Use `--testPathPattern` and `--testNamePattern`:

```bash
# Run all behavioural tests
yarn nx test ag-behavioural-testing --run
# Run all tests for a package
yarn nx test ag-grid-community

# Run specific test file
yarn nx test ag-behavioural-testing --run "cell-editing-regression"
yarn nx test ag-grid-community --testPathPattern="featureName"

# Run specific test by name
yarn nx test ag-behavioural-testing --run "cell-editing-regression" -t "should handle"
yarn nx test ag-grid-community --testPathPattern="featureName" --testNamePattern="should handle"
```

### E2E Tests

```bash
# Run documentation E2E tests
yarn nx e2e ag-grid-docs
```

**Note:** Vitest does not support `--testPathPattern` or `--testNamePattern`. Use positional arguments for file matching and `-t` for test name filtering.
Expand Down
11 changes: 11 additions & 0 deletions .snyk
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,15 @@ ignore:
developer machines
expires: 2026-06-08T00:00:00.000Z
created: 2025-01-05T10:10:00.000Z
SNYK-JS-ISAACSBRACEEXPANSION-15208653:
- 'glob@11.1.0 > minimatch@10.1.1 > @isaacs/brace-expansion@5.0.0':
reason: >-
braces is only used in development/testing - it's not used in the final production build
expires: 2026-06-08T00:00:00.000Z
created: 2025-01-05T10:10:00.000Z
- '@nx/rollup@20.3.1 > rollup-plugin-copy@3.5.0 > globby@10.0.1 > @types/glob@7.2.0 > @types/minimatch@6.0.0 > minimatch@10.1.1 > @isaacs/brace-expansion@5.0.0':
reason: >-
braces is only used in development/testing - it's not used in the final production build
expires: 2026-06-08T00:00:00.000Z
created: 2025-01-05T10:10:00.000Z
patch: {}
21 changes: 17 additions & 4 deletions AGENTS.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# Additional Conventions Beyond the Built-in Functions

As this project's AI coding tool, you must follow the additional conventions below, in addition to the built-in functions.

## AI Agent Instructions

This file provides guidance to AI Agents when working with code in this repository.
Expand Down Expand Up @@ -73,7 +77,10 @@ For detailed information about preferred technologies and architectural constrai
- `yarn nx build:package <package>` – create ESM/CJS bundles to validate publishable output.
- `yarn nx build:umd <package>` – produce UMD bundles for browser distribution smoke-tests.
- `yarn nx run-many -t build` – rebuild all packages when changes span the dependency graph.
- `yarn nx test <package>` – execute Jest suites for the affected package.
- `yarn nx test ag-behavioural-testing --run` – run behavioural tests in `testing/behavioural/` (primary test suite, uses Vitest).
- `yarn nx test ag-behavioural-testing --run "<file-pattern>"` – run specific behavioural test file.
- `yarn nx test ag-behavioural-testing --run "<file-pattern>" -t "<test-name>"` – run specific behavioural test by name.
- `yarn nx test <package>` – execute Jest unit tests for the affected package.
- `yarn nx test <package> --testPathPattern="<file-name>"` - test specific test file
- `yarn nx test <package> --testPathPattern="<file-name>" --testNamePattern="<test-name>"` - test specific test name in a specific test file
- `yarn nx e2e <package>` – run Playwright flows when altering website behaviour.
Expand Down Expand Up @@ -121,11 +128,11 @@ Core dependency chain: `ag-grid-community` → `ag-grid-enterprise` → framewor

For comprehensive testing information, see [Testing Guide](.rulesync/rules/testing.md).

Key testing tools:
**Behavioural tests are the primary test suite.** When verifying grid changes, run behavioural tests first. Key testing tools:

- **Unit tests**: Jest with jsdom environment
- **Behavioural tests** (primary): `testing/behavioural/` for grid behaviour verification — use Vitest
- **Unit tests**: Jest with jsdom environment for package-level tests
- **E2E tests**: Playwright for website interaction testing
- **Behavioural tests**: `testing/behavioural/` for grid behaviour verification
- **Accessibility tests**: `testing/accessibility/` for a11y compliance
- **Performance tests**: `testing/performance/` for performance regression testing

Expand All @@ -139,6 +146,12 @@ Essential practices:
- Self-review your changes before proposing commits
- Ensure tests exercise real implementations, not test helpers

#### Styling

The grid is in transition from Legacy Themes (.scss files written in Sass under `/community-modules/styles/`) to the Theming API (.css written in modern nested CSS under `/packages/`).

While this transition is in progress, changes made to Theming API should be applied to Legacy Themes. When reviewing a PR with changes to the Theming API CSS, if the same PR does not have corresponding changes to Legacy Themes, this should be flagged as a P1 level issue.

### Common Development Tasks

#### Quick Playbooks
Expand Down
4 changes: 2 additions & 2 deletions community-modules/locale/src/en-US.ts
Original file line number Diff line number Diff line change
Expand Up @@ -220,8 +220,8 @@ export const AG_GRID_LOCALE_EN = {
noAggregation: 'None',
autosizeThisColumn: 'Autosize This Column',
autosizeAllColumns: 'Autosize All Columns',
groupBy: 'Group by',
ungroupBy: 'Un-Group by',
groupBy: 'Group by ${variable}',
ungroupBy: 'Un-Group by ${variable}',
ungroupAll: 'Un-Group All',
addToValues: 'Add ${variable} to values',
removeFromValues: 'Remove ${variable} from values',
Expand Down
4 changes: 4 additions & 0 deletions documentation/ag-grid-docs/src/content/docs-nav/nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
"title": "Creating a Basic Grid",
"path": "deep-dive"
},
{
"title": "Styling a Grid",
"path": "styling-tutorial"
},
{
"title": "Best Practices",
"path": "react-hooks",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@ const columnDefs: ColDef[] = [
`Start Of Today`, `Start Of Tomorrow`, `Start Of XXX` point to the beginning of the corresponding day, e.g. `00:00:00.000` in the browser’s local time zone.
{% /note %}

For date range filters, the Grid State model matches the SSRM request model shape. See [SSRM Date Range Filters](./server-side-model-filtering/#preset-date-range-filters) for the server-side filtering contract.
For date range filters, the Grid State model matches the SSRM request model shape. See [SSRM Preset Date Range Filters](./server-side-model-filtering/#preset-date-range-filters) for the server-side filtering contract.

## Range Input Validation and Error States

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ enterprise: true

Formulas let users enter spreadsheet-style expressions into grid cells so values update automatically when referenced data changes.

{% video videoSrc="resources/formula-editor-demo.mp4" centered=true /%}

## Enabling Formulas

To enable formulas, set the column property `allowFormula: true` on one or more columns and ensure your rows have [Row IDs](./row-ids/#row-ids).
Expand Down
Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ You can test AG Grid Enterprise locally without a licence. To test in production
{% /if %}

{% if isFramework("react") %}
Use `AgGridProvider` to provide modules to all grid instances. Provide `AllCommunityModule` to access all Community features or `AllEnterpriseModule` to access all Community **_and_** Enterprise features:
Use `AgGridProvider` to provide modules and a license key (enterprise only) to all grid instances. Provide `AllCommunityModule` to access all Community features or `AllEnterpriseModule` to access all Community **_and_** Enterprise features:

```jsx
import { AllCommunityModule } from 'ag-grid-community';
Expand All @@ -107,7 +107,7 @@ const modules = [AllCommunityModule];

function App() {
return (
<AgGridProvider modules={modules}>
<AgGridProvider modules={modules} licenseKey="YOUR_LICENSE_KEY">
<AgGridReact /* ... props */ />
</AgGridProvider>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,15 @@ const gridOptions = {

## Pivot Mode vs Pivot Active

It is possible to have pivot mode turned on even though there is no pivot active on the grid. In this scenario, the grid will display the data as normal but will strip out columns that have no grouping or value active.
It is possible to have pivot mode turned on even though there is no pivot active, on the grid. A pivot is active when one or more of the pivot columns is used as a column label. In this scenario, the grid will display the data as normal but will strip out columns that have no grouping or value active.

The example below demonstrates the difference between pivot mode and having a column with pivot active. The example has three modes of operation that can be switched between using the top buttons. The modes are as follows:

- **1 - Grouping Active:** This is normal grouping. The grid groups with aggregations over Gold, Silver and Bronze. The user can drill down to the lowest level row data and columns without aggregation or group (eg Country, Year, Date and Sport) are shown.

- **2 - Grouping Active with Pivot Mode:** This is grouping with pivotMode=true, but without any pivot active. The data shown is identical to the first option except the grid removes access to the lowest level row data and columns without aggregation or group are not shown.
- **2 - Grouping Active with Pivot Mode:** This is grouping with `pivotMode=true`, but without any pivot active. The data shown is identical to the first option except the grid removes access to the lowest level row data and columns without aggregation or group are not shown.

- **3 - Grouping Active with Pivot Mode and Pivot Active:** This is grouping with pivotMode=true and pivot active. Although it appears similar to the second option, there is no pivot active in the second option.
- **3 - Grouping Active with Pivot Mode and Pivot Active:** This is grouping with pivotMode=true and pivot active. Note that the Year column has been added to the Column Labels and there are now pivot result columns for each year.

{% gridExampleRunner title="Pivot Mode Vs Pivot Active" name="pivot-mode" exampleHeight=630 /%}

Expand Down
Loading
Loading