test: add behavior tests for uncovered branches (#503)

Author: Shramkoweb

__tests__/api/reactions-slug.test.ts

@@ -113,6 +113,24 @@ describe('API /api/reactions/[slug]', () => {
         reactions: { heart: 6, beer: 1, trophy: 0 },
       });
     });
+
+    it('zero-fills types missing from the DB (first reaction on a post)', async () => {
+      mock$transaction.mockResolvedValue([
+        { slug: 'my-post', type: 'heart', count: 1n },
+        [{ type: 'heart', count: 1n }],
+      ]);
+      const { req, res, status, json } = createMockReqRes({
+        method: 'POST',
+        body: { type: 'heart' },
+      });
+
+      await handler(req, res);
+
+      expect(status).toHaveBeenCalledWith(200);
+      expect(json).toHaveBeenCalledWith({
+        reactions: { heart: 1, beer: 0, trophy: 0 },
+      });
+    });
   });
 
   describe('unsupported method', () => {

__tests__/blog.test.tsx

@@ -58,6 +58,13 @@ describe('Blog Page', () => {
     expect(blogPostsLinks).toHaveLength(POSTS.length + 1);
   });
 
+  test('uses singular "article" in the counter for exactly one post', () => {
+    render(<BlogPage posts={[POSTS[0]]} categories={CATEGORIES} />);
+    const heading = screen.getByRole('heading', { name: 'Blog 1 article' });
+
+    expect(heading).toBeInTheDocument();
+  });
+
   test('on search correct filtered exist articles', () => {
     render(<BlogPage posts={POSTS} categories={CATEGORIES} />);
     const inputElement = screen.getByLabelText('Search articles');

components/no-results/no-results.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+
+import { NoResults } from '@/components/no-results';
+
+describe('NoResults', () => {
+  it('echoes the searched term so the user can correct it', () => {
+    render(<NoResults searchValue="reactt" />);
+
+    expect(
+      screen.getByText(/We couldn't find any articles matching/),
+    ).toBeInTheDocument();
+    expect(screen.getByText('"reactt"')).toBeInTheDocument();
+  });
+
+  it('falls back to a generic message when the search term is empty', () => {
+    render(<NoResults searchValue="" />);
+
+    expect(
+      screen.getByText('No articles available at the moment.'),
+    ).toBeInTheDocument();
+  });
+});

components/tag/tag.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+
+import { Tag } from '@/components/tag';
+
+describe('Tag', () => {
+  it('renders an accessible link to a route (category navigation)', () => {
+    render(<Tag label="All" href="/blog" />);
+
+    expect(screen.getByRole('link', { name: 'All' })).toHaveAttribute(
+      'href',
+      '/blog',
+    );
+  });
+
+  it('keeps the link contract for the inline variant (post category tags)', () => {
+    render(<Tag variant="inline" label="#react" href="/blog/category/react" />);
+
+    expect(screen.getByRole('link', { name: '#react' })).toHaveAttribute(
+      'href',
+      '/blog/category/react',
+    );
+  });
+
+  it('renders an accessible in-page link for hash hrefs (section navigation)', () => {
+    render(<Tag label="Podcasts" href="#podcasts" />);
+
+    expect(screen.getByRole('link', { name: 'Podcasts' })).toHaveAttribute(
+      'href',
+      '#podcasts',
+    );
+  });
+});

components/theme-changer/theme-changer.test.tsx

@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { renderToString } from 'react-dom/server';
 
 const mockSetTheme = jest.fn();
+let mockResolvedTheme: 'light' | 'dark' = 'dark';
 
 jest.mock('next-themes', () => ({
   useTheme: () => ({
-    resolvedTheme: 'dark',
+    resolvedTheme: mockResolvedTheme,
     setTheme: mockSetTheme,
   }),
 }));
@@ -14,11 +16,41 @@ import { ThemeChanger } from '@/components/theme-changer';
 
 describe('ThemeChanger', () => {
   it('toggles from dark to light on click', async () => {
+    mockResolvedTheme = 'dark';
     const user = userEvent.setup();
     render(<ThemeChanger />);
 
-    await user.click(screen.getByRole('button'));
+    const button = screen.getByRole('button', {
+      name: 'Switch to light mode',
+    });
+    expect(button).toHaveAttribute('aria-pressed', 'true');
+
+    await user.click(button);
 
     expect(mockSetTheme).toHaveBeenCalledWith('light');
   });
+
+  it('toggles from light to dark on click', async () => {
+    mockResolvedTheme = 'light';
+    const user = userEvent.setup();
+    render(<ThemeChanger />);
+
+    const button = screen.getByRole('button', {
+      name: 'Switch to dark mode',
+    });
+    expect(button).toHaveAttribute('aria-pressed', 'false');
+
+    await user.click(button);
+
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('renders an icon-free placeholder on the server to avoid hydration mismatch', () => {
+    mockResolvedTheme = 'dark';
+
+    const html = renderToString(<ThemeChanger />);
+
+    expect(html).toContain('<button');
+    expect(html).not.toContain('svg');
+  });
 });

lib/schema.test.ts

@@ -86,6 +86,22 @@ describe('generateTechArticleSchema', () => {
     expect(schema.proficiencyLevel).toBe('Expert');
   });
 
+  it('should include dateModified when updateDate provided', () => {
+    const snippet = {
+      ...validSnippet,
+      updateDate: new Date('2024-05-10').getTime(),
+    };
+    const schema = generateTechArticleSchema(snippet);
+
+    expect(schema.dateModified).toBe('2024-05-10T00:00:00.000Z');
+  });
+
+  it('should not include dateModified when updateDate is null', () => {
+    const schema = generateTechArticleSchema(validSnippet);
+
+    expect(schema).not.toHaveProperty('dateModified');
+  });
+
   it('should use provided programmingLanguage', () => {
     const snippet = { ...validSnippet, programmingLanguage: 'TypeScript' };
     const schema = generateTechArticleSchema(snippet);