@nextsparkjs/theme-default 0.1.0-beta.17 → 0.1.0-beta.171

package/tests/jest/__mocks__/@nextsparkjs/registries/permissions-registry.ts

@@ -0,0 +1,160 @@
+/**
+ * Mock Permissions Registry for Jest tests
+ */
+
+export type Permission = string
+
+export interface ResolvedPermission {
+  id: string
+  label: string
+  description: string
+  category: string
+  roles: string[]
+  dangerous: boolean
+  source: 'core' | 'theme'
+  disabled?: boolean
+}
+
+export interface PermissionUISection {
+  id: string
+  label: string
+  description: string
+  categories: string[]
+}
+
+export interface RolesConfig {
+  additionalRoles?: string[]
+  hierarchy?: Record<string, number>
+  displayNames?: Record<string, string>
+  descriptions?: Record<string, string>
+}
+
+// Mock permissions data
+export const ALL_RESOLVED_PERMISSIONS: ResolvedPermission[] = [
+  {
+    id: 'tasks.create',
+    label: 'Create tasks',
+    description: 'Can create new tasks',
+    category: 'Tasks',
+    roles: ['owner', 'admin', 'member'],
+    dangerous: false,
+    source: 'theme',
+  },
+  {
+    id: 'tasks.read',
+    label: 'View tasks',
+    description: 'Can view task details',
+    category: 'Tasks',
+    roles: ['owner', 'admin', 'member'],
+    dangerous: false,
+    source: 'theme',
+  },
+  {
+    id: 'tasks.update',
+    label: 'Edit tasks',
+    description: 'Can modify task information',
+    category: 'Tasks',
+    roles: ['owner', 'admin', 'member'],
+    dangerous: false,
+    source: 'theme',
+  },
+  {
+    id: 'tasks.delete',
+    label: 'Delete tasks',
+    description: 'Can delete tasks',
+    category: 'Tasks',
+    roles: ['owner', 'admin'],
+    dangerous: true,
+    source: 'theme',
+  },
+]
+
+export const ALL_PERMISSIONS: Permission[] = ALL_RESOLVED_PERMISSIONS.map(p => p.id)
+
+export const ALL_PERMISSIONS_SET = new Set(ALL_PERMISSIONS)
+
+export const AVAILABLE_ROLES: readonly string[] = ['owner', 'admin', 'editor', 'member', 'viewer']
+
+export const ROLE_HIERARCHY: Record<string, number> = {
+  owner: 100,
+  admin: 50,
+  editor: 30,
+  member: 10,
+  viewer: 1,
+}
+
+export const ROLE_DISPLAY_NAMES: Record<string, string> = {
+  owner: 'common.teamRoles.owner',
+  admin: 'common.teamRoles.admin',
+  editor: 'common.teamRoles.editor',
+  member: 'common.teamRoles.member',
+  viewer: 'common.teamRoles.viewer',
+}
+
+export const ROLE_DESCRIPTIONS: Record<string, string> = {
+  owner: 'Full team control, cannot be removed',
+  admin: 'Manage team members and settings',
+  editor: 'Can edit content but not manage team',
+  member: 'Standard team access',
+  viewer: 'Read-only access to team resources',
+}
+
+export const CUSTOM_ROLES: RolesConfig = {
+  additionalRoles: ['editor'],
+  hierarchy: { editor: 30 },
+  displayNames: { editor: 'common.teamRoles.editor' },
+  descriptions: { editor: 'Can edit content but not manage team' },
+}
+
+export const PERMISSIONS_BY_ROLE: Record<string, Set<Permission>> = {
+  owner: new Set(ALL_PERMISSIONS),
+  admin: new Set(['tasks.create', 'tasks.read', 'tasks.update', 'tasks.delete']),
+  editor: new Set(['tasks.create', 'tasks.read', 'tasks.update']),
+  member: new Set(['tasks.create', 'tasks.read', 'tasks.update']),
+  viewer: new Set(['tasks.read']),
+}
+
+export const ROLE_PERMISSIONS_ARRAY: Record<string, Permission[]> = {
+  owner: [...ALL_PERMISSIONS],
+  admin: ['tasks.create', 'tasks.read', 'tasks.update', 'tasks.delete'],
+  editor: ['tasks.create', 'tasks.read', 'tasks.update'],
+  member: ['tasks.create', 'tasks.read', 'tasks.update'],
+  viewer: ['tasks.read'],
+}
+
+export const PERMISSIONS_BY_CATEGORY: Record<string, ResolvedPermission[]> = {
+  Tasks: ALL_RESOLVED_PERMISSIONS,
+}
+
+export const FULL_MATRIX: Record<Permission, Record<string, boolean>> = {}
+for (const perm of ALL_RESOLVED_PERMISSIONS) {
+  FULL_MATRIX[perm.id] = {}
+  for (const role of AVAILABLE_ROLES) {
+    FULL_MATRIX[perm.id][role] = PERMISSIONS_BY_ROLE[role]?.has(perm.id) ?? false
+  }
+}
+
+export const UI_SECTIONS: PermissionUISection[] = [
+  {
+    id: 'entities',
+    label: 'Entities',
+    description: 'Entity-specific permissions',
+    categories: ['Tasks'],
+  },
+]
+
+export const TEAM_PERMISSIONS_RAW = []
+export const TEAM_PERMISSIONS_BY_ROLE: Record<string, string[]> = {}
+
+export const PERMISSIONS_METADATA = {
+  totalPermissions: ALL_PERMISSIONS.length,
+  corePermissions: 0,
+  teamPermissions: 0,
+  featurePermissions: 0,
+  entityPermissions: ALL_RESOLVED_PERMISSIONS.length,
+  customRoles: 0,
+  availableRoles: AVAILABLE_ROLES.length,
+  categories: Object.keys(PERMISSIONS_BY_CATEGORY).length,
+  generatedAt: new Date().toISOString(),
+  theme: 'default',
+}

