✨ - Add Vitest configuration and unit test (#36)

Author: claudiocoder

__mocks__/@fortawesome/fontawesome-svg-core.ts

@@ -0,0 +1 @@
+export const config = { autoAddCss: false }

__mocks__/next/font/google.ts

@@ -0,0 +1,17 @@
+import { vi } from "vitest";
+
+export const Roboto = vi.fn(()=> {
+  return {
+    weight: ['400', '700'],
+    subsets: ['latin'],
+    variable: '--font-roboto',
+  }
+});
+
+export const Khula = vi.fn(()=> {
+  return {
+    weight: ['400'],
+    subsets: ['latin'],
+    variable: '--font-inter',
+  }
+});

__mocks__/next/navigation.ts

@@ -0,0 +1,4 @@
+import { vi } from 'vitest'
+
+// __mocks__/next/navigation.js
+export const notFound = vi.fn(() => {})

__test__/_app/Footer.test.tsx

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Footer from '../../src/components/Footer'
+
+describe('Footer', () => {
+  it('should render', () => {
+    const component = render(<Footer />)
+    expect(component).toBeDefined()
+  })
+  it('should render regresar label', () => {
+    render(<Footer />)
+    expect(screen.getByText('Regresar')).toBeDefined()
+  })
+})

__test__/_app/Layout.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import Layout from '../../src/app/layout'
+
+describe('Layout', () => {
+  it('should render layout', () => {
+    const component = render(<Layout>
+      <h1>Layout Testing</h1>
+    </Layout>)
+    expect(component).toBeDefined()
+  })
+
+  it('should render child element', () => {
+    render(
+      <Layout>
+        <h1>Layout Testing</h1>
+      </Layout>
+    )
+    expect(screen.getByText('Layout Testing')).toBeDefined()
+  })
+})

__test__/_app/Loading.test.tsx

@@ -0,0 +1,14 @@
+import { expect, it, describe } from 'vitest'
+import { render, screen } from "@testing-library/react"
+import Loading from '../../src/app/loading'
+
+describe('Loading', () => {
+  it('should render', () => {
+    const component = render(<Loading />)
+    expect(component).toBeDefined()
+  })
+  it('should display loading label', () => {
+    render(<Loading />)
+    expect(screen.getByText('Loading...')).toBeTruthy()
+  })
+})

__test__/_app/Page.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it} from 'vitest'
+import Page from '../../src/app/page'
+import { render, screen } from '@testing-library/react'
+
+describe('Page', () => {
+  it('should render', () => {
+    const component = render(<Page />)
+    expect(component).toBeDefined()
+  })
+  it('should render blog title', () => {
+    
+    render(<Page />)
+    expect(screen.getByText('Blog')).toBeDefined()
+  })
+})

__test__/_app/[slug]/Page.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import BlogPage, { generateMetadata } from '../../../src/app/[slug]/page'
+import { render } from '@testing-library/react'
+
+describe('PageSlug', () => {
+  it('Should render', async () => {
+    const jsx = await BlogPage({
+      params: { slug: 'resources_developers' },
+    })
+    const component = render(jsx)
+    expect(component).toBeDefined()
+  })
+})
+
+describe('generateMetadata', () => {
+  it('Should return metadata', async () => {
+    const metadata = await generateMetadata({
+      params: { slug: 'resources_developers' },
+    })
+    expect(metadata).toEqual({
+      description:
+        'Mis 5 Sitios Favoritos para Aprender Programación | @claudio_coder',
+      openGraph: {
+        description:
+          'Mis 5 Sitios Favoritos para Aprender Programación | @claudio_coder',
+        images: 'https://claudiocoder.me/profile.jpg',
+        locale: 'es',
+        siteName: 'claudiocoder.me',
+        title: 'Mis 5 Sitios Favoritos para Aprender Programación',
+        url: 'https://claudiocoder.me/resources_developers',
+      },
+      title: 'Mis 5 Sitios Favoritos para Aprender Programación',
+      twitter: {
+        card: 'summary_large_image',
+        description:
+          'Mis 5 Sitios Favoritos para Aprender Programación | @claudio_coder',
+        images: 'https://claudiocoder.me/profile.jpg',
+        title: 'Mis 5 Sitios Favoritos para Aprender Programación',
+      },
+    })
+  })
+})