feat: add dev warning for missing field definition labels in attribute-editor#4337
feat: add dev warning for missing field definition labels in attribute-editor#4337
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4337 +/- ##
=======================================
Coverage 97.44% 97.44%
=======================================
Files 897 897
Lines 26397 26401 +4
Branches 9527 9528 +1
=======================================
+ Hits 25723 25727 +4
Misses 631 631
Partials 43 43 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
|
||
| jest.mock('@cloudscape-design/component-toolkit', () => ({ | ||
| ...jest.requireActual('@cloudscape-design/component-toolkit'), | ||
| useContainerQuery: jest.fn().mockImplementation(() => ['m', () => {}]), |
There was a problem hiding this comment.
Do we need this line? If you mock '@cloudscape-design/component-toolkit/internal' we shouldn't need this since we are only interested in 'warnOnce'. I'd check how the other warnOnce usages are tested e.g.
components/src/button-dropdown/__tests__/button-dropdown.test.tsx
Lines 16 to 23 in 8093e3f
There was a problem hiding this comment.
Yeah true, the useContainerQuery mock is unnecessary here. I've switched to mocking @cloudscape-design/component-toolkit/internal with just warnOnce: jest.fn(), matching the pattern in button-dropdown and table. This also lets us drop the consoleWarnSpy entirely since we can assert directly on the warnOnce mock and use mockReset() between tests instead of relying on a separate file for a clean warnOnce cache
| /> | ||
| ); | ||
|
|
||
| expect(warnOnce).toHaveBeenCalledTimes(1); |
There was a problem hiding this comment.
Could you check why it was being triggered twice before deleting it?
There was a problem hiding this comment.
The warning check runs directly in the render body (not in a useEffect/useMemo), so it fires on every render. The original test had useContainerQuery mocked to return a stable value (['m', () => {}]), which prevented the re-render. When I refactored the test to mock @cloudscape-design/component-toolkit/internal instead of @cloudscape-design/component-toolkit, I lost that useContainerQuery mock — so the real hook runs, resolves the container query asynchronously, and triggers a second render → second warnOnce call.
Description
Adds a console warning via
warnOncewhen anAttributeEditorfield definition is missing alabelprop. Thelabelis used asaria-labelfor the inputs in the column, so omitting it degrades the screen reader experience.This change helps guide developers toward providing accessible labels without introducing a breaking change (making
labelrequired).Related links, issue #, if available:
AWSUI-61432How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.