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

front/src/modules/ui/components/buttons/PrimaryButton.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  label: string;
-  icon?: React.ReactNode;
+  children: React.ReactNode;
   fullWidth?: boolean;
-  onClick?: () => void;
-};
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button<{ fullWidth: boolean }>`
   align-items: center;
@@ -24,29 +22,20 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
   display: flex;
   flex-direction: row;
   font-weight: ${({ theme }) => theme.fontWeightBold};
-  gap: 8px;
+  gap: ${({ theme }) => theme.spacing(2)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 `;
 
 export function PrimaryButton({
-  label,
-  icon,
+  children,
   fullWidth,
-  onClick,
+  ...props
 }: OwnProps): JSX.Element {
   return (
-    <StyledButton
-      fullWidth={fullWidth ?? false}
-      onClick={() => {
-        if (onClick) {
-          onClick();
-        }
-      }}
-    >
-      {icon}
-      {label}
+    <StyledButton fullWidth={fullWidth ?? false} {...props}>
+      {children}
     </StyledButton>
   );
 }

front/src/modules/ui/components/buttons/SecondaryButton.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 type OwnProps = {
-  label: string;
-  icon?: React.ReactNode;
+  children: React.ReactNode;
   fullWidth?: boolean;
-};
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button<{ fullWidth: boolean }>`
   align-items: center;
@@ -31,14 +30,13 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
 `;
 
 export function SecondaryButton({
-  label,
-  icon,
+  children,
   fullWidth,
+  ...props
 }: OwnProps): JSX.Element {
   return (
-    <StyledButton fullWidth={fullWidth ?? false}>
-      {icon}
-      {label}
+    <StyledButton fullWidth={fullWidth ?? false} {...props}>
+      {children}
     </StyledButton>
   );
 }

front/src/modules/ui/components/buttons/TertiaryButton.tsx

@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  text: string;
-};
-
-const StyledButton = styled.button``;
-
-export function TertiaryButton({ text }: OwnProps): JSX.Element {
-  return <StyledButton>{text}</StyledButton>;
-}

front/src/modules/ui/components/buttons/__stories__/IconButton.stories.tsx

@@ -0,0 +1,33 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconArrowRight } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { IconButton } from '../IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'UI/Buttons/IconButton',
+  component: IconButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <IconButton onClick={clickJestFn} icon={<IconArrowRight size={15} />} />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};

front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx

@@ -0,0 +1,47 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconBrandGoogle } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { PrimaryButton } from '../PrimaryButton';
+
+const meta: Meta<typeof PrimaryButton> = {
+  title: 'UI/Buttons/PrimaryButton',
+  component: PrimaryButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof PrimaryButton>;
+
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <PrimaryButton onClick={clickJestFn}>A Primary Button</PrimaryButton>,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIcon: Story = {
+  render: getRenderWrapperForComponent(
+    <PrimaryButton>
+      <IconBrandGoogle size={16} stroke={4} />A Primary Button
+    </PrimaryButton>,
+  ),
+};
+
+export const FullWidth: Story = {
+  render: getRenderWrapperForComponent(
+    <PrimaryButton fullWidth={true}>A Primary Button</PrimaryButton>,
+  ),
+};

front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx

@@ -0,0 +1,47 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconBrandGoogle } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { SecondaryButton } from '../SecondaryButton';
+
+const meta: Meta<typeof SecondaryButton> = {
+  title: 'UI/Buttons/SecondaryButton',
+  component: SecondaryButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof SecondaryButton>;
+
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <SecondaryButton onClick={clickJestFn}>A Primary Button</SecondaryButton>,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIcon: Story = {
+  render: getRenderWrapperForComponent(
+    <SecondaryButton>
+      <IconBrandGoogle size={16} stroke={4} />A Primary Button
+    </SecondaryButton>,
+  ),
+};
+
+export const FullWidth: Story = {
+  render: getRenderWrapperForComponent(
+    <SecondaryButton fullWidth={true}>A Primary Button</SecondaryButton>,
+  ),
+};