@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/dist/templates/contents/themes/starter/tests/cypress.config.ts

@@ -1,13 +1,21 @@
 /**
  * Cypress Configuration for Starter Theme
  *
- * This config is theme-specific and used by scripts/cy.mjs.
- * Run with: NEXT_PUBLIC_ACTIVE_THEME=starter pnpm cy:open
+ * This config is self-contained for npm projects created with `nextspark init`.
+ * Run with: pnpm cy:open or pnpm cy:run
+ *
+ * Filter by tags: pnpm cy:tags "@smoke" or pnpm cy:run --env grepTags="@smoke"
  */
 
 import { defineConfig } from 'cypress'
 import path from 'path'
 import fs from 'fs'
+import { fileURLToPath } from 'url'
+import webpackPreprocessor from '@cypress/webpack-preprocessor'
+
+// ESM-compatible __dirname
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 // Paths relative to this config file
 const themeRoot = path.resolve(__dirname, '..')
@@ -18,24 +26,32 @@ const narrationsOutputDir = path.join(__dirname, 'cypress/videos/narrations')
 import dotenv from 'dotenv'
 dotenv.config({ path: path.join(projectRoot, '.env') })
 
-// Server port (from .env or default 5173)
-const port = process.env.PORT || 5173
+// Server port (from .env or default 3000)
+const port = process.env.PORT || 3000
+
+// Extract CYPRESS_ prefixed variables from process.env
+// Cypress auto-strips the CYPRESS_ prefix when accessing via Cypress.env()
+const cypressEnvVars: Record<string, string> = {}
+Object.entries(process.env).forEach(([key, value]) => {
+  if (key.startsWith('CYPRESS_') && value) {
+    // Remove CYPRESS_ prefix for Cypress.env() access
+    const cypressKey = key.replace('CYPRESS_', '')
+    cypressEnvVars[cypressKey] = value
+  }
+})
 
 export default defineConfig({
   e2e: {
     // Base URL for the application
     baseUrl: `http://localhost:${port}`,
 
-    // Spec patterns: core tests + theme tests
+    // Spec patterns: theme tests only
     specPattern: [
-      // Core tests (always included)
-      path.join(projectRoot, 'core/tests/cypress/e2e/core/**/*.cy.{js,ts}'),
-      // Theme-specific tests
       path.join(__dirname, 'cypress/e2e/**/*.cy.{js,ts}'),
     ],
 
-    // Support file (shared across themes)
-    supportFile: path.join(projectRoot, 'core/tests/cypress/support/e2e.ts'),
+    // Support file (theme-local)
+    supportFile: path.join(__dirname, 'cypress/support/e2e.ts'),
 
     // Fixtures folder (theme-specific)
     fixturesFolder: path.join(__dirname, 'cypress/fixtures'),
@@ -73,14 +89,13 @@ export default defineConfig({
 
     // Environment variables
     env: {
+      // Spread CYPRESS_ prefixed vars from .env (e.g., CYPRESS_DEVELOPER_EMAIL -> DEVELOPER_EMAIL)
+      ...cypressEnvVars,
+
       // Theme info
       ACTIVE_THEME: 'starter',
       THEME_PATH: themeRoot,
 
-      // Test user credentials (update with your test users)
-      TEST_USER_EMAIL: 'owner@starter.dev',
-      TEST_USER_PASSWORD: 'Test1234',
-
       // Feature flags
       ENABLE_ALLURE: true,
 
@@ -96,15 +111,65 @@ export default defineConfig({
       grepOmitFiltered: true,
     },
 
-    setupNodeEvents(on, config) {
+    async setupNodeEvents(on, config) {
+      // =================================================================
+      // WEBPACK PREPROCESSOR - Enable "exports" field support
+      // =================================================================
+      // Fix for: "Package path ./selectors is not exported from package @nextsparkjs/core"
+      // Cypress default webpack doesn't support package.json "exports" field properly.
+      // This custom config enables it.
+      const webpackOptions = {
+        resolve: {
+          extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
+          // CRITICAL: Enable package.json "exports" field resolution
+          exportsFields: ['exports'],
+          conditionNames: ['import', 'module', 'default'],
+          mainFields: ['module', 'main'],
+          // Polyfills for Node.js core modules (webpack 5 doesn't include them)
+          fallback: {
+            tty: false,
+            util: false,
+            fs: false,
+            path: false,
+            os: false,
+          },
+        },
+        module: {
+          rules: [
+            {
+              test: /\.tsx?$/,
+              use: [
+                {
+                  loader: 'ts-loader',
+                  options: {
+                    transpileOnly: true,
+                  },
+                },
+              ],
+              exclude: /node_modules/,
+            },
+            {
+              test: /\.m?js$/,
+              resolve: {
+                fullySpecified: false,
+              },
+            },
+          ],
+        },
+      }
+
+      on('file:preprocessor', webpackPreprocessor({ webpackOptions }))
+
       // Allure plugin setup (allure-cypress)
-      const { allureCypress } = require('allure-cypress/reporter')
+      const { allureCypress } = await import('allure-cypress/reporter')
       allureCypress(on, config, {
         resultsDir: path.join(__dirname, 'cypress/allure-results'),
       })
 
       // @cypress/grep plugin for test filtering by tags
-      require('@cypress/grep/src/plugin')(config)
+      // v5.x uses named export { plugin } from '@cypress/grep/plugin'
+      const { plugin: grepPlugin } = await import('@cypress/grep/plugin')
+      grepPlugin(config)
 
       // Documentation video tasks
       on('task', {
@@ -127,7 +192,7 @@ export default defineConfig({
           const filepath = path.join(narrationsOutputDir, filename)
 
           fs.writeFileSync(filepath, JSON.stringify(narrations, null, 2))
-          console.log(`Narrations saved to: ${filepath}`)
+          console.log(`📝 Narrations saved to: ${filepath}`)
 
           return null
         },
@@ -136,7 +201,7 @@ export default defineConfig({
          * Add narration entry (called per narration)
          */
         addNarration(narration: unknown) {
-          console.log('Narration:', narration)
+          console.log('🎙️ Narration:', narration)
           return null
         },
       })

package/dist/templates/contents/themes/starter/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/dist/templates/contents/themes/starter/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/dist/templates/contents/themes/starter/tests/jest/example.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * Example Jest Test
+ *
+ * This file demonstrates how to write Jest tests for your theme.
+ * Run tests with: pnpm test:theme
+ *
+ * Test Organization:
+ * - Create test files with .test.ts or .spec.ts extension
+ * - Group related tests in describe blocks
+ * - Use meaningful test names that describe the expected behavior
+ */
+
+import { render, screen } from '@testing-library/react'
+
+// Example: Testing a simple utility function
+describe('Example Utility Tests', () => {
+  it('should demonstrate a simple passing test', () => {
+    const sum = (a: number, b: number) => a + b
+    expect(sum(2, 3)).toBe(5)
+  })
+
+  it('should work with async/await', async () => {
+    const fetchData = async () => ({ status: 'ok' })
+    const result = await fetchData()
+    expect(result.status).toBe('ok')
+  })
+})
+
+// Example: Testing with mocked fetch
+describe('API Mock Tests', () => {
+  beforeEach(() => {
+    // Reset fetch mock before each test
+    ;(global.fetch as jest.Mock).mockReset()
+  })
+
+  it('should mock fetch responses', async () => {
+    const mockData = { users: ['Alice', 'Bob'] }
+
+    ;(global.fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      json: async () => mockData,
+    })
+
+    const response = await fetch('/api/users')
+    const data = await response.json()
+
+    expect(data.users).toHaveLength(2)
+    expect(data.users).toContain('Alice')
+  })
+})
+
+// Example: Testing React components
+describe('React Component Tests', () => {
+  it('should render a simple component', () => {
+    const SimpleComponent = () => <div data-testid="greeting">Hello World</div>
+
+    render(<SimpleComponent />)
+
+    expect(screen.getByTestId('greeting')).toHaveTextContent('Hello World')
+  })
+
+  it('should use jest-dom matchers', () => {
+    const Button = ({ disabled }: { disabled: boolean }) => (
+      <button disabled={disabled}>Click me</button>
+    )
+
+    render(<Button disabled={true} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveTextContent('Click me')
+  })
+})
+
+// Example: Testing with theme imports
+describe('Theme Integration Tests', () => {
+  // You can import theme utilities and test them
+  // import { formatDate } from '../../lib/utils'
+
+  it('should work with theme utilities', () => {
+    // Example test placeholder
+    // const formatted = formatDate(new Date('2024-01-15'))
+    // expect(formatted).toBe('January 15, 2024')
+    expect(true).toBe(true)
+  })
+})

package/dist/templates/contents/themes/starter/tests/jest/jest.config.cjs

@@ -0,0 +1,95 @@
+/**
+ * Jest Configuration for Starter Theme
+ *
+ * This config is for npm mode (projects created via nextspark init).
+ * Run with: pnpm test:theme
+ */
+
+const path = require('path')
+
+// Paths relative to this config file
+const themeTestsRoot = __dirname
+const themeRoot = path.resolve(__dirname, '../..')
+
+// In npm mode: contents/themes/starter/tests/jest -> project root (5 levels up)
+const projectRoot = path.resolve(__dirname, '../../../../..')
+
+/** @type {import('jest').Config} */
+module.exports = {
+  displayName: 'theme-starter',
+  rootDir: projectRoot,
+
+  // Use roots to explicitly set test location
+  roots: [themeTestsRoot],
+
+  // Test file patterns
+  testMatch: [
+    '**/*.{test,spec}.{js,ts,tsx}',
+  ],
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/.next/',
+  ],
+
+  // Preset and environment
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+
+  // Module resolution for npm mode
+  // Explicitly resolve @nextsparkjs/core subpaths to dist directory
+  // Jest doesn't respect package.json exports, so we map directly to dist files
+  moduleNameMapper: {
+    '^@nextsparkjs/core/lib/(.*)$': '<rootDir>/node_modules/@nextsparkjs/core/dist/lib/$1',
+    '^@nextsparkjs/core/hooks/(.*)$': '<rootDir>/node_modules/@nextsparkjs/core/dist/hooks/$1',
+    '^@nextsparkjs/core/components/(.*)$': '<rootDir>/node_modules/@nextsparkjs/core/dist/components/$1',
+    '^@nextsparkjs/core/(.*)$': '<rootDir>/node_modules/@nextsparkjs/core/dist/$1',
+    '^@nextsparkjs/core$': '<rootDir>/node_modules/@nextsparkjs/core/dist/index.js',
+    '^@/contents/(.*)$': '<rootDir>/contents/$1',
+    '^@/entities/(.*)$': '<rootDir>/contents/entities/$1',
+    '^@/plugins/(.*)$': '<rootDir>/contents/plugins/$1',
+    '^@/themes/(.*)$': '<rootDir>/contents/themes/$1',
+    '^@/(.*)$': '<rootDir>/$1',
+    // Mocks from theme-local folder
+    'next/server': path.join(themeTestsRoot, '__mocks__/next-server.js'),
+    '^jose$': path.join(themeTestsRoot, '__mocks__/jose.js'),
+    '^jose/(.*)$': path.join(themeTestsRoot, '__mocks__/jose.js'),
+  },
+
+  // Setup files
+  setupFilesAfterEnv: [
+    path.join(themeTestsRoot, 'setup.ts'),
+  ],
+
+  // Transform configuration
+  // Use tsconfig.jest.json for JSX support (jsx: "react-jsx" instead of "preserve")
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: path.join(themeTestsRoot, 'tsconfig.jest.json'),
+    }],
+  },
+
+  // Transform ignore patterns
+  transformIgnorePatterns: [
+    'node_modules/(?!(uncrypto|better-auth|@noble|.*jose.*|remark.*|unified.*|@nextsparkjs/core/tests|.*\\.mjs$))',
+    'node_modules/\\.pnpm/(?!(.*uncrypto.*|.*better-auth.*|.*@noble.*|.*jose.*|.*remark.*|.*unified.*|@nextsparkjs.*core.*tests|.*\\.mjs$))',
+  ],
+
+  // File extensions
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+
+  // Test timeout
+  testTimeout: 10000,
+
+  // Verbose output
+  verbose: true,
+
+  // Force exit after tests complete
+  forceExit: true,
+
+  // Disable watchman for symlink support
+  watchman: false,
+
+  // Coverage output directory
+  coverageDirectory: path.join(themeTestsRoot, 'coverage'),
+  coverageReporters: ['text', 'lcov', 'html'],
+}