Skip to content

Commit caa3092

Browse files
mrkeshav-05arkid15r
mrkeshav-05
and
arkid15r
authored
Refactor: Replace getAttribute('data-*') with dataset API for improved code quality (#2503)
* fix: update BarChart test to use dataset for attribute access * fix: update DonutBarChart tests to use dataset for attribute access * fix: update HealthMetrics tests to use dataset for attribute access * fix: update LineChart tests to use dataset for attribute access * fix: update ProjectsDashboardDropDown test to use dataset for key access * fix: update UserDetails test to use dataset for test ID access --------- Co-authored-by: Arkadii Yakovets <[email protected]>
1 parent d4c4bf7 commit caa3092

File tree

6 files changed

+67
-67
lines changed

6 files changed

+67
-67
lines changed

‎frontend/__tests__/unit/components/BarChart.test.tsx‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ describe('<BarChart />', () => {
185185
it('renders correctly in light mode with proper theme colors', () => {
186186
renderWithTheme(<BarChart {...mockProps} />, 'light')
187187
const chartElement = screen.getByTestId('mock-chart')
188-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
188+
const options = JSON.parse(chartElement.dataset.options || '{}')
189189

190190
expect(options.chart.foreColor).toBe('#1E1E2C')
191191
expect(options.tooltip.theme).toBe('light')
@@ -195,7 +195,7 @@ describe('<BarChart />', () => {
195195
it('renders correctly in dark mode with proper theme colors', () => {
196196
renderWithTheme(<BarChart {...mockProps} />, 'dark')
197197
const chartElement = screen.getByTestId('mock-chart')
198-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
198+
const options = JSON.parse(chartElement.dataset.options || '{}')
199199

200200
expect(options.chart.foreColor).toBe('#ECECEC')
201201
expect(options.tooltip.theme).toBe('dark')
@@ -205,7 +205,7 @@ describe('<BarChart />', () => {
205205
it('configures chart options correctly', () => {
206206
renderWithTheme(<BarChart {...mockProps} />)
207207
const chartElement = screen.getByTestId('mock-chart')
208-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
208+
const options = JSON.parse(chartElement.dataset.options || '{}')
209209

210210
expect(options.chart.animations.enabled).toBe(true)
211211
expect(options.chart.animations.speed).toBe(1000)
@@ -221,14 +221,14 @@ describe('<BarChart />', () => {
221221
renderWithTheme(<BarChart {...mockProps} />)
222222
const chartElement = screen.getByTestId('mock-chart')
223223

224-
expect(chartElement.getAttribute('data-type')).toBe('bar')
225-
expect(chartElement.getAttribute('data-height')).toBe('300')
224+
expect(chartElement.dataset.type).toBe('bar')
225+
expect(chartElement.dataset.height).toBe('300')
226226
})
227227

228228
it('creates correct series data structure', () => {
229229
renderWithTheme(<BarChart {...mockProps} />)
230230
const chartElement = screen.getByTestId('mock-chart')
231-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
231+
const series = JSON.parse(chartElement.dataset.series || '[]')
232232

233233
expect(series).toHaveLength(1)
234234
expect(series[0].name).toBe('Actual')
@@ -249,7 +249,7 @@ describe('<BarChart />', () => {
249249
it('configures colors array correctly', () => {
250250
renderWithTheme(<BarChart {...mockProps} />)
251251
const chartElement = screen.getByTestId('mock-chart')
252-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
252+
const options = JSON.parse(chartElement.dataset.options || '{}')
253253

254254
expect(options.colors).toBeDefined()
255255
expect(Array.isArray(options.colors)).toBe(true)
@@ -259,7 +259,7 @@ describe('<BarChart />', () => {
259259
it('configures dataLabels correctly', () => {
260260
renderWithTheme(<BarChart {...mockProps} />)
261261
const chartElement = screen.getByTestId('mock-chart')
262-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
262+
const options = JSON.parse(chartElement.dataset.options || '{}')
263263

264264
expect(options.dataLabels).toBeDefined()
265265
})
@@ -286,7 +286,7 @@ describe('<BarChart />', () => {
286286
renderWithTheme(<BarChart {...mismatchedProps} />)
287287

288288
const chartElement = screen.getByTestId('mock-chart')
289-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
289+
const series = JSON.parse(chartElement.dataset.series || '[]')
290290

291291
expect(series[0].data).toHaveLength(2)
292292
})
@@ -296,31 +296,31 @@ describe('<BarChart />', () => {
296296
const { rerender } = render(<BarChart {...mockProps} />)
297297

298298
let chartElement = screen.getByTestId('mock-chart')
299-
let options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
299+
let options = JSON.parse(chartElement.dataset.options || '{}')
300300
expect(options.chart.foreColor).toBe('#1E1E2C')
301301
expect(options.tooltip.theme).toBe('light')
302302

303303
mockUseTheme.mockReturnValue({ theme: 'dark' })
304304
rerender(<BarChart {...mockProps} />)
305305

306306
chartElement = screen.getByTestId('mock-chart')
307-
options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
307+
options = JSON.parse(chartElement.dataset.options || '{}')
308308
expect(options.chart.foreColor).toBe('#ECECEC')
309309
expect(options.tooltip.theme).toBe('dark')
310310
})
311311

312312
it('includes strokeColor in goals data', () => {
313313
renderWithTheme(<BarChart {...mockProps} />, 'light')
314314
const chartElement = screen.getByTestId('mock-chart')
315-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
315+
const series = JSON.parse(chartElement.dataset.series || '[]')
316316

317317
expect(series[0].data[0].goals[0].strokeColor).toBe('#FF7875')
318318
})
319319

320320
it('includes strokeColor in goals data for dark mode', () => {
321321
renderWithTheme(<BarChart {...mockProps} />, 'dark')
322322
const chartElement = screen.getByTestId('mock-chart')
323-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
323+
const series = JSON.parse(chartElement.dataset.series || '[]')
324324

325325
expect(series[0].data[0].goals[0].strokeColor).toBe('#FF4D4F')
326326
})
@@ -342,7 +342,7 @@ describe('<BarChart />', () => {
342342

343343
renderWithTheme(<BarChart {...zeroProps} />)
344344
const chartElement = screen.getByTestId('mock-chart')
345-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
345+
const series = JSON.parse(chartElement.dataset.series || '[]')
346346

347347
expect(series[0].data[0].y).toBe(0)
348348
})
@@ -357,7 +357,7 @@ describe('<BarChart />', () => {
357357

358358
renderWithTheme(<BarChart {...negativeProps} />)
359359
const chartElement = screen.getByTestId('mock-chart')
360-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
360+
const series = JSON.parse(chartElement.dataset.series || '[]')
361361

362362
expect(series[0].data[0].y).toBe(-50)
363363
})
@@ -372,7 +372,7 @@ describe('<BarChart />', () => {
372372

373373
renderWithTheme(<BarChart {...decimalProps} />)
374374
const chartElement = screen.getByTestId('mock-chart')
375-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
375+
const series = JSON.parse(chartElement.dataset.series || '[]')
376376

377377
expect(series[0].data[0].y).toBe(99.5)
378378
expect(series[0].data[0].goals[0].value).toBe(100.0)
@@ -388,7 +388,7 @@ describe('<BarChart />', () => {
388388

389389
renderWithTheme(<BarChart {...largeProps} />)
390390
const chartElement = screen.getByTestId('mock-chart')
391-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
391+
const series = JSON.parse(chartElement.dataset.series || '[]')
392392

393393
expect(series[0].data[0].y).toBe(999999)
394394
expect(series[0].data[0].goals[0].value).toBe(1000000)
@@ -399,7 +399,7 @@ describe('<BarChart />', () => {
399399
renderWithTheme(<BarChart {...mockProps} />)
400400

401401
const chartElement = screen.getByTestId('mock-chart')
402-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
402+
const options = JSON.parse(chartElement.dataset.options || '{}')
403403

404404
expect(options.chart.foreColor).toBe('#1E1E2C')
405405
})
@@ -414,7 +414,7 @@ describe('<BarChart />', () => {
414414

415415
renderWithTheme(<BarChart {...zeroReqProps} />)
416416
const chartElement = screen.getByTestId('mock-chart')
417-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
417+
const series = JSON.parse(chartElement.dataset.series || '[]')
418418

419419
expect(series[0].data[0].goals[0].value).toBe(0)
420420
})
@@ -429,7 +429,7 @@ describe('<BarChart />', () => {
429429

430430
renderWithTheme(<BarChart {...mixedProps} />)
431431
const chartElement = screen.getByTestId('mock-chart')
432-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
432+
const series = JSON.parse(chartElement.dataset.series || '[]')
433433

434434
expect(series[0].data[0].y).toBe(-50)
435435
expect(series[0].data[1].y).toBe(150)
@@ -445,7 +445,7 @@ describe('<BarChart />', () => {
445445

446446
renderWithTheme(<BarChart {...smallProps} />)
447447
const chartElement = screen.getByTestId('mock-chart')
448-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
448+
const series = JSON.parse(chartElement.dataset.series || '[]')
449449

450450
expect(series[0].data[0].y).toBe(0.001)
451451
expect(series[0].data[0].goals[0].value).toBe(0.002)
@@ -454,15 +454,15 @@ describe('<BarChart />', () => {
454454
it('configures dataLabels formatter with proper structure', () => {
455455
renderWithTheme(<BarChart {...mockProps} />)
456456
const chartElement = screen.getByTestId('mock-chart')
457-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
457+
const options = JSON.parse(chartElement.dataset.options || '{}')
458458

459459
expect(options.dataLabels).toBeDefined()
460460
})
461461

462462
it('configures colors function with proper structure and parameters', () => {
463463
renderWithTheme(<BarChart {...mockProps} />)
464464
const chartElement = screen.getByTestId('mock-chart')
465-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
465+
const options = JSON.parse(chartElement.dataset.options || '{}')
466466

467467
expect(options.colors).toBeDefined()
468468
expect(Array.isArray(options.colors)).toBe(true)
@@ -473,7 +473,7 @@ describe('<BarChart />', () => {
473473
it('configures legend with proper structure and values', () => {
474474
renderWithTheme(<BarChart {...mockProps} />)
475475
const chartElement = screen.getByTestId('mock-chart')
476-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
476+
const options = JSON.parse(chartElement.dataset.options || '{}')
477477

478478
expect(options.legend).toBeDefined()
479479
expect(options.legend.show).toBe(true)
@@ -496,7 +496,7 @@ describe('<BarChart />', () => {
496496

497497
renderWithTheme(<BarChart {...reverseProps} />)
498498
const chartElement = screen.getByTestId('mock-chart')
499-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
499+
const options = JSON.parse(chartElement.dataset.options || '{}')
500500

501501
expect(options.colors).toBeDefined()
502502
expect(Array.isArray(options.colors)).toBe(true)
@@ -514,7 +514,7 @@ describe('<BarChart />', () => {
514514

515515
renderWithTheme(<BarChart {...noReverseProps} />)
516516
const chartElement = screen.getByTestId('mock-chart')
517-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
517+
const options = JSON.parse(chartElement.dataset.options || '{}')
518518

519519
expect(options.colors).toBeDefined()
520520
expect(Array.isArray(options.colors)).toBe(true)
@@ -525,7 +525,7 @@ describe('<BarChart />', () => {
525525
it('configures chart options with proper structure for all properties', () => {
526526
renderWithTheme(<BarChart {...mockProps} />)
527527
const chartElement = screen.getByTestId('mock-chart')
528-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
528+
const options = JSON.parse(chartElement.dataset.options || '{}')
529529

530530
// Test chart configuration
531531
expect(options.chart).toBeDefined()
@@ -567,7 +567,7 @@ describe('<BarChart />', () => {
567567

568568
renderWithTheme(<BarChart {...edgeCaseProps} />)
569569
const chartElement = screen.getByTestId('mock-chart')
570-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
570+
const options = JSON.parse(chartElement.dataset.options || '{}')
571571

572572
expect(options.chart).toBeDefined()
573573
expect(options.dataLabels).toBeDefined()
@@ -585,7 +585,7 @@ describe('<BarChart />', () => {
585585

586586
renderWithTheme(<BarChart {...singleProps} />)
587587
const chartElement = screen.getByTestId('mock-chart')
588-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
588+
const series = JSON.parse(chartElement.dataset.series || '[]')
589589

590590
expect(series[0].data).toHaveLength(1)
591591
expect(series[0].data[0].x).toBe('Single')
@@ -603,7 +603,7 @@ describe('<BarChart />', () => {
603603

604604
renderWithTheme(<BarChart {...largeProps} />)
605605
const chartElement = screen.getByTestId('mock-chart')
606-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
606+
const series = JSON.parse(chartElement.dataset.series || '[]')
607607

608608
expect(series[0].data[0].y).toBe(Number.MAX_SAFE_INTEGER)
609609
expect(series[0].data[0].goals[0].value).toBe(Number.MAX_SAFE_INTEGER)
@@ -619,7 +619,7 @@ describe('<BarChart />', () => {
619619

620620
renderWithTheme(<BarChart {...specialProps} />)
621621
const chartElement = screen.getByTestId('mock-chart')
622-
const series = JSON.parse(chartElement.getAttribute('data-series') || '[]')
622+
const series = JSON.parse(chartElement.dataset.series || '[]')
623623

624624
expect(series[0].data).toHaveLength(3)
625625
expect(series[0].data[0].x).toBe('Test & More')
@@ -638,7 +638,7 @@ describe('<BarChart />', () => {
638638

639639
renderWithTheme(<BarChart {...mixedReverseProps} />)
640640
const chartElement = screen.getByTestId('mock-chart')
641-
const options = JSON.parse(chartElement.getAttribute('data-options') || '{}')
641+
const options = JSON.parse(chartElement.dataset.options || '{}')
642642

643643
expect(options.colors).toBeDefined()
644644
expect(Array.isArray(options.colors)).toBe(true)

0 commit comments

Comments
 (0)