Skip to content

Commit

Permalink
Jest Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Digitl-Alchemyst
Digitl-Alchemyst committed Oct 27, 2024
1 parent d7ec33b commit 75b649f
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 115 deletions.
184 changes: 70 additions & 114 deletions __tests__/Home.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HTMLImageElement>) => <img {...props} />,
default: (props: any) => <img {...props} />,
}));

jest.mock('next/link', () => ({
__esModule: true,
default: ({ children, href }: { children: React.ReactNode; href: string }) => (
<a href={href}>{children}</a>
),
// Mock next/link with proper types
jest.mock('next/link', () => {
return {
__esModule: true,
default: function Mock({ children, ...props }: { children: ReactNode; href: string }) {
return <a {...props}>{children}</a>;
},
};
});

// Mock useRouter
jest.mock('next/navigation', () => ({
useRouter() {
return {
push: jest.fn(),
prefetch: jest.fn(),
};
},
}));

describe('Home Component', () => {
beforeEach(() => {
render(<Home />);
});
describe('HomePage', () => {
it('renders the hero section correctly', () => {
render(<HomePage />);

// 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(<HomePage />);

// 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(<HomePage />);

// 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(<HomePage />);

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(<HomePage />);

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();
});
});
});
3 changes: 2 additions & 1 deletion jest.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const createJestConfig = nextJest({
});

const customJestConfig: Config = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
Expand All @@ -19,6 +19,7 @@ const customJestConfig: Config = {
'^@/u/(.*)$': '<rootDir>/src/lib/util/$1',
'^#/(.*)$': '<rootDir>/$1',
},
testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
moduleDirectories: ['node_modules', '<rootDir>/'],
};

Expand Down
15 changes: 15 additions & 0 deletions jest.setup.ts
View file
Original file line number Diff line number Diff line change
@@ -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(),
})),
});

0 comments on commit 75b649f

Please sign in to comment.