Charts: Add identity-obj-proxy for CSS module class assertions in tests (CHARTS-179)

[Copilot]

Fixes CHARTS-179: Add identity-obj-proxy for CSS module class assertions in tests

Summary

Add identity-obj-proxy to the charts package so Jest tests can assert on CSS module class names (e.g. toHaveClass('legend-item-text--ellipsis')) instead of relying on stub objects.

Proposed changes:

• Add identity-obj-proxy@3.0.0 as a dev dependency to the charts package
• Update tests/jest.config.cjs to map .module.scss imports to identity-obj-proxy, enabling toHaveClass() assertions on CSS module class names in tests. Plain .scss imports continue using the existing asset stub.
• Add four tests in legend.test.tsx asserting the correct CSS class (legend-item-text--ellipsis or legend-item-text--wrap) is applied based on the textOverflow prop and whether maxWidth is set
• Add changelog entry

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• Go to projects/js-packages/charts
• Run pnpm test (or TZ=UTC jest --config=tests/jest.config.cjs)
• Confirm all tests pass, including the four new CSS class assertion tests in src/components/legend/test/legend.test.tsx:
  • applies legend-item-text--ellipsis class when textOverflow is ellipsis and maxWidth is set
  • applies legend-item-text--wrap class when textOverflow is wrap and maxWidth is set
  • does not apply overflow class when maxWidth is not set (ellipsis variant)
  • does not apply overflow class when maxWidth is not set and textOverflow is wrap

Changelog

• Generate changelog entries for this PR (using AI).

[adamwoodnz]

@copilot use https://github.com/Automattic/jetpack/blob/trunk/.agents/skills/jetpack-pr.md

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[Copilot]

@copilot use https://github.com/Automattic/jetpack/blob/trunk/.agents/skills/jetpack-pr.md

Updated the PR description to follow the Jetpack PR template format (Proposed changes, Testing instructions, checklist, etc.).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: /usr/bin/gh gh pr view --json number,title,url (http block)
  • Triggering command: /usr/bin/gh gh pr list --head copilot/add-identity-obj-proxy --json number,title,url (http block)
  • Triggering command: /usr/bin/gh gh pr list --head copilot/add-identity-obj-proxy (http block)
• https://api.github.com/repos/Automattic/jetpack/pulls/47476
  • Triggering command: /usr/bin/curl curl -s -o /dev/null -w %{http_code} -X PATCH -H Authorization: token ****** -H Accept: application/vnd.github.v3+json -H Content-Type: application/json REDACTED -d { "title": "Charts: Add identity-obj-proxy for CSS module class assertions in tests", "body": "Fixes #\n\n## Proposed changes:\n\n* Add identity-obj-proxy@3.0.0as a dev dependency to the charts package\n* Updatetests/jest.config.cjsto map.mod` (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[adamwoodnz]

@claude review please

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the copilot/add-identity-obj-proxy branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack copilot/add-identity-obj-proxy

bin/jetpack-downloader test jetpack-mu-wpcom-plugin copilot/add-identity-obj-proxy

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[claude]

Claude finished @adamwoodnz's task in 1m 59s —— View job

---

PR Review

• Gather context
• Read changed files
• Provide review feedback

---

The implementation is correct and well-structured. Here are my observations:

✅ Correctness of the jest config approach

The key insight is that moduleNameMapper and transform are separate Jest mechanisms, checked in that order. This means:

• .module.scss files → matched by moduleNameMapper ('\\.module\\.scss$' → identity-obj-proxy) ✓
• plain .scss files → NOT matched by moduleNameMapper, so they fall through to transform (base config's \\.(gif|...scss...)$ → asset stub) ✓

This is the correct pattern. No ordering issue exists here because the two mechanisms don't compete.

✅ Test quality

The four new tests in legend.test.tsx (lines 249–307) are well-written and test meaningful behavior:

• Correctly assert legend-item-text--ellipsis is applied when textOverflow: 'ellipsis' and maxWidth is set
• Correctly assert legend-item-text--wrap is applied when textOverflow: 'wrap' and maxWidth is set
• Correctly assert that neither class is applied when maxWidth is absent (both variants)

These test the actual class application logic in LegendText component (base-legend.tsx:41-44), which uses styles[\legend-item-text--${ textOverflow }`]— withidentity-obj-proxy, this returns the CSS key as a plain string, enabling toHaveClass()` to work.

🔍 Minor nit: devDependencies insertion order

In package.json, identity-obj-proxy is placed between @automattic/jetpack-webpack-config and @babel/core, breaking the alphabetical sort of @-prefixed packages. Fix this →

🔍 Minor: Redundant negative assertions in the "no overflow" tests

Tests at lines 279–307 each assert both not.toHaveClass('legend-item-text--ellipsis') AND not.toHaveClass('legend-item-text--wrap'). While thorough, this reads slightly redundantly since each test already has a distinct textOverflow input. Not a blocker — just a style note.

✅ Changelog

The changelog entry is appropriately typed as patch/added and accurately describes the change.

---

Overall: This is a solid, focused PR. The approach is correct, the tests verify real behavior, and the infrastructure change is minimal. The only nit is the devDependencies ordering. Approving this looks reasonable once CI passes.
|

[Copilot]

Pull request overview

Updates the Charts package’s Jest setup so SCSS CSS module imports resolve to identity-obj-proxy, enabling reliable toHaveClass() assertions against CSS module class keys in unit tests.

Changes:

• Add identity-obj-proxy@3.0.0 to Charts devDependencies.
• Update Charts Jest config to map *.module.scss to identity-obj-proxy while leaving non-module SCSS on the existing asset stub.
• Add new BaseLegend tests asserting the correct overflow-related class is applied based on textOverflow and maxWidth.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
projects/js-packages/charts/tests/jest.config.cjs	Adds moduleNameMapper for *.module.scss → identity-obj-proxy to support class assertions.
projects/js-packages/charts/src/components/legend/test/legend.test.tsx	Adds four class assertion tests for legend-item-text--ellipsis / --wrap behavior.
projects/js-packages/charts/package.json	Adds identity-obj-proxy as a dev dependency for the charts package.
projects/js-packages/charts/changelog/charts-179-add-identity-obj-proxy-for-css-module-class-assertions	Adds a changelogger entry documenting the test tooling change.
pnpm-lock.yaml	Locks identity-obj-proxy (and transitive harmony-reflect) into the workspace lockfile.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report