@nextsparkjs/core 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/templates/contents/themes/default/tests/cypress/support/doc-commands.ts

@@ -1,260 +0,0 @@
-/**
- * Documentation Commands for Cypress
- *
- * Custom commands for generating documentation videos with narration.
- * Uses cypress-slow-down for controlled execution speed.
- *
- * @example
- * // In your test file:
- * import '../support/doc-commands'
- *
- * describe('Tutorial: Login', { tags: ['@doc'] }, () => {
- *   before(() => {
- *     cy.startDocMode(800)
- *   })
- *
- *   it('shows how to login', () => {
- *     cy.narrate('First, navigate to the login page')
- *     cy.visit('/login')
- *   })
- * })
- */
-
-import { slowCypressDown } from 'cypress-slow-down'
-import 'cypress-slow-down/commands'
-
-// Store narrations for extraction
-interface NarrationEntry {
-  timestamp: number
-  time: string        // "M:SS" format from start (for subtitles)
-  timeMs: number      // Milliseconds from start
-  stepNumber: number
-  text: string
-  highlight?: string
-  duration: number
-  chapter?: string
-}
-
-let narrations: NarrationEntry[] = []
-let stepCounter = 0
-let docModeActive = false
-let startTime = 0     // Timestamp when recording started
-
-/**
- * Format milliseconds to M:SS or MM:SS string
- */
-function formatTime(ms: number): string {
-  const totalSeconds = Math.floor(ms / 1000)
-  const minutes = Math.floor(totalSeconds / 60)
-  const seconds = totalSeconds % 60
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`
-}
-
-// Declare custom commands
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      /**
-       * Start documentation mode with specified delay between commands
-       * @param delayMs - Milliseconds to wait between each command (default: 800)
-       */
-      startDocMode(delayMs?: number): Chainable<void>
-
-      /**
-       * End documentation mode and save narrations
-       */
-      endDocMode(): Chainable<void>
-
-      /**
-       * Add narration text for the current step
-       * @param text - The narration text to display/speak
-       * @param options - Optional settings like highlight selector
-       */
-      narrate(text: string, options?: { highlight?: string; pause?: number }): Chainable<void>
-
-      /**
-       * Add a chapter/section marker in the narration
-       * @param title - Chapter title
-       */
-      chapter(title: string): Chainable<void>
-
-      /**
-       * Pause for emphasis (used after important actions)
-       * @param ms - Milliseconds to pause
-       */
-      pauseForEmphasis(ms?: number): Chainable<void>
-
-      /**
-       * Highlight an element visually (adds temporary outline)
-       * @param selector - Element selector to highlight
-       */
-      highlightElement(selector: string): Chainable<void>
-    }
-  }
-}
-
-/**
- * Calculate reading time based on text length
- * Average reading speed: ~150-180 words per minute for narration
- * We use ~4 characters = 1 syllable, ~1.5 syllables/second for clear speech
- */
-function calculateNarrationDuration(text: string): number {
-  const words = text.split(/\s+/).length
-  const wordsPerSecond = 2.5 // Slow, clear narration speed
-  const baseTime = (words / wordsPerSecond) * 1000
-  // Add minimum time and buffer
-  return Math.max(1500, baseTime + 500)
-}
-
-/**
- * Start documentation mode - slows down Cypress execution
- */
-Cypress.Commands.add('startDocMode', (delayMs = 800) => {
-  docModeActive = true
-  narrations = []
-  stepCounter = 0
-  startTime = Date.now()  // Record start time
-
-  // Activate slow mode
-  slowCypressDown(delayMs)
-
-  // Log start marker (visible in video)
-  cy.log('🎬 **DOCUMENTATION MODE STARTED**')
-
-  // Add initial narration entry
-  narrations.push({
-    timestamp: startTime,
-    time: '0:00',
-    timeMs: 0,
-    stepNumber: 0,
-    text: '--- Documentation Recording Started ---',
-    duration: 0,
-  })
-})
-
-/**
- * End documentation mode and save narrations to file
- */
-Cypress.Commands.add('endDocMode', () => {
-  if (!docModeActive) return
-
-  cy.log('🎬 **DOCUMENTATION MODE ENDED**')
-
-  // Add final narration entry
-  const now = Date.now()
-  const elapsedMs = now - startTime
-  narrations.push({
-    timestamp: now,
-    time: formatTime(elapsedMs),
-    timeMs: elapsedMs,
-    stepNumber: stepCounter + 1,
-    text: '--- Documentation Recording Ended ---',
-    duration: 0,
-  })
-
-  // Save narrations to file via task
-  const specName = Cypress.spec.name.replace('.cy.ts', '').replace('.cy.js', '')
-  cy.task('saveNarrations', {
-    specName,
-    narrations,
-    totalDuration: formatTime(elapsedMs),
-    totalDurationMs: elapsedMs,
-  }, { log: false })
-
-  cy.log(`🎬 **Total Duration: ${formatTime(elapsedMs)}**`)
-
-  docModeActive = false
-  narrations = []
-  stepCounter = 0
-  startTime = 0
-})
-
-/**
- * Add narration for current step
- */
-Cypress.Commands.add('narrate', (text: string, options?: { highlight?: string; pause?: number }) => {
-  stepCounter++
-  const duration = calculateNarrationDuration(text)
-  const now = Date.now()
-  const elapsedMs = now - startTime
-  const timeStr = formatTime(elapsedMs)
-
-  // Store narration data
-  narrations.push({
-    timestamp: now,
-    time: timeStr,
-    timeMs: elapsedMs,
-    stepNumber: stepCounter,
-    text,
-    highlight: options?.highlight,
-    duration,
-  })
-
-  // Visual feedback in Cypress runner (will show in video)
-  cy.log(`🎙️ **[${timeStr}]** ${text}`)
-
-  // If highlight specified, add visual indicator
-  if (options?.highlight) {
-    cy.highlightElement(options.highlight)
-  }
-
-  // Wait for narration duration (so video has time for the narration)
-  const waitTime = options?.pause ?? duration
-  cy.wait(waitTime, { log: false })
-})
-
-/**
- * Add chapter marker
- */
-Cypress.Commands.add('chapter', (title: string) => {
-  stepCounter++
-  const now = Date.now()
-  const elapsedMs = now - startTime
-  const timeStr = formatTime(elapsedMs)
-
-  narrations.push({
-    timestamp: now,
-    time: timeStr,
-    timeMs: elapsedMs,
-    stepNumber: stepCounter,
-    text: `=== ${title} ===`,
-    chapter: title,
-    duration: 2000,
-  })
-
-  // Large visual marker
-  cy.log(`📖 **[${timeStr}] ━━━ ${title.toUpperCase()} ━━━**`)
-  cy.wait(2000, { log: false })
-})
-
-/**
- * Pause for emphasis after important actions
- */
-Cypress.Commands.add('pauseForEmphasis', (ms = 1500) => {
-  cy.log('⏸️ *pause*')
-  cy.wait(ms, { log: false })
-})
-
-/**
- * Highlight an element with a visual indicator
- */
-Cypress.Commands.add('highlightElement', (selector: string) => {
-  cy.get(selector).then($el => {
-    // Add highlight class
-    $el.css({
-      outline: '3px solid #ff6b6b',
-      outlineOffset: '2px',
-      transition: 'outline 0.3s ease',
-    })
-
-    // Remove highlight after a delay
-    cy.wait(800, { log: false }).then(() => {
-      $el.css({
-        outline: 'none',
-        outlineOffset: '0',
-      })
-    })
-  })
-})
-
-export {}

package/dist/templates/contents/themes/default/tests/cypress/support/e2e.ts

@@ -1,18 +0,0 @@
-// Core support (commands, POMs)
-import '@nextsparkjs/core/cypress-support'
-import './commands'
-
-// @cypress/grep for test filtering by tags
-import registerCypressGrep from '@cypress/grep'
-registerCypressGrep()
-
-// Allure reporter - Always import (the plugin in cypress.config.ts controls activation)
-// This import is required for allure to capture test events
-import 'allure-cypress'
-
-// Exception handlers
-Cypress.on('uncaught:exception', (err) => {
-  if (err.message.includes('Hydration')) return false
-  if (err.message.includes('ResizeObserver')) return false
-  return true
-})

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

@@ -1,137 +0,0 @@
-/**
- * Cypress Configuration for Default Theme
- *
- * This config is theme-specific.
- * Run with: pnpm cy:open
- *
- * Features:
- * - @cypress/grep for test filtering by tags (--env tags="@smoke")
- * - allure-cypress for test reporting (auto-enabled when installed)
- * - webpack preprocessor for TypeScript in node_modules
- */
-
-import { defineConfig } from 'cypress'
-import path from 'path'
-
-// Paths relative to this config file
-const themeRoot = path.resolve(__dirname, '..')
-const projectRoot = path.resolve(__dirname, '../../../..')
-
-export default defineConfig({
-  e2e: {
-    baseUrl: 'http://localhost:3000',
-
-    // Spec patterns - theme tests only
-    specPattern: [
-      path.join(__dirname, 'cypress/e2e/**/*.cy.{js,ts}'),
-    ],
-
-    // Support file (theme-specific)
-    supportFile: path.join(__dirname, 'cypress/support/e2e.ts'),
-
-    // Fixtures folder (theme-specific)
-    fixturesFolder: path.join(__dirname, 'cypress/fixtures'),
-
-    // Output folders (theme-specific)
-    screenshotsFolder: path.join(__dirname, 'cypress/screenshots'),
-    videosFolder: path.join(__dirname, 'cypress/videos'),
-
-    // Viewport settings
-    viewportWidth: 1280,
-    viewportHeight: 720,
-
-    // Video and screenshot settings
-    video: false,
-    screenshotOnRunFailure: true,
-
-    // Timeouts
-    defaultCommandTimeout: 10000,
-    requestTimeout: 10000,
-    responseTimeout: 10000,
-    pageLoadTimeout: 30000,
-
-    // Browser settings
-    chromeWebSecurity: false,
-
-    // Test isolation
-    testIsolation: true,
-
-    // Retry settings
-    retries: {
-      runMode: 1,
-      openMode: 0,
-    },
-
-    // Environment variables
-    env: {
-      ACTIVE_THEME: 'default',
-      THEME_PATH: themeRoot,
-
-      // @cypress/grep - filter specs by tags
-      grepFilterSpecs: true,
-      grepOmitFiltered: true,
-
-      // Allure reporting - results generated automatically when allure-cypress is installed
-      allureResultsPath: path.join(__dirname, 'cypress/allure-results'),
-    },
-
-    setupNodeEvents(on, config) {
-      // ================================================
-      // 1. Simplified tags syntax: --env tags="@smoke"
-      //    Maps to grepTags for @cypress/grep
-      // ================================================
-      if (config.env.tags) {
-        config.env.grepTags = config.env.tags
-      }
-
-      // ================================================
-      // 2. @cypress/grep plugin for test filtering
-      // ================================================
-      require('@cypress/grep/src/plugin')(config)
-
-      // ================================================
-      // 3. Allure reporter (always register if available)
-      //    The import in e2e.ts requires tasks to be registered
-      // ================================================
-      try {
-        const { allureCypress } = require('allure-cypress/reporter')
-        allureCypress(on, config, {
-          resultsDir: config.env.allureResultsPath,
-        })
-      } catch (e) {
-        // allure-cypress not installed - that's ok, tests will still run
-      }
-
-      // ================================================
-      // 4. Webpack preprocessor for TypeScript
-      //    Allows importing from @nextsparkjs/core
-      // ================================================
-      const webpackPreprocessor = require('@cypress/webpack-preprocessor')
-
-      const options = {
-        webpackOptions: {
-          resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx'],
-          },
-          module: {
-            rules: [
-              {
-                test: /\.tsx?$/,
-                loader: 'ts-loader',
-                options: {
-                  transpileOnly: true,
-                  // Allow ts-loader to process files from any location
-                  allowTsInNodeModules: true,
-                },
-              },
-            ],
-          },
-        },
-      }
-
-      on('file:preprocessor', webpackPreprocessor(options))
-
-      return config
-    },
-  },
-})

package/dist/templates/contents/themes/default/tests/jest/example.test.ts

@@ -1,24 +0,0 @@
-/**
- * Example Jest test for your NextSpark project
- *
- * Run with: pnpm test:theme
- */
-import { describe, test, expect } from '@jest/globals'
-
-describe('Example Tests', () => {
-  test('should pass a basic assertion', () => {
-    expect(1 + 1).toBe(2)
-  })
-
-  test('should work with arrays', () => {
-    const items = ['alpha', 'beta', 'gamma']
-    expect(items).toHaveLength(3)
-    expect(items).toContain('beta')
-  })
-
-  test('should work with objects', () => {
-    const user = { name: 'Test', role: 'admin' }
-    expect(user).toHaveProperty('name')
-    expect(user.role).toBe('admin')
-  })
-})

package/dist/templates/contents/themes/default/tests/jest/jest.config.ts

@@ -1,71 +0,0 @@
-/**
- * Jest Configuration for Default Theme
- *
- * This config is automatically loaded by the theme test runner.
- *
- * Usage:
- *   pnpm test:theme          # Run theme tests
- *   pnpm test:theme:watch    # Watch mode
- *   pnpm test:theme:coverage # With coverage
- */
-
-import type { Config } from 'jest'
-
-const config: Config = {
-  displayName: 'theme-default',
-  rootDir: '../../../../..',  // Points to project root (5 levels up from jest.config.ts)
-
-  // Test file patterns
-  testMatch: [
-    '<rootDir>/contents/themes/default/tests/jest/**/*.{test,spec}.{js,ts,tsx}',
-  ],
-  testPathIgnorePatterns: [
-    '<rootDir>/node_modules/',
-    '<rootDir>/.next/',
-  ],
-
-  // Preset and environment
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-
-  // Module resolution (aliases @/)
-  moduleNameMapper: {
-    // Project aliases
-    '^@/contents/(.*)$': '<rootDir>/contents/$1',
-    '^@/entities/(.*)$': '<rootDir>/contents/entities/$1',
-    '^@/plugins/(.*)$': '<rootDir>/contents/plugins/$1',
-    '^@/themes/(.*)$': '<rootDir>/contents/themes/$1',
-    '^@/(.*)$': '<rootDir>/$1',
-  },
-
-  // Setup files
-  setupFilesAfterEnv: ['<rootDir>/contents/themes/default/tests/jest/setup.ts'],
-
-  // Transform configuration
-  transform: {
-    '^.+\\.(ts|tsx)$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/contents/themes/default/tests/jest/tsconfig.jest.json',
-      },
-    ],
-  },
-
-  // File extensions
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-
-  // Test timeout
-  testTimeout: 10000,
-
-  // Verbose output
-  verbose: true,
-
-  // Force exit after tests complete
-  forceExit: true,
-
-  // Coverage output directory
-  coverageDirectory: '<rootDir>/contents/themes/default/tests/jest/coverage',
-  coverageReporters: ['text', 'lcov', 'html'],
-}
-
-export default config

package/dist/templates/contents/themes/default/tests/jest/setup.ts

@@ -1,58 +0,0 @@
-import '@testing-library/jest-dom'
-import { TextEncoder, TextDecoder } from 'util'
-
-// Polyfills
-global.TextEncoder = TextEncoder
-global.TextDecoder = TextDecoder as typeof global.TextDecoder
-
-// Mock matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-})
-
-// Mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
-
-// Mock IntersectionObserver
-global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}))
-
-// Mock next/router
-jest.mock('next/router', () => ({
-  useRouter: () => ({
-    route: '/',
-    pathname: '/',
-    query: {},
-    asPath: '/',
-    push: jest.fn(),
-    replace: jest.fn(),
-  }),
-}))
-
-// Mock next/navigation
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    replace: jest.fn(),
-    back: jest.fn(),
-  }),
-  usePathname: () => '/',
-  useSearchParams: () => new URLSearchParams(),
-}))

package/dist/templates/contents/themes/default/tests/jest/tsconfig.jest.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../../../tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "moduleResolution": "node",
-    "esModuleInterop": true
-  }
-}