diff --git a/front/src/components/table/__stories__/EditableCell.stories.tsx b/front/src/components/table/__stories__/EditableCell.stories.tsx
new file mode 100644
index 000000000..9cd427caa
--- /dev/null
+++ b/front/src/components/table/__stories__/EditableCell.stories.tsx
@@ -0,0 +1,24 @@
+import EditableCell from '../EditableCell';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+const component = {
+ title: 'EditableCell',
+ component: EditableCell,
+};
+
+export default component;
+
+type OwnProps = {
+ changeHandler: () => void;
+};
+
+export const RegularEditableCell = ({ changeHandler }: OwnProps) => {
+ return (
+
+
+ ,
+
+
+ );
+};
diff --git a/front/src/components/table/__tests__/EditableCell.test.tsx b/front/src/components/table/__tests__/EditableCell.test.tsx
new file mode 100644
index 000000000..6591b7432
--- /dev/null
+++ b/front/src/components/table/__tests__/EditableCell.test.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { RegularEditableCell } from '../__stories__/EditableCell.stories';
+
+it('Checks the EditableCell editing event bubbles up', async () => {
+ const func = jest.fn(() => null);
+ const { getByTestId } = render();
+
+ const parent = getByTestId('content-editable-parent');
+ expect(parent).not.toBeNull();
+ const editable = parent.querySelector('[contenteditable]');
+ expect(editable).not.toBeNull();
+ editable && userEvent.click(editable);
+ userEvent.keyboard('a');
+ expect(func).toBeCalled();
+});