@nextsparkjs/core 0.1.0-beta.23 → 0.1.0-beta.24

package/templates/contents/themes/starter/tests/cypress/e2e/_selectors/tasks.cy.ts

@@ -0,0 +1,274 @@
+/**
+ * UI Selectors Validation: Tasks Entity
+ *
+ * This test validates that Tasks entity selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate TasksPOM selectors work correctly
+ * - Ensure dynamic selector generation produces valid CSS selectors
+ * - Catch missing data-cy attributes early
+ *
+ * Scope:
+ * - Login and navigate to tasks pages
+ * - Assert elements exist in DOM (no full CRUD operations)
+ * - Fast execution (< 30 seconds)
+ */
+
+import { TasksPOM } from '../tasks/TasksPOM'
+
+describe('Tasks Entity Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const tasks = TasksPOM.create()
+
+  beforeEach(() => {
+    // Login as owner before each test
+    cy.loginAsOwner()
+  })
+
+  // ============================================
+  // LIST PAGE SELECTORS
+  // ============================================
+  describe('List Page Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find table container element', () => {
+      cy.get(tasks.selectors.tableContainer).should('exist')
+    })
+
+    it('should find add button', () => {
+      cy.get(tasks.selectors.addButton).should('exist')
+    })
+
+    it('should find search input', () => {
+      cy.get(tasks.selectors.search).should('exist')
+    })
+
+    it('should find search container', () => {
+      cy.get(tasks.selectors.searchContainer).should('exist')
+    })
+
+    it('should find select all checkbox', () => {
+      cy.get(tasks.selectors.selectAll).should('exist')
+    })
+
+    it('should find pagination container', () => {
+      cy.get(tasks.selectors.pagination).should('exist')
+    })
+
+    it('should find pagination controls', () => {
+      cy.get(tasks.selectors.pageFirst).should('exist')
+      cy.get(tasks.selectors.pagePrev).should('exist')
+      cy.get(tasks.selectors.pageNext).should('exist')
+      cy.get(tasks.selectors.pageLast).should('exist')
+    })
+
+    it('should find page size selector', () => {
+      cy.get(tasks.selectors.pageSize).should('exist')
+    })
+
+    it('should find page info', () => {
+      cy.get(tasks.selectors.pageInfo).should('exist')
+    })
+
+    it('should find at least one row with dynamic selector', () => {
+      cy.get(tasks.selectors.rowGeneric).should('have.length.at.least', 1)
+    })
+  })
+
+  // ============================================
+  // FILTER SELECTORS
+  // ============================================
+  describe('Filter Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find status filter trigger', () => {
+      cy.get(tasks.selectors.filterTrigger('status')).should('exist')
+    })
+
+    it('should find priority filter trigger', () => {
+      cy.get(tasks.selectors.filterTrigger('priority')).should('exist')
+    })
+
+    it('should find filter options when opened', () => {
+      tasks.openFilter('status')
+      cy.get(tasks.selectors.filterContent('status')).should('be.visible')
+    })
+  })
+
+  // ============================================
+  // ROW DYNAMIC SELECTORS
+  // ============================================
+  describe('Row Dynamic Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find row elements with dynamic ID', () => {
+      // Get any row and extract its ID to test dynamic selectors
+      cy.get(tasks.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          // Extract ID from data-cy="tasks-row-{id}"
+          const id = dataCy?.replace('tasks-row-', '') || ''
+          expect(id).to.not.be.empty
+
+          // Test dynamic selector functions work
+          cy.get(tasks.selectors.row(id)).should('exist')
+          cy.get(tasks.selectors.rowSelect(id)).should('exist')
+          cy.get(tasks.selectors.rowMenu(id)).should('exist')
+        })
+    })
+  })
+
+  // ============================================
+  // CREATE PAGE SELECTORS
+  // ============================================
+  describe('Create Page Selectors', () => {
+    beforeEach(() => {
+      tasks.visitCreate()
+      tasks.waitForForm()
+    })
+
+    it('should find form container', () => {
+      cy.get(tasks.selectors.form).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(tasks.selectors.submitButton).should('exist')
+    })
+
+    it('should find create header', () => {
+      cy.get(tasks.selectors.createHeader).should('exist')
+    })
+
+    it('should find back button', () => {
+      cy.get(tasks.selectors.backButton).should('exist')
+    })
+
+    it('should find title field', () => {
+      cy.get(tasks.selectors.field('title')).should('exist')
+    })
+
+    it('should find description field', () => {
+      cy.get(tasks.selectors.field('description')).should('exist')
+    })
+
+    it('should find status field', () => {
+      cy.get(tasks.selectors.field('status')).should('exist')
+    })
+
+    it('should find priority field', () => {
+      cy.get(tasks.selectors.field('priority')).should('exist')
+    })
+  })
+
+  // ============================================
+  // EDIT PAGE SELECTORS
+  // ============================================
+  describe('Edit Page Selectors', () => {
+    let testTaskId: string
+
+    beforeEach(() => {
+      // Create a task to edit
+      cy.createTask({
+        title: `Edit Test ${Date.now()}`,
+        status: 'todo',
+        priority: 'medium'
+      }).then((response) => {
+        if (response.status === 201) {
+          testTaskId = response.body.data.id
+          tasks.visitEdit(testTaskId)
+          tasks.waitForForm()
+        }
+      })
+    })
+
+    afterEach(() => {
+      // Clean up
+      if (testTaskId) {
+        cy.window().then((win) => {
+          const teamId = win.localStorage.getItem('activeTeamId')
+          cy.request({
+            method: 'DELETE',
+            url: `/api/v1/tasks/${testTaskId}`,
+            headers: { 'x-team-id': teamId || '' },
+            failOnStatusCode: false
+          })
+        })
+      }
+    })
+
+    it('should find form container', () => {
+      cy.get(tasks.selectors.form).should('exist')
+    })
+
+    it('should find edit header', () => {
+      cy.get(tasks.selectors.editHeader).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(tasks.selectors.submitButton).should('exist')
+    })
+  })
+
+  // ============================================
+  // DETAIL PAGE SELECTORS
+  // ============================================
+  describe('Detail Page Selectors', () => {
+    let testTaskId: string
+
+    beforeEach(() => {
+      // Create a task to view
+      cy.createTask({
+        title: `Detail Test ${Date.now()}`,
+        status: 'todo',
+        priority: 'medium'
+      }).then((response) => {
+        if (response.status === 201) {
+          testTaskId = response.body.data.id
+          tasks.visitDetail(testTaskId)
+          tasks.waitForDetail()
+        }
+      })
+    })
+
+    afterEach(() => {
+      // Clean up
+      if (testTaskId) {
+        cy.window().then((win) => {
+          const teamId = win.localStorage.getItem('activeTeamId')
+          cy.request({
+            method: 'DELETE',
+            url: `/api/v1/tasks/${testTaskId}`,
+            headers: { 'x-team-id': teamId || '' },
+            failOnStatusCode: false
+          })
+        })
+      }
+    })
+
+    it('should find detail container', () => {
+      cy.get(tasks.selectors.detailContainer).should('exist')
+    })
+
+    it('should find detail header', () => {
+      cy.get(tasks.selectors.detailHeader).should('exist')
+    })
+
+    it('should find edit button', () => {
+      cy.get(tasks.selectors.editButton).should('exist')
+    })
+
+    it('should find delete button', () => {
+      cy.get(tasks.selectors.deleteButton).should('exist')
+    })
+  })
+})

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

@@ -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/templates/contents/themes/starter/tests/jest/jest.config.cjs

@@ -0,0 +1,90 @@
+/**
+ * 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
+  moduleNameMapper: {
+    // Resolve from node_modules
+    '^@nextsparkjs/core/(.*)$': '@nextsparkjs/core/$1',
+    '^@nextsparkjs/core$': '@nextsparkjs/core',
+    '^@/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
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: path.join(projectRoot, 'tsconfig.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'],
+}