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

front/src/modules/ui/components/links/PrimaryLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  children: React.ReactNode;
+  href: string;
+  onClick?: () => void;
+  fullWidth?: boolean;
+};
+
+const StyledClickable = styled.div`
+  display: flex;
+  a {
+    color: ${({ theme }) => theme.text40};
+    font-size: ${({ theme }) => theme.fontSizeSmall};
+    text-decoration: none;
+  }
+`;
+
+export function PrimaryLink({ href, children, onClick }: OwnProps) {
+  return (
+    <StyledClickable>
+      <ReactLink onClick={onClick} to={href}>
+        {children}
+      </ReactLink>
+    </StyledClickable>
+  );
+}

front/src/modules/ui/components/links/RawLink.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  href: string;
+  children?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+const StyledClickable = styled.div`
+  display: flex;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+
+export function RawLink({ href, children, onClick }: OwnProps) {
+  return (
+    <StyledClickable>
+      <ReactLink onClick={onClick} to={href}>
+        {children}
+      </ReactLink>
+    </StyledClickable>
+  );
+}

front/src/modules/ui/components/links/__stories__/PrimaryLink.stories.tsx

@@ -0,0 +1,37 @@
+import { MemoryRouter } from 'react-router-dom';
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { PrimaryLink } from '../PrimaryLink';
+
+const meta: Meta<typeof PrimaryLink> = {
+  title: 'UI/Links/PrimaryLink',
+  component: PrimaryLink,
+};
+
+export default meta;
+type Story = StoryObj<typeof PrimaryLink>;
+
+const clickJestFn = jest.fn();
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <MemoryRouter>
+      <PrimaryLink href="/test" onClick={clickJestFn}>
+        A primary link
+      </PrimaryLink>
+    </MemoryRouter>,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const link = canvas.getByRole('link');
+    await userEvent.click(link);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};