@pautena/react-design-system 0.7.2 → 0.7.4

package/src/components/value-displays/value-boolean/value-boolean.test.tsx

@@ -30,50 +30,64 @@ describe("ValueBoolean", () => {
   it("would render the label", () => {
     renderComponent({ value: true });
 
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeVisible();
   });
 
   it("would render a check if value is true", () => {
     renderComponent({ value: true });
 
-    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
+    expect(screen.getByTestId("CheckIcon")).toBeVisible();
   });
 
   it("would render a cross if value is false", () => {
     renderComponent({ value: false });
 
-    expect(screen.getByTestId("CloseIcon")).toBeInTheDocument();
+    expect(screen.getByTestId("CloseIcon")).toBeVisible();
+  });
+
+  describe("accessibility", () => {
+    it("should be checked if value is true", () => {
+      renderComponent({ value: true });
+
+      expect(screen.getByLabelText(/hello world/i)).toBeChecked();
+    });
+
+    it("shouldn't be checked if value is false", () => {
+      renderComponent({ value: false });
+
+      expect(screen.getByLabelText(/hello world/i)).not.toBeChecked();
+    });
   });
 
   it("should render the placeholder if value is undefined", () => {
     renderComponent({ value: undefined });
 
-    expect(screen.getByText(/-/i)).toBeInTheDocument();
+    expect(screen.getByText(/-/i)).toBeVisible();
   });
 
   it("should render the custom placeholder if value is undefined and placeholder has value", () => {
     renderComponent({ value: undefined, placeholder: "_" });
 
-    expect(screen.getByText(/_/i)).toBeInTheDocument();
+    expect(screen.getByText(/_/i)).toBeVisible();
   });
 
   describe("editable", () => {
     it("shouldn't render an option to edit if editable is false", () => {
       renderComponent({ value: true, editable: false });
 
-      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: /edit/i })).not.toBeInTheDocument();
     });
 
     it("should render an option to edit if editable is true", () => {
       renderComponent({ value: true, editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input with the value if the edit button is clicked", async () => {
       renderComponent({ value: true, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("checkbox")).toBeChecked();
     });
@@ -86,9 +100,9 @@ describe("ValueBoolean", () => {
       async (expectedValue: boolean, initialValue: boolean) => {
         const { onEdit } = renderComponent({ value: initialValue, editable: true });
 
-        await userEvent.click(screen.getByTestId("EditIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /edit/i }));
         await userEvent.click(screen.getByRole("checkbox"));
-        await userEvent.click(screen.getByTestId("CheckIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
         expect(onEdit).toHaveBeenCalledTimes(1);
         expect(onEdit).toHaveBeenCalledWith(expectedValue);
@@ -98,9 +112,9 @@ describe("ValueBoolean", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ value: true, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.click(screen.getByRole("checkbox"));
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -108,10 +122,10 @@ describe("ValueBoolean", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ value: true, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.click(screen.getByRole("checkbox"));
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("checkbox")).toBeChecked();
     });

package/src/components/value-displays/value-boolean/value-boolean.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Switch, Typography, useTheme } from "@mui/material";
+import { Box, Switch, Typography, useTheme } from "@mui/material";
 import React from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
@@ -7,10 +7,10 @@ import {
   DefaultPlaceholder,
   EditableValueProps,
   useEditableValueDisplay,
+  ValueEditButton,
   ValueEditButtons,
 } from "../value-base";
-import { ValueContent } from "../value-content";
-import EditIcon from "@mui/icons-material/Edit";
+import { ValueContent, getValueContentLabelId } from "../value-content";
 
 export type ValueBooleanProps = BaseValueProps<boolean> & EditableValueProps<boolean>;
 
@@ -25,6 +25,7 @@ export const ValueBoolean = ({
   dense,
   onEdit = () => null,
 }: ValueBooleanProps) => {
+  const id = getValueContentLabelId(label);
   const { typography } = useTheme();
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(value, onEdit);
@@ -35,11 +36,21 @@ export const ValueBoolean = ({
     <ValueContent label={label} dense={dense}>
       {isEditing ? (
         <Box display="flex" alignItems="center">
-          <Switch checked={editValue} onChange={(e) => setEditValue(e.target.checked)} />
-          <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />
+          <Switch
+            size={dense ? "small" : "medium"}
+            checked={editValue}
+            onChange={(e) => setEditValue(e.target.checked)}
+          />
+          <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
         </Box>
       ) : (
-        <Box display="flex" alignItems="center">
+        <Box
+          display="flex"
+          alignItems="center"
+          aria-labelledby={id}
+          role="checkbox"
+          aria-checked={value}
+        >
           {value === undefined ? (
             <Typography variant="h5">{placeholder}</Typography>
           ) : value ? (
@@ -47,11 +58,7 @@ export const ValueBoolean = ({
           ) : (
             <CloseIcon color="error" sx={iconSx} />
           )}
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Box>
       )}
     </ValueContent>

package/src/components/value-displays/value-content/value-content.test.tsx

@@ -5,9 +5,17 @@ import { ValueContent } from "./value-content";
 import userEvent from "@testing-library/user-event";
 
 describe("ValueContent", () => {
-  const renderComponent = ({ tooltip }: { tooltip?: string } = {}) => {
+  const renderComponent = ({
+    tooltip,
+    hideLabel,
+  }: { tooltip?: string; hideLabel?: boolean } = {}) => {
     render(
-      <ValueContent label="lorem ipsum" tooltip={tooltip} tooltipEnterDelay={0}>
+      <ValueContent
+        label="lorem ipsum"
+        tooltip={tooltip}
+        tooltipEnterDelay={0}
+        hideLabel={hideLabel}
+      >
         <Typography>Test content</Typography>
       </ValueContent>,
     );
@@ -16,7 +24,13 @@ describe("ValueContent", () => {
   it("should render a label", () => {
     renderComponent();
 
-    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeInTheDocument();
+    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeVisible();
+  });
+
+  it("shouldn't render a label if hideLabel=true", () => {
+    renderComponent({ hideLabel: true });
+
+    expect(screen.queryByRole("label", { name: /lorem ipsum/i })).not.toBeInTheDocument();
   });
 
   describe("tooltip", () => {
@@ -25,7 +39,7 @@ describe("ValueContent", () => {
 
       await userEvent.hover(screen.getByText(/test content/i));
 
-      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeInTheDocument();
+      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeVisible();
     });
 
     it("shouldn't render a tooltip if it's not defined", () => {
@@ -39,12 +53,12 @@ describe("ValueContent", () => {
     it("should render the children if tooltip is defined", () => {
       renderComponent({ tooltip: "dolor sit amet" });
 
-      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+      expect(screen.getByText(/test content/i)).toBeVisible();
     });
     it("should render the children if tooltip is undefined", () => {
       renderComponent({ tooltip: undefined });
 
-      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+      expect(screen.getByText(/test content/i)).toBeVisible();
     });
   });
 });

package/src/components/value-displays/value-content/value-content.tsx

@@ -1,4 +1,4 @@
-import { Box, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import React from "react";
 
 export const getValueContentLabelId = (label: string): string =>
@@ -10,6 +10,11 @@ export interface ValueContentProps {
    */
   label: string;
 
+  /**
+   * If true, the label will not be shown
+   */
+  hideLabel?: boolean;
+
   /**
    * If defined, a tooltip is going to be added arround the children;
    */
@@ -30,6 +35,11 @@ export interface ValueContentProps {
    * False by default
    */
   dense?: boolean;
+
+  /**
+   * Custom styles for the root component
+   */
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -37,24 +47,28 @@ export interface ValueContentProps {
  */
 export const ValueContent = ({
   label,
+  hideLabel,
   tooltip,
   tooltipEnterDelay = 2000,
   children,
   dense,
+  sx,
 }: ValueContentProps) => {
   const { typography } = useTheme();
   const id = getValueContentLabelId(label);
 
   return (
-    <Box width={1} lineHeight={dense ? 0 : undefined}>
-      <Typography
-        variant={dense ? "caption" : "subtitle2"}
-        role="label"
-        id={id}
-        lineHeight={dense ? typography.pxToRem(15) : undefined}
-      >
-        {label}
-      </Typography>
+    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>
+      {!hideLabel && (
+        <Typography
+          variant={dense ? "caption" : "subtitle2"}
+          role="label"
+          id={id}
+          lineHeight={dense ? typography.pxToRem(15) : undefined}
+        >
+          {label}
+        </Typography>
+      )}
       {tooltip ? (
         <Tooltip title={tooltip} placement="top" enterDelay={tooltipEnterDelay}>
           {children}

package/src/components/value-displays/value-datetime/value-datetime.stories.tsx

@@ -73,3 +73,14 @@ export const EditableDate: Story = {
     editInputType: "date",
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: new Date(2022, 8, 22),
+    format: "yyyy/MM/dd",
+    editable: true,
+    editInputType: "date",
+    dense: true,
+  },
+};

package/src/components/value-displays/value-datetime/value-datetime.test.tsx

@@ -77,13 +77,13 @@ describe("ValueDatetime", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input with the value if the edit button is clicked", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       assertDatetimeInputValue(screen.getByRole("textbox"), {
         value: DummyValue,
@@ -105,9 +105,9 @@ describe("ValueDatetime", () => {
           fmt,
         });
 
-        await userEvent.click(screen.getByTestId("EditIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /edit/i }));
         pickDatetime(screen.getByRole("textbox"), newValue, fmt);
-        await userEvent.click(screen.getByTestId("CheckIcon"));
+        await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
         expect(onEdit).toHaveBeenCalledTimes(1);
         expect(onEdit).toHaveBeenCalledWith(expectedDate);
@@ -117,9 +117,9 @@ describe("ValueDatetime", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -127,10 +127,10 @@ describe("ValueDatetime", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       pickDatetime(screen.getByRole("textbox"), NewValue, datetimeFormat);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       assertDatetimeInputValue(screen.getByRole("textbox"), {
         value: DummyValue,

package/src/components/value-displays/value-datetime/value-datetime.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, TextField, Typography } from "@mui/material";
+import { Box, TextField, Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
 import {
@@ -7,8 +7,7 @@ import {
   EditableValueProps,
 } from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
-import EditIcon from "@mui/icons-material/Edit";
+import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
 import { DatePicker, DateTimePicker, TimePicker } from "@mui/x-date-pickers";
 
 export type EditInputType = "datetime" | "date" | "time";
@@ -51,16 +50,24 @@ export const ValueDatetime = ({
       : DatePicker;
 
   return (
-    <ValueContent label={label} tooltip={value} dense={dense}>
+    <ValueContent
+      label={label}
+      hideLabel={isEditing}
+      tooltip={value}
+      dense={dense}
+      sx={{ display: "flex", flexDirection: "column" }}
+    >
       {isEditing ? (
         <EditPickerComponent
           value={editValue}
           format={fmt}
+          label={label}
           onChange={(newValue) => setEditValue(newValue ? newValue : undefined)}
           slots={{
             textField: (params) => (
               <TextField
                 {...params}
+                size="small"
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (
@@ -68,11 +75,12 @@ export const ValueDatetime = ({
                       {params.InputProps?.endAdornment}
                       <ValueEditButtons
                         onClickCancel={cancelEdit}
-                        onSubmitEdit={submitEdit}
+                        onClickSubmit={submitEdit}
                         sx={{ ml: 2 }}
                       />
                     </>
                   ),
+                  sx: { marginY: !dense ? 1 : 0.2 },
                 }}
               />
             ),
@@ -83,11 +91,7 @@ export const ValueDatetime = ({
           <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
             {value}
           </Typography>
-          {editable && (
-            <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-              <EditIcon />
-            </IconButton>
-          )}
+          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
         </Box>
       )}
     </ValueContent>

package/src/components/value-displays/value-rating/value-rating.stories.tsx

@@ -43,3 +43,13 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: 4,
+    maxRating: 7,
+    dense: true,
+    editable: true,
+  },
+};

package/src/components/value-displays/value-rating/value-rating.test.tsx

@@ -59,13 +59,13 @@ describe("ValueRating", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input for each star + 1 for the zero value if the edit button is clicked", async () => {
       renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getAllByRole("radio")).toHaveLength(6);
     });
@@ -73,9 +73,9 @@ describe("ValueRating", () => {
     it("should submit the new value if is edited", async () => {
       const { onEdit } = renderComponent({ value: 2, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
-      await userEvent.click(screen.getAllByRole("radio")[3]); // Click the fourth star
-      await userEvent.click(screen.getByTestId("CheckIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.click(screen.getByRole("radio", { name: /4 stars/i }));
+      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
       expect(onEdit).toHaveBeenCalledTimes(1);
       expect(onEdit).toHaveBeenCalledWith(4);
@@ -84,9 +84,9 @@ describe("ValueRating", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.click(screen.getAllByRole("radio")[3]);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -94,10 +94,10 @@ describe("ValueRating", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
-      await userEvent.click(screen.getAllByRole("radio")[3]);
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.click(screen.getByLabelText(/3 stars/i));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getAllByTestId("StarIcon")).toHaveLength(3);
     });

package/src/components/value-displays/value-rating/value-rating.tsx

@@ -1,6 +1,6 @@
 import { Box, IconButton, Rating } from "@mui/material";
 import React from "react";
-import { useEditableValueDisplay, ValueEditButtons } from "../value-base";
+import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
 import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
 import EditIcon from "@mui/icons-material/Edit";
@@ -33,14 +33,16 @@ export const ValueRating = ({
           max={maxRating}
           size={dense ? "small" : "medium"}
           value={isEditing ? editValue : value}
-          onChange={(_, newValue) => newValue && setEditValue(newValue)}
+          onChange={(e, newValue) => {
+            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {
+              setEditValue(parseInt((e.currentTarget as any).value, 10));
+            } else if (newValue) {
+              setEditValue(newValue);
+            }
+          }}
         />
-        {editable && !isEditing && (
-          <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>
-            <EditIcon />
-          </IconButton>
-        )}
-        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onSubmitEdit={submitEdit} />}
+        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}
+        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}
       </Box>
     </ValueContent>
   );

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -61,3 +61,12 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const DenseEditable: Story = {
+  args: {
+    label: "Lorem",
+    value: "lorem ipsum",
+    dense: true,
+    editable: true,
+  },
+};

package/src/components/value-displays/value-text/value-text.test.tsx

@@ -69,13 +69,13 @@ describe("ValueText", () => {
     it("should render an option to edit if editable is true", () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      expect(screen.getByTestId("EditIcon")).toBeVisible();
+      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
     });
 
     it("should render an input with the value if the edit button is clicked", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
     });
@@ -83,10 +83,10 @@ describe("ValueText", () => {
     it("should submit the new value if is edited", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("CheckIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
 
       expect(onEdit).toHaveBeenCalledTimes(1);
       expect(onEdit).toHaveBeenCalledWith("new value");
@@ -95,10 +95,10 @@ describe("ValueText", () => {
     it("should not call onEdit if the edition is cancelled", async () => {
       const { onEdit } = renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
 
       expect(onEdit).not.toHaveBeenCalled();
     });
@@ -106,13 +106,24 @@ describe("ValueText", () => {
     it("should have the original value if is edited again after clear a change", async () => {
       renderComponent({ value: DummyValue, editable: true });
 
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
       await userEvent.clear(screen.getByRole("textbox"));
       await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByTestId("ClearIcon"));
-      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
 
       expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
     });
+
+    it("should call onEdit if the enter button is pressed", async () => {
+      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
+
+      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
+      await userEvent.clear(screen.getByRole("textbox"));
+      await userEvent.type(screen.getByRole("textbox"), "new value{enter}");
+
+      expect(onEdit).toHaveBeenCalledTimes(1);
+      expect(onEdit).toHaveBeenCalledWith("new value");
+    });
   });
 });