@nextsparkjs/theme-default 0.1.0-beta.21 → 0.1.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/theme-default",
-  "version": "0.1.0-beta.21",
+  "version": "0.1.0-beta.22",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",

package/tests/cypress/support/e2e.ts

@@ -0,0 +1,89 @@
+/**
+ * Cypress E2E Support File for Theme
+ *
+ * This file is used when running tests in npm mode (outside monorepo).
+ * In monorepo mode, the core support file is used instead via cypress.config.ts.
+ *
+ * For documentation video commands, install cypress-slow-down:
+ *   pnpm add -D cypress-slow-down
+ *   Then uncomment the doc-commands import below.
+ */
+
+import '@testing-library/cypress/add-commands'
+
+// Import @cypress/grep for test filtering by tags
+import registerCypressGrep from '@cypress/grep'
+registerCypressGrep()
+
+// Doc commands are optional (require cypress-slow-down)
+// Uncomment if you have cypress-slow-down installed:
+// import './doc-commands'
+
+// Global error handling
+Cypress.on('uncaught:exception', (err) => {
+  // Ignore React hydration errors
+  if (err.message.includes('Hydration')) {
+    return false
+  }
+  // Ignore ResizeObserver errors
+  if (err.message.includes('ResizeObserver')) {
+    return false
+  }
+  return true
+})
+
+// Global before hook
+beforeEach(() => {
+  cy.clearCookies()
+  cy.clearLocalStorage()
+})
+
+// Type declarations for @cypress/grep and custom commands
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to make API requests with better error handling
+       */
+      apiRequest(options: Partial<Cypress.RequestOptions>): Chainable<Cypress.Response<any>>
+
+      /**
+       * Login command for authenticated tests
+       */
+      login(email: string, password: string): Chainable<void>
+    }
+    interface SuiteConfigOverrides {
+      tags?: string | string[]
+    }
+    interface TestConfigOverrides {
+      tags?: string | string[]
+    }
+  }
+}
+
+// Custom API request command
+Cypress.Commands.add('apiRequest', (options) => {
+  const defaultOptions = {
+    failOnStatusCode: false,
+    timeout: 15000,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers
+    }
+  }
+  return cy.request({
+    ...defaultOptions,
+    ...options
+  })
+})
+
+// Login command for authenticated tests
+Cypress.Commands.add('login', (email: string, password: string) => {
+  cy.session([email, password], () => {
+    cy.visit('/login')
+    cy.get('[data-testid="email-input"], input[name="email"]').type(email)
+    cy.get('[data-testid="password-input"], input[name="password"]').type(password)
+    cy.get('[data-testid="submit-button"], button[type="submit"]').click()
+    cy.url().should('include', '/dashboard')
+  })
+})

package/tests/cypress.config.ts

@@ -1,41 +1,55 @@
 /**
  * Cypress Configuration for Default Theme
  *
- * This config is theme-specific and used by scripts/cy.mjs.
+ * This config works in both monorepo and npm mode.
  * Run with: NEXT_PUBLIC_ACTIVE_THEME=default pnpm cy:open
  */
 
 import { defineConfig } from 'cypress'
 import path from 'path'
 import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+// 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')
 
+// Detect if running in npm mode (no packages/core folder) vs monorepo
+const isNpmMode = !fs.existsSync(path.join(projectRoot, 'packages/core'))
+
 // Load environment variables
 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
 
 export default defineConfig({
   e2e: {
     // Base URL for the application
     baseUrl: `http://localhost:${port}`,
 
-    // Spec patterns: core tests + theme tests
-    specPattern: [
-      // Core tests (always included)
-      path.join(projectRoot, 'packages/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, 'packages/core/tests/cypress/support/e2e.ts'),
+    // Spec patterns: theme tests (core tests only in monorepo)
+    specPattern: isNpmMode
+      ? [
+          // npm mode: only theme tests
+          path.join(__dirname, 'cypress/e2e/**/*.cy.{js,ts}'),
+        ]
+      : [
+          // Monorepo: core tests + theme tests
+          path.join(projectRoot, 'packages/core/tests/cypress/e2e/core/**/*.cy.{js,ts}'),
+          path.join(__dirname, 'cypress/e2e/**/*.cy.{js,ts}'),
+        ],
+
+    // Support file (theme-local in npm mode, core in monorepo)
+    supportFile: isNpmMode
+      ? path.join(__dirname, 'cypress/support/e2e.ts')
+      : path.join(projectRoot, 'packages/core/tests/cypress/support/e2e.ts'),
 
     // Fixtures folder (theme-specific)
     fixturesFolder: path.join(__dirname, 'cypress/fixtures'),
@@ -96,15 +110,16 @@ export default defineConfig({
       grepOmitFiltered: true,
     },
 
-    setupNodeEvents(on, config) {
+    async setupNodeEvents(on, config) {
       // 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)
+      const grepPlugin = await import('@cypress/grep/src/plugin.js')
+      ;(grepPlugin.default || grepPlugin)(config)
 
       // Documentation video tasks
       on('task', {