chore: initial commit

components/design/__test__/Avatar.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react'
+
+import { Avatar } from '../Avatar'
+
+describe('<Avatar />', () => {
+  it('should render', async () => {
+    const altAttribute = 'avatar'
+    const { getByAltText } = render(
+      <Avatar width={50} height={50} src='/avatar.png' alt={altAttribute} />
+    )
+    expect(getByAltText(altAttribute)).toBeInTheDocument()
+  })
+})

components/design/__test__/Button.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Button } from '../Button'
+
+describe('<Button />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Button>Submit</Button>)
+    expect(getByText('Submit')).toBeInTheDocument()
+  })
+})

components/design/__test__/Container.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Container } from '../Container'
+
+describe('<Container />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Container>Content</Container>)
+    expect(getByText('Content')).toBeInTheDocument()
+  })
+})

components/design/__test__/Divider.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+
+import { Divider } from '../Divider'
+
+describe('<Divider />', () => {
+  it('should render with the content', async () => {
+    const content = 'divider'
+    const { getByText } = render(<Divider content={content} />)
+    expect(getByText(content)).toBeInTheDocument()
+  })
+})

components/design/__test__/IconButton.test.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react'
+
+import { Icon, IconButton } from '../IconButton'
+
+describe('<IconButton />', () => {
+  it('should render with the icon', async () => {
+    const icon: Icon = 'add'
+    const { getByAltText } = render(<IconButton icon={icon} />)
+    const iconImage = getByAltText(icon)
+    expect(iconImage).toBeInTheDocument()
+    expect(iconImage).toHaveAttribute('src', `/images/svg/icons/${icon}.svg`)
+  })
+})

components/design/__test__/Input.test.tsx

@@ -0,0 +1,26 @@
+import { render, fireEvent } from '@testing-library/react'
+
+import { Input } from '../Input'
+
+describe('<Input />', () => {
+  it('should render the label', async () => {
+    const labelContent = 'label content'
+    const { getByText } = render(<Input label={labelContent} />)
+    expect(getByText(labelContent)).toBeInTheDocument()
+  })
+
+  it('should not render the eye icon if the input is not of type "password"', async () => {
+    const { queryByTestId } = render(<Input type='text' label='content' />)
+    const passwordEye = queryByTestId('password-eye')
+    expect(passwordEye).not.toBeInTheDocument()
+  })
+
+  it('should handlePassword with eye icon', async () => {
+    const { findByTestId } = render(<Input type='password' label='content' />)
+    const passwordEye = await findByTestId('password-eye')
+    const input = await findByTestId('input')
+    expect(input).toHaveAttribute('type', 'password')
+    fireEvent.click(passwordEye)
+    expect(input).toHaveAttribute('type', 'text')
+  })
+})

components/design/__test__/Loader.test.tsx

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/react'
+
+import { Loader } from '../Loader'
+
+describe('<Loader />', () => {
+  it('should render with correct width and height', async () => {
+    const size = 20
+    const { findByTestId } = render(<Loader width={size} height={size} />)
+    const progressSpinner = await findByTestId('progress-spinner')
+    expect(progressSpinner).toHaveStyle(`width: ${size}px`)
+    expect(progressSpinner).toHaveStyle(`height: ${size}px`)
+  })
+
+  it('should render with default width and height', async () => {
+    const { findByTestId } = render(<Loader />)
+    const progressSpinner = await findByTestId('progress-spinner')
+    expect(progressSpinner).toHaveStyle('width: 50px')
+    expect(progressSpinner).toHaveStyle('height: 50px')
+  })
+})

components/design/__test__/SocialMediaButton.test.tsx

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/react'
+
+import { SocialMedia, SocialMediaButton } from '../SocialMediaButton'
+
+describe('<SocialMediaButton />', () => {
+  it('should render the social media', async () => {
+    const socialMedia: SocialMedia = 'Discord'
+    const { findByAltText } = render(
+      <SocialMediaButton socialMedia={socialMedia} />
+    )
+    const socialMediaButton = await findByAltText(socialMedia)
+    expect(socialMediaButton).toBeInTheDocument()
+  })
+
+  it('should render with a black text color with Google social media', async () => {
+    const socialMedia: SocialMedia = 'Google'
+    const { findByTestId } = render(
+      <SocialMediaButton socialMedia={socialMedia} />
+    )
+    const button = await findByTestId('button')
+    expect(button).toHaveStyle('color: #000')
+  })
+})

components/design/__test__/Tooltip.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+
+import { Tooltip } from '../Tooltip'
+
+describe('<Tooltip />', () => {
+  it('should render with content', async () => {
+    const content = 'tooltip content'
+    const { getByText } = render(<Tooltip content={content} />)
+    expect(getByText(content)).toBeInTheDocument()
+  })
+})