Add example tests

Author: kamdubiel

.github/actions/checkout/action.yml

@@ -0,0 +1,14 @@
+name: 📥 Checkout
+description: 'Pinned checkout wrapper'
+
+inputs:
+  fetch-depth:
+    description: 'Depth for git fetch (default 0 for full history)'
+    default: '0'
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5
+      with:
+        fetch-depth: ${{ inputs.fetch-depth }}

.github/actions/code-analysis/action.yml

@@ -1,11 +1,6 @@
 name: 👁️‍🗨️ Code Analysis
 description: 'Run code analysis'
 
-inputs:
-  github-token:
-    description: 'GitHub token for API access'
-    required: true
-
 runs:
   using: 'composite'
   steps:

.github/actions/node-setup/action.yml

@@ -1,6 +1,11 @@
 name: 💻 Node.js setup
 description: 'Setup Node.js environment and install dependencies'
 
+inputs:
+  install-dependencies:
+    description: 'Set to false to skip pnpm install (for tooling-only jobs)'
+    default: 'true'
+
 runs:
   using: 'composite'
   steps:
@@ -9,37 +14,22 @@ runs:
       shell: bash
 
     - name: 🎰 Setup Node
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
       with:
         node-version-file: 'package.json'
-
-    - name: 🎈 Install pNPM
-      uses: pnpm/action-setup@v3
-      with:
-        run_install: false
-
-    - name: 📀 Get pnpm store directory
-      run: |
-        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-      shell: bash
-
-    - name: 💾 Setup pnpm cache
-      uses: actions/cache@v4
-      with:
-        path: ${{ env.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
+        cache: 'pnpm'
+        cache-dependency-path: 'pnpm-lock.yaml'
 
     - name: 📥 Install dependencies
+      if: inputs.install-dependencies == 'true'
       run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
       shell: bash
 
     - name: 💾 Cache turbo build setup
-      uses: actions/cache@v4
+      uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830
       with:
         path: .turbo
-        key: ${{ runner.os }}-turbo-${{ github.head_ref || github.ref_name }}-${{ github.sha }}
+        key: ${{ runner.os }}-turbo-${{ github.head_ref || github.ref_name }}-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: |
           ${{ runner.os }}-turbo-${{ github.head_ref || github.ref_name }}-
           ${{ runner.os }}-turbo-

.github/actions/test-coverage/action.yml

@@ -38,6 +38,6 @@ runs:
       env:
         GITHUB_TOKEN: ${{ inputs.github-token }}
         PR_NUMBER: ${{ github.event.pull_request.number }}
-        BASE_COVERAGE_ROOT: base-coverage/coverage
+        BASE_COVERAGE_ROOT: base-coverage
       run: node scripts/comment-coverage-diff.js
       shell: bash

.github/workflows/base-coverage.yml

@@ -6,12 +6,16 @@ on:
       - main
   workflow_dispatch:
 
+concurrency:
+  group: base-coverage-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   upload-coverage:
     runs-on: ubuntu-24.04
     steps:
       - name: 📥 Checkout Repository
-        uses: actions/checkout@v4
+        uses: ./.github/actions/checkout
 
       - name: 💻 Node setup
         uses: ./.github/actions/node-setup
@@ -25,7 +29,7 @@ jobs:
         shell: bash
 
       - name: 📤 Upload coverage artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
         with:
           name: base-coverage
           path: coverage

.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+name: 🧪 CI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+permissions:
+  contents: read # required so checkout/actions using GITHUB_TOKEN can read repo
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: 📥 Checkout Repository
+        uses: ./.github/actions/checkout
+
+      - name: 💻 Node setup
+        uses: ./.github/actions/node-setup
+
+      - name: 👁️‍🗨️ Code Analysis
+        uses: ./.github/actions/code-analysis
+
+  licenses:
+    runs-on: ubuntu-24.04
+    needs: lint
+    steps:
+      - name: 📥 Checkout Repository
+        uses: ./.github/actions/checkout
+
+      - name: 💻 Node setup
+        uses: ./.github/actions/node-setup
+
+      - name: 🗳️ Check Licenses
+        uses: ./.github/actions/check-licenses
+
+  build:
+    runs-on: ubuntu-24.04
+    needs: lint
+    steps:
+      - name: 📥 Checkout Repository
+        uses: ./.github/actions/checkout
+
+      - name: 💻 Node setup
+        uses: ./.github/actions/node-setup
+
+      - name: 🏗️ Build packages
+        run: pnpm build
+        shell: bash
+
+  coverage:
+    runs-on: ubuntu-24.04
+    needs: lint
+    permissions:
+      actions: read # download base coverage artifact via workflow run APIs
+      contents: read # checkout
+      pull-requests: write # comment coverage diff on PRs
+    steps:
+      - name: 📥 Checkout Repository
+        uses: ./.github/actions/checkout
+
+      - name: 💻 Node setup
+        uses: ./.github/actions/node-setup
+
+      - name: 🧪 Test Coverage
+        uses: ./.github/actions/test-coverage
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/code-analysis.yml

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../card';
+import { Button } from '../button';
+
+describe('Card component suite', () => {
+	it('renders all structural slots with custom classNames', () => {
+		render(
+			<Card className="test-card" data-testid="card-root">
+				<CardHeader className="header-slot">
+					<CardTitle>Plan</CardTitle>
+					<CardDescription>Choose the perfect plan</CardDescription>
+					<CardAction>
+						<Button>Primary action</Button>
+					</CardAction>
+				</CardHeader>
+				<CardContent className="content-slot">Card body content</CardContent>
+				<CardFooter className="footer-slot">Footer CTA</CardFooter>
+			</Card>
+		);
+
+		expect(screen.getByTestId('card-root')).toHaveClass('test-card');
+		expect(screen.getByText('Plan')).toHaveAttribute('data-slot', 'card-title');
+		expect(screen.getByText('Choose the perfect plan')).toHaveAttribute('data-slot', 'card-description');
+		expect(screen.getByRole('button', { name: /primary action/i })).toBeInTheDocument();
+		expect(screen.getByText('Card body content')).toHaveClass('content-slot');
+		expect(screen.getByText('Footer CTA')).toHaveClass('footer-slot');
+	});
+
+	it('forwards arbitrary props down to the DOM nodes', () => {
+		render(
+			<Card id="pricing-card" aria-label="Pricing overview">
+				<CardContent>Details</CardContent>
+			</Card>
+		);
+
+		const card = screen.getByLabelText('Pricing overview');
+		expect(card).toHaveAttribute('id', 'pricing-card');
+	});
+});

packages/ui/src/components/__tests__/card.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Input } from '../input';
+
+describe('Input component', () => {
+	it('renders with placeholder and custom classes', () => {
+		render(<Input placeholder="Email" className="custom-input" data-testid="input-element" />);
+
+		const input = screen.getByPlaceholderText('Email');
+		expect(input).toHaveClass('custom-input');
+		expect(input).toHaveAttribute('data-slot', 'input');
+	});
+
+	it('accepts user input and forwards native props', async () => {
+		const handleChange = jest.fn();
+		const user = userEvent.setup();
+
+		render(<Input aria-invalid="true" onChange={handleChange} />);
+
+		const input = screen.getByRole('textbox');
+		await user.type(input, 'Hello');
+
+		expect(handleChange).toHaveBeenCalled();
+		expect(input).toHaveAttribute('aria-invalid', 'true');
+		expect(input).toHaveValue('Hello');
+	});
+});

packages/ui/src/components/__tests__/input.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+
+import { Label } from '../label';
+
+describe('Label component', () => {
+	it('associates with form controls via htmlFor', () => {
+		render(
+			<div>
+				<Label htmlFor="field">Field label</Label>
+				<input id="field" />
+			</div>
+		);
+
+		const label = screen.getByText('Field label');
+		expect(label).toHaveAttribute('for', 'field');
+	});
+
+	it('respects custom class names and data attributes', () => {
+		render(
+			<Label className="text-accent" data-testid="label">
+				Content
+			</Label>
+		);
+
+		const label = screen.getByTestId('label');
+		expect(label).toHaveClass('text-accent');
+		expect(label).toHaveAttribute('data-slot', 'label');
+	});
+});