Skip to content

Commit 55ed26b

Browse files
manojVivekpre-commit-ci-lite[bot]
manojVivek
and
pre-commit-ci-lite[bot]
authored
ui: Test id refactoring to remove the hardcoded strings (#5955)
* Test id refacting to remove the hardcoded strings * [pre-commit.ci lite] apply automatic fixes * Linter fix --------- Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
1 parent 364f745 commit 55ed26b

18 files changed

Lines changed: 79 additions & 73 deletions

File tree

‎ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerText/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
import cx from 'classnames';
1515

16-
import {testId} from '@parca/test-utils';
16+
import {TEST_IDS, testId} from '@parca/test-utils';
1717

1818
import RelativeDatePicker from '../RelativeDatePicker';
1919
import {DateTimeRange, DateUnion} from '../utils';
@@ -37,7 +37,7 @@ const DateTimeRangePickerText = ({
3737
const dateString = range.getRangeStringForUI(timezone);
3838

3939
return (
40-
<div {...testId('DATE_TIME_RANGE_PICKER_TEXT')}>
40+
<div {...testId(TEST_IDS.DATE_TIME_RANGE_PICKER_TEXT)}>
4141
{isRelativeRange ? (
4242
<RelativeDatePicker
4343
range={range}
@@ -48,7 +48,7 @@ const DateTimeRangePickerText = ({
4848
/>
4949
) : (
5050
<div>
51-
<label htmlFor="range" className="text-xs" {...testId('DATE_TIME_RANGE_LABEL')}>
51+
<label htmlFor="range" className="text-xs" {...testId(TEST_IDS.DATE_TIME_RANGE_LABEL)}>
5252
Range
5353
</label>
5454
<div
@@ -58,7 +58,7 @@ const DateTimeRangePickerText = ({
5858
{'bg-white dark:bg-gray-900': !isActive},
5959
{'!justify-center, bg-gray-100 dark:bg-gray-800 ': isActive}
6060
)}
61-
{...testId('DATE_TIME_RANGE_PICKER_BUTTON')}
61+
{...testId(TEST_IDS.DATE_TIME_RANGE_PICKER_BUTTON)}
6262
>
6363
<span className="w-[147px] overflow-hidden text-ellipsis whitespace-nowrap xl:w-auto">
6464
{dateString}

‎ui/packages/shared/components/src/DateTimeRangePicker/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {useRef, useState} from 'react';
1616
import {Popover} from '@headlessui/react';
1717
import {useClickAway} from 'react-use';
1818

19-
import {testId} from '@parca/test-utils';
19+
import {TEST_IDS, testId} from '@parca/test-utils';
2020

2121
import DateTimeRangePickerPanel from './DateTimeRangePickerPanel';
2222
import DateTimeRangePickerText from './DateTimeRangePickerText';
@@ -49,7 +49,7 @@ const DateTimeRangePicker = ({
4949
<div
5050
ref={containerRef}
5151
className="relative w-fit items-center"
52-
{...testId('DATE_TIME_RANGE_PICKER_CONTAINER')}
52+
{...testId(TEST_IDS.DATE_TIME_RANGE_PICKER_CONTAINER)}
5353
>
5454
<DateTimeRangePickerText
5555
range={range}
@@ -65,7 +65,7 @@ const DateTimeRangePicker = ({
6565
<Popover.Panel
6666
className="absolute left-[50%] translate-x-[-50%] z-10 mt-2 w-fit rounded border shadow-lg dark:border-gray-600"
6767
static
68-
{...testId('DATE_TIME_RANGE_PICKER_PANEL')}
68+
{...testId(TEST_IDS.DATE_TIME_RANGE_PICKER_PANEL)}
6969
>
7070
<DateTimeRangePickerPanel
7171
range={range}

‎ui/packages/shared/profile/src/MatchersInput/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import TextareaAutosize from 'react-textarea-autosize';
2020
import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
2121
import {useGrpcMetadata} from '@parca/components';
2222
import {Query} from '@parca/parser';
23-
import {testId} from '@parca/test-utils';
23+
import {TEST_IDS, testId} from '@parca/test-utils';
2424
import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
2525

2626
import {UtilizationLabels} from '../ProfileSelector';
@@ -292,7 +292,7 @@ const MatchersInput = ({
292292
return (
293293
<div
294294
className="w-full min-w-[300px] flex-1 font-mono relative"
295-
{...testId('MATCHERS_INPUT_CONTAINER')}
295+
{...testId(TEST_IDS.MATCHERS_INPUT_CONTAINER)}
296296
>
297297
<TextareaAutosize
298298
ref={inputRef}
@@ -308,7 +308,7 @@ const MatchersInput = ({
308308
onChange={onChange}
309309
value={value}
310310
onBlur={unfocus}
311-
{...testId('MATCHERS_TEXTAREA')}
311+
{...testId(TEST_IDS.MATCHERS_TEXTAREA)}
312312
onFocus={focus}
313313
disabled={profileSelected} // Disable input if no profile has been selected
314314
title={

‎ui/packages/shared/profile/src/MetricsGraph/MetricsContextMenu/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {Icon} from '@iconify/react';
1515
import {Item, Menu, Submenu} from 'react-contexify';
1616

1717
import {useParcaContext} from '@parca/components';
18-
import {testId} from '@parca/test-utils';
18+
import {TEST_IDS, testId} from '@parca/test-utils';
1919

2020
import {Series, SeriesPoint} from '../';
2121

@@ -115,7 +115,7 @@ const MetricsContextMenu = ({
115115
id={menuId}
116116
onVisibilityChange={trackVisibility}
117117
theme={isDarkMode ? 'dark' : ''}
118-
{...testId('METRICS_GRAPH_CONTEXT_MENU')}
118+
{...testId(TEST_IDS.METRICS_GRAPH_CONTEXT_MENU)}
119119
>
120120
{menuItems.map(renderMenuItem)}
121121
</Menu>

‎ui/packages/shared/profile/src/MetricsGraph/MetricsTooltip/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {useEffect, useMemo, useState} from 'react';
1515

1616
import {usePopper} from 'react-popper';
1717

18-
import {testId} from '@parca/test-utils';
18+
import {TEST_IDS, testId} from '@parca/test-utils';
1919

2020
interface VirtualElement {
2121
getBoundingClientRect: () => DOMRect;
@@ -113,7 +113,7 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
113113
ref={setPopperElement}
114114
style={styles.popper}
115115
{...attributes.popper}
116-
{...testId('METRICS_GRAPH_TOOLTIP')}
116+
{...testId(TEST_IDS.METRICS_GRAPH_TOOLTIP)}
117117
className="z-50"
118118
>
119119
<div className="flex max-w-lg">

‎ui/packages/shared/profile/src/MetricsGraph/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import throttle from 'lodash.throttle';
1919
import {useContextMenu} from 'react-contexify';
2020

2121
import {DateTimeRange, useParcaContext} from '@parca/components';
22-
import {testId} from '@parca/test-utils';
22+
import {TEST_IDS, testId} from '@parca/test-utils';
2323
import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
2424

2525
import MetricsCircle from '../MetricsCircle';
@@ -84,7 +84,7 @@ const MetricsGraph = ({
8484
return (
8585
<div
8686
className="relative"
87-
{...testId('METRICS_GRAPH')}
87+
{...testId(TEST_IDS.METRICS_GRAPH)}
8888
onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}
8989
>
9090
<div className="absolute right-0 top-0">

‎ui/packages/shared/profile/src/ProfileExplorer/ProfileExplorerCompare.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {useState} from 'react';
1616
import {QueryServiceClient} from '@parca/client';
1717
import {useURLState} from '@parca/components';
1818
import {Query} from '@parca/parser';
19-
import {testId} from '@parca/test-utils';
19+
import {TEST_IDS, testId} from '@parca/test-utils';
2020
import type {NavigateFunction} from '@parca/utilities';
2121

2222
import {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
@@ -64,9 +64,12 @@ const ProfileExplorerCompare = ({
6464
const [compareAbsolute] = useURLState('compare_absolute');
6565

6666
return (
67-
<div {...testId('COMPARE_CONTAINER')}>
67+
<div {...testId(TEST_IDS.COMPARE_CONTAINER)}>
6868
<div className="flex justify-between gap-2 relative mb-2">
69-
<div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_A')}>
69+
<div
70+
className="flex-column flex-1 p-2 shadow-md rounded-md"
71+
{...testId(TEST_IDS.COMPARE_SIDE_A)}
72+
>
7073
<ProfileSelector
7174
queryClient={queryClient}
7275
querySelection={queryA}
@@ -82,7 +85,10 @@ const ProfileExplorerCompare = ({
8285
setDisplayHideMetricsGraphButton={setShowMetricsGraph}
8386
/>
8487
</div>
85-
<div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_B')}>
88+
<div
89+
className="flex-column flex-1 p-2 shadow-md rounded-md"
90+
{...testId(TEST_IDS.COMPARE_SIDE_B)}
91+
>
8692
<ProfileSelector
8793
queryClient={queryClient}
8894
querySelection={queryB}
@@ -101,7 +107,7 @@ const ProfileExplorerCompare = ({
101107
</div>
102108
<div className="grid grid-cols-1">
103109
{profileA != null && profileB != null ? (
104-
<div {...testId('COMPARE_PROFILE_VIEW')}>
110+
<div {...testId(TEST_IDS.COMPARE_PROFILE_VIEW)}>
105111
<ProfileViewWithData
106112
queryClient={queryClient}
107113
profileSource={

‎ui/packages/shared/profile/src/ProfileFlameGraph/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
useURLState,
2626
} from '@parca/components';
2727
import {ProfileType} from '@parca/parser';
28-
import {testId} from '@parca/test-utils';
28+
import {TEST_IDS, testId} from '@parca/test-utils';
2929
import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
3030

3131
import {MergedProfileSource, ProfileSource} from '../ProfileSource';
@@ -396,7 +396,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
396396
<div
397397
className={cx(!isInSandwichView ? 'min-h-48' : '')}
398398
id="h-flame-graph"
399-
{...testId('FLAMEGRAPH_CONTAINER')}
399+
{...testId(TEST_IDS.FLAMEGRAPH_CONTAINER)}
400400
>
401401
<>{flameGraph}</>
402402
</div>

‎ui/packages/shared/profile/src/ProfileMetricsGraph/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
useParcaContext,
3030
} from '@parca/components';
3131
import {Query} from '@parca/parser';
32-
import {testId} from '@parca/test-utils';
32+
import {TEST_IDS, testId} from '@parca/test-utils';
3333
import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from '@parca/utilities';
3434

3535
import {MergedProfileSelection, ProfileSelection} from '..';
@@ -491,7 +491,7 @@ const ProfileMetricsGraph = ({
491491
<div
492492
key={name}
493493
className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
494-
{...testId('TOOLTIP_LABEL')}
494+
{...testId(TEST_IDS.TOOLTIP_LABEL)}
495495
>
496496
<TextWithTooltip
497497
text={`${name.replace('attributes.', '')}="${
@@ -513,7 +513,7 @@ const ProfileMetricsGraph = ({
513513
<div
514514
key={name}
515515
className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
516-
{...testId('TOOLTIP_LABEL')}
516+
{...testId(TEST_IDS.TOOLTIP_LABEL)}
517517
>
518518
<TextWithTooltip
519519
text={`${name.replace('attributes.', '')}="${
@@ -534,7 +534,7 @@ const ProfileMetricsGraph = ({
534534
<div
535535
key={label.name}
536536
className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
537-
{...testId('TOOLTIP_LABEL')}
537+
{...testId(TEST_IDS.TOOLTIP_LABEL)}
538538
>
539539
<TextWithTooltip
540540
text={`${label.name}="${label.value}"`}

‎ui/packages/shared/profile/src/ProfileSelector/QueryControls.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import Select, {type SelectInstance} from 'react-select';
1818
import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
1919
import {Button, DateTimeRange, DateTimeRangePicker, useParcaContext} from '@parca/components';
2020
import {ProfileType, Query} from '@parca/parser';
21-
import {testId} from '@parca/test-utils';
21+
import {TEST_IDS, testId} from '@parca/test-utils';
2222

2323
import MatchersInput from '../MatchersInput';
2424
import ProfileTypeSelector from '../ProfileTypeSelector';
@@ -97,11 +97,11 @@ export function QueryControls({
9797
return (
9898
<div
9999
className="flex w-full flex-wrap items-start gap-2"
100-
{...testId('QUERY_CONTROLS_CONTAINER')}
100+
{...testId(TEST_IDS.QUERY_CONTROLS_CONTAINER)}
101101
>
102102
{showProfileTypeSelector && (
103103
<div>
104-
<label className="text-xs" {...testId('PROFILE_TYPE_LABEL')}>
104+
<label className="text-xs" {...testId(TEST_IDS.PROFILE_TYPE_LABEL)}>
105105
Profile type
106106
</label>
107107
<ProfileTypeSelector
@@ -118,11 +118,11 @@ export function QueryControls({
118118
<div
119119
className="w-full flex-1 flex flex-col gap-1 mt-auto"
120120
ref={queryBrowserRef}
121-
{...testId('QUERY_BROWSER_CONTAINER')}
121+
{...testId(TEST_IDS.QUERY_BROWSER_CONTAINER)}
122122
>
123123
<div className="flex items-center justify-between">
124124
<div className="flex items-center gap-3">
125-
<label className="text-xs" {...testId('QUERY_LABEL')}>
125+
<label className="text-xs" {...testId(TEST_IDS.QUERY_LABEL)}>
126126
Query
127127
</label>
128128
{viewComponent?.disableExplorativeQuerying !== true && (
@@ -136,7 +136,7 @@ export function QueryControls({
136136
className={`${
137137
advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'
138138
} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
139-
{...testId('ADVANCED_MODE_SWITCH')}
139+
{...testId(TEST_IDS.ADVANCED_MODE_SWITCH)}
140140
>
141141
<span className="sr-only">Use setting</span>
142142
<span
@@ -146,7 +146,7 @@ export function QueryControls({
146146
} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
147147
/>
148148
</Switch>
149-
<label className="text-xs" {...testId('QUERY_MODE_LABEL')}>
149+
<label className="text-xs" {...testId(TEST_IDS.QUERY_MODE_LABEL)}>
150150
Advanced Mode
151151
</label>
152152
</>
@@ -194,15 +194,15 @@ export function QueryControls({
194194
</div>
195195

196196
{showSumBySelector && (
197-
<div {...testId('SUM_BY_CONTAINER')}>
197+
<div {...testId(TEST_IDS.SUM_BY_CONTAINER)}>
198198
<div className="mb-0.5 mt-1.5 flex items-center justify-between">
199-
<label className="text-xs" {...testId('SUM_BY_LABEL')}>
199+
<label className="text-xs" {...testId(TEST_IDS.SUM_BY_LABEL)}>
200200
Sum by
201201
</label>
202202
</div>
203203
<Select<SelectOption, true>
204204
id="h-sum-by-selector"
205-
data-testid={testId('SUM_BY_SELECT')['data-testid']}
205+
data-testid={testId(TEST_IDS.SUM_BY_SELECT)['data-testid']}
206206
defaultValue={[]}
207207
isMulti
208208
isClearable={false}
@@ -250,11 +250,11 @@ export function QueryControls({
250250
onRangeSelection={setTimeRangeSelection}
251251
range={timeRangeSelection}
252252
timezone={timezone}
253-
{...testId('DATE_TIME_RANGE_PICKER')}
253+
{...testId(TEST_IDS.DATE_TIME_RANGE_PICKER)}
254254
/>
255255

256256
<div>
257-
<label className="text-xs" {...testId('SEARCH_BUTTON_LABEL')}>
257+
<label className="text-xs" {...testId(TEST_IDS.SEARCH_BUTTON_LABEL)}>
258258
&nbsp;
259259
</label>
260260
<Button
@@ -264,7 +264,7 @@ export function QueryControls({
264264
setQueryExpression(true);
265265
}}
266266
id="h-matcher-search-button"
267-
{...testId('SEARCH_BUTTON')}
267+
{...testId(TEST_IDS.SEARCH_BUTTON)}
268268
>
269269
Search
270270
</Button>

0 commit comments

Comments
 (0)