agroptima-design-system 0.24.5 → 0.25.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.24.5",
+  "version": "0.25.0-beta.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -11,6 +11,7 @@
     "types": "tsc --noEmit",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "test": "jest",
+    "test-coverage": "jest --coverage",
     "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
@@ -35,6 +36,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.1.0",

package/src/atoms/Input.tsx

@@ -1,6 +1,7 @@
 import type { IconType } from './Icon'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { IconButton } from './Button/IconButton'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
 import './Input.scss'
@@ -76,9 +77,10 @@ export function Input({
         />
         {suffix && <span className="input-suffix">{suffix}</span>}
         {type === 'password' && (
-          <Icon
+          <IconButton
+            accessibilityLabel={handlePasswordIcon()}
             className="password-icon"
-            name={handlePasswordIcon()}
+            icon={handlePasswordIcon()}
             onClick={handlePasswordVisibility}
           />
         )}

package/src/atoms/PopoverMenu/PopoverMenu.scss

@@ -0,0 +1,46 @@
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+
+.popover-menu {
+  box-shadow:
+    0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+    0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+  .popover-menu-option {
+    @include typography.body-regular-primary;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+    padding: config.$space-2x config.$space-3x config.$space-2x config.$space-3x;
+    gap: config.$space-3x;
+    border-radius: config.$corner-radius-xxs;
+    text-decoration: none;
+    cursor: default;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.primary {
+      background: color_alias.$neutral-white;
+
+      &.active {
+        background-color: transparent;
+      }
+
+      &:not(.disabled):hover {
+        background: color_alias.$primary-color-50;
+      }
+
+      &.disabled {
+        background: color_alias.$neutral-color-50;
+        @include typography.body-regular-disabled;
+      }
+    }
+  }
+}

package/src/atoms/PopoverMenu/PopoverMenu.tsx

@@ -0,0 +1,13 @@
+export interface PopoverMenuProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function PopoverMenu({
+  children,
+  ...props
+}: PopoverMenuProps): React.JSX.Element {
+  return (
+    <div role="menu" className="popover-menu" {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/PopoverMenu/PopoverMenuOption.tsx

@@ -0,0 +1,42 @@
+import type { LinkProps as NextLinkProps } from 'next/link'
+import { classNames } from '../../utils/classNames'
+import Link from 'next/link'
+import './PopoverMenu.scss'
+
+export type Variant = 'primary'
+
+type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+export interface PopoverMenuOptionProps extends LinkProps {
+  variant?: Variant
+  title: string
+  disabled?: boolean
+  href: string
+  active?: boolean
+}
+
+export function PopoverMenuOption({
+  variant = 'primary',
+  className,
+  title,
+  disabled,
+  href,
+  active,
+  ...props
+}: PopoverMenuOptionProps): React.JSX.Element {
+  const cssClasses = classNames('popover-menu-option', variant, className, {
+    disabled,
+    active,
+  })
+
+  return (
+    <Link
+      role="menuitem"
+      className={cssClasses}
+      href={disabled ? '#' : href}
+      aria-disabled={disabled}
+      {...props}
+    >
+      <span className="title">{title}</span>
+    </Link>
+  )
+}

package/src/atoms/PopoverMenu/index.ts

@@ -0,0 +1,4 @@
+import { PopoverMenu } from './PopoverMenu'
+import { PopoverMenuOption } from './PopoverMenuOption'
+
+export { PopoverMenu, PopoverMenuOption }

package/src/icons/index.tsx

@@ -36,6 +36,7 @@ import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
+import UserMenu from './user-menu.svg'
 import Warning from './warning.svg'
 import DeliveryNote from './delivery-note.svg'
 import PDF from './pdf.svg'
@@ -81,5 +82,6 @@ export {
   Show,
   ShowOff,
   Sorter,
+  UserMenu,
   Warning,
 }

package/src/icons/user-menu.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#user-menu__a)"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 4c1.93 0 3.5 1.57 3.5 3.5S11.93 11 10 11 6.5 9.43 6.5 7.5 8.07 4 10 4Zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C14.43 17.18 12.03 18 10 18Z" fill="#161C26"/></g><defs><clipPath id="user-menu__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/Changelog.mdx

@@ -4,6 +4,15 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.25.0
+
+* Add PopoverMenu and PopoverMenuOption components.
+* Add UserMenu icon.
+
+# 0.24.5
+
+* Add tests to all components.
+
 # 0.24.4
 
 * Remove margin from Alert component.

package/src/stories/PopoverMenu.stories.js

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { PopoverMenu, PopoverMenuOption } from '../atoms/PopoverMenu'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=3200-3749&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/PopoverMenu',
+  component: PopoverMenuOption,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    title: {
+      description: 'Component title text',
+    },
+    disabled: {
+      description: 'Is the component disabled?',
+    },
+    active: {
+      description: 'Is the component active?',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const Menu = {
+  render: () => (
+    <PopoverMenu>
+      <PopoverMenuOption active href="#" variant="primary" title="Profile" />
+      <PopoverMenuOption href="#" variant="primary" title="Change password" />
+      <PopoverMenuOption disabled href="#" variant="primary" title="Logout" />
+    </PopoverMenu>
+  ),
+}

package/tests/Button.spec.tsx

@@ -0,0 +1,113 @@
+import type { ButtonVariant } from '@/atoms/Button/Button'
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from '@/atoms/Button/Button'
+
+describe('Button', () => {
+  const variants = [
+    'primary',
+    'primary-ghost',
+    'primary-outlined',
+    'neutral',
+    'neutral-ghost',
+    'neutral-outlined',
+    'error',
+    'error-ghost',
+    'error-outlined',
+    'success',
+    'success-ghost',
+    'success-outlined',
+    'info',
+    'info-ghost',
+    'info-outlined',
+    'warning',
+    'warning-ghost',
+    'warning-outlined',
+  ]
+
+  it.each(variants)(
+    'renders the Link version %s variant with text and expected styles',
+    (variant) => {
+      const label = `${variant} Button`
+      const { getByRole, getByText } = render(
+        <Button
+          id={`${variant}-button`}
+          label={label}
+          variant={variant as ButtonVariant}
+          href="link.com"
+        />,
+      )
+      expect(getByRole('link')).toHaveClass(`button ${variant}`)
+      expect(getByText(label)).toBeInTheDocument()
+      expect(getByRole('link')).toBeInTheDocument()
+    },
+  )
+
+  it.each(variants)(
+    'renders the Button version %s variant with text and expected styles',
+    (variant) => {
+      const label = `${variant} Button`
+      const { getByRole, getByText } = render(
+        <Button
+          id={`${variant}-button`}
+          label={label}
+          variant={variant as ButtonVariant}
+          onClick={() => alert('click')}
+        />,
+      )
+      expect(getByRole('button')).toHaveClass(`button ${variant}`)
+      expect(getByText(label)).toBeInTheDocument()
+      expect(getByRole('button')).toBeInTheDocument()
+    },
+  )
+
+  it('renders the icon when leftIcon prop is passed', async () => {
+    const { getByRole } = render(
+      <Button
+        id="button-with-icon"
+        label="Button with icon"
+        variant="info"
+        leftIcon="AngleLeft"
+        href="link.com"
+      />,
+    )
+
+    expect(getByRole('img').title).toBe('AngleLeft')
+  })
+
+  it('triggers event on onClick', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <Button
+        id="enabled-button"
+        label="Enabled button"
+        variant="info"
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).toHaveBeenCalled()
+  })
+
+  it('does not trigger event on onClick if Button is disabled', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <Button
+        id="disabled-button"
+        label="Disabled button"
+        variant="info"
+        disabled
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).not.toHaveBeenCalled()
+  })
+})

package/tests/Checkbox.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Checkbox } from '@/atoms/Checkbox'
+
+describe('Checkbox', () => {
+  const variants = ['primary']
+
+  it.each(variants)('renders with label and expected styles', (variant) => {
+    const { getByRole, getAllByRole, getByText } = render(
+      <Checkbox
+        accessibilityLabel="Marks if the user likes videogames"
+        id="checkbox-videogames-preference"
+        label="Do you like videogames?"
+        variant="primary"
+      />,
+    )
+    expect(getAllByRole('generic')[1]).toHaveClass(`checkbox-group ${variant}`)
+    expect(getByRole('checkbox')).toHaveClass(`checkbox ${variant}`)
+    expect(getByText(/Do you like videogames/i)).toBeInTheDocument()
+  })
+})

package/tests/Collapsible.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { Collapsible } from '@/atoms/Collapsible'
 import { Input } from '@/atoms/Input'
 
 describe('Collapsible', () => {
   it('renders', () => {
-    const { getByRole, getByText, getAllByRole } = render(
+    const { getByRole, getByText } = render(
       <Collapsible title="My personal data" name="personal-data" open>
         <Input
           accessibilityLabel="Fill the form name"

package/tests/EmptyState.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import type { Variant } from '@/atoms/EmptyState'
+import { EmptyState } from '@/atoms/EmptyState'
+import { Button } from '@/atoms/Button/Button'
+
+describe('EmptyState', () => {
+  const variants = ['primary']
+  it.each(variants)(
+    'renders the Basic %s variant with the expected image and text',
+    (variant) => {
+      const content = `${variant} empty state content`
+      const { getAllByRole, getByRole, getByText } = render(
+        <EmptyState variant={variant as Variant}>
+          <p>{content}</p>
+        </EmptyState>,
+      )
+      expect(getAllByRole('generic')[1]).toHaveClass(`empty-state ${variant}`)
+      expect(getByRole('img').title).toBe('EmptyState')
+      expect(getByText(content)).toBeInTheDocument()
+    },
+  )
+
+  it('renders the Custom version with the expected image and content', () => {
+    const { getAllByRole, getByRole, getByText } = render(
+      <EmptyState>
+        <p>
+          There are no videogames yet. You can import videogames to your{' '}
+          <a href="#">list</a>.
+        </p>
+        <Button
+          label="Import videogames"
+          onClick={() => alert('click')}
+        ></Button>
+      </EmptyState>,
+    )
+    expect(getAllByRole('generic')[1]).toHaveClass(`empty-state primary`)
+    expect(getByRole('img').title).toBe('EmptyState')
+    expect(getByText(/There are no videogames yet/i)).toBeInTheDocument()
+    expect(getByText('Import videogames')).toBeInTheDocument()
+    expect(getByRole('link')).toBeInTheDocument()
+    expect(getByRole('button')).toBeInTheDocument()
+  })
+})

package/tests/FloatingButton.spec.tsx

@@ -0,0 +1,86 @@
+import type { Variant } from '@/atoms/Button/FloatingButton'
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FloatingButton } from '@/atoms/Button/FloatingButton'
+
+describe('Floating Button', () => {
+  const variants = ['primary']
+
+  it.each(variants)(
+    'renders the Link version %s variant with text and expected styles',
+    (variant) => {
+      const { getByRole } = render(
+        <FloatingButton
+          id={`${variant}-floating-button`}
+          icon="Add"
+          shape="circle"
+          accessibilityLabel="Add game"
+          variant={variant as Variant}
+          href="link.com"
+        />,
+      )
+      expect(getByRole('link')).toHaveClass(`floating-button ${variant} circle`)
+      expect(getByRole('img').title).toBe('Add')
+      expect(getByRole('link')).toBeInTheDocument()
+    },
+  )
+
+  it.each(variants)(
+    'renders the Button version %s variant with text and expected styles',
+    (variant) => {
+      const { getByRole } = render(
+        <FloatingButton
+          id={`${variant}-floating-button`}
+          icon="Add"
+          shape="rounded-square"
+          accessibilityLabel="Add game"
+          variant={variant as Variant}
+          onClick={() => alert('click')}
+        />,
+      )
+      expect(getByRole('button')).toHaveClass(
+        `floating-button ${variant} rounded-square`,
+      )
+      expect(getByRole('img').title).toBe('Add')
+      expect(getByRole('button')).toBeInTheDocument()
+    },
+  )
+
+  it('triggers event on onClick', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <FloatingButton
+        id="enabled-floating-button"
+        icon="Add"
+        shape="rounded-square"
+        accessibilityLabel="Add game"
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).toHaveBeenCalled()
+  })
+
+  it('does not trigger event on onClick if Button is disabled', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <FloatingButton
+        id="disabled-floating-button"
+        icon="Add"
+        shape="rounded-square"
+        accessibilityLabel="Add game"
+        disabled
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).not.toHaveBeenCalled()
+  })
+})

package/tests/Icon.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Icon } from '@/atoms/Icon'
+
+describe('Icon', () => {
+  it('renders with the expected graphic and styles', () => {
+    const { getByRole } = render(<Icon name="AngleLeft" className="info" />)
+
+    expect(getByRole('img')).toHaveClass('icon info')
+    expect(getByRole('img').title).toBe('AngleLeft')
+  })
+
+  it('has a rotating animation', () => {
+    const { getByRole } = render(<Icon name="Loading" className="info" />)
+
+    expect(getByRole('img')).toHaveClass('icon info rotate')
+    expect(getByRole('img').title).toBe('Loading')
+  })
+})

package/tests/IconButton.spec.tsx

@@ -0,0 +1,80 @@
+import type { Variant } from '@/atoms/Button/IconButton'
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { IconButton } from '@/atoms/Button/IconButton'
+
+describe('Icon Button', () => {
+  const variants = ['primary', 'secondary']
+
+  it.each(variants)(
+    'renders the Link version %s variant with text and expected styles',
+    (variant) => {
+      const { getByRole } = render(
+        <IconButton
+          id={`${variant}-icon-button`}
+          icon="Edit"
+          accessibilityLabel="Edit game"
+          variant={variant as Variant}
+          href="link.com"
+        />,
+      )
+      expect(getByRole('link')).toHaveClass(`icon-button ${variant}`)
+      expect(getByRole('img').title).toBe('Edit game')
+      expect(getByRole('link')).toBeInTheDocument()
+    },
+  )
+
+  it.each(variants)(
+    'renders the Button version %s variant with text and expected styles',
+    (variant) => {
+      const { getByRole } = render(
+        <IconButton
+          id={`${variant}-icon-button`}
+          icon="Edit"
+          accessibilityLabel="Edit game"
+          variant={variant as Variant}
+          onClick={() => alert('click')}
+        />,
+      )
+      expect(getByRole('button')).toHaveClass(`icon-button ${variant}`)
+      expect(getByRole('img').title).toBe('Edit game')
+      expect(getByRole('button')).toBeInTheDocument()
+    },
+  )
+
+  it('triggers event on onClick', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <IconButton
+        id="enabled-icon-button"
+        icon="Edit"
+        accessibilityLabel="Edit game"
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).toHaveBeenCalled()
+  })
+
+  it('does not trigger event on onClick if Button is disabled', async () => {
+    const user = userEvent.setup()
+    const onClickEvent = jest.fn()
+    render(
+      <IconButton
+        id="disabled-icon-button"
+        icon="Edit"
+        accessibilityLabel="Edit game"
+        disabled
+        onClick={onClickEvent}
+      />,
+    )
+
+    await user.click(screen.getByRole('button'))
+
+    expect(onClickEvent).not.toHaveBeenCalled()
+  })
+})

