@nextsparkjs/theme-blog 0.1.0-beta.19 → 0.1.0-beta.191

package/tests/cypress.config.ts

@@ -0,0 +1,154 @@
+/**
+ * Cypress Configuration for blog Theme
+ *
+ * This config works in both monorepo and npm mode.
+ * Run with: NEXT_PUBLIC_ACTIVE_THEME=default pnpm cy:open
+ */
+
+import { defineConfig } from 'cypress'
+import { fileURLToPath } from 'url'
+import path from 'path'
+import fs from 'fs'
+
+// 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, '..')
+const projectRoot = path.resolve(__dirname, '../../../..')
+const narrationsOutputDir = path.join(__dirname, 'cypress/videos/narrations')
+
+// Load environment variables
+import dotenv from 'dotenv'
+dotenv.config({ path: path.join(projectRoot, '.env') })
+
+// Server port (from .env or default 3000)
+const port = process.env.PORT || 3000
+
+export default defineConfig({
+  e2e: {
+    // Base URL for the application
+    baseUrl: `http://localhost:${port}`,
+
+    // Spec patterns: theme tests only
+    specPattern: [
+      path.join(__dirname, 'cypress/e2e/**/*.cy.{js,ts}'),
+    ],
+
+    // Support file (always theme-local)
+    supportFile: path.join(__dirname, 'cypress/support/e2e.ts'),
+
+    // Fixtures folder (theme-specific)
+    fixturesFolder: path.join(__dirname, 'cypress/fixtures'),
+
+    // Output folders (theme-specific)
+    downloadsFolder: path.join(__dirname, 'cypress/downloads'),
+    screenshotsFolder: path.join(__dirname, 'cypress/screenshots'),
+    videosFolder: path.join(__dirname, 'cypress/videos'),
+
+    // Viewport settings
+    viewportWidth: 1280,
+    viewportHeight: 720,
+
+    // Video and screenshot settings
+    video: true,
+    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: {
+      // Theme info
+      ACTIVE_THEME: 'blog',
+      THEME_PATH: themeRoot,
+
+      // Test user credentials
+      TEST_USER_EMAIL: 'user@example.com',
+      TEST_USER_PASSWORD: 'Testing1234',
+
+      // Feature flags
+      ENABLE_ALLURE: true,
+
+      // Allure reporting
+      allureResultsPath: path.join(__dirname, 'cypress/allure-results'),
+
+      // API settings
+      API_URL: `http://localhost:${port}/api`,
+      API_BASE_URL: `http://localhost:${port}`,
+
+      // @cypress/grep - filter specs by tags
+      grepFilterSpecs: true,
+      grepOmitFiltered: true,
+    },
+
+    async setupNodeEvents(on, config) {
+      // Allure plugin setup (allure-cypress)
+      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
+      // 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', {
+        /**
+         * Save narrations to JSON file for post-processing
+         */
+        saveNarrations({ specName, narrations }: { specName: string; narrations: unknown[] }) {
+          // Ensure output directory exists
+          if (!fs.existsSync(narrationsOutputDir)) {
+            fs.mkdirSync(narrationsOutputDir, { recursive: true })
+          }
+
+          const filename = `${specName}-narrations.json`
+          const filepath = path.join(narrationsOutputDir, filename)
+
+          fs.writeFileSync(filepath, JSON.stringify(narrations, null, 2))
+          console.log(`📝 Narrations saved to: ${filepath}`)
+
+          return null
+        },
+
+        /**
+         * Add narration entry (called per narration)
+         */
+        addNarration(narration: unknown) {
+          // This could be used for real-time streaming to a narration service
+          console.log('🎙️ Narration:', narration)
+          return null
+        },
+      })
+
+      return config
+    },
+  },
+
+  // Component testing (future use)
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})

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-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/WysiwygEditor.test.tsx

