chore: add unit tests

Author: Marfuen

apps/app/src/app/(app)/[orgId]/auditor/(overview)/page.tsx

@@ -1,18 +1,11 @@
 import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import { serverApi } from '@/lib/api-server';
+import { parseRolesString } from '@/lib/permissions';
 import { Role } from '@db';
 import type { Metadata } from 'next';
 import { notFound, redirect } from 'next/navigation';
 import { AuditorView } from './components/AuditorView';
 
-function parseRolesString(rolesStr: string | null | undefined): Role[] {
-  if (!rolesStr) return [];
-  return rolesStr
-    .split(',')
-    .map((r) => r.trim())
-    .filter((r) => r in Role) as Role[];
-}
-
 interface PeopleMember {
   userId: string;
   role: string;

apps/app/src/app/(app)/[orgId]/controls/[controlId]/components/ControlDeleteDialog.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  setMockPermissions,
+  ADMIN_PERMISSIONS,
+  AUDITOR_PERMISSIONS,
+  NO_PERMISSIONS,
+  mockHasPermission,
+} from '@/test-utils/mocks/permissions';
+
+vi.mock('@/hooks/use-permissions', () => ({
+  usePermissions: () => ({
+    permissions: {},
+    hasPermission: mockHasPermission,
+  }),
+}));
+
+// Mock useControls hook
+const mockDeleteControl = vi.fn();
+vi.mock('../../hooks/useControls', () => ({
+  useControls: () => ({
+    deleteControl: mockDeleteControl,
+    controls: [],
+    isLoading: false,
+    error: null,
+    mutate: vi.fn(),
+    createControl: vi.fn(),
+  }),
+}));
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+// Mock sonner
+vi.mock('sonner', () => ({
+  toast: { info: vi.fn(), error: vi.fn(), success: vi.fn() },
+}));
+
+// Mock @comp/ui components
+vi.mock('@comp/ui/button', () => ({
+  Button: ({ children, disabled, ...props }: any) => (
+    <button disabled={disabled} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('@comp/ui/dialog', () => ({
+  Dialog: ({ children, open }: any) =>
+    open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children }: any) => (
+    <div data-testid="dialog-content">{children}</div>
+  ),
+  DialogDescription: ({ children }: any) => <p>{children}</p>,
+  DialogFooter: ({ children }: any) => <div>{children}</div>,
+  DialogHeader: ({ children }: any) => <div>{children}</div>,
+  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
+}));
+
+vi.mock('@comp/ui/form', () => ({
+  Form: ({ children, ...props }: any) => (
+    <div data-testid="form-provider" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock lucide-react
+vi.mock('lucide-react', () => ({
+  Trash2: () => <span data-testid="trash-icon" />,
+}));
+
+import { ControlDeleteDialog } from './ControlDeleteDialog';
+
+const mockControl = {
+  id: 'ctrl-1',
+  name: 'Access Control',
+  description: 'Test control',
+  organizationId: 'org-1',
+  createdAt: new Date('2024-01-01'),
+  updatedAt: new Date('2024-01-01'),
+  lastUpdatedBy: null,
+  projectId: null,
+} as any;
+
+const defaultProps = {
+  isOpen: true,
+  onClose: vi.fn(),
+  control: mockControl,
+};
+
+describe('ControlDeleteDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Permission gating', () => {
+    it('enables the delete button when user has control:delete permission', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).not.toBeDisabled();
+    });
+
+    it('disables the delete button when user lacks control:delete permission (auditor)', () => {
+      setMockPermissions(AUDITOR_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('disables the delete button when user has no permissions', () => {
+      setMockPermissions(NO_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('checks the correct resource and action for permission', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      expect(mockHasPermission).toHaveBeenCalledWith('control', 'delete');
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders dialog title and description', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      expect(screen.getByText('Delete Control')).toBeInTheDocument();
+      expect(
+        screen.getByText(/are you sure you want to delete this control/i),
+      ).toBeInTheDocument();
+    });
+
+    it('renders the cancel button that is always enabled', () => {
+      setMockPermissions(AUDITOR_PERMISSIONS);
+
+      render(<ControlDeleteDialog {...defaultProps} />);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      expect(cancelButton).not.toBeDisabled();
+    });
+
+    it('does not render when isOpen is false', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(
+        <ControlDeleteDialog {...defaultProps} isOpen={false} />,
+      );
+
+      expect(screen.queryByText('Delete Control')).not.toBeInTheDocument();
+    });
+  });
+});

apps/app/src/app/(app)/[orgId]/controls/[controlId]/components/ControlDeleteDialog.tsx

@@ -19,6 +19,7 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 import { useControls } from '../../hooks/useControls';
+import { usePermissions } from '@/hooks/use-permissions';
 
 const formSchema = z.object({
   comment: z.string().optional(),
@@ -34,6 +35,7 @@ interface ControlDeleteDialogProps {
 
 export function ControlDeleteDialog({ isOpen, onClose, control }: ControlDeleteDialogProps) {
   const { deleteControl } = useControls();
+  const { hasPermission } = usePermissions();
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -72,7 +74,7 @@ export function ControlDeleteDialog({ isOpen, onClose, control }: ControlDeleteD
               <Button type="button" variant="outline" onClick={onClose} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button type="submit" variant="destructive" disabled={isSubmitting} className="gap-2">
+              <Button type="submit" variant="destructive" disabled={isSubmitting || !hasPermission('control', 'delete')} className="gap-2">
                 {isSubmitting ? (
                   <span className="flex items-center gap-2">
                     <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />

apps/app/src/app/(app)/[orgId]/frameworks/[frameworkInstanceId]/components/FrameworkDeleteDialog.test.tsx

@@ -0,0 +1,173 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  setMockPermissions,
+  ADMIN_PERMISSIONS,
+  AUDITOR_PERMISSIONS,
+  NO_PERMISSIONS,
+  mockHasPermission,
+} from '@/test-utils/mocks/permissions';
+
+vi.mock('@/hooks/use-permissions', () => ({
+  usePermissions: () => ({
+    permissions: {},
+    hasPermission: mockHasPermission,
+  }),
+}));
+
+// Mock useFrameworks hook
+const mockDeleteFramework = vi.fn();
+vi.mock('../../hooks/useFrameworks', () => ({
+  useFrameworks: () => ({
+    deleteFramework: mockDeleteFramework,
+    frameworks: [],
+    isLoading: false,
+    error: null,
+    mutate: vi.fn(),
+    addFrameworks: vi.fn(),
+  }),
+}));
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+// Mock sonner
+vi.mock('sonner', () => ({
+  toast: { info: vi.fn(), error: vi.fn(), success: vi.fn() },
+}));
+
+// Mock @comp/ui components
+vi.mock('@comp/ui/button', () => ({
+  Button: ({ children, disabled, ...props }: any) => (
+    <button disabled={disabled} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('@comp/ui/dialog', () => ({
+  Dialog: ({ children, open }: any) =>
+    open ? <div data-testid="dialog">{children}</div> : null,
+  DialogContent: ({ children }: any) => (
+    <div data-testid="dialog-content">{children}</div>
+  ),
+  DialogDescription: ({ children }: any) => <p>{children}</p>,
+  DialogFooter: ({ children }: any) => <div>{children}</div>,
+  DialogHeader: ({ children }: any) => <div>{children}</div>,
+  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
+}));
+
+vi.mock('@comp/ui/form', () => ({
+  Form: ({ children, ...props }: any) => (
+    <div data-testid="form-provider" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock lucide-react
+vi.mock('lucide-react', () => ({
+  Trash2: () => <span data-testid="trash-icon" />,
+}));
+
+import { FrameworkDeleteDialog } from './FrameworkDeleteDialog';
+
+const mockFrameworkInstance = {
+  id: 'fi-1',
+  organizationId: 'org-1',
+  frameworkId: 'fw-1',
+  framework: {
+    id: 'fw-1',
+    name: 'SOC 2',
+    description: 'SOC 2 Type II compliance framework',
+  },
+  controls: [],
+  createdAt: new Date('2024-01-01'),
+  updatedAt: new Date('2024-01-01'),
+} as any;
+
+const defaultProps = {
+  isOpen: true,
+  onClose: vi.fn(),
+  frameworkInstance: mockFrameworkInstance,
+};
+
+describe('FrameworkDeleteDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Permission gating', () => {
+    it('enables the delete button when user has framework:delete permission', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).not.toBeDisabled();
+    });
+
+    it('disables the delete button when user lacks framework:delete permission (auditor)', () => {
+      setMockPermissions(AUDITOR_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('disables the delete button when user has no permissions', () => {
+      setMockPermissions(NO_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i });
+      expect(deleteButton).toBeDisabled();
+    });
+
+    it('checks the correct resource and action for permission', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      expect(mockHasPermission).toHaveBeenCalledWith('framework', 'delete');
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders dialog title and description', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      expect(screen.getByText('Delete Framework')).toBeInTheDocument();
+      expect(
+        screen.getByText(/are you sure you want to delete this framework/i),
+      ).toBeInTheDocument();
+    });
+
+    it('renders the cancel button that is always enabled', () => {
+      setMockPermissions(AUDITOR_PERMISSIONS);
+
+      render(<FrameworkDeleteDialog {...defaultProps} />);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      expect(cancelButton).not.toBeDisabled();
+    });
+
+    it('does not render when isOpen is false', () => {
+      setMockPermissions(ADMIN_PERMISSIONS);
+
+      render(
+        <FrameworkDeleteDialog {...defaultProps} isOpen={false} />,
+      );
+
+      expect(screen.queryByText('Delete Framework')).not.toBeInTheDocument();
+    });
+  });
+});