package/tests/Input.spec.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Input } from '@/atoms/Input'
+
+describe('Input', () => {
+  it('renders the Text type', () => {
+    const { getByPlaceholderText, getAllByRole, getByRole, getByText } = render(
+      <Input
+        accessibilityLabel="Fill the form email"
+        helpText="This text can help you"
+        id="email_input"
+        label="Email"
+        name="email"
+        placeholder="Write your email..."
+        type="email"
+        variant="primary"
+      />,
+    )
+
+    expect(getByRole('textbox')).toHaveAttribute('type', 'email')
+    expect(getAllByRole('generic')[1]).toHaveClass('input-group primary')
+    expect(getByText('Email')).toBeInTheDocument()
+    expect(getByPlaceholderText(/Write your email.../)).toBeInTheDocument()
+    expect(getByText(/This text can help you/i)).toBeInTheDocument()
+  })
+
+  it('renders the Password type', async () => {
+    const user = userEvent.setup()
+    const { getByPlaceholderText, getAllByRole, getByRole, getByText } = render(
+      <Input
+        helpText="This text can help you"
+        id="password_input"
+        label="Password"
+        name="login_password"
+        placeholder="Write your password..."
+        type="password"
+        variant="primary"
+      />,
+    )
+
+    expect(getByPlaceholderText(/Write your password.../)).toHaveAttribute(
+      'type',
+      'password',
+    )
+    expect(getAllByRole('generic')[1]).toHaveClass('input-group primary')
+    expect(getByText('Password')).toBeInTheDocument()
+    expect(getByRole('img').title).toBe('Show')
+    expect(getByText(/This text can help you/i)).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button'))
+
+    expect(getByRole('img').title).toBe('ShowOff')
+  })
+
+  it('renders input with errors', () => {
+    const { getAllByRole, getByText } = render(
+      <Input
+        accessibilityLabel="Fill the form email"
+        errors={['error1', 'error2']}
+        helpText="This text can help you"
+        id="email_input"
+        label="Email"
+        name="email"
+        placeholder="Email..."
+        type="email"
+        variant="primary"
+      />,
+    )
+
+    expect(getAllByRole('generic')[1]).toHaveClass('input-group invalid')
+    expect(getByText(/error1/i)).toBeInTheDocument()
+    expect(getByText(/error2/i)).toBeInTheDocument()
+  })
+
+  it('renders input with suffix', () => {
+    const { getByRole, getByText } = render(
+      <Input
+        helpText="This text can help you"
+        label="Input with suffix"
+        name="price"
+        suffix="€/Bottle"
+        type="number"
+      />,
+    )
+
+    expect(getByRole('spinbutton')).toBeInTheDocument()
+    expect(getByText('€/Bottle')).toBeInTheDocument()
+  })
+})

