Make phone editable on people's page (#98)

* Make phone editable on people's page

* Make City editable

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/components/table/editable-cell/__tests__/EditablePhone.test.tsx

@@ -0,0 +1,28 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import { EditablePhoneStory } from '../__stories__/EditablePhone.stories';
+
+it('Checks the EditablePhone editing event bubbles up', async () => {
+  const func = jest.fn(() => null);
+  const { getByTestId } = render(
+    <EditablePhoneStory value="+33786405315" changeHandler={func} />,
+  );
+
+  const parent = getByTestId('content-editable-parent');
+
+  const wrapper = parent.querySelector('div');
+
+  if (!wrapper) {
+    throw new Error('Editable input not found');
+  }
+  fireEvent.click(wrapper);
+
+  const editableInput = parent.querySelector('input');
+
+  if (!editableInput) {
+    throw new Error('Editable input not found');
+  }
+
+  fireEvent.change(editableInput, { target: { value: '23' } });
+  expect(func).toBeCalledWith('23');
+});

front/src/components/table/editable-cell/__tests__/EditableText.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react';
 
 import { EditableTextStory } from '../__stories__/EditableText.stories';
 
-it('Checks the EditableCell editing event bubbles up', async () => {
+it('Checks the EditableText editing event bubbles up', async () => {
   const func = jest.fn(() => null);
   const { getByTestId } = render(
     <EditableTextStory content="test" changeHandler={func} />,