Skip to content

Commit 8e813db

Browse files
teeohhemteeohhem
authored
chore: add data-test-ids to components (#1167)
Addresses: HDX-2354
1 parent 6d1a123 commit 8e813db

21 files changed

+122
-19
lines changed

‎packages/app/src/AlertsPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
155155
}, [alert]);
156156

157157
return (
158-
<div className={styles.alertRow}>
158+
<div data-testid={`alert-card-${alert.id}`} className={styles.alertRow}>
159159
<Group>
160160
{alert.state === AlertState.ALERT && (
161161
<Badge variant="light" color="red">
@@ -172,6 +172,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
172172
<Stack gap={2}>
173173
<div>
174174
<Link
175+
data-testid={`alert-link-${alert.id}`}
175176
href={alertUrl}
176177
className={styles.alertLink}
177178
title={linkTitle}
@@ -239,7 +240,7 @@ export default function AlertsPage() {
239240
const alerts = React.useMemo(() => data?.data || [], [data?.data]);
240241

241242
return (
242-
<div className="AlertsPage">
243+
<div data-testid="alerts-page" className="AlertsPage">
243244
<Head>
244245
<title>Alerts - HyperDX</title>
245246
</Head>

‎packages/app/src/AppNav.components.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export const AppNavUserMenu = ({
8282
<Menu position="top-start" transitionProps={{ transition: 'fade-up' }}>
8383
<Menu.Target>
8484
<Paper
85+
data-testid="user-menu-trigger"
8586
m="sm"
8687
mt={8}
8788
px={8}
@@ -150,6 +151,7 @@ export const AppNavUserMenu = ({
150151
<Menu.Label fz="xs">Local mode</Menu.Label>
151152
) : (
152153
<Menu.Item
154+
data-testid="team-settings-menu-item"
153155
href="/team"
154156
component={Link}
155157
leftSection={<Icon name="gear" />}
@@ -158,6 +160,7 @@ export const AppNavUserMenu = ({
158160
</Menu.Item>
159161
)}
160162
<Menu.Item
163+
data-testid="user-preferences-menu-item"
161164
leftSection={<Icon name="person-gear" />}
162165
onClick={onClickUserPreferences}
163166
>
@@ -167,6 +170,7 @@ export const AppNavUserMenu = ({
167170
<>
168171
<Menu.Divider />
169172
<Menu.Item
173+
data-testid="logout-menu-item"
170174
color="red"
171175
leftSection={<Icon name="box-arrow-left" />}
172176
component={Link}
@@ -231,7 +235,7 @@ export const AppNavHelpMenu = ({
231235
defaultOpened={false}
232236
>
233237
<Menu.Target>
234-
<UnstyledButton w="100%">
238+
<UnstyledButton data-testid="help-menu-trigger" w="100%">
235239
<Group
236240
align="center"
237241
justify="center"
@@ -253,13 +257,15 @@ export const AppNavHelpMenu = ({
253257
</Menu.Label>
254258

255259
<Menu.Item
260+
data-testid="documentation-menu-item"
256261
href="https://clickhouse.com/docs/use-cases/observability/clickstack"
257262
component="a"
258263
leftSection={<Icon name="book" />}
259264
>
260265
Documentation
261266
</Menu.Item>
262267
<Menu.Item
268+
data-testid="discord-menu-item"
263269
leftSection={<Icon name="discord" />}
264270
component="a"
265271
href="https://hyperdx.io/discord"
@@ -268,6 +274,7 @@ export const AppNavHelpMenu = ({
268274
Discord Community
269275
</Menu.Item>
270276
<Menu.Item
277+
data-testid="setup-instructions-menu-item"
271278
leftSection={<Icon name="lightbulb" />}
272279
onClick={onAddDataClick}
273280
>
@@ -301,9 +308,13 @@ export const AppNavLink = ({
301308
}) => {
302309
const { pathname, isCollapsed } = React.useContext(AppNavContext);
303310

311+
// Create a test id based on the href
312+
const testId = `nav-link-${href.replace(/^\//, '').replace(/\//g, '-') || 'home'}`;
313+
304314
return (
305315
<Group justify="space-between" px="md" py="6px">
306316
<Link
317+
data-testid={testId}
307318
href={href}
308319
className={cx(
309320
className,
@@ -318,6 +329,7 @@ export const AppNavLink = ({
318329
</Link>
319330
{!isCollapsed && onToggle && (
320331
<ActionIcon
332+
data-testid={`${testId}-toggle`}
321333
variant="subtle"
322334
color="dark.2"
323335
size="sm"

‎packages/app/src/AppNav.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,14 @@ function NewDashboardButton() {
6363
if (IS_LOCAL_MODE) {
6464
return (
6565
<Link href="/dashboards">
66-
<Button variant="transparent" py="0px" px="sm" fw={400} color="gray.2">
66+
<Button
67+
data-testid="create-dashboard-button"
68+
variant="transparent"
69+
py="0px"
70+
px="sm"
71+
fw={400}
72+
color="gray.2"
73+
>
6774
<span className="pe-2">+</span> Create Dashboard
6875
</Button>
6976
</Link>
@@ -72,6 +79,7 @@ function NewDashboardButton() {
7279

7380
return (
7481
<Button
82+
data-testid="create-dashboard-button"
7583
variant="transparent"
7684
py="0px"
7785
px="sm"
@@ -132,6 +140,7 @@ function SearchInput({
132140

133141
return (
134142
<Input
143+
data-testid="nav-search-input"
135144
placeholder={placeholder}
136145
value={value}
137146
onChange={e => onChange(e.currentTarget.value)}
@@ -140,6 +149,7 @@ function SearchInput({
140149
rightSection={
141150
value ? (
142151
<CloseButton
152+
data-testid="nav-search-clear"
143153
tabIndex={-1}
144154
size="xs"
145155
radius="xl"

‎packages/app/src/DBChartPage.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@ function DBChartExplorerPage() {
4242
);
4343

4444
return (
45-
<Box p="sm" className="bg-hdx-dark">
45+
<Box data-testid="chart-explorer-page" p="sm" className="bg-hdx-dark">
4646
<EditTimeChartForm
47+
data-testid="chart-explorer-form"
4748
chartConfig={chartConfig}
4849
setChartConfig={config => {
4950
setChartConfig(config);

‎packages/app/src/DBDashboardPage.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ const Tile = forwardRef(
226226

227227
return (
228228
<div
229+
data-testid={`dashboard-tile-${chart.id}`}
229230
className={`p-2 ${className} d-flex flex-column ${
230231
isHighlighed && 'dashboard-chart-highlighted'
231232
}`}
@@ -261,6 +262,7 @@ const Tile = forwardRef(
261262
mr={4}
262263
>
263264
<Button
265+
data-testid={`tile-alerts-button-${chart.id}`}
264266
variant="subtle"
265267
color="gray.4"
266268
size="xxs"
@@ -273,6 +275,7 @@ const Tile = forwardRef(
273275
)}
274276

275277
<Button
278+
data-testid={`tile-duplicate-button-${chart.id}`}
276279
variant="subtle"
277280
color="gray.4"
278281
size="xxs"
@@ -282,6 +285,7 @@ const Tile = forwardRef(
282285
<i className="bi bi-copy fs-8"></i>
283286
</Button>
284287
<Button
288+
data-testid={`tile-edit-button-${chart.id}`}
285289
variant="subtle"
286290
size="xxs"
287291
color="gray.4"
@@ -291,11 +295,12 @@ const Tile = forwardRef(
291295
<i className="bi bi-pencil"></i>
292296
</Button>
293297
<Button
298+
data-testid={`tile-delete-button-${chart.id}`}
294299
variant="subtle"
295300
size="xxs"
296301
color="gray.4"
297302
onClick={onDeleteClick}
298-
title="Edit"
303+
title="Delete"
299304
>
300305
<i className="bi bi-trash"></i>
301306
</Button>

‎packages/app/src/DBSearchPage.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -288,13 +288,14 @@ function SaveSearchModal({
288288

289289
return (
290290
<Modal
291+
data-testid="save-search-modal"
291292
opened={opened}
292293
onClose={closeAndReset}
293294
title="Save Search"
294295
centered
295296
size="lg"
296297
>
297-
<form onSubmit={onSubmit}>
298+
<form data-testid="save-search-form" onSubmit={onSubmit}>
298299
<Stack>
299300
{chartConfig != null ? (
300301
<Card withBorder>
@@ -339,6 +340,7 @@ function SaveSearchModal({
339340
Name
340341
</Text>
341342
<InputControlled
343+
data-testid="save-search-name-input"
342344
control={control}
343345
name="name"
344346
rules={{ required: true, validate: isValidName }}
@@ -373,14 +375,20 @@ function SaveSearchModal({
373375
</Button>
374376
))}
375377
<Tags allowCreate values={tags} onChange={setTags}>
376-
<Button variant="outline" color="gray" size="xs">
378+
<Button
379+
data-testid="add-tag-button"
380+
variant="outline"
381+
color="gray"
382+
size="xs"
383+
>
377384
<i className="bi bi-plus me-1"></i>
378385
Add Tag
379386
</Button>
380387
</Tags>
381388
</Group>
382389
</Box>
383390
<Button
391+
data-testid="save-search-submit-button"
384392
variant="outline"
385393
color="green"
386394
type="submit"
@@ -1211,7 +1219,7 @@ function DBSearchPage() {
12111219
/>
12121220
)}
12131221
<OnboardingModal />
1214-
<form onSubmit={onFormSubmit}>
1222+
<form data-testid="search-form" onSubmit={onFormSubmit}>
12151223
{/* <DevTool control={control} /> */}
12161224
<Flex gap="sm" px="sm" pt="sm" wrap="nowrap">
12171225
<Group gap="4px" wrap="nowrap">
@@ -1226,6 +1234,7 @@ function DBSearchPage() {
12261234
<Menu withArrow position="bottom-start">
12271235
<Menu.Target>
12281236
<ActionIcon
1237+
data-testid="source-settings-menu"
12291238
variant="subtle"
12301239
color="dark.2"
12311240
size="sm"
@@ -1239,20 +1248,23 @@ function DBSearchPage() {
12391248
<Menu.Dropdown>
12401249
<Menu.Label>Sources</Menu.Label>
12411250
<Menu.Item
1251+
data-testid="create-new-source-menu-item"
12421252
leftSection={<i className="bi bi-plus-circle" />}
12431253
onClick={() => setNewSourceModalOpened(true)}
12441254
>
12451255
Create New Source
12461256
</Menu.Item>
12471257
{IS_LOCAL_MODE ? (
12481258
<Menu.Item
1259+
data-testid="edit-source-menu-item"
12491260
leftSection={<i className="bi bi-gear" />}
12501261
onClick={() => setModelFormExpanded(v => !v)}
12511262
>
12521263
Edit Source
12531264
</Menu.Item>
12541265
) : (
12551266
<Menu.Item
1267+
data-testid="edit-sources-menu-item"
12561268
leftSection={<i className="bi bi-gear" />}
12571269
component={Link}
12581270
href="/team"
@@ -1292,6 +1304,7 @@ function DBSearchPage() {
12921304
<>
12931305
{!savedSearchId ? (
12941306
<Button
1307+
data-testid="save-search-button"
12951308
variant="outline"
12961309
color="dark.2"
12971310
px="xs"
@@ -1303,6 +1316,7 @@ function DBSearchPage() {
13031316
</Button>
13041317
) : (
13051318
<Button
1319+
data-testid="update-search-button"
13061320
variant="outline"
13071321
color="dark.2"
13081322
px="xs"
@@ -1317,6 +1331,7 @@ function DBSearchPage() {
13171331
)}
13181332
{!IS_LOCAL_MODE && (
13191333
<Button
1334+
data-testid="alerts-button"
13201335
variant="outline"
13211336
color="dark.2"
13221337
px="xs"
@@ -1335,6 +1350,7 @@ function DBSearchPage() {
13351350
onChange={handleUpdateTags}
13361351
>
13371352
<Button
1353+
data-testid="tags-button"
13381354
variant="outline"
13391355
color="dark.2"
13401356
px="xs"
@@ -1433,6 +1449,7 @@ function DBSearchPage() {
14331449
}
14341450
/>
14351451
<TimePicker
1452+
data-testid="time-picker"
14361453
inputValue={displayedTimeInputValue}
14371454
setInputValue={setDisplayedTimeInputValue}
14381455
onSearch={range => {
@@ -1446,6 +1463,7 @@ function DBSearchPage() {
14461463
showLive={analysisMode === 'results'}
14471464
/>
14481465
<Button
1466+
data-testid="search-submit-button"
14491467
variant="outline"
14501468
type="submit"
14511469
color={formState.isDirty ? 'green' : 'gray.4'}

‎packages/app/src/DBSearchPageAlertModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ export const DBSearchPageAlertModal = ({
355355

356356
return (
357357
<Modal
358+
data-testid="alerts-modal"
358359
opened={open}
359360
onClose={onClose}
360361
size="xl"

‎packages/app/src/KubernetesDashboardPage.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -849,7 +849,7 @@ function KubernetesDashboardPage() {
849849
);
850850

851851
return (
852-
<Box p="sm">
852+
<Box data-testid="kubernetes-dashboard-page" p="sm">
853853
<OnboardingModal requireSource={false} />
854854
{metricSource && logSource && (
855855
<PodDetailsSidePanel
@@ -882,20 +882,23 @@ function KubernetesDashboardPage() {
882882
Kubernetes Dashboard
883883
</Text>
884884
<ConnectionSelectControlled
885+
data-testid="kubernetes-connection-select"
885886
control={control}
886887
name="connection"
887888
size="xs"
888889
/>
889890
</Group>
890891

891892
<form
893+
data-testid="kubernetes-time-form"
892894
onSubmit={e => {
893895
e.preventDefault();
894896
onSearch(displayedTimeInputValue);
895897
return false;
896898
}}
897899
>
898900
<TimePicker
901+
data-testid="kubernetes-time-picker"
899902
inputValue={displayedTimeInputValue}
900903
setInputValue={setDisplayedTimeInputValue}
901904
onSearch={range => {

0 commit comments

Comments
 (0)