package/tests/Multiselect.spec.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Multiselect } from '@/atoms/Multiselect'
+
+describe('Multiselect', () => {
+  it('renders', async () => {
+    const user = userEvent.setup()
+    const { getAllByRole, getByText } = render(
+      <Multiselect
+        accessibilityLabel="Select your favourite videogames options"
+        helpText="This text can help you"
+        id="multiselect-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'The Legend of Zelda: Ocarina of Time',
+          },
+          {
+            id: '2',
+            label: 'Spyro the Dragon',
+          },
+          {
+            id: '3',
+            label: 'Halo',
+          },
+        ]}
+        placeholder="Select your favourite videogames..."
+        selectedLabel="videogames selected"
+        variant="primary"
+      />,
+    )
+
+    expect(getAllByRole('generic')[1]).toHaveClass('multiselect-group primary')
+    expect(getByText('Videogames')).toBeInTheDocument()
+    expect(getByText(/Select your favourite videogames.../)).toBeInTheDocument()
+    expect(getByText(/This text can help you/i)).toBeInTheDocument()
+
+    await user.click(screen.getByRole('alert'))
+
+    expect(getByText(/Zelda/i)).toBeInTheDocument()
+    expect(getByText(/Spyro/i)).toBeInTheDocument()
+    expect(getByText(/Halo/i)).toBeInTheDocument()
+  })
+
+  it('renders the number of options selected', async () => {
+    const user = userEvent.setup()
+    const { getByText } = render(
+      <Multiselect
+        helpText="This text can help you"
+        id="multiselect-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'The Legend of Zelda: Ocarina of Time',
+          },
+          {
+            id: '2',
+            label: 'Spyro the Dragon',
+          },
+          {
+            id: '3',
+            label: 'Halo',
+          },
+        ]}
+        placeholder="Select your favourite videogames..."
+        selected={[
+          {
+            id: '2',
+            label: 'Spyro the Dragon',
+          },
+          {
+            id: '1',
+            label: 'The Legend of Zelda: Ocarina of Time',
+          },
+        ]}
+        selectedLabel="videogames selected"
+        variant="primary"
+      />,
+    )
+
+    expect(getByText(/2 videogames selected/i)).toBeInTheDocument()
+
+    await user.click(screen.getByRole('alert'))
+    await user.click(screen.getAllByRole('option')[0])
+
+    expect(getByText(/1 videogames selected/i)).toBeInTheDocument()
+  })
+
+  it('renders with errors', () => {
+    const { getByText } = render(
+      <Multiselect
+        accessibilityLabel="Select your favourite videogames options"
+        errors={['error1', 'error2']}
+        helpText="This text can help you"
+        id="multiselect-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'The Legend of Zelda: Ocarina of Time',
+          },
+          {
+            id: '2',
+            label: 'Spyro the Dragon',
+          },
+          {
+            id: '3',
+            label: 'Halo',
+          },
+        ]}
+        placeholder="Select your favourite videogames..."
+        selectedLabel="videogames selected"
+        variant="primary"
+      />,
+    )
+
+    expect(getByText(/error1/i)).toBeInTheDocument()
+    expect(getByText(/error2/i)).toBeInTheDocument()
+  })
+})

