This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 7c01e0b3f7a Add data-testid attributes to UI components (#61874)
7c01e0b3f7a is described below
commit 7c01e0b3f7a227494c4a754fbd65855620382f2a
Author: Boubacar Ba <[email protected]>
AuthorDate: Wed Feb 18 04:12:20 2026 -0500
Add data-testid attributes to UI components (#61874)
- Add data-testid to ConfirmationModal
- Add data-testid to DeleteDialog
- Add data-testid to TeamSelector
- Add data-testid to Time
- Add data-testid to TogglePause
- Add data-testid to TrendCountButton
- Add data-testid to TrendCountChart
- Add data-testid to TruncatedText
- Add data-testid to WarningAlert
- Add data-testid to BaseLayout
- Add data-testid to Nav
Related to #43381
---
.../airflow/ui/src/components/ConfirmationModal.tsx | 9 +++++++--
.../src/airflow/ui/src/components/DeleteDialog.tsx | 18 +++++++++++++++---
.../src/airflow/ui/src/components/TeamSelector.tsx | 1 +
airflow-core/src/airflow/ui/src/components/Time.tsx | 1 +
.../src/airflow/ui/src/components/TogglePause.tsx | 1 +
.../src/airflow/ui/src/components/TrendCountButton.tsx | 1 +
.../src/airflow/ui/src/components/TrendCountChart.tsx | 2 +-
.../src/airflow/ui/src/components/TruncatedText.tsx | 1 +
.../src/airflow/ui/src/components/WarningAlert.tsx | 2 +-
airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx | 1 +
airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx | 5 ++++-
11 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
b/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
index 8a65e0c6151..57ddd6acd44 100644
--- a/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ConfirmationModal.tsx
@@ -33,7 +33,7 @@ export const ConfirmationModal = ({ children, header,
onConfirm, onOpenChange, o
const { t: translate } = useTranslation("common");
return (
- <Dialog.Root onOpenChange={onOpenChange} open={open}>
+ <Dialog.Root data-testid="confirmation-modal" onOpenChange={onOpenChange}
open={open}>
<Dialog.Content backdrop>
<Dialog.Header>
<Heading>{header}</Heading>
@@ -44,12 +44,17 @@ export const ConfirmationModal = ({ children, header,
onConfirm, onOpenChange, o
<Dialog.Body>{children}</Dialog.Body>
<Dialog.Footer>
<Dialog.ActionTrigger asChild>
- <Button onClick={() => onOpenChange({ open })} variant="outline">
+ <Button
+ data-testid="confirmation-cancel-button"
+ onClick={() => onOpenChange({ open })}
+ variant="outline"
+ >
{translate("modal.cancel")}
</Button>
</Dialog.ActionTrigger>
<Button
colorPalette="brand"
+ data-testid="confirmation-confirm-button"
onClick={() => {
onConfirm();
onOpenChange({ open });
diff --git a/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
b/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
index 8ce9e10b5e9..ada2d14d47c 100644
--- a/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
+++ b/airflow-core/src/airflow/ui/src/components/DeleteDialog.tsx
@@ -47,7 +47,14 @@ const DeleteDialog: React.FC<DeleteDialogProps> = ({
const { t: translate } = useTranslation("common");
return (
- <Dialog.Root lazyMount onOpenChange={onClose} open={open} size="md"
unmountOnExit>
+ <Dialog.Root
+ data-testid="delete-dialog"
+ lazyMount
+ onOpenChange={onClose}
+ open={open}
+ size="md"
+ unmountOnExit
+ >
<Dialog.Content backdrop>
<Dialog.Header>
<Heading size="lg">{title}</Heading>
@@ -61,10 +68,15 @@ const DeleteDialog: React.FC<DeleteDialogProps> = ({
</Dialog.Body>
<Dialog.Footer>
<HStack justifyContent="flex-end" width="100%">
- <Button onClick={onClose} variant="outline">
+ <Button data-testid="delete-cancel-button" onClick={onClose}
variant="outline">
{translate("modal.cancel")}
</Button>
- <Button colorPalette="danger" loading={isDeleting}
onClick={onDelete}>
+ <Button
+ colorPalette="danger"
+ data-testid="delete-confirm-button"
+ loading={isDeleting}
+ onClick={onDelete}
+ >
<FiTrash2 style={{ marginRight: "8px" }} />{" "}
{deleteButtonText ?? translate("modal.delete.button")}
</Button>
diff --git a/airflow-core/src/airflow/ui/src/components/TeamSelector.tsx
b/airflow-core/src/airflow/ui/src/components/TeamSelector.tsx
index 6d41ef9a98c..292f5c881d0 100644
--- a/airflow-core/src/airflow/ui/src/components/TeamSelector.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TeamSelector.tsx
@@ -59,6 +59,7 @@ export const TeamSelector = <T extends FieldValues =
FieldValues>({ control }: P
) : undefined}
<Select
{...Field}
+ data-testid="team-selector"
isClearable
isDisabled={isLoading}
// eslint-disable-next-line unicorn/no-null
diff --git a/airflow-core/src/airflow/ui/src/components/Time.tsx
b/airflow-core/src/airflow/ui/src/components/Time.tsx
index 99b7f029f72..18dca70929e 100644
--- a/airflow-core/src/airflow/ui/src/components/Time.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Time.tsx
@@ -49,6 +49,7 @@ const Time = ({ datetime, format = DEFAULT_DATETIME_FORMAT,
showTooltip = true,
return (
<chakra.span dir="ltr" {...rest}>
<time
+ data-testid="time-display"
dateTime={datetime}
// show title if date is not UTC
title={selectedTimezone.toUpperCase() !== "UTC" && showTooltip ?
utcTime : undefined}
diff --git a/airflow-core/src/airflow/ui/src/components/TogglePause.tsx
b/airflow-core/src/airflow/ui/src/components/TogglePause.tsx
index d363e48e01a..d1a54238bd3 100644
--- a/airflow-core/src/airflow/ui/src/components/TogglePause.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TogglePause.tsx
@@ -52,6 +52,7 @@ export const TogglePause = ({ dagDisplayName, dagId,
isPaused, skipConfirm, ...r
<Switch
checked={isPaused === undefined ? undefined : !isPaused}
colorPalette="brand"
+ data-testid="toggle-pause"
onCheckedChange={onChange}
size="sm"
{...rest}
diff --git a/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx
b/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx
index 789dccc4025..ab7f8de6a80 100644
--- a/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TrendCountButton.tsx
@@ -51,6 +51,7 @@ export const TrendCountButton = ({
borderColor="border.emphasized"
borderRadius={4}
borderWidth={1}
+ data-testid="trend-count-button"
p={3}
transition="background-color 0.2s"
width="350px"
diff --git a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
index 6a9d377c40d..87f7f1bfd43 100644
--- a/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TrendCountChart.tsx
@@ -161,7 +161,7 @@ export const TrendCountChart = ({ endDate, events,
startDate }: Props) => {
};
return (
- <Box h="25px" w="200px">
+ <Box data-testid="trend-count-chart" h="25px" w="200px">
<Line data={data} options={options} ref={chartRef} />
</Box>
);
diff --git a/airflow-core/src/airflow/ui/src/components/TruncatedText.tsx
b/airflow-core/src/airflow/ui/src/components/TruncatedText.tsx
index 698ce4d9577..1553968b24f 100644
--- a/airflow-core/src/airflow/ui/src/components/TruncatedText.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TruncatedText.tsx
@@ -24,6 +24,7 @@ type Props = {
export const TruncatedText = ({ text, ...rest }: Props) => (
<Text
+ data-testid="truncated-text"
display="-webkit-box"
minWidth={200}
overflow="hidden"
diff --git a/airflow-core/src/airflow/ui/src/components/WarningAlert.tsx
b/airflow-core/src/airflow/ui/src/components/WarningAlert.tsx
index 69cbe4e4186..9b92de9db6e 100644
--- a/airflow-core/src/airflow/ui/src/components/WarningAlert.tsx
+++ b/airflow-core/src/airflow/ui/src/components/WarningAlert.tsx
@@ -32,7 +32,7 @@ export const WarningAlert = ({ warning }: Props) => {
}
return (
- <Alert status="warning">
+ <Alert data-testid="warning-alert" status="warning">
<Flex align="center">{warning?.message}</Flex>
</Alert>
);
diff --git a/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx
b/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx
index 74d6ca3ece3..351501028dd 100644
--- a/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/BaseLayout.tsx
@@ -56,6 +56,7 @@ export const BaseLayout = ({ children }: PropsWithChildren)
=> {
<Box
_ltr={{ ml: 16 }}
_rtl={{ mr: 16 }}
+ data-testid="main-content"
display="flex"
flexDirection="column"
h="100vh"
diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
index cb933c4ae27..7053e6fc5cb 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -145,6 +145,7 @@ export const Nav = () => {
}}
alignItems="center"
bg="brand.muted"
+ data-testid="nav-sidebar"
height="100%"
justifyContent="space-between"
position="fixed"
@@ -167,14 +168,16 @@ export const Nav = () => {
/>
</Link>
</Box>
- <NavButton icon={FiHome} title={translate("nav.home")} to="/" />
+ <NavButton data-testid="nav-home-link" icon={FiHome}
title={translate("nav.home")} to="/" />
<NavButton
+ data-testid="nav-dags-link"
disabled={!authLinks?.authorized_menu_items.includes("Dags")}
icon={DagIcon}
title={translate("nav.dags")}
to="dags"
/>
<NavButton
+ data-testid="nav-assets-link"
disabled={!authLinks?.authorized_menu_items.includes("Assets")}
icon={FiDatabase}
title={translate("nav.assets")}
