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

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

@@ -0,0 +1,170 @@
+/**
+ * Jest Setup for Starter Theme
+ *
+ * This file provides complete Jest setup for npm mode.
+ * It includes all necessary polyfills and mocks.
+ */
+
+import '@testing-library/jest-dom'
+import { TextEncoder, TextDecoder } from 'util'
+
+// Polyfill TextEncoder/TextDecoder for jsdom
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder as typeof global.TextDecoder
+
+// Polyfill Web APIs for Next.js server components testing
+class MockHeaders {
+  private _headers: Map<string, string> = new Map()
+
+  constructor(init?: HeadersInit) {
+    if (init) {
+      if (init instanceof MockHeaders) {
+        init._headers.forEach((value, key) => this._headers.set(key, value))
+      } else if (Array.isArray(init)) {
+        init.forEach(([key, value]) => this._headers.set(key.toLowerCase(), value))
+      } else {
+        Object.entries(init).forEach(([key, value]) => this._headers.set(key.toLowerCase(), value))
+      }
+    }
+  }
+
+  get(name: string) { return this._headers.get(name.toLowerCase()) || null }
+  set(name: string, value: string) { this._headers.set(name.toLowerCase(), value) }
+  has(name: string) { return this._headers.has(name.toLowerCase()) }
+  delete(name: string) { this._headers.delete(name.toLowerCase()) }
+  forEach(cb: (value: string, key: string) => void) { this._headers.forEach(cb) }
+  entries() { return this._headers.entries() }
+  keys() { return this._headers.keys() }
+  values() { return this._headers.values() }
+}
+
+class MockRequest {
+  url: string
+  method: string
+  headers: MockHeaders
+  private _body: any
+
+  constructor(input: string | URL, init?: RequestInit) {
+    this.url = typeof input === 'string' ? input : input.toString()
+    this.method = init?.method || 'GET'
+    this.headers = new MockHeaders(init?.headers as HeadersInit)
+    this._body = init?.body
+  }
+
+  async json() {
+    if (!this._body) return {}
+    return typeof this._body === 'string' ? JSON.parse(this._body) : this._body
+  }
+
+  async text() {
+    return this._body?.toString() || ''
+  }
+
+  clone() {
+    return new MockRequest(this.url, {
+      method: this.method,
+      headers: Object.fromEntries(this.headers.entries()),
+      body: this._body,
+    })
+  }
+}
+
+class MockResponse {
+  body: any
+  status: number
+  statusText: string
+  headers: MockHeaders
+  ok: boolean
+
+  constructor(body?: any, init?: ResponseInit) {
+    this.body = body
+    this.status = init?.status || 200
+    this.statusText = init?.statusText || 'OK'
+    this.headers = new MockHeaders(init?.headers as HeadersInit)
+    this.ok = this.status >= 200 && this.status < 300
+  }
+
+  async json() {
+    if (!this.body) return {}
+    return typeof this.body === 'string' ? JSON.parse(this.body) : this.body
+  }
+
+  async text() {
+    return this.body?.toString() || ''
+  }
+
+  clone() {
+    return new MockResponse(this.body, {
+      status: this.status,
+      statusText: this.statusText,
+      headers: Object.fromEntries(this.headers.entries()),
+    })
+  }
+
+  static json(data: any, init?: ResponseInit) {
+    return new MockResponse(JSON.stringify(data), {
+      ...init,
+      headers: { 'Content-Type': 'application/json', ...(init?.headers || {}) as object },
+    })
+  }
+}
+
+// Assign to global scope
+global.Headers = MockHeaders as any
+global.Request = MockRequest as any
+global.Response = MockResponse as any
+
+// Mock fetch
+global.fetch = jest.fn().mockResolvedValue(new MockResponse('{}', { status: 200 }))
+
+// Mock Web Crypto API
+const crypto = require('crypto')
+Object.defineProperty(global, 'crypto', {
+  value: {
+    getRandomValues: (arr: Uint8Array) => crypto.randomFillSync(arr),
+    randomUUID: () => crypto.randomUUID(),
+    subtle: {
+      digest: async (algorithm: string, data: BufferSource) => {
+        const hash = crypto.createHash(algorithm.toLowerCase().replace('-', ''))
+        hash.update(Buffer.from(data as ArrayBuffer))
+        return hash.digest().buffer
+      },
+      encrypt: jest.fn(),
+      decrypt: jest.fn(),
+      sign: jest.fn(),
+      verify: jest.fn(),
+      generateKey: jest.fn(),
+      importKey: jest.fn(),
+      exportKey: jest.fn(),
+    },
+  },
+})
+
+// Mock matchMedia for component tests with media queries
+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(),
+}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/core",
-  "version": "0.1.0-beta.22",
+  "version": "0.1.0-beta.24",
   "description": "NextSpark - The complete SaaS framework for Next.js",
   "license": "MIT",
   "author": "NextSpark <hello@nextspark.dev>",