package/tests/PopoverMenu.spec.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { PopoverMenu, PopoverMenuOption } from '@/atoms/PopoverMenu'
+
+describe('PopoverMenu', () => {
+  it('renders', () => {
+    const { getByText, getAllByRole } = render(
+      <PopoverMenu>
+        <PopoverMenuOption active href="#" variant="primary" title="Profile" />
+        <PopoverMenuOption href="#" variant="primary" title="Change password" />
+        <PopoverMenuOption disabled href="#" variant="primary" title="Logout" />
+      </PopoverMenu>,
+    )
+
+    expect(getAllByRole('menuitem')[0]).toHaveClass(
+      `popover-menu-option primary active`,
+    )
+    expect(getAllByRole('menuitem')[1]).toHaveClass(
+      `popover-menu-option primary`,
+    )
+    expect(getAllByRole('menuitem')[2]).toHaveClass(
+      `popover-menu-option primary disabled`,
+    )
+    expect(getByText(/Profile/i)).toBeInTheDocument()
+    expect(getByText(/Change password/i)).toBeInTheDocument()
+    expect(getByText(/Logout/i)).toBeInTheDocument()
+  })
+})

package/tests/Select.spec.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Select } from '@/atoms/Select'
+
+describe('Select', () => {
+  it('renders', async () => {
+    const user = userEvent.setup()
+    const { getAllByRole, getByText } = render(
+      <Select
+        accessibilityLabel="Select your favourite gaming system options"
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'Nintendo Switch',
+          },
+          {
+            id: '2',
+            label: 'PlayStation 5',
+          },
+          {
+            id: '3',
+            label: 'Xbox Series S/X',
+          },
+        ]}
+        placeholder="Select your favourite gaming system..."
+        variant="primary"
+      />,
+    )
+
+    expect(getAllByRole('generic')[1]).toHaveClass('select-group primary')
+    expect(getByText('Videogames')).toBeInTheDocument()
+    expect(
+      getByText(/Select your favourite gaming system.../),
+    ).toBeInTheDocument()
+    expect(getByText(/This text can help you/i)).toBeInTheDocument()
+
+    await user.click(screen.getByRole('alert'))
+
+    expect(getByText(/Switch/i)).toBeInTheDocument()
+    expect(getByText(/PlayStation/i)).toBeInTheDocument()
+    expect(getByText(/Xbox/i)).toBeInTheDocument()
+  })
+
+  it('renders the selected option', async () => {
+    const user = userEvent.setup()
+    const { getByText, queryByText } = render(
+      <Select
+        defaultValue="2"
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'Nintendo Switch',
+          },
+          {
+            id: '2',
+            label: 'PlayStation 5',
+          },
+          {
+            id: '3',
+            label: 'Xbox Series S/X',
+          },
+        ]}
+        placeholder="Select your favourite gaming system..."
+        variant="primary"
+      />,
+    )
+
+    expect(getByText(/PlayStation/i)).toBeInTheDocument()
+    expect(queryByText(/Switch/i)).not.toBeInTheDocument()
+    expect(queryByText(/Xbox/i)).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('alert'))
+    await user.click(screen.getAllByRole('option')[0])
+
+    expect(getByText(/Switch/i)).toBeInTheDocument()
+    expect(queryByText(/PlayStation/i)).not.toBeInTheDocument()
+    expect(queryByText(/Xbox/i)).not.toBeInTheDocument()
+  })
+
+  it('renders with errors', () => {
+    const { getByText } = render(
+      <Select
+        accessibilityLabel="Select your favourite gaming system options"
+        errors={['error1', 'error2']}
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        onChange={() => {}}
+        options={[
+          {
+            id: '1',
+            label: 'Nintendo Switch',
+          },
+          {
+            id: '2',
+            label: 'PlayStation 5',
+          },
+          {
+            id: '3',
+            label: 'Xbox Series S/X',
+          },
+        ]}
+        placeholder="Select your favourite gaming system..."
+        variant="primary"
+      />,
+    )
+
+    expect(getByText(/error1/i)).toBeInTheDocument()
+    expect(getByText(/error2/i)).toBeInTheDocument()
+  })
+})

