From 75b649fcff56b2ca6da0342b16e7c0229ff548ae Mon Sep 17 00:00:00 2001 From: Digitl Alchemyst <129696730+Digitl-Alchemyst@users.noreply.github.com> Date: Sun, 27 Oct 2024 14:53:44 -0500 Subject: [PATCH] Jest Update --- __tests__/Home.test.tsx | 184 +++++++++++++++------------------------- jest.config.ts | 3 +- jest.setup.ts | 15 ++++ 3 files changed, 87 insertions(+), 115 deletions(-) diff --git a/__tests__/Home.test.tsx b/__tests__/Home.test.tsx index 61acf3c..493fc15 100644 --- a/__tests__/Home.test.tsx +++ b/__tests__/Home.test.tsx @@ -1,140 +1,96 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; -import Home from '@/app/page'; +import HomePage from '@/app/page'; +import { ReactNode } from 'react'; -// Mock Next.js components +// Mock next/image jest.mock('next/image', () => ({ __esModule: true, - default: (props: React.ImgHTMLAttributes) => , + default: (props: any) => , })); -jest.mock('next/link', () => ({ - __esModule: true, - default: ({ children, href }: { children: React.ReactNode; href: string }) => ( - {children} - ), +// Mock next/link with proper types +jest.mock('next/link', () => { + return { + __esModule: true, + default: function Mock({ children, ...props }: { children: ReactNode; href: string }) { + return {children}; + }, + }; +}); + +// Mock useRouter +jest.mock('next/navigation', () => ({ + useRouter() { + return { + push: jest.fn(), + prefetch: jest.fn(), + }; + }, })); -describe('Home Component', () => { - beforeEach(() => { - render(); - }); +describe('HomePage', () => { + it('renders the hero section correctly', () => { + render(); - // Test 1: Main Container - test('1. Main container renders with correct class', () => { - const mainElement = screen.getByRole('main'); - expect(mainElement).toHaveClass( - 'flex min-h-screen flex-col items-center justify-start gap-y-5 p-12' - ); + expect(screen.getByText('Next-Alchemy 14.2')).toBeInTheDocument(); + expect(screen.getByText('Your Ultimate Next.js Boilerplate')).toBeInTheDocument(); + expect(screen.getByAltText('Digital Alchemyst Studios')).toBeInTheDocument(); }); - // Test 2: Images - test('2. Both banner images render correctly', () => { - const images = screen.getAllByRole('img'); - expect(images).toHaveLength(2); - expect(images[0]).toHaveAttribute('src', '/Banner.png'); - expect(images[0]).toHaveAttribute('alt', 'Digital Alchemyst Studios'); - expect(images[1]).toHaveAttribute('src', '/labs.png'); - expect(images[1]).toHaveAttribute('alt', 'Alchemy Labs'); - }); + it('renders all features', () => { + render(); - // Test 3: Welcome Heading - test('3. Welcome heading renders with correct content and class', () => { - const welcomeHeading = screen.getByText( - /Welcome to Next-Alchemy 14.2 Boilerplate Base for Next.js with:/i - ); - expect(welcomeHeading).toBeInTheDocument(); - expect(welcomeHeading).toHaveClass( - 'mt-8 text-center text-lg font-bold text-steelpolished-300' - ); - }); - - // Test 4: Boilerplate Author Information - test('4. Boilerplate author information renders correctly', () => { - const authorInfo = screen.getByText( - /Boilerplate by Digitl Alchemyst @ Digital Alchemyst Studios \/ Alchemy Labs/i - ); - expect(authorInfo).toBeInTheDocument(); - expect(authorInfo).toHaveClass('text-center text-lg font-bold text-steelpolished-300'); - }); + const expectedFeatures = [ + 'Next.js 14 App Router', + 'TypeScript 5.5', + 'Tailwind CSS 3.4', + 'ESLint 8.57', + 'Prettier 3.3', + 'Jest 29.7', + 'React Testing Library 16.0', + 'Husky 8.0', + 'Lint-Staged 15.2', + 'Commitlint 16.2', + ]; - // Test 5: Boilerplate Description - test('5. Boilerplate description renders correctly', () => { - const description = screen.getByText( - /This boilerplate is created to be a base for Clean Architecture applications/i - ); - expect(description).toBeInTheDocument(); - expect(description).toHaveClass('text-center text-lg font-bold text-steelpolished-300'); + expectedFeatures.forEach((feature) => { + expect(screen.getByText(feature)).toBeInTheDocument(); + }); }); - // Test 6: Features Heading - test('6. Features heading renders correctly', () => { - const featuresHeading = screen.getByText('FEATURES'); - expect(featuresHeading).toBeInTheDocument(); - expect(featuresHeading).toHaveClass( - 'text-3xl text-steelpolished-300 underline underline-offset-2' - ); - }); + it('renders the GitHub repository link correctly', () => { + render(); - // Test 7: GitHub Link Button - test('7. GitHub link button renders with correct text and classes', () => { - const linkButton = screen.getByRole('button', { name: /Visit the Github/i }); - expect(linkButton).toBeInTheDocument(); - expect(linkButton).toHaveClass( - 'my-5 cursor-pointer rounded-lg border border-zinc-700 bg-zinc-300 p-3 neon-amber' + const repoLink = screen.getByRole('link', { name: /visit repository/i }); + expect(repoLink).toHaveAttribute( + 'href', + 'https://github.com/Digitl-Alchemyst/next-alchemy-14.2' ); }); - // Test 8: Feature List - test('8. Feature list renders with correct number of items and styling', () => { - const featureList = screen.getByRole('list'); - expect(featureList).toHaveClass( - 'w-2xl flex list-disc flex-col items-start space-y-2 text-wrap text-left text-sm font-semibold text-steelpolished-300' - ); + it('renders the clean architecture section', () => { + render(); - const listItems = screen.getAllByRole('listitem'); - expect(listItems).toHaveLength(9); - expect(listItems[0]).toHaveTextContent(/Next.js 14: Utilizes the latest features/); - expect(listItems[1]).toHaveTextContent(/TypeScript: Ensures type safety and code quality/); - expect(listItems[2]).toHaveTextContent( - /ESLint: Integrates ESLint for identifying and fixing problematic patterns/ - ); - expect(listItems[3]).toHaveTextContent( - /Prettier: Implements Prettier for consistent code formatting/ - ); - expect(listItems[4]).toHaveTextContent(/Jest: Configures Jest for testing/); - expect(listItems[5]).toHaveTextContent(/Husky: Utilizes Husky for managing Git hooks/); - expect(listItems[6]).toHaveTextContent( - /Lint-staged: Uses lint-staged to run linters on staged files/ - ); - expect(listItems[7]).toHaveTextContent( - /Commitlint: Enforces a consistent commit message format/ - ); - expect(listItems[8]).toHaveTextContent( - /Tailwind CSS: Integrates Tailwind CSS for utility-first styling/ - ); - listItems.forEach((item) => { - // Instead of checking for an empty class, we'll verify that the item doesn't have any specific class - expect(item.className).toBe(''); - }); + expect(screen.getByText('Clean Architecture Ready')).toBeInTheDocument(); + expect( + screen.getByText(/this boilerplate follows clean architecture principles/i) + ).toBeInTheDocument(); }); - // Test 9: Feature List Content - test('9. Feature list items contain correct content', () => { - const nextjsItem = screen.getByText(/Next.js 14: Utilizes the latest features/i); - const typescriptItem = screen.getByText(/TypeScript: Ensures type safety and code quality/i); - const tailwindItem = screen.getByText( - /Tailwind CSS: Integrates Tailwind CSS for utility-first styling/i - ); + it('renders all Tailwind plugin examples', () => { + render(); - expect(nextjsItem).toBeInTheDocument(); - expect(typescriptItem).toBeInTheDocument(); - expect(tailwindItem).toBeInTheDocument(); - }); + expect(screen.getByText('Tailwind CSS Plugins')).toBeInTheDocument(); - // Test 10: GitHub Link Href - test('10. GitHub link has correct href attribute', () => { - const link = screen.getByRole('link', { name: /Visit the Github/i }); - expect(link).toHaveAttribute('href', 'https://github.com/Digitl-Alchemyst/next-alchemy-14.2'); + const pluginEffects = [ + 'Neon Glow', + 'Text Stroke', + 'Text Gradient', + 'Inner Glow', + 'Frosted Glass', + ]; + pluginEffects.forEach((effect) => { + expect(screen.getByText(effect)).toBeInTheDocument(); + }); }); }); diff --git a/jest.config.ts b/jest.config.ts index 091e54f..a3e2cfd 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -6,7 +6,7 @@ const createJestConfig = nextJest({ }); const customJestConfig: Config = { - setupFilesAfterEnv: ['/jest.setup.ts'], + setupFilesAfterEnv: ['/jest.setup.js'], testEnvironment: 'jest-environment-jsdom', moduleNameMapper: { '^@/(.*)$': '/src/$1', @@ -19,6 +19,7 @@ const customJestConfig: Config = { '^@/u/(.*)$': '/src/lib/util/$1', '^#/(.*)$': '/$1', }, + testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'], moduleDirectories: ['node_modules', '/'], }; diff --git a/jest.setup.ts b/jest.setup.ts index 7b0828b..8ee6ac0 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -1 +1,16 @@ import '@testing-library/jest-dom'; + +// Mock matchMedia if needed +Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation((query) => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), + removeListener: jest.fn(), + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), +});