Skip to content

Commit 6b5f81d

Browse files
adamdoeadamdoe
authored
Merge pull request #2423 from CDCgov/dev
4.25.11 Dev > Test
2 parents 2786bcc + b8a1026 commit 6b5f81d

File tree

302 files changed

+48568
-27317
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

302 files changed

+48568
-27317
lines changed

‎.github/chatmodes/EditorTests.chatmode.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
```chatmode
2+
---
3+
description: 'Specialized mode for writing editor tests that follows testing best practices and examines field implementations before proposing test plans.'
4+
tools: ['read_file', 'grep_search', 'semantic_search', 'replace_string_in_file', 'list_code_usages']
5+
---
6+
7+
## Editor Test Writing Mode
8+
9+
This chatmode helps write comprehensive editor tests by systematically examining field implementations, proposing detailed test plans, and avoiding common testing pitfalls.
10+
11+
### Core Behavior
12+
13+
**Always Keep Testing Document in Context**
14+
- Reference `docs/TESTING_BEST_PRACTICES.md` for all test decisions
15+
- Follow the `performAndAssert` pattern consistently
16+
- Focus on visualization output changes, never UI control state
17+
- Test what reliably works, avoid fragile interactions
18+
19+
**Examine Field Implementation First**
20+
- Always inspect actual component code before writing any tests
21+
- Understand field's data flow: props → state → visualization
22+
- Identify HTML structure, selectors, and event handling
23+
- Determine what specific visual changes the field produces
24+
25+
**Propose Implementation Plan & Get Approval**
26+
- Present detailed test plan before any code implementation
27+
- Specify exact visualization changes to be tested
28+
- Identify precise selectors and interaction methods
29+
- Outline expected before/after state differences
30+
- Wait for explicit approval before proceeding
31+
32+
**Avoid Common Pitfalls**
33+
1. **Defensive Statements**: No vague expectations like `toBeGreaterThanOrEqual(0)` - use specific values
34+
2. **Testing the UI**: Never test control states like `dropdown.value` - test visualization output only
35+
3. **Bad Selectors**: Use semantic selectors (labels, aria) not CSS class hunting
36+
4. **Testing Too Vaguely**: Replace `expect(chart.changed).toBe(true)` with specific measurable changes
37+
38+
### Response Protocol
39+
40+
**For New Field Tests:**
41+
1. **INVESTIGATE** - Examine field implementation and data flow
42+
2. **ANALYZE** - Identify visual effects and HTML structure
43+
3. **PROPOSE** - Present detailed test plan with specific validation
44+
4. **AWAIT APPROVAL** - Get explicit confirmation before implementing
45+
5. **IMPLEMENT** - Write test following approved plan
46+
47+
**For Troubleshooting:**
48+
1. **DIAGNOSE** - Check for the 4 common pitfalls listed above
49+
2. **EXAMINE** - Review actual component behavior and implementation
50+
3. **PROPOSE FIX** - Suggest specific solution addressing root cause
51+
4. **IMPLEMENT** - Apply approved fix
52+
53+
### Response Format
54+
55+
Structure all responses as:
56+
```
57+
58+
🧪 EDITOR-TEST MODE
59+
60+
[PHASE]: [Field/Issue Name]
61+
[Detailed analysis or proposal]
62+
63+
[Clear next step or approval request]
64+
65+
```
66+
67+
### Integration Notes
68+
- Reference existing patterns in `packages/chart/src/_stories/ChartBar.Editor.stories.tsx`
69+
- Use established helpers: `waitForEditor()`, `openAccordion()`, `performAndAssert()`
70+
- Follow visualization-focused testing approach from testing document
71+
- Always examine actual component files before proposing selector strategies
72+
```

‎.storybook/assets/custom-order-demo-data.csv‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Location,Year,Type,Amount
2+
California,2019,Federal,1500
3+
California,2020,Federal,1520
4+
California,2021,Federal,1540
5+
Texas,2019,State,1300
6+
Texas,2020,State,1320
7+
Texas,2021,State,1340
8+
Florida,2019,Local,1100
9+
Florida,2020,Local,1120
10+
Florida,2021,Local,1140
11+
New York,2019,Federal,1600
12+
New York,2020,Federal,1620
13+
New York,2021,Federal,1640
14+
Illinois,2019,State,1200
15+
Illinois,2020,State,1220
16+
Illinois,2021,State,1240