@@ -223,16 +223,6 @@
     "README.md",
     "scripts"
   ],
-  "scripts": {
-    "build": "tsup && pnpm build:dts && pnpm build:ui-css",
-    "build:js": "tsup",
-    "build:dts": "tsc -p tsconfig.dts.json || echo '⚠️  DTS generation completed with some type errors (partial coverage)'",
-    "build:ui-css": "node scripts/build/build-ui-css.mjs",
-    "dev": "tsup --watch",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
   "peerDependencies": {
     "next": ">=14.0.0",
     "react": ">=18.0.0",
@@ -317,5 +307,15 @@
     "tailwind-merge": "^3.3.1",
     "uuid": "^13.0.0",
     "zod": "^4.1.5"
+  },
+  "scripts": {
+    "build": "tsup && pnpm build:dts && pnpm build:ui-css",
+    "build:js": "tsup",
+    "build:dts": "tsc -p tsconfig.dts.json || echo '⚠️  DTS generation completed with some type errors (partial coverage)'",
+    "build:ui-css": "node scripts/build/build-ui-css.mjs",
+    "dev": "tsup --watch",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
-}
+}

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

@@ -0,0 +1,199 @@
+/**
+ * UI Selectors Validation: Authentication
+ *
+ * This test validates that authentication component selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate AuthPOM selectors work correctly
+ * - Ensure all auth.* selectors are implemented in UI components
+ * - Catch missing data-cy attributes early
+ *
+ * Scope:
+ * - Navigate to auth pages (NO login required - public pages)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds)
+ */
+
+import { AuthPOM } from '../../src/core/AuthPOM'
+
+describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const auth = AuthPOM.create()
+
+  // ============================================
+  // LOGIN PAGE SELECTORS
+  // ============================================
+  describe('Login Page Selectors - Card & Structure', () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      // Wait for card to be visible
+      cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find login card', () => {
+      cy.get(auth.selectors.loginCard).should('exist')
+    })
+
+    it('should find login header', () => {
+      cy.get(auth.selectors.loginHeader).should('exist')
+    })
+
+    it('should find login footer', () => {
+      cy.get(auth.selectors.loginFooter).should('exist')
+    })
+
+    it('should find signup link', () => {
+      cy.get(auth.selectors.loginSignupLink).should('exist')
+    })
+
+    it('should find Google signin button', () => {
+      cy.get(auth.selectors.loginGoogle).should('exist')
+    })
+
+    it('should find show email button', () => {
+      cy.get(auth.selectors.loginShowEmail).should('exist')
+    })
+  })
+
+  describe('Login Page Selectors - Email Form', () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      // Wait for card and click show email to reveal form
+      cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
+      cy.get(auth.selectors.loginShowEmail).click()
+      cy.get(auth.selectors.loginForm, { timeout: 5000 }).should('be.visible')
+    })
+
+    it('should find login form', () => {
+      cy.get(auth.selectors.loginForm).should('exist')
+    })
+
+    it('should find login options', () => {
+      cy.get(auth.selectors.loginOptions).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.loginEmail).should('exist')
+    })
+
+    it('should find password input', () => {
+      cy.get(auth.selectors.loginPassword).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.loginSubmit).should('exist')
+    })
+
+    it('should find forgot password link', () => {
+      cy.get(auth.selectors.loginForgotPassword).should('exist')
+    })
+
+    it('should find hide email button', () => {
+      cy.get(auth.selectors.loginHideEmail).should('exist')
+    })
+
+    it('should find remember checkbox', () => {
+      cy.get(auth.selectors.loginRememberCheckbox).should('exist')
+    })
+  })
+
+  // ============================================
+  // SIGNUP PAGE SELECTORS
+  // ============================================
+  describe('Signup Page Selectors', () => {
+    beforeEach(() => {
+      auth.visitSignup()
+      cy.get(auth.selectors.signupForm, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find signup form', () => {
+      cy.get(auth.selectors.signupForm).should('exist')
+    })
+
+    it('should find first name input', () => {
+      cy.get(auth.selectors.signupFirstName).should('exist')
+    })
+
+    it('should find last name input', () => {
+      cy.get(auth.selectors.signupLastName).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.signupEmail).should('exist')
+    })
+
+    it('should find password input', () => {
+      cy.get(auth.selectors.signupPassword).should('exist')
+    })
+
+    it('should find confirm password input', () => {
+      cy.get(auth.selectors.signupConfirmPassword).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.signupSubmit).should('exist')
+    })
+
+    it('should find login link', () => {
+      cy.get(auth.selectors.signupLoginLink).should('exist')
+    })
+
+    it('should find Google signup button', () => {
+      cy.get(auth.selectors.signupGoogle).should('exist')
+    })
+  })
+
+  // ============================================
+  // FORGOT PASSWORD PAGE SELECTORS
+  // ============================================
+  describe('Forgot Password Page Selectors', () => {
+    beforeEach(() => {
+      auth.visitForgotPassword()
+      cy.get(auth.selectors.forgotPasswordForm, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find forgot password form', () => {
+      cy.get(auth.selectors.forgotPasswordForm).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.forgotPasswordEmail).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.forgotPasswordSubmit).should('exist')
+    })
+
+    it('should find back to login link', () => {
+      cy.get(auth.selectors.forgotPasswordBack).should('exist')
+    })
+  })
+
+  // ============================================
+  // DEV KEYRING SELECTORS (Development only)
+  // ============================================
+  describe('Dev Keyring Selectors', () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find dev keyring container', () => {
+      cy.get(auth.selectors.devKeyring).should('exist')
+    })
+
+    it('should find dev keyring trigger', () => {
+      cy.get(auth.selectors.devKeyringTrigger).should('exist')
+    })
+
+    it('should find dev keyring content when expanded', () => {
+      cy.get(auth.selectors.devKeyringTrigger).click()
+      cy.get(auth.selectors.devKeyringContent).should('be.visible')
+    })
+
+    it('should find at least one dev user option', () => {
+      cy.get(auth.selectors.devKeyringTrigger).click()
+      cy.get(auth.selectors.devKeyringUser(0)).should('exist')
+    })
+  })
+})