@@ -0,0 +1,117 @@
+import { render, fireEvent } from '@testing-library/react'
+import { WysiwygEditor } from '@/themes/blog/components/editor/WysiwygEditor'
+
+// What a team member can store as a post body through the API.
+const STORED = [
+  '<p>kept <strong>bold</strong></p>',
+  '<img src="x" onerror="globalThis.pwned = 1">',
+  '<script>globalThis.pwned = 1</script>',
+  '<a href="javascript:globalThis.pwned = 1">link</a>',
+].join('')
+
+function expectInert(root: Element) {
+  expect(root.querySelector('script')).toBeNull()
+  expect(root.querySelector('[onerror]')).toBeNull()
+  expect(root.querySelector('a[href^="javascript:"]')).toBeNull()
+  expect(root.querySelector('strong')?.textContent).toBe('bold')
+}
+
+describe('WysiwygEditor with stored HTML', () => {
+  it('renders formatting but no script in the editable area', () => {
+    const { container } = render(<WysiwygEditor value={STORED} onChange={jest.fn()} />)
+    expectInert(container.querySelector('[contenteditable]')!)
+  })
+
+  it('drops script that reaches the editable area while editing', () => {
+    const onChange = jest.fn()
+    const { container, rerender } = render(<WysiwygEditor value="" onChange={onChange} />)
+    const editable = container.querySelector('[contenteditable]')!
+    editable.innerHTML = STORED
+    fireEvent.input(editable)
+    const emitted = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+    rerender(<WysiwygEditor value={emitted} onChange={onChange} />)
+    expectInert(editable)
+  })
+
+  it('drops a handler the sanitiser only reports as a rewritten attribute', () => {
+    const onChange = jest.fn()
+    const { container, rerender } = render(<WysiwygEditor value="" onChange={onChange} />)
+    const editable = container.querySelector('[contenteditable]')!
+    editable.innerHTML = '<p><strong>bold</strong></p><img title=" x " onerror="globalThis.pwned = 1" src="bad">'
+    fireEvent.input(editable)
+    const emitted = onChange.mock.calls[onChange.mock.calls.length - 1][0]
+    rerender(<WysiwygEditor value={emitted} onChange={onChange} />)
+    expectInert(editable)
+  })
+
+  it('renders formatting but no script in the preview', () => {
+    const { container } = render(<WysiwygEditor value={STORED} onChange={jest.fn()} />)
+    fireEvent.click(container.querySelector('[data-cy="wysiwyg-preview-toggle"]')!)
+    expectInert(container.querySelector('[data-cy="wysiwyg-preview"]')!)
+  })
+})
+
+describe('WysiwygEditor with markup pasted or dropped in', () => {
+  const UNSAFE = '<p><strong>bold</strong></p><img title=" x " onerror="globalThis.pwned = 1" src="bad">'
+  const transfer = (html: string) => ({ getData: (type: string) => (type === 'text/html' ? html : '') })
+  let execCommand: jest.Mock
+
+  beforeEach(() => {
+    execCommand = jest.fn()
+    Object.defineProperty(document, 'execCommand', { value: execCommand, configurable: true, writable: true })
+  })
+
+  afterEach(() => {
+    delete (document as unknown as { execCommand?: unknown }).execCommand
+  })
+
+  function expectSanitisedInsertion() {
+    expect(execCommand).toHaveBeenCalledTimes(1)
+    const [command, , inserted] = execCommand.mock.calls[0]
+    expect(command).toBe('insertHTML')
+    expect(inserted).toContain('<strong>bold</strong>')
+    expect(inserted).not.toContain('onerror')
+  }
+
+  it('inserts a paste with a handler sanitised, instead of the browser paste', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, { clipboardData: transfer(UNSAFE) })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+  })
+
+  it('inserts a drop with a handler sanitised, instead of the browser drop', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.drop(container.querySelector('[contenteditable]')!, { dataTransfer: transfer(UNSAFE) })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+  })
+
+  it('inserts a paste whose script a document parse would move out of the body, sanitised', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, {
+      clipboardData: transfer('<script>globalThis.pwned = 1</script><p><strong>bold</strong></p>'),
+    })
+    expect(proceeded).toBe(false)
+    expectSanitisedInsertion()
+    expect(execCommand.mock.calls[0][2]).not.toContain('<script')
+  })
+
+  it('leaves a paste with nothing to take out to the browser', () => {
+    const { container } = render(<WysiwygEditor value="" onChange={jest.fn()} />)
+    const proceeded = fireEvent.paste(container.querySelector('[contenteditable]')!, { clipboardData: transfer('<p>plain <em>text</em></p>') })
+    expect(proceeded).toBe(true)
+    expect(execCommand).not.toHaveBeenCalled()
+  })
+})
+
+describe('WysiwygEditor preview toggle', () => {
+  it('keeps the content in the editable area after leaving the preview', () => {
+    const { container } = render(<WysiwygEditor value="<p>kept <strong>bold</strong></p>" onChange={jest.fn()} />)
+    const toggle = container.querySelector('[data-cy="wysiwyg-preview-toggle"]')!
+    fireEvent.click(toggle)
+    expect(container.querySelector('[contenteditable]')).toBeNull()
+    fireEvent.click(toggle)
+    expect(container.querySelector('[contenteditable]')!.innerHTML).toBe('<p>kept <strong>bold</strong></p>')
+  })
+})

