Add tests on top of ui/buttons, ui/links and ui/inputs (#342)

front/src/modules/ui/components/inputs/TextInput.tsx

@@ -2,8 +2,9 @@ import { ChangeEvent, useState } from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  initialValue: string;
-  onChange: (text: string) => void;
+  value: string;
+  onChange?: (text: string) => void;
+  placeholder?: string;
   fullWidth?: boolean;
 };
 
@@ -29,20 +30,23 @@ const StyledInput = styled.input<{ fullWidth: boolean }>`
 `;
 
 export function TextInput({
-  initialValue,
+  value,
   onChange,
+  placeholder,
   fullWidth,
 }: OwnProps): JSX.Element {
-  const [value, setValue] = useState(initialValue);
+  const [internalValue, setInternalValue] = useState(value);
 
   return (
     <StyledInput
       fullWidth={fullWidth ?? false}
-      value={value}
-      placeholder="Email"
+      value={internalValue}
+      placeholder={placeholder}
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        setValue(event.target.value);
-        onChange(event.target.value);
+        setInternalValue(event.target.value);
+        if (onChange) {
+          onChange(event.target.value);
+        }
       }}
     />
   );

front/src/modules/ui/components/inputs/__stories__/TextInput.stories.tsx

@@ -0,0 +1,52 @@
+import { expect } from '@storybook/jest';
+import { jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { TextInput } from '../TextInput';
+
+const meta: Meta<typeof TextInput> = {
+  title: 'UI/Inputs/TextInput',
+  component: TextInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+const changeJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <TextInput value="A good value " onChange={changeJestFn} />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(changeJestFn).toHaveBeenCalledTimes(0);
+    const input = canvas.getByRole('textbox');
+    await userEvent.type(input, 'cou');
+
+    expect(changeJestFn).toHaveBeenNthCalledWith(1, 'A good value c');
+    expect(changeJestFn).toHaveBeenNthCalledWith(2, 'A good value co');
+    expect(changeJestFn).toHaveBeenNthCalledWith(3, 'A good value cou');
+  },
+};
+
+export const Placeholder: Story = {
+  render: getRenderWrapperForComponent(
+    <TextInput value="" onChange={changeJestFn} placeholder="Placeholder" />,
+  ),
+};
+
+export const FullWidth: Story = {
+  render: getRenderWrapperForComponent(
+    <TextInput
+      value="A good value"
+      onChange={changeJestFn}
+      placeholder="Placeholder"
+      fullWidth
+    />,
+  ),
+};