From a6254197b13052dbc18a13f2da5c5f18fbb9a4cc Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Tue, 25 Apr 2023 11:48:54 +0200
Subject: [PATCH] Add contenteditable change event test

---
 .../__stories__/EditableCell.stories.tsx      | 24 +++++++++++++++++++
 .../table/__tests__/EditableCell.test.tsx     | 17 +++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 front/src/components/table/__stories__/EditableCell.stories.tsx
 create mode 100644 front/src/components/table/__tests__/EditableCell.test.tsx

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 (
+    <ThemeProvider theme={lightTheme}>
+      <div data-testid="content-editable-parent">
+        <EditableCell content={''} changeHandler={changeHandler} />,
+      </div>
+    </ThemeProvider>
+  );
+};
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(<RegularEditableCell changeHandler={func} />);
+
+  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();
+});