test(AppTemplate): create app/template.test.tsx (JhaSourav07#3081)

## Description

Creates `app/template.test.tsx` with 5 test cases covering the root
Next.js `Template` component. Framer-motion is mocked using
`vi.hoisted()` to avoid hoisting issues, allowing prop inspection
without a real animation environment.

**Tests:**
1. Renders children inside the motion wrapper
2. Verifies correct `initial` and `animate` props (`opacity`, `y`,
`duration`, `ease`)
3. Asserts nested DOM structure is preserved completely (section,
heading, paragraph, button)
4. Verifies component remounts when `key` changes, simulating Next.js
page navigation
5. Verifies correct `exit` props (`opacity: 0, y: -8`)

Fixes JhaSourav07#2289

## Pillar

- [ ] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview
N/A

## Checklist before requesting a review:

- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

app/template.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Template from './template';
+
+type MotionDivProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+  initial?: object;
+  animate?: object;
+  exit?: object;
+  transition?: object;
+};
+
+const mockMotionDiv = vi.hoisted(() =>
+  vi.fn(
+    ({ children, initial: _i, animate: _a, exit: _e, transition: _t, ...rest }: MotionDivProps) => (
+      <div data-testid="motion-wrapper" {...(rest as React.HTMLAttributes<HTMLDivElement>)}>
+        {children}
+      </div>
+    )
+  )
+);
+
+vi.mock('framer-motion', () => ({
+  motion: { div: mockMotionDiv },
+}));
+
+afterEach(() => {
+  cleanup();
+  mockMotionDiv.mockClear();
+});
+
+describe('Template', () => {
+  it('renders children inside the motion wrapper', () => {
+    render(
+      <Template>
+        <p data-testid="child">Hello CommitPulse</p>
+      </Template>
+    );
+
+    expect(screen.getByTestId('child').textContent).toBe('Hello CommitPulse');
+    expect(screen.getByTestId('motion-wrapper')).toBeDefined();
+  });
+
+  it('passes the correct initial and animate transition props to motion.div', () => {
+    render(
+      <Template>
+        <span>test</span>
+      </Template>
+    );
+
+    const props = mockMotionDiv.mock.lastCall![0] as MotionDivProps;
+    expect(props.initial).toEqual({ opacity: 0, y: 8 });
+    expect(props.animate).toEqual({ opacity: 1, y: 0 });
+    expect(props.transition).toEqual({ duration: 0.3, ease: 'easeInOut' });
+  });
+
+  it('preserves nested DOM structure completely', () => {
+    render(
+      <Template>
+        <section data-testid="section">
+          <h1 data-testid="heading">Title</h1>
+          <p data-testid="paragraph">Body text</p>
+          <button data-testid="action">Click me</button>
+        </section>
+      </Template>
+    );
+
+    const section = screen.getByTestId('section');
+    expect(section.querySelector('[data-testid="heading"]')?.textContent).toBe('Title');
+    expect(section.querySelector('[data-testid="paragraph"]')?.textContent).toBe('Body text');
+    expect(section.querySelector('[data-testid="action"]')?.textContent).toBe('Click me');
+  });
+
+  it('remounts and resets state when the key changes (page navigation)', () => {
+    const { rerender } = render(
+      <Template key="page-a">
+        <span data-testid="page-content">Page A</span>
+      </Template>
+    );
+
+    const callsAfterFirstRender = mockMotionDiv.mock.calls.length;
+    expect(callsAfterFirstRender).toBeGreaterThan(0);
+
+    rerender(
+      <Template key="page-b">
+        <span data-testid="page-content">Page B</span>
+      </Template>
+    );
+
+    expect(mockMotionDiv.mock.calls.length).toBeGreaterThan(callsAfterFirstRender);
+    expect(screen.getByTestId('page-content').textContent).toBe('Page B');
+  });
+
+  it('passes the correct exit transition props to motion.div', () => {
+    render(
+      <Template>
+        <span>test</span>
+      </Template>
+    );
+
+    const props = mockMotionDiv.mock.lastCall![0] as MotionDivProps;
+    expect(props.exit).toEqual({ opacity: 0, y: -8 });
+  });
+});