feat: Add tests

Author: raminr77

src/domains/contact-me/__tests__/contact-form.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ContactForm } from '../components/contact-form';
+
+jest.mock('@/shared/services/email-service', () => ({
+  sendEmail: jest.fn(async () => await Promise.resolve(true))
+}));
+
+jest.mock('@/shared/helpers/notify', () => ({
+  notify: {
+    success: jest.fn(),
+    error: jest.fn()
+  }
+}));
+
+describe('ContactForm', () => {
+  it('should validate and submit', async () => {
+    render(<ContactForm />);
+    const user = userEvent.setup();
+
+    await user.type(screen.getByTestId('email-input'), 'ramin@ramin.com');
+    await user.type(screen.getByTestId('subject-input'), 'this is a subject');
+    await user.type(
+      screen.getByTestId('message-input'),
+      'This is a long enough message to pass validation rules.'
+    );
+
+    const submitButton = await screen.findByTestId('submit-button');
+    await user.click(submitButton);
+
+    expect(true).toBe(true);
+  });
+
+  it('should show validation errors', async () => {
+    render(<ContactForm />);
+    const user = userEvent.setup();
+
+    await user.type(screen.getByTestId('subject-input'), 'short');
+    await user.type(screen.getByTestId('email-input'), 'ramin@ramin');
+    await user.type(screen.getByTestId('message-input'), 'short message');
+
+    const submitButton = await screen.findByTestId('submit-button');
+    await user.click(submitButton);
+
+    expect(screen.getByText(/Your email address is invalid!/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/Your subject should be more than 10 characters/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Your message should be more than 30 characters/i)
+    ).toBeInTheDocument();
+  });
+});

src/domains/contact-me/components/contact-form/index.tsx

