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

package/dist/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/dist/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')
+    })
+  })
+})

package/dist/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/dist/templates/contents/themes/starter/tests/cypress/support/e2e.ts

@@ -5,17 +5,49 @@
  * Use it to load plugins, add global hooks, and import commands.
  */
 
+// Testing Library for better element queries
+import '@testing-library/cypress/add-commands'
+
+// Import @cypress/grep for test filtering by tags
+import registerCypressGrep from '@cypress/grep'
+registerCypressGrep()
+
 // Import custom commands
 import './commands'
 
 // Import documentation commands (optional - for demo videos)
+// Requires cypress-slow-down: pnpm add -D cypress-slow-down
 // import './doc-commands'
 
-// Disable uncaught exception handling to prevent test failures
-// from application errors that don't affect test assertions
+// Global error handling
 Cypress.on('uncaught:exception', (err) => {
-  // Returning false here prevents Cypress from failing the test
-  // You may want to be more selective about which errors to ignore
+  // Ignore React hydration errors
+  if (err.message.includes('Hydration')) {
+    return false
+  }
+  // Ignore ResizeObserver errors
+  if (err.message.includes('ResizeObserver')) {
+    return false
+  }
+  // Log other errors but don't fail tests
   console.error('Uncaught exception:', err.message)
   return false
 })
+
+// Global before hook
+beforeEach(() => {
+  cy.clearCookies()
+  cy.clearLocalStorage()
+})
+
+// Type declarations for @cypress/grep
+declare global {
+  namespace Cypress {
+    interface SuiteConfigOverrides {
+      tags?: string | string[]
+    }
+    interface TestConfigOverrides {
+      tags?: string | string[]
+    }
+  }
+}