package/templates/contents/themes/starter/tests/cypress/e2e/_selectors/dashboard-navigation.cy.ts

@@ -0,0 +1,104 @@
+/**
+ * UI Selectors Validation: Dashboard Navigation
+ *
+ * This test validates that dashboard navigation selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate dashboard shell and navigation selectors work correctly
+ * - Ensure core navigation components have data-cy attributes
+ * - Catch missing data-cy attributes early
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds)
+ */
+
+import { cySelector } from '../../src/selectors'
+
+describe('Dashboard Navigation Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  beforeEach(() => {
+    cy.loginAsOwner()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // DASHBOARD SHELL SELECTORS
+  // ============================================
+  describe('Dashboard Shell', () => {
+    it('should find dashboard container', () => {
+      cy.get(cySelector('dashboard.shell.container')).should('exist')
+    })
+  })
+
+  // ============================================
+  // TOPNAV SELECTORS
+  // ============================================
+  describe('Topnav Selectors', () => {
+    it('should find topnav header', () => {
+      cy.get(cySelector('dashboard.topnav.header')).should('exist')
+    })
+
+    it('should find sidebar toggle', () => {
+      cy.get(cySelector('dashboard.topnav.sidebarToggle')).should('exist')
+    })
+
+    it('should find logo', () => {
+      cy.get(cySelector('dashboard.topnav.logo')).should('exist')
+    })
+
+    it('should find actions container', () => {
+      cy.get(cySelector('dashboard.topnav.actions')).should('exist')
+    })
+
+    it('should find theme toggle', () => {
+      cy.get(cySelector('dashboard.topnav.themeToggle')).should('exist')
+    })
+
+    it('should find user menu trigger', () => {
+      cy.get(cySelector('dashboard.topnav.userMenuTrigger')).should('exist')
+    })
+
+    it('should find user menu when clicked', () => {
+      cy.get(cySelector('dashboard.topnav.userMenuTrigger')).click()
+      cy.get(cySelector('dashboard.topnav.userMenu')).should('be.visible')
+    })
+  })
+
+  // ============================================
+  // SIDEBAR SELECTORS
+  // ============================================
+  describe('Sidebar Selectors', () => {
+    it('should find sidebar container', () => {
+      cy.get(cySelector('dashboard.sidebar.container')).should('exist')
+    })
+
+    it('should find sidebar content', () => {
+      cy.get(cySelector('dashboard.sidebar.content')).should('exist')
+    })
+
+    it('should find sidebar footer', () => {
+      cy.get(cySelector('dashboard.sidebar.footer')).should('exist')
+    })
+  })
+
+  // ============================================
+  // NAVIGATION ENTITY LINKS
+  // ============================================
+  describe('Navigation Entity Links', () => {
+    it('should find tasks entity link', () => {
+      cy.get(cySelector('dashboard.navigation.entity', { slug: 'tasks' })).should('exist')
+    })
+  })
+
+  // ============================================
+  // GLOBAL SEARCH (if enabled)
+  // ============================================
+  describe('Global Search Selectors', () => {
+    it('should find search section in topnav', () => {
+      cy.get(cySelector('dashboard.topnav.searchSection')).should('exist')
+    })
+  })
+})