@@ -79,6 +79,7 @@ export function ContactForm() {
         type="text"
         id="subject"
         label="Subject"
+        testId="subject-input"
         placeholder="Enter your subject"
         error={errors.subject?.message}
         {...register('subject', {
@@ -97,6 +98,7 @@ export function ContactForm() {
         id="email"
         type="email"
         label="Email"
+        testId="email-input"
         error={errors.email?.message}
         placeholder="Enter your email address"
         {...register('email', {
@@ -132,13 +134,14 @@ export function ContactForm() {
             type="textarea"
             label="Message"
             onChange={onChange}
+            testId="message-input"
             placeholder="Enter your message"
             error={errors.message?.message}
           />
         )}
       />
       <div className="mt-2 flex w-full justify-end">
-        <Button label="Submit" type="submit" loading={loading} />
+        <Button testId="submit-button" label="Submit" type="submit" loading={loading} />
       </div>
     </form>
   );

src/domains/posts/__tests__/post-tags.test.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+
+import { PostTags } from '../components/post-tags';
+
+describe('PostTags', () => {
+  it('should render tags as links', () => {
+    render(<PostTags postId={1} tags={['hooks', 'design']} />);
+    const linkElement = screen.getByText('hooks');
+
+    expect(linkElement.closest('a')).toBeTruthy();
+    expect(linkElement.closest('a')).toHaveAttribute('href', '/posts?tag=hooks');
+  });
+});

src/domains/posts/__tests__/posts-category-filter.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+
+import type { PostFilters } from '@/shared/types/post';
+
+import { PostsCategoryFilter } from '../components/posts-category-filter';
+
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return {
+      route: '/',
+      query: '',
+      asPath: '',
+      pathname: '',
+      events: {
+        on: jest.fn(),
+        off: jest.fn()
+      },
+      push: jest.fn(),
+      prefetch: jest.fn(() => null),
+      beforePopState: jest.fn(() => null)
+    };
+  }
+}));
+
+describe('PostsCategoryFilter', () => {
+  it('should render clear filter link with correct href', () => {
+    const activeFilters: PostFilters = {
+      tag: '',
+      category: 'react'
+    };
+
+    render(
+      <PostsCategoryFilter
+        activeFilters={activeFilters}
+        categories={['react', 'system']}
+      />
+    );
+
+    const link = screen.getByTestId('clear-filter-link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/posts');
+  });
+});

src/domains/posts/components/posts-category-filter/index.tsx

@@ -47,6 +47,7 @@ export function PostsCategoryFilter({
       {!!activeFilters && (
         <Link
           href={ROUTES.POSTS}
+          data-testid="clear-filter-link"
           onClick={() => sendGTMEvent(GTM_EVENTS.CLEAR_FILTERS)}
           className="px-2 py-1 text-md bg-transparent backdrop-blur-sm hover:text-amber-500 duration-300"
         >

src/shared/components/button/button.test.tsx

@@ -80,4 +80,10 @@ describe('<Button />', () => {
     await user.keyboard(' ');
     expect(onClick).toHaveBeenCalledTimes(2);
   });
+
+  test('testId is set correctly', () => {
+    render(<Button label="Test" type="button" testId="test-button" />);
+    const btn = screen.getByTestId('test-button');
+    expect(btn).toBeInTheDocument();
+  });
 });

src/shared/components/button/index.tsx

@@ -5,6 +5,7 @@ import { Spinner } from '@/shared/components/spinner';
 
 interface ButtonProps {
   label: string;
+  testId?: string;
   loading?: boolean;
   className?: string;
   disabled?: boolean;
@@ -15,6 +16,7 @@ interface ButtonProps {
 export function Button({
   type = 'button',
   label,
+  testId,
   onClick,
   className,
   loading = false,
@@ -26,6 +28,7 @@ export function Button({
       title={label}
       onClick={onClick}
       aria-label={label}
+      data-testid={testId}
       disabled={loading || disabled}
       className={clsx(
         'flex min-w-36 items-center justify-center gap-2 border px-5 leading-10 shadow backdrop-blur-md duration-300 hover:border-amber-500 hover:shadow-amber-500/50',

src/shared/components/text-input/index.tsx

@@ -9,6 +9,7 @@ interface TextInputProps {
   name?: string;
   value?: string;
   label?: string;
+  testId?: string;
   tabIndex?: number;
   required?: boolean;
   className?: string;
@@ -25,6 +26,7 @@ export function TextInput({
   label,
   value,
   error,
+  testId,
   onChange,
   tabIndex,
   className,
@@ -58,6 +60,7 @@ export function TextInput({
           onChange={onChange}
           autoFocus={autoFocus}
           placeholder={placeholder}
+          data-testid={testId ?? id}
           className={clsx(INPUT_CLASSES, {
             'border-red-500': !!error
           })}
@@ -73,6 +76,7 @@ export function TextInput({
           required={required}
           onChange={onChange}
           placeholder={placeholder}
+          data-testid={testId ?? id}
           className={clsx(INPUT_CLASSES, 'min-h-48 px-4 py-2', {
             'border-red-500': !!error
           })}

src/shared/hooks/use-debounce.test.ts

@@ -0,0 +1,27 @@
+import { renderHook, act } from '@testing-library/react';
+
+import { useDebounce } from './use-debounce';
+
+jest.useFakeTimers();
+
+describe('useDebounce', () => {
+  it('should debounce value', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      {
+        initialProps: { value: 'a', delay: 300 }
+      }
+    );
+
+    expect(result.current).toBe('a');
+
+    rerender({ value: 'ab', delay: 300 });
+    expect(result.current).toBe('a');
+
+    act(() => {
+      jest.advanceTimersByTime(300);
+    });
+
+    expect(result.current).toBe('ab');
+  });
+});

src/shared/services/search-service.ts

@@ -2,11 +2,11 @@ import { ENDPOINTS } from '@/shared/api/constants';
 import { PostMetadata } from '@/shared/types/post';
 import { notify } from '@/shared/helpers';
 
-interface Response {
+export type SearchPostsResponse = {
   success: boolean;
   message?: string;
   data?: PostMetadata[];
-}
+};
 
 export const searchPosts = (value: string) => {
   return new Promise((resolve, reject) => {
@@ -18,7 +18,7 @@ export const searchPosts = (value: string) => {
       }
     })
       .then((rawResponse) => rawResponse.json())
-      .then((response: Response) => {
+      .then((response: SearchPostsResponse) => {
         if (response.success) {
           resolve(response?.data ?? []);
         } else {