chore: jest unit testing added

.eslintignore

@@ -13,3 +13,6 @@ cli/**
 # 👇 Storybook build outputs (keep sources linted)
 storybook-static/**
 out/storybook/**
+
+# caches & logs
+.eslintcache

.eslintrc.json

@@ -21,6 +21,23 @@
         "@typescript-eslint/ban-ts-comment": "off"
       }
     },
+    {
+      "files": ["jest.config.js"],
+      "env": { "node": true },
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    },
+    {
+      "files": ["jest.setup.tsx", "**/__tests__/**/*.{ts,tsx}"],
+      "env": { "jest": true, "browser": true },
+      "rules": {
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          { "argsIgnorePattern": "^_" }
+        ]
+      }
+    },
     {
       "files": [".storybook/**/*.{js,cjs,mjs,ts,tsx}"],
       "env": { "node": true }

.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches: [dev]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run typecheck
+      - run: npm run test:ci

.gitignore

@@ -42,3 +42,10 @@ cli/node_modules
 # 👇 Storybook build outputs
 storybook-static/
 out/storybook/
+
+# --- Tests & tooling caches ---
+/coverage/
+/junit.xml
+/.jest/
+/.eslintcache
+/.cache/

.prettierignore

@@ -13,3 +13,5 @@ yarn.lock
 # 👇 Storybook build outputs (skip formatting on generated files)
 storybook-static
 out/storybook
+
+**/__snapshots__/**

__tests__/pricing-card-one.test.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PricingCardOne from '@/components/core/pricing-card-one';
+
+describe('PricingCardOne', () => {
+  test('renders plan name, subtitle, numeric price and period', () => {
+    render(
+      <PricingCardOne
+        name='Starter'
+        subtitle='the starter choice'
+        price={9}
+        currency='$'
+        periodLabel='/month'
+        features={[
+          { label: 'Feature A' },
+          { label: 'Feature B', included: false },
+        ]}
+      />
+    );
+
+    // ✅ match the actual plan name
+    expect(
+      screen.getByRole('region', { name: /starter plan/i })
+    ).toBeInTheDocument();
+
+    // ✅ and its heading
+    expect(
+      screen.getByRole('heading', { name: /starter/i })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/the starter choice/i)).toBeInTheDocument();
+
+    // Price + period (numeric case uses currency + number)
+    expect(screen.getByText(/\$9/)).toBeInTheDocument();
+    expect(screen.getByText('/month')).toBeInTheDocument();
+
+    // Features list & labels
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByText(/feature a/i)).toBeInTheDocument();
+    expect(screen.getByText(/feature b/i)).toBeInTheDocument();
+  });
+
+  test('invokes onClick when CTA is a button', async () => {
+    const user = userEvent.setup();
+    const onClick = jest.fn();
+
+    render(
+      <PricingCardOne
+        name='Starter'
+        price={9}
+        periodLabel='/month'
+        features={[]}
+        cta={{ label: 'Choose Plan', onClick }}
+      />
+    );
+
+    // Accessible name defaults to "Choose <name>"
+    const btn = screen.getByRole('button', { name: /choose starter/i });
+    await user.click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders CTA as a link when href is provided', () => {
+    render(
+      <PricingCardOne
+        name='Business'
+        price='€25'
+        periodLabel='/month'
+        features={[]}
+        cta={{ href: '#', label: 'Choose Plan' }}
+      />
+    );
+
+    // Accessible name defaults to "Choose <name>"
+    const link = screen.getByRole('link', { name: /choose business/i });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#');
+  });
+
+  test('shows recommended badge and custom label', () => {
+    render(
+      <PricingCardOne
+        name='Pro'
+        price={49}
+        periodLabel='/month'
+        recommended
+        recommendedLabel='Popular'
+        features={[]}
+      />
+    );
+
+    expect(screen.getByText(/popular/i)).toBeInTheDocument();
+  });
+
+  test('supports string price (e.g., "Free")', () => {
+    render(
+      <PricingCardOne
+        name='Free Tier'
+        price='Free'
+        periodLabel='/forever'
+        features={[{ label: 'Basic Usage' }]}
+      />
+    );
+
+    // Exact match to avoid colliding with heading “Free Tier”
+    expect(screen.getByText(/^Free$/i)).toBeInTheDocument();
+    expect(screen.getByText('/forever')).toBeInTheDocument();
+  });
+});

__tests__/pricing-card-two.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PricingCardTwo from '@/components/core/pricing-card-two';
+
+describe('PricingCardTwo', () => {
+  test('renders plan name, price and features', () => {
+    render(
+      <PricingCardTwo
+        name='Team'
+        price={15}
+        periodLabel='/month'
+        features={[
+          { label: 'Feature A' },
+          { label: 'Feature B', included: false },
+        ]}
+        cta={{ label: 'Choose Plan', onClick: () => {} }}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: /team/i })).toBeInTheDocument();
+    expect(screen.getByText(/\$?15/i)).toBeInTheDocument();
+    expect(screen.getByText(/feature a/i)).toBeInTheDocument();
+    expect(screen.getByText(/feature b/i)).toBeInTheDocument();
+  });
+
+  test('fires onClick CTA', async () => {
+    const user = userEvent.setup();
+    const onClick = jest.fn();
+
+    render(
+      <PricingCardTwo
+        name='Starter'
+        price={9}
+        periodLabel='/month'
+        features={[]}
+        cta={{ label: 'Choose Plan', onClick }}
+      />
+    );
+
+    // accessible name is "Choose Starter" (component uses aria-label with plan name)
+    const btn = screen.getByRole('button', { name: /choose/i });
+    await user.click(btn);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders link CTA when href is provided', () => {
+    render(
+      <PricingCardTwo
+        name='Business'
+        price='€25'
+        periodLabel='/month'
+        features={[]}
+        cta={{ href: '#', label: 'Choose Plan' }}
+      />
+    );
+
+    // accessible name is "Choose Business"
+    const link = screen.getByRole('link', { name: /choose/i });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#');
+  });
+});

__tests__/timeline-rail.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import TimelineRail from '@/components/core/timeline-rail';
+
+describe('TimelineRail', () => {
+  test('renders labels and captions', () => {
+    render(
+      <TimelineRail
+        items={[
+          { label: 'Spec', caption: '01', active: true, onClick: () => {} },
+          { label: 'Implement', caption: '02', onClick: () => {} },
+          { label: 'QA', caption: '03', href: '#' },
+        ]}
+      />
+    );
+
+    expect(screen.getByLabelText(/spec|01/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/implement|02/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/qa|03/i)).toBeInTheDocument();
+  });
+});

jest.config.js

@@ -0,0 +1,38 @@
+const nextJest = require('next/jest');
+const createJestConfig = nextJest({ dir: './' });
+
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  testEnvironment: 'jest-environment-jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.tsx'],
+  testMatch: ['<rootDir>/**/__tests__/**/*.(test|spec).(ts|tsx)'],
+
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+
+  // 👇 ignore the CLI package to avoid naming collision
+  modulePathIgnorePatterns: ['<rootDir>/cli/'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/.next/',
+    '/out/',
+    '/storybook-static/',
+    '/dist/',
+    '/build/',
+    '/cli/', // 👈 keep tests from looking into cli too
+  ],
+  watchPathIgnorePatterns: ['<rootDir>/cli/'],
+
+  collectCoverageFrom: [
+    'components/**/*.{ts,tsx}',
+    '!components/**/index.{ts,tsx}',
+    '!**/*.stories.{ts,tsx}',
+  ],
+  coverageDirectory: '<rootDir>/coverage',
+  coverageThreshold: {
+    global: { statements: 0, branches: 0, functions: 0, lines: 0 },
+  },
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.tsx

@@ -0,0 +1,18 @@
+// jest.setup.ts
+import '@testing-library/jest-dom';
+
+// Mock Next.js router (if components use it)
+jest.mock('next/router', () => require('next-router-mock'));
+
+// Minimal next/link + next/image mocks (avoid SSR/optimizations in tests)
+jest.mock('next/link', () => {
+  return ({ children, href }: any) => <a href={href}>{children}</a>;
+});
+
+jest.mock('next/image', () => {
+  return function MockNextImage(props: any) {
+    // pass-through <img> so Testing Library can query by alt, etc.
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img {...props} alt={props.alt ?? ''} />;
+  };
+});