package/tests/jest/jest.config.cjs

@@ -0,0 +1,148 @@
+/**
+ * Jest Configuration for Blog Theme
+ *
+ * This config works in both monorepo and npm mode.
+ * Run with: pnpm test:theme
+ */
+
+const path = require('path')
+const fs = require('fs')
+
+// Paths relative to this config file
+const themeTestsRoot = __dirname
+const themeRoot = path.resolve(__dirname, '../..')
+
+// In monorepo: themes/blog/tests/jest -> apps/dev (via symlink in contents/)
+// In npm mode: contents/themes/blog/tests/jest -> project root (5 levels up)
+const monorepoRepoRoot = path.resolve(__dirname, '../../../..')
+const npmModeRoot = path.resolve(__dirname, '../../../../..')
+
+// Detect if running in npm mode (no packages/core folder) vs monorepo
+const isNpmMode = !fs.existsSync(path.join(monorepoRepoRoot, 'packages/core'))
+
+// In monorepo, use apps/dev as rootDir since contents/ symlinks to themes/
+const monorepoAppRoot = path.join(monorepoRepoRoot, 'apps/dev')
+const projectRoot = isNpmMode ? npmModeRoot : monorepoAppRoot
+
+// Module name mapper based on mode
+const moduleNameMapper = isNpmMode
+  ? {
+      // NPM mode: explicitly resolve @nextsparkjs/core subpaths to dist directory
+      // Jest doesn't respect package.json exports, so we map directly to dist files
+      '^@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'),
+    }
+  : {
+      // Monorepo mode: resolve from packages/core/src (rootDir is apps/dev)
+      '^@nextsparkjs/core/(.*)$': '<rootDir>/../../packages/core/src/$1',
+      '^@nextsparkjs/core$': '<rootDir>/../../packages/core/src',
+      // core's components import the UI package, resolved from source as core's own jest config does
+      '^@nextsparkjs/ui$': '<rootDir>/../../packages/ui/src/index.ts',
+      '^@/contents/(.*)$': '<rootDir>/contents/$1',
+      '^@/entities/(.*)$': '<rootDir>/contents/entities/$1',
+      '^@/plugins/(.*)$': '<rootDir>/contents/plugins/$1',
+      '^@/themes/(.*)$': '<rootDir>/contents/themes/$1',
+      '^@/(.*)$': '<rootDir>/$1',
+      // Mocks from core
+      'next/server': '<rootDir>/../../packages/core/tests/jest/__mocks__/next-server.js',
+      '^jose$': '<rootDir>/../../packages/core/tests/jest/__mocks__/jose.js',
+      '^jose/(.*)$': '<rootDir>/../../packages/core/tests/jest/__mocks__/jose.js',
+    }
+
+// Setup files based on mode
+const setupFilesAfterEnv = isNpmMode
+  ? [
+      // NPM mode: use theme's local setup only (it includes everything needed)
+      path.join(themeTestsRoot, 'setup.ts'),
+    ]
+  : [
+      // Monorepo mode: use local core setup (rootDir is apps/dev)
+      '<rootDir>/../../packages/core/tests/jest/setup.ts',
+    ]
+
+/** @type {import('jest').Config} */
+module.exports = {
+  displayName: 'theme-blog',
+  rootDir: projectRoot,
+
+  // Use roots to explicitly set test location (handles symlinks better)
+  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
+  moduleNameMapper,
+
+  // Setup files
+  setupFilesAfterEnv,
+
+  // In npm mode, use project's tsconfig with jsx override
+  // In monorepo, use the local tsconfig.jest.json
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: isNpmMode
+        ? {
+            jsx: 'react-jsx',
+            esModuleInterop: true,
+            allowSyntheticDefaultImports: true,
+            module: 'ESNext',
+            moduleResolution: 'bundler',
+            strict: true,
+            baseUrl: projectRoot,
+            paths: {
+              '@/*': ['./*'],
+              '@/contents/*': ['./contents/*'],
+            },
+          }
+        : path.join(themeTestsRoot, 'tsconfig.jest.json'),
+    }],
+  },
+
+  // Transform ignore patterns - allow TypeScript from core's jest-setup
+  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'],
+}

