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

package/tests/cypress/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * Productivity Theme - Cypress Test Classes
+ *
+ * Exports all POMs, controllers, and helpers for the productivity theme tests.
+ */
+
+// Session helpers
+export {
+  PRODUCTIVITY_USERS,
+  loginAsProductivityOwner,
+  loginAsProductivityAdmin,
+  loginAsProductivityMember,
+  loginAsProductivityMemberMarketing,
+  loginAsOwner,
+} from './session-helpers'
+
+// POMs
+export { BoardsPOM } from './components/BoardsPOM'
+export { KanbanPOM } from './components/KanbanPOM'
+export { CardsPOM } from './components/CardsPOM'
+
+// API Controllers (JS - require syntax)
+// Import with: const BoardsAPIController = require('./controllers/BoardsAPIController')
+// const ListsAPIController = require('./controllers/ListsAPIController')
+// const CardsAPIController = require('./controllers/CardsAPIController')

package/tests/cypress/src/selectors.ts

@@ -0,0 +1,50 @@
+/**
+ * Theme Selectors for Cypress Tests
+ *
+ * This file re-exports from the main selectors in lib/.
+ * The lib/selectors.ts is the source of truth, placed there so
+ * block components can import it (tests/ is excluded from TypeScript).
+ *
+ * Architecture:
+ * - Core selectors: `core/lib/test/core-selectors.ts`
+ * - Theme selectors (source): `lib/selectors.ts`
+ * - Theme selectors (tests): This file (re-exports)
+ *
+ * @example POM usage:
+ * ```typescript
+ * import { cySelector, sel, SELECTORS } from '../selectors'
+ *
+ * class MyPOM extends BasePOM {
+ *   get elements() {
+ *     return {
+ *       loginForm: cySelector('auth.login.form'),
+ *       submitButton: cySelector('auth.login.submit'),
+ *       boardsList: cySelector('entities.boards.list'),
+ *     }
+ *   }
+ * }
+ * ```
+ */
+
+// Re-export everything from the lib selectors
+export {
+  BLOCK_SELECTORS,
+  ENTITY_SELECTORS,
+  KANBAN_SELECTORS,
+  THEME_SELECTORS,
+  SELECTORS,
+  sel,
+  s,
+  selDev,
+  cySelector,
+  entitySelectors,
+  CORE_SELECTORS,
+} from '../../../lib/selectors'
+
+export type {
+  ThemeSelectorsType,
+  BlockSelectorsType,
+  EntitySelectorsType,
+  KanbanSelectorsType,
+  Replacements,
+} from '../../../lib/selectors'

package/tests/cypress/src/session-helpers.ts

@@ -0,0 +1,176 @@
+/**
+ * Productivity Theme Session Helpers
+ *
+ * Direct login functions for Productivity theme tests using theme-specific users.
+ * Uses API-based login for faster and more stable authentication.
+ */
+
+/**
+ * Productivity Test Users - from app.config.ts devKeyring
+ */
+export const PRODUCTIVITY_USERS = {
+  OWNER: 'prod_owner_patricia@nextspark.dev', // Patricia Torres - Product Team (owner), Marketing Hub (owner)
+  ADMIN: 'prod_admin_member_lucas@nextspark.dev', // Lucas Luna - Product Team (admin), Marketing Hub (member)
+  MEMBER_PRODUCT: 'prod_member_diana@nextspark.dev', // Diana Rios - Product Team (member)
+  MEMBER_MARKETING: 'prod_member_marcos@nextspark.dev', // Marcos Silva - Marketing Hub (member)
+} as const
+
+// Default test password for demo users
+const TEST_PASSWORD = Cypress.env('TEST_PASSWORD') || 'Test1234'
+const API_TIMEOUT = 60000
+
+/**
+ * API login helper
+ */
+function apiLogin(email: string, password: string = TEST_PASSWORD): Cypress.Chainable<boolean> {
+  return cy.request({
+    method: 'POST',
+    url: '/api/auth/sign-in/email',
+    body: { email, password },
+    timeout: API_TIMEOUT,
+    failOnStatusCode: false
+  }).then((response) => {
+    if (response.status === 200) {
+      return true
+    } else {
+      cy.log(`⚠️ API login failed with status ${response.status}`)
+      return false
+    }
+  })
+}
+
+/**
+ * Setup team context after login
+ */
+function setupTeamContext(preferredRole?: string) {
+  cy.request({
+    method: 'GET',
+    url: '/api/v1/teams',
+    timeout: API_TIMEOUT,
+    failOnStatusCode: false
+  }).then((teamsResponse) => {
+    if (teamsResponse.status === 200 && teamsResponse.body?.data?.length > 0) {
+      const teams = teamsResponse.body.data
+      let selectedTeam = teams[0]
+      if (preferredRole) {
+        const teamWithRole = teams.find((t: { role: string }) => t.role === preferredRole)
+        if (teamWithRole) {
+          selectedTeam = teamWithRole
+        }
+      }
+      const teamId = selectedTeam.id
+      cy.log(`✅ Setting active team: ${selectedTeam.name} (${teamId})`)
+      cy.window().then((win) => {
+        win.localStorage.setItem('activeTeamId', teamId)
+      })
+      cy.request({
+        method: 'POST',
+        url: '/api/v1/teams/switch',
+        body: { teamId },
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      })
+    }
+  })
+}
+
+/**
+ * Login as Productivity Owner (Patricia Torres)
+ * Has owner role in Product Team and Marketing Hub
+ */
+export function loginAsProductivityOwner() {
+  cy.session('productivity-owner-session', () => {
+    apiLogin(PRODUCTIVITY_USERS.OWNER).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext()
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as Productivity Admin (Lucas Luna)
+ * Has admin role in Product Team, member role in Marketing Hub
+ */
+export function loginAsProductivityAdmin() {
+  cy.session('productivity-admin-session', () => {
+    apiLogin(PRODUCTIVITY_USERS.ADMIN).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext()
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as Productivity Member - Product Team (Diana Rios)
+ * Has member role in Product Team only
+ */
+export function loginAsProductivityMember() {
+  cy.session('productivity-member-session', () => {
+    apiLogin(PRODUCTIVITY_USERS.MEMBER_PRODUCT).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext('member')
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as Productivity Member - Marketing Hub (Marcos Silva)
+ * Has member role in Marketing Hub only
+ */
+export function loginAsProductivityMemberMarketing() {
+  cy.session('productivity-member-marketing-session', () => {
+    apiLogin(PRODUCTIVITY_USERS.MEMBER_MARKETING).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext('member')
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+// Aliases for convenience
+export const loginAsOwner = loginAsProductivityOwner
+export const loginAsAdmin = loginAsProductivityAdmin
+export const loginAsMember = loginAsProductivityMember

package/tests/cypress/support/e2e.ts

@@ -0,0 +1,90 @@
+/**
+ * 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
+// v5.x uses named export { register }
+import { register as 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

@@ -0,0 +1,154 @@
+/**
+ * Cypress Configuration for productivity 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: 'productivity',
+      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
+}