package/tests/jest/__mocks__/@nextsparkjs/registries/theme-registry.ts

@@ -0,0 +1,68 @@
+/**
+ * Mock Theme Registry for Jest tests
+ */
+
+export interface ThemeEntity {
+  name: string
+  source: string
+  config: any
+}
+
+export interface ThemeRouteFile {
+  path: string
+  type: 'api' | 'page'
+  methods?: string[]
+}
+
+export interface ThemeRegistryEntry {
+  name: string
+  slug: string
+  displayName: string
+  description: string
+  version: string
+  entities: ThemeEntity[]
+  routes: ThemeRouteFile[]
+  middlewares: any[]
+  plugins: string[]
+  path: string
+}
+
+export const THEME_REGISTRY: Record<string, ThemeRegistryEntry> = {
+  default: {
+    name: 'default',
+    slug: 'default',
+    displayName: 'Default Theme',
+    description: 'Default theme for NextSpark',
+    version: '1.0.0',
+    entities: [
+      { name: 'posts', source: 'default', config: { name: 'posts', label: 'Posts' } }
+    ],
+    routes: [
+      { path: '/api/v1/posts', type: 'api', methods: ['GET', 'POST'] }
+    ],
+    middlewares: [],
+    plugins: [],
+    path: 'contents/themes/default',
+  },
+}
+
+export type ThemeName = keyof typeof THEME_REGISTRY | string
+
+export const THEME_METADATA = {
+  generated: new Date().toISOString(),
+  activeTheme: 'default',
+  totalThemes: Object.keys(THEME_REGISTRY).length,
+  totalThemeEntities: 1,
+  totalThemeRoutes: 1,
+  themes: Object.keys(THEME_REGISTRY),
+}
+
+// Helper function for getting active theme
+export function getActiveTheme(): ThemeRegistryEntry | undefined {
+  return THEME_REGISTRY[THEME_METADATA.activeTheme]
+}
+
+// Helper function for getting theme by name
+export function getTheme(name: string): ThemeRegistryEntry | undefined {
+  return THEME_REGISTRY[name]
+}

package/tests/jest/__mocks__/jose.js

@@ -0,0 +1,22 @@
+/**
+ * Mock for jose package
+ * Resolves ES module import issues in Jest tests
+ */
+
+module.exports = {
+  jwtVerify: jest.fn(),
+  SignJWT: jest.fn().mockImplementation(() => ({
+    setProtectedHeader: jest.fn().mockReturnThis(),
+    setIssuedAt: jest.fn().mockReturnThis(),
+    setExpirationTime: jest.fn().mockReturnThis(),
+    sign: jest.fn().mockResolvedValue('mock-jwt-token')
+  })),
+  importJWK: jest.fn(),
+  generateSecret: jest.fn(),
+  createRemoteJWKSet: jest.fn(),
+  errors: {
+    JWTExpired: class JWTExpired extends Error {},
+    JWTInvalid: class JWTInvalid extends Error {},
+    JWTClaimValidationFailed: class JWTClaimValidationFailed extends Error {}
+  }
+}

package/tests/jest/__mocks__/next/image.js