package/tests/jest/lib/sanitize-post-html.test.ts

@@ -0,0 +1,47 @@
+import { postHtmlHasUnsafeMarkup, sanitizePostHtml } from '@/themes/blog/lib/sanitize-post-html'
+
+describe('sanitizePostHtml', () => {
+  it('keeps formatting and drops what scripts', () => {
+    const out = sanitizePostHtml('<p><strong>bold</strong></p><img src="x" onerror="globalThis.pwned = 1"><script>globalThis.pwned = 1</script>')
+    expect(out).toContain('<strong>bold</strong>')
+    expect(out).not.toMatch(/onerror|<script/)
+  })
+
+  it('returns an empty string for no input', () => {
+    expect(sanitizePostHtml('')).toBe('')
+    expect(sanitizePostHtml(null)).toBe('')
+    expect(sanitizePostHtml(undefined)).toBe('')
+  })
+})
+
+describe('postHtmlHasUnsafeMarkup', () => {
+  it('is true when sanitising removes or alters anything', () => {
+    for (const unsafe of [
+      '<img src="x" onerror="globalThis.pwned = 1">',
+      '<p>x</p><script>globalThis.pwned = 1</script>',
+      '<a href="javascript:globalThis.pwned = 1">x</a>',
+      '<img title=" x " onerror="globalThis.pwned = 1" src="bad">',
+      '<p onclick="globalThis.pwned = 1">x</p>',
+      '<a title=" y " href=" javascript:globalThis.pwned = 1">x</a>',
+      '<script>globalThis.pwned = 1</script>',
+      '<head><base href="https://attacker.test/"></head><p>safe</p>',
+      '<template><img src="x" onerror="globalThis.pwned = 1"></template>',
+      '<template><template><img src="x" onerror="globalThis.pwned = 1"></template></template>',
+    ]) {
+      expect(postHtmlHasUnsafeMarkup(unsafe)).toBe(true)
+    }
+  })
+
+  it('is false for markup the parser only re-nests or re-serialises', () => {
+    for (const safe of [
+      '<p><ul><li>item</li></ul></p>',
+      '<p>plain <em>text</em></p>',
+      '  <p>leading whitespace</p>',
+      '<p>a&nbsp;b<br></p>',
+      '<ol><li>one</li><li><b>two</b></li></ol>',
+      '<p style="text-align: center">centred</p>',
+    ]) {
+      expect(postHtmlHasUnsafeMarkup(safe)).toBe(false)
+    }
+  })
+})