package/tests/TextArea.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { TextArea } from '@/atoms/TextArea'
+
+describe('TextArea', () => {
+  it('renders', () => {
+    const { getByPlaceholderText, getAllByRole, getByRole, getByText } = render(
+      <TextArea
+        accessibilityLabel="Fill the textarea"
+        helpText="This text can help you"
+        id="textarea"
+        label="Description"
+        name="textarea"
+        placeholder="Write here..."
+        variant="primary"
+      />,
+    )
+
+    expect(getByRole('textbox')).toBeInTheDocument()
+    expect(getAllByRole('generic')[1]).toHaveClass('input-group primary')
+    expect(getByText('Description')).toBeInTheDocument()
+    expect(getByPlaceholderText(/Write here.../)).toBeInTheDocument()
+  })
+
+  it('renders with errors', () => {
+    const { getAllByRole, getByText } = render(
+      <TextArea
+        accessibilityLabel="Fill the form textarea"
+        errors={['Che che che', 'Another error']}
+        helpText="This text can help you"
+        id="textarea"
+        label="Description"
+        name="textarea"
+        placeholder="Write here..."
+        variant="primary"
+      />,
+    )
+
+    expect(getAllByRole('generic')[1]).toHaveClass('input-group invalid')
+    expect(getByText(/Che che che/i)).toBeInTheDocument()
+    expect(getByText(/Another error/i)).toBeInTheDocument()
+  })
+})

package/tests/utils/{classNames.spec.tx → classNames.spec.tsx}

@@ -1,4 +1,4 @@
-import { classNames } from '/utils/classNames'
+import { classNames } from '@/utils/classNames'
 
 describe('classNames', () => {
   it('returns a string of classes', () => {