@@ -0,0 +1,15 @@
+/**
+ * Mock for next/image
+ */
+const React = require('react')
+
+const Image = ({ src, alt, ...props }) => {
+  return React.createElement('img', {
+    src: typeof src === 'object' ? src.src : src,
+    alt: alt || '',
+    ...props,
+  })
+}
+
+module.exports = Image
+module.exports.default = Image

package/tests/jest/__mocks__/next-server.js

@@ -0,0 +1,56 @@
+/**
+ * Mock for next/server
+ * Provides NextRequest and NextResponse mocks for API testing
+ */
+
+class MockNextRequest {
+  constructor(url, options = {}) {
+    this.url = url
+    this.method = options.method || 'GET'
+    this.headers = new Map(Object.entries(options.headers || {}))
+    this._body = options.body
+  }
+
+  async json() {
+    if (!this._body) return {}
+    try {
+      return typeof this._body === 'string' ? JSON.parse(this._body) : this._body
+    } catch {
+      throw new SyntaxError('Invalid JSON')
+    }
+  }
+
+  async text() {
+    return this._body || ''
+  }
+}
+
+class MockNextResponse {
+  constructor(body, options = {}) {
+    this.body = body
+    this.status = options.status || 200
+    this.statusText = options.statusText || 'OK'
+    this.headers = new Map(Object.entries(options.headers || {}))
+  }
+
+  async json() {
+    if (!this.body) return {}
+    try {
+      return typeof this.body === 'string' ? JSON.parse(this.body) : this.body
+    } catch {
+      throw new SyntaxError('Invalid JSON')
+    }
+  }
+
+  static json(data, options = {}) {
+    return new MockNextResponse(data, {
+      ...options,
+      headers: { 'Content-Type': 'application/json', ...options.headers }
+    })
+  }
+}
+
+module.exports = {
+  NextRequest: MockNextRequest,
+  NextResponse: MockNextResponse
+}

package/tests/jest/components/post-header.test.tsx