‎docs/TESTING_BEST_PRACTICES.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,8 @@ await performAndAssert(
144144
- ❌ Checkbox is checked (this is control state, not visualization output)
145145
- ❌ Input value changed (this is control state, not visualization output)
146146

147+
**Trace Control Implementation**: When you are unsure what visual change to assert, inspect the component or handler that powers the editor control. Identify the exact class name, attribute, or style the control toggles and assert on that output instead of guessing from the UI.
148+
147149
### 3. Using `getVisualState` Helper
148150

149151
Use `getVisualState` to capture multiple visual properties at once:
@@ -300,6 +302,8 @@ await performAndAssert(
300302
| `if (element) { await click(element) }` | `await click(canvas.getByRole(...))` - fail fast |
301303
| Console.log debugging in final tests | Remove before committing |
302304

305+
**Avoid Defensive Guard Clauses**: Do not return early when a required control or visualization element is missing (e.g., `if (!dropdown) return`). Use assertive queries (`getBy*`) or explicit `expect` checks so the test fails loudly when the UI regresses.
306+
303307
## Creating New Tests: Quick Checklist
304308

305309
1. ✅ Import helpers from `@cdc/core/helpers/testing`

‎knip.json‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
{
2+
"$schema": "https://unpkg.com/knip@5/schema.json",
3+
"workspaces": {
4+
".": {
5+
"entry": [
6+
".storybook/**/*.{js,ts}",
7+
"_stories/**/*.{js,ts,tsx}"
8+
],
9+
"project": [
10+
"!packages/**"
11+
],
12+
"ignore": [
13+
"storybook-static/**",
14+
"**/dist/**",
15+
"**/build/**",
16+
"**/*.stories.{js,ts,tsx}",
17+
"**/*.test.{js,ts,tsx}",
18+
"**/*.spec.{js,ts,tsx}"
19+
]
20+
},
21+
"packages/chart": {
22+
"entry": [
23+
"src/CdcChart.tsx",
24+
"src/index.jsx",
25+
"src/components/BarChart/components/BarChartType.jsx"
26+
],
27+
"project": [
28+
"src/**/*.{js,ts,tsx}"
29+
]
30+
},
31+
"packages/dashboard": {
32+
"entry": [
33+
"src/CdcDashboard.tsx",
34+
"src/index.tsx"
35+
],
36+
"project": [
37+
"src/**/*.{js,ts,tsx}"
38+
]
39+
},
40+
"packages/core": {
41+
"entry": [
42+
"components/**/*.tsx",
43+
"contexts/**/*.ts",
44+
"helpers/**/*.ts",
45+
"hooks/**/*.ts",
46+
"types/**/*.ts",
47+
"templates/**/*.jsx",
48+
"data/**/*.{js,ts,tsx}"
49+
],
50+
"project": [
51+
"components/**/*.{js,ts,tsx}",
52+
"contexts/**/*.{js,ts,tsx}",
53+
"helpers/**/*.{js,ts,tsx}",
54+
"hooks/**/*.{js,ts,tsx}",
55+
"types/**/*.{js,ts,tsx}",
56+
"data/**/*.{js,ts,tsx}",
57+
"templates/**/*.jsx"
58+
]
59+
},
60+
"packages/data-bite": {
61+
"entry": [
62+
"src/CdcDataBite.tsx",
63+
"src/index.jsx"
64+
],
65+
"project": [
66+
"src/**/*.{js,ts,tsx}"
67+
],
68+
"ignore": [
69+
"src/constants.ts"
70+
]
71+
},
72+
"packages/data-table": {
73+
"entry": [
74+
"src/CdcDataTable.tsx",
75+
"src/index.tsx"
76+
],
77+
"project": [
78+
"src/**/*.{js,ts,tsx}"
79+
]
80+
},
81+
"packages/editor": {
82+
"entry": [
83+
"src/CdcEditor.tsx",
84+
"src/index.jsx"
85+
],
86+
"project": [
87+
"src/**/*.{js,ts,tsx}"
88+
]
89+
},
90+
"packages/filtered-text": {
91+
"entry": [
92+
"src/CdcFilteredText.tsx",
93+
"src/index.jsx"
94+
],
95+
"project": [
96+
"src/**/*.{js,ts,tsx}"
97+
]
98+
},
99+
"packages/map": {
100+
"entry": [
101+
"src/CdcMap.tsx",
102+
"src/index.jsx"
103+
],
104+
"project": [
105+
"src/**/*.{js,ts,tsx}"
106+
]
107+
},
108+
"packages/markup-include": {
109+
"entry": [
110+
"src/CdcMarkupInclude.tsx",
111+
"src/index.jsx"
112+
],
113+
"project": [
114+
"src/**/*.{js,ts,tsx}"
115+
]
116+
},
117+
"packages/waffle-chart": {
118+
"entry": [
119+
"src/CdcWaffleChart.tsx",
120+
"src/index.jsx"
121+
],
122+
"project": [
123+
"src/**/*.{js,ts,tsx}"
124+
]
125+
}
126+
},
127+
"ignore": [
128+
"**/*.stories.{js,ts,tsx}",
129+
"**/*.test.{js,ts,tsx}",
130+
"**/*.spec.{js,ts,tsx}",
131+
"**/dist/**",
132+
"**/build/**",
133+
"**/node_modules/**",
134+
"storybook-static/**",
135+
".storybook_build/**",
136+
"patches/**",
137+
"**/examples/**",
138+
"**/tests/**",
139+
"**/tests-examples/**",
140+
"**/uploads/**",
141+
"**/topojson-updater/**",
142+
"**/_stories/**"
143+
],
144+
"ignoreBinaries": [
145+
"patch-package",
146+
"husky",
147+
"gh-pages"
148+
],
149+
"ignoreDependencies": [
150+
"@types/*",
151+
"patch-package",
152+
"postinstall-postinstall",
153+
"husky",
154+
"gh-pages",
155+
"lint-staged",
156+
"prettier",
157+
"eslint*",
158+
"@typescript-eslint/*",
159+
"@storybook/*",
160+
"storybook*",
161+
"@vitest/*",
162+
"vitest",
163+
"playwright",
164+
"jsdom"
165+
],
166+
"rules": {
167+
"files": "error",
168+
"dependencies": "error",
169+
"devDependencies": "warn",
170+
"unlisted": "error",
171+
"exports": "error",
172+
"nsExports": "error",
173+
"classMembers": "error",
174+
"types": "error",
175+
"nsTypes": "error",
176+
"enumMembers": "error",
177+
"duplicates": "error"
178+
}
179+
}

‎package.json‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"html-react-parser": "5.2.3",
5252
"husky": "^8.0.0",
5353
"jsdom": "^22.1.0",
54+
"knip": "^5.66.2",
5455
"lerna": "^7.1.3",
5556
"lint-staged": "^15.5.1",
5657
"lodash": "^4.17.21",
@@ -75,7 +76,7 @@
7576
"storybook": "^9.1.6",
7677
"storybook-addon-fetch-mock": "^2.0.1",
7778
"use-debounce": "^7.0.1",
78-
"vite": "^5.4.20",
79+
"vite": "^5.4.21",
7980
"vite-plugin-css-injected-by-js": "^2.4.0",
8081
"vite-plugin-md": "^0.22.5",
8182
"vite-plugin-svgr": "^4.2.0",
@@ -93,6 +94,16 @@
9394
"clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
9495
"reset": "lerna clean -y && rm -rf node_modules && yarn install && lerna run build",
9596
"publish": "npx lerna publish",
97+
"dev:all": "npm run dev:chart & npm run dev:dashboard & npm run dev:data-bite & npm run dev:data-table & npm run dev:editor & npm run dev:filtered-text & npm run dev:map & npm run dev:markup-include & npm run dev:waffle-chart & wait",
98+
"dev:chart": "lerna run --scope @cdc/chart start -- -- --port 3001",
99+
"dev:dashboard": "lerna run --scope @cdc/dashboard start -- -- --port 3003",
100+
"dev:data-bite": "lerna run --scope @cdc/data-bite start -- -- --port 3004",
101+
"dev:data-table": "lerna run --scope @cdc/data-table start -- -- --port 3005",
102+
"dev:editor": "lerna run --scope @cdc/editor start -- -- --port 3006",
103+
"dev:filtered-text": "lerna run --scope @cdc/filtered-text start -- -- --port 3007",
104+
"dev:map": "lerna run --scope @cdc/map start -- -- --port 3008",
105+
"dev:markup-include": "lerna run --scope @cdc/markup-include start -- -- --port 3009",
106+
"dev:waffle-chart": "lerna run --scope @cdc/waffle-chart start -- -- --port 3010",
96107
"storybook": "storybook dev -p 6006",
97108
"test-storybook": "vitest run --project=storybook -t 'Tests'",
98109
"storybook-docs": "storybook dev --docs",
@@ -101,7 +112,12 @@
101112
"predeploy": "storybook build --output-dir .storybook_build && touch .storybook_build/.nojekyll",
102113
"deploy": "gh-pages -d .storybook_build -t true",
103114
"lint": "eslint packages/*/src/**/*.{js,jsx,ts,tsx}",
104-
"prepare": "husky install"
115+
"prepare": "husky install",
116+
"knip": "knip",
117+
"knip:production": "knip --production",
118+
"knip:unused-files": "knip --include files",
119+
"knip:unused-deps": "knip --include dependencies,devDependencies",
120+
"knip:unused-exports": "knip --include exports,types"
105121
},
106122
"dependencies": {
107123
"@visx/annotation": "^3.3.0",
@@ -115,6 +131,7 @@
115131
"react-table": "7.8.0"
116132
},
117133
"resolutions": {
118-
"jackspeak": "2.1.1"
134+
"jackspeak": "2.1.1",
135+
"esbuild": "^0.25.0"
119136
}
120137
}

‎packages/chart/examples/feature/__data__/planet-example-data.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
"Radius": "1000",
1717
"Diameter": "18",
1818
"distance": "40"
19-
},
19+
}
2020
]

0 commit comments

Comments
 (0)