@@ -0,0 +1,377 @@
+/**
+ * Unit Tests - PostHeader Component
+ *
+ * Tests PostHeader component logic and rendering:
+ * - Renders title, excerpt, and metadata
+ * - Handles optional fields (featuredImage, excerpt, categories)
+ * - Displays category badges with colors
+ * - Formats dates correctly
+ * - data-cy attribute presence
+ *
+ * Focus on component behavior WITHOUT full E2E interaction.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { PostHeader } from '@/themes/default/entities/posts/components/post-header'
+
+describe('PostHeader Component', () => {
+  const mockPost = {
+    title: 'Test Post Title',
+    excerpt: 'This is a test excerpt for the post',
+    featuredImage: 'https://example.com/image.jpg',
+    createdAt: '2024-12-16T10:00:00.000Z',
+    categories: [
+      { id: 'cat-1', name: 'Technology', color: '#3B82F6' },
+      { id: 'cat-2', name: 'Tutorials', color: '#10B981' }
+    ]
+  }
+
+  describe('Rendering - Complete Post', () => {
+    it('should render post title', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const title = screen.getByText('Test Post Title')
+      expect(title).toBeInTheDocument()
+      expect(title).toHaveAttribute('data-cy', 'post-title')
+    })
+
+    it('should render post excerpt', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const excerpt = screen.getByText('This is a test excerpt for the post')
+      expect(excerpt).toBeInTheDocument()
+      expect(excerpt).toHaveAttribute('data-cy', 'post-excerpt')
+    })
+
+    it('should render featured image', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const image = screen.getByAltText('Test Post Title')
+      expect(image).toBeInTheDocument()
+      expect(image).toHaveAttribute('src', expect.stringContaining('image.jpg'))
+    })
+
+    it('should render all categories', () => {
+      render(<PostHeader post={mockPost} />)
+
+      expect(screen.getByText('Technology')).toBeInTheDocument()
+      expect(screen.getByText('Tutorials')).toBeInTheDocument()
+    })
+
+    it('should render formatted date', () => {
+      render(<PostHeader post={mockPost} />)
+
+      // Date should be formatted as "December 16, 2024"
+      const dateElement = screen.getByText(/December 16, 2024/i)
+      expect(dateElement).toBeInTheDocument()
+    })
+
+    it('should have main container with data-cy', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const header = container.querySelector('[data-cy="post-header"]')
+      expect(header).toBeInTheDocument()
+    })
+  })
+
+  describe('Rendering - Optional Fields', () => {
+    it('should not render featured image when missing', () => {
+      const postWithoutImage = {
+        ...mockPost,
+        featuredImage: undefined
+      }
+
+      const { container } = render(<PostHeader post={postWithoutImage} />)
+
+      const imageContainer = container.querySelector('[data-cy="post-featured-image-display"]')
+      expect(imageContainer).not.toBeInTheDocument()
+    })
+
+    it('should not render excerpt when missing', () => {
+      const postWithoutExcerpt = {
+        ...mockPost,
+        excerpt: undefined
+      }
+
+      render(<PostHeader post={postWithoutExcerpt} />)
+
+      const excerpt = screen.queryByTestId('post-excerpt')
+      expect(excerpt).not.toBeInTheDocument()
+    })
+
+    it('should not render categories section when empty', () => {
+      const postWithoutCategories = {
+        ...mockPost,
+        categories: []
+      }
+
+      const { container } = render(<PostHeader post={postWithoutCategories} />)
+
+      const categoriesContainer = container.querySelector('[data-cy="post-categories-display"]')
+      expect(categoriesContainer).not.toBeInTheDocument()
+    })
+
+    it('should not render categories section when undefined', () => {
+      const postWithoutCategories = {
+        ...mockPost,
+        categories: undefined
+      }
+
+      const { container } = render(<PostHeader post={postWithoutCategories} />)
+
+      const categoriesContainer = container.querySelector('[data-cy="post-categories-display"]')
+      expect(categoriesContainer).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Category Badges', () => {
+    it('should render category badge with correct color', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const techBadge = screen.getByText('Technology')
+
+      // Badge should have inline styles with the color
+      const parentBadge = techBadge.closest('[style]')
+      expect(parentBadge).toHaveStyle({
+        borderColor: '#3B82F6',
+        color: '#3B82F6'
+      })
+    })
+
+    it('should render category badge with background color opacity', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const techBadge = screen.getByText('Technology')
+      const parentBadge = techBadge.closest('[style]')
+
+      // backgroundColor should be color + 20 (hex opacity)
+      expect(parentBadge).toHaveStyle({
+        backgroundColor: '#3B82F620'
+      })
+    })
+
+    it('should handle categories without color', () => {
+      const postWithNoColorCategory = {
+        ...mockPost,
+        categories: [
+          { id: 'cat-1', name: 'No Color Category' }
+        ]
+      }
+
+      render(<PostHeader post={postWithNoColorCategory} />)
+
+      const badge = screen.getByText('No Color Category')
+      expect(badge).toBeInTheDocument()
+
+      // Badge should still render without inline color styles
+      const parentBadge = badge.closest('[style]')
+      // If no color, styles will be undefined or not include custom colors
+      if (parentBadge) {
+        const style = parentBadge.getAttribute('style')
+        expect(style).not.toContain('borderColor')
+      }
+    })
+
+    it('should render multiple category badges', () => {
+      const postWithManyCategories = {
+        ...mockPost,
+        categories: [
+          { id: 'cat-1', name: 'Category 1', color: '#FF0000' },
+          { id: 'cat-2', name: 'Category 2', color: '#00FF00' },
+          { id: 'cat-3', name: 'Category 3', color: '#0000FF' }
+        ]
+      }
+
+      render(<PostHeader post={postWithManyCategories} />)
+
+      expect(screen.getByText('Category 1')).toBeInTheDocument()
+      expect(screen.getByText('Category 2')).toBeInTheDocument()
+      expect(screen.getByText('Category 3')).toBeInTheDocument()
+    })
+  })
+
+  describe('Date Formatting', () => {
+    it('should format date correctly for different dates', () => {
+      const testDates = [
+        { input: '2024-01-01T00:00:00.000Z', expected: 'January 1, 2024' },
+        { input: '2024-06-15T12:30:00.000Z', expected: 'June 15, 2024' },
+        { input: '2024-12-31T23:59:59.000Z', expected: 'December 31, 2024' }
+      ]
+
+      testDates.forEach(({ input, expected }) => {
+        const post = { ...mockPost, createdAt: input }
+        const { unmount } = render(<PostHeader post={post} />)
+
+        const dateElement = screen.getByText(new RegExp(expected, 'i'))
+        expect(dateElement).toBeInTheDocument()
+
+        unmount()
+      })
+    })
+
+    it('should include dateTime attribute on time element', () => {
+      render(<PostHeader post={mockPost} />)
+
+      const timeElement = screen.getByText(/December 16, 2024/i).closest('time')
+      expect(timeElement).toHaveAttribute('dateTime', '2024-12-16T10:00:00.000Z')
+    })
+  })
+
+  describe('Data-cy Attributes', () => {
+    it('should have data-cy on post header container', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const header = container.querySelector('[data-cy="post-header"]')
+      expect(header).toBeInTheDocument()
+    })
+
+    it('should have data-cy on featured image container', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const imageContainer = container.querySelector('[data-cy="post-featured-image-display"]')
+      expect(imageContainer).toBeInTheDocument()
+    })
+
+    it('should have data-cy on categories display', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const categoriesDisplay = container.querySelector('[data-cy="post-categories-display"]')
+      expect(categoriesDisplay).toBeInTheDocument()
+    })
+
+    it('should have data-cy on post title', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const title = container.querySelector('[data-cy="post-title"]')
+      expect(title).toBeInTheDocument()
+      expect(title?.textContent).toBe('Test Post Title')
+    })
+
+    it('should have data-cy on post excerpt', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const excerpt = container.querySelector('[data-cy="post-excerpt"]')
+      expect(excerpt).toBeInTheDocument()
+      expect(excerpt?.textContent).toBe('This is a test excerpt for the post')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should handle empty title', () => {
+      const postWithEmptyTitle = {
+        ...mockPost,
+        title: ''
+      }
+
+      const { container } = render(<PostHeader post={postWithEmptyTitle} />)
+
+      // Component should still render without crashing
+      const header = container.querySelector('[data-cy="post-header"]')
+      expect(header).toBeInTheDocument()
+    })
+
+    it('should handle very long title', () => {
+      const longTitle = 'A'.repeat(500)
+      const postWithLongTitle = {
+        ...mockPost,
+        title: longTitle
+      }
+
+      render(<PostHeader post={postWithLongTitle} />)
+
+      const title = screen.getByText(longTitle)
+      expect(title).toBeInTheDocument()
+    })
+
+    it('should handle very long excerpt', () => {
+      const longExcerpt = 'B'.repeat(1000)
+      const postWithLongExcerpt = {
+        ...mockPost,
+        excerpt: longExcerpt
+      }
+
+      render(<PostHeader post={postWithLongExcerpt} />)
+
+      const excerpt = screen.getByText(longExcerpt)
+      expect(excerpt).toBeInTheDocument()
+    })
+
+    it('should throw error for invalid date', () => {
+      const postWithInvalidDate = {
+        ...mockPost,
+        createdAt: 'invalid-date'
+      }
+
+      // Component throws RangeError when date is invalid (toISOString fails)
+      expect(() => render(<PostHeader post={postWithInvalidDate} />)).toThrow(RangeError)
+    })
+
+    it('should handle categories with very long names', () => {
+      const postWithLongCategoryName = {
+        ...mockPost,
+        categories: [
+          { id: 'cat-1', name: 'C'.repeat(100), color: '#FF0000' }
+        ]
+      }
+
+      render(<PostHeader post={postWithLongCategoryName} />)
+
+      const categoryBadge = screen.getByText('C'.repeat(100))
+      expect(categoryBadge).toBeInTheDocument()
+    })
+
+    it('should handle special characters in title', () => {
+      const postWithSpecialChars = {
+        ...mockPost,
+        title: 'Test <Title> & "Quotes" & Special ©haracters'
+      }
+
+      render(<PostHeader post={postWithSpecialChars} />)
+
+      const title = screen.getByText(/Test <Title> & "Quotes" & Special ©haracters/)
+      expect(title).toBeInTheDocument()
+    })
+
+    it('should handle missing category id', () => {
+      const postWithInvalidCategory = {
+        ...mockPost,
+        categories: [
+          { id: '', name: 'Invalid Category', color: '#FF0000' }
+        ]
+      }
+
+      render(<PostHeader post={postWithInvalidCategory} />)
+
+      // Should still render category name
+      expect(screen.getByText('Invalid Category')).toBeInTheDocument()
+    })
+  })
+
+  describe('Component Structure', () => {
+    it('should render in correct order: image -> categories -> title -> excerpt -> date', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const elements = container.querySelectorAll('[data-cy]')
+      const order = Array.from(elements).map(el => el.getAttribute('data-cy'))
+
+      // Expected order based on component structure
+      expect(order).toContain('post-featured-image-display')
+      expect(order).toContain('post-categories-display')
+      expect(order).toContain('post-title')
+      expect(order).toContain('post-excerpt')
+
+      // Featured image should come before title
+      const imageIndex = order.indexOf('post-featured-image-display')
+      const titleIndex = order.indexOf('post-title')
+      expect(imageIndex).toBeLessThan(titleIndex)
+    })
+
+    it('should render separator (hr) at the bottom', () => {
+      const { container } = render(<PostHeader post={mockPost} />)
+
+      const separator = container.querySelector('hr')
+      expect(separator).toBeInTheDocument()
+    })
+  })
+})