@elizaos/cli 1.0.9 → 1.0.11

package/templates/project-starter/src/__tests__/cypress/e2e/agent-chat.cy.ts

@@ -0,0 +1,235 @@
+/**
+ * E2E Tests for Agent Chat Functionality
+ *
+ * These tests verify the chat interface and agent interactions
+ * in the running application.
+ */
+
+describe('Agent Chat E2E Tests', () => {
+  beforeEach(() => {
+    // Visit the dashboard
+    cy.visit('/');
+
+    // Navigate to chat or agents section
+    cy.get('a[href*="chat"], a[href*="agent"], button:contains("chat"), button:contains("agent")', {
+      timeout: 5000,
+    })
+      .first()
+      .click({ force: true });
+  });
+
+  describe('Chat Interface', () => {
+    it('should display the chat interface', () => {
+      // Look for chat-related elements
+      cy.get('[data-testid="chat-container"], .chat-container, #chat, [role="main"]').should(
+        'be.visible'
+      );
+    });
+
+    it('should have a message input field', () => {
+      // Look for input field
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .should('be.visible')
+        .should('not.be.disabled');
+    });
+
+    it('should have a send button', () => {
+      // Look for send button
+      cy.get('button')
+        .filter(':contains("Send"), :contains("send"), [aria-label*="send"]')
+        .should('be.visible')
+        .should('not.be.disabled');
+    });
+  });
+
+  describe('Sending Messages', () => {
+    it('should send a message when typing and clicking send', () => {
+      const testMessage = 'Hello, this is a test message';
+
+      // Type message
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type(testMessage);
+
+      // Click send
+      cy.get('button')
+        .filter(':contains("Send"), :contains("send"), [aria-label*="send"]')
+        .first()
+        .click();
+
+      // Verify message appears in chat
+      cy.contains(testMessage, { timeout: 10000 }).should('be.visible');
+    });
+
+    it('should send a message when pressing Enter', () => {
+      const testMessage = 'Test message with Enter key';
+
+      // Type message and press Enter
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type(`${testMessage}{enter}`);
+
+      // Verify message appears
+      cy.contains(testMessage, { timeout: 10000 }).should('be.visible');
+    });
+
+    it('should clear input after sending', () => {
+      const testMessage = 'Message to clear';
+
+      // Get input element
+      const input = cy
+        .get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first();
+
+      // Type and send
+      input.type(testMessage);
+
+      cy.get('button')
+        .filter(':contains("Send"), :contains("send"), [aria-label*="send"]')
+        .first()
+        .click();
+
+      // Verify input is cleared
+      input.should('have.value', '');
+    });
+  });
+
+  describe('Agent Responses', () => {
+    it('should receive a response from the agent', () => {
+      // Send a simple message
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('Hello agent{enter}');
+
+      // Wait for agent response
+      // Look for typical agent response indicators
+      cy.get('[data-testid*="agent"], [class*="agent"], [role="article"]', {
+        timeout: 15000,
+      }).should('have.length.greaterThan', 0);
+    });
+
+    it('should show typing indicator while agent is responding', () => {
+      // Send message
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('Tell me about yourself{enter}');
+
+      // Look for typing indicator
+      cy.get('[data-testid="typing"], [class*="typing"], [aria-label*="typing"]', {
+        timeout: 5000,
+      }).should('be.visible');
+
+      // Typing indicator should disappear after response
+      cy.get('[data-testid="typing"], [class*="typing"], [aria-label*="typing"]', {
+        timeout: 15000,
+      }).should('not.exist');
+    });
+  });
+
+  describe('Chat History', () => {
+    it('should maintain chat history', () => {
+      const messages = ['First message', 'Second message', 'Third message'];
+
+      // Send multiple messages
+      messages.forEach((msg, index) => {
+        cy.get('input[type="text"], textarea, [contenteditable="true"]')
+          .filter(':visible')
+          .first()
+          .type(`${msg}{enter}`);
+
+        // Wait a bit between messages
+        cy.wait(1000);
+      });
+
+      // Verify all messages are visible
+      messages.forEach((msg) => {
+        cy.contains(msg).should('be.visible');
+      });
+    });
+
+    it('should scroll to latest message', () => {
+      // Send multiple messages to create scroll
+      for (let i = 0; i < 10; i++) {
+        cy.get('input[type="text"], textarea, [contenteditable="true"]')
+          .filter(':visible')
+          .first()
+          .type(`Message number ${i}{enter}`);
+        cy.wait(500);
+      }
+
+      // Check that the latest message is in view
+      cy.contains('Message number 9').should('be.visible');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle network errors gracefully', () => {
+      // Intercept API calls and force error
+      cy.intercept('POST', '**/api/chat/**', {
+        statusCode: 500,
+        body: { error: 'Server error' },
+      }).as('chatError');
+
+      // Send message
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('This will fail{enter}');
+
+      // Should show error message
+      cy.contains(/error|failed|try again/i, { timeout: 10000 }).should('be.visible');
+    });
+
+    it('should prevent sending empty messages', () => {
+      // Try to send empty message
+      cy.get('button')
+        .filter(':contains("Send"), :contains("send"), [aria-label*="send"]')
+        .first()
+        .click();
+
+      // Should not create any new message elements
+      cy.get('[data-testid*="message"], [class*="message"]').should('have.length', 0);
+    });
+  });
+});
+
+/**
+ * CHAT TESTING PATTERNS
+ *
+ * 1. MESSAGE FLOW
+ *    - Test sending messages
+ *    - Verify message display
+ *    - Check input clearing
+ *    - Test keyboard shortcuts
+ *
+ * 2. AGENT INTERACTION
+ *    - Wait for responses
+ *    - Check typing indicators
+ *    - Verify response format
+ *    - Test conversation context
+ *
+ * 3. UI BEHAVIOR
+ *    - Auto-scroll to latest
+ *    - Maintain history
+ *    - Handle long messages
+ *    - Responsive layout
+ *
+ * 4. ERROR CASES
+ *    - Network failures
+ *    - Empty messages
+ *    - Rate limiting
+ *    - Session timeouts
+ *
+ * TIPS:
+ * - Use generous timeouts for agent responses
+ * - Test real-world scenarios
+ * - Verify accessibility features
+ * - Check mobile interactions
+ */

package/templates/project-starter/src/__tests__/cypress/e2e/dashboard.cy.ts

@@ -0,0 +1,146 @@
+/**
+ * E2E Tests for ElizaOS Dashboard
+ *
+ * These tests verify the full application flow from a user's perspective,
+ * testing real interactions with the running application.
+ */
+
+describe('Dashboard E2E Tests', () => {
+  beforeEach(() => {
+    // Visit the dashboard before each test
+    cy.visit('/');
+  });
+
+  describe('Dashboard Loading', () => {
+    it('should load the dashboard successfully', () => {
+      // Check that the page loads
+      cy.url().should('include', 'localhost:3000');
+
+      // Look for common dashboard elements
+      cy.get('body').should('be.visible');
+
+      // Check for any loading indicators
+      cy.get('[data-testid="loading"]', { timeout: 5000 }).should('not.exist');
+    });
+
+    it('should display the application title or logo', () => {
+      // Look for application branding
+      cy.contains(/eliza|agent/i).should('be.visible');
+    });
+
+    it('should have proper meta tags', () => {
+      // Check viewport meta tag
+      cy.get('meta[name="viewport"]')
+        .should('exist')
+        .should('have.attr', 'content')
+        .and('include', 'width=device-width');
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should navigate to different sections', () => {
+      // Look for navigation elements
+      cy.get('nav, [role="navigation"], .navigation').should('exist');
+
+      // Check for common navigation items
+      const navItems = ['agents', 'chat', 'settings', 'docs'];
+      navItems.forEach((item) => {
+        cy.get(`a[href*="${item}"], button:contains("${item}")`, { timeout: 2000 }).should('exist');
+      });
+    });
+
+    it('should handle navigation clicks', () => {
+      // Click on a navigation item if it exists
+      cy.get('a[href*="agents"], button:contains("agents")', { timeout: 2000 })
+        .first()
+        .click({ force: true });
+
+      // Verify URL changed or content updated
+      cy.url().should('match', /agents|agent/i);
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('should be responsive on mobile', () => {
+      // Test mobile viewport
+      cy.viewport(375, 667);
+      cy.wait(500);
+
+      // Check that content is still visible
+      cy.get('body').should('be.visible');
+
+      // Mobile menu might be hidden
+      cy.get('nav, [role="navigation"]').then(($nav) => {
+        if ($nav.is(':visible')) {
+          expect($nav).to.be.visible;
+        } else {
+          // Look for mobile menu button
+          cy.get('[aria-label*="menu"], button[class*="menu"]').should('be.visible');
+        }
+      });
+    });
+
+    it('should be responsive on tablet', () => {
+      // Test tablet viewport
+      cy.viewport(768, 1024);
+      cy.wait(500);
+
+      cy.get('body').should('be.visible');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle 404 pages gracefully', () => {
+      cy.visit('/non-existent-page', { failOnStatusCode: false });
+
+      // Should show some error message or redirect
+      cy.contains(/404|not found|error/i, { timeout: 5000 }).should('be.visible');
+    });
+
+    it('should handle network errors', () => {
+      // Intercept and force a network error
+      cy.intercept('GET', '/api/**', { forceNetworkError: true }).as('networkError');
+
+      cy.visit('/');
+
+      // Should handle the error gracefully
+      cy.get('body').should('be.visible');
+    });
+  });
+});
+
+/**
+ * E2E TESTING PATTERNS FOR ELIZAOS
+ *
+ * 1. REAL APPLICATION TESTING
+ *    - Test against the running application
+ *    - No mocking unless testing error scenarios
+ *    - Verify actual user workflows
+ *
+ * 2. PAGE NAVIGATION
+ *    - Test all navigation paths
+ *    - Verify URL changes
+ *    - Check for proper redirects
+ *
+ * 3. RESPONSIVE TESTING
+ *    - Test multiple viewport sizes
+ *    - Verify mobile menu behavior
+ *    - Check touch interactions
+ *
+ * 4. PERFORMANCE
+ *    - Set reasonable timeouts
+ *    - Check for loading indicators
+ *    - Verify async operations complete
+ *
+ * 5. ERROR SCENARIOS
+ *    - Test 404 pages
+ *    - Network failures
+ *    - API errors
+ *    - Form validation
+ *
+ * BEST PRACTICES:
+ * - Use data-testid attributes for reliable selection
+ * - Avoid brittle selectors based on classes
+ * - Test user-visible behavior, not implementation
+ * - Keep tests independent and idempotent
+ */

package/templates/project-starter/src/__tests__/cypress/e2e/user-workflow.cy.ts

@@ -0,0 +1,257 @@
+/**
+ * E2E Tests for Complete User Workflows
+ *
+ * These tests simulate real user journeys through the application,
+ * testing multiple features in sequence as a user would experience them.
+ */
+
+describe('Complete User Workflow E2E Tests', () => {
+  describe('New User Onboarding', () => {
+    it('should complete the full onboarding flow', () => {
+      // Start at the home page
+      cy.visit('/');
+
+      // Check for welcome message or onboarding prompt
+      cy.get('body').then(($body) => {
+        if ($body.text().includes('Welcome') || $body.text().includes('Get Started')) {
+          // Click get started if available
+          cy.contains(/get started|start|begin/i)
+            .first()
+            .click();
+        }
+      });
+
+      // Navigate to agents/chat
+      cy.get('a[href*="agent"], button:contains("agent"), a[href*="chat"], button:contains("chat")')
+        .first()
+        .click({ force: true });
+
+      // Wait for page to load
+      cy.wait(1000);
+
+      // Send first message
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('Hello, I am a new user{enter}');
+
+      // Wait for response
+      cy.get('[data-testid*="message"], [class*="message"], [role="article"]', {
+        timeout: 15000,
+      }).should('have.length.greaterThan', 0);
+
+      // Continue conversation
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('What can you help me with?{enter}');
+
+      // Verify we got another response
+      cy.get('[data-testid*="message"], [class*="message"], [role="article"]', {
+        timeout: 15000,
+      }).should('have.length.greaterThan', 1);
+    });
+  });
+
+  describe('Agent Configuration Workflow', () => {
+    it('should configure and interact with an agent', () => {
+      cy.visit('/');
+
+      // Look for settings or configuration
+      cy.get(
+        'a[href*="settings"], button:contains("settings"), a[href*="config"], button:contains("config")'
+      )
+        .first()
+        .then(($elem) => {
+          if ($elem.length) {
+            cy.wrap($elem).click({ force: true });
+
+            // Look for agent configuration options
+            cy.contains(/agent|model|personality/i).should('be.visible');
+
+            // Navigate back to chat
+            cy.get('a[href*="chat"], button:contains("chat")').first().click({ force: true });
+          }
+        });
+
+      // Test agent with specific queries
+      const queries = ['What is your name?', 'Tell me a joke', 'What is 2 + 2?'];
+
+      queries.forEach((query, index) => {
+        cy.get('input[type="text"], textarea, [contenteditable="true"]')
+          .filter(':visible')
+          .first()
+          .type(`${query}{enter}`);
+
+        // Wait for response before next query
+        cy.wait(2000);
+
+        // Verify response received
+        cy.get('[data-testid*="message"], [class*="message"], [role="article"]').should(
+          'have.length.greaterThan',
+          index * 2
+        );
+      });
+    });
+  });
+
+  describe('Multi-Session Workflow', () => {
+    it('should maintain state across page refreshes', () => {
+      cy.visit('/');
+
+      // Navigate to chat
+      cy.get('a[href*="chat"], a[href*="agent"], button:contains("chat"), button:contains("agent")')
+        .first()
+        .click({ force: true });
+
+      // Send a message
+      const testMessage = 'Remember this message for testing';
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type(`${testMessage}{enter}`);
+
+      // Wait for response
+      cy.wait(3000);
+
+      // Refresh the page
+      cy.reload();
+
+      // Check if conversation history is maintained
+      cy.contains(testMessage, { timeout: 10000 }).should('be.visible');
+    });
+
+    it('should handle multiple chat sessions', () => {
+      cy.visit('/');
+
+      // Create first chat session
+      cy.get('a[href*="chat"], button:contains("chat")').first().click({ force: true });
+
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('First session message{enter}');
+
+      cy.wait(2000);
+
+      // Look for new chat/session button
+      cy.get('button')
+        .filter(':contains("New"), :contains("new"), [aria-label*="new"]')
+        .first()
+        .then(($btn) => {
+          if ($btn.length) {
+            cy.wrap($btn).click();
+
+            // Send message in new session
+            cy.get('input[type="text"], textarea, [contenteditable="true"]')
+              .filter(':visible')
+              .first()
+              .type('Second session message{enter}');
+
+            // Verify messages are separate
+            cy.contains('Second session message').should('be.visible');
+            cy.contains('First session message').should('not.be.visible');
+          }
+        });
+    });
+  });
+
+  describe('Error Recovery Workflow', () => {
+    it('should recover from errors and continue working', () => {
+      cy.visit('/');
+
+      // Intercept network requests to simulate offline
+      cy.intercept('*', { forceNetworkError: true }).as('offlineMode');
+
+      // Try to send a message
+      cy.get('a[href*="chat"], button:contains("chat")').first().click({ force: true });
+
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('Offline message{enter}');
+
+      // Should show error
+      cy.contains(/offline|error|connection|failed/i, { timeout: 5000 }).should('be.visible');
+
+      // Remove the offline intercept to go back online
+      cy.intercept('*', (req) => {
+        req.continue();
+      }).as('onlineMode');
+
+      // Retry sending
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .type('Online message{enter}');
+
+      // Should work now
+      cy.contains('Online message', { timeout: 10000 }).should('be.visible');
+    });
+  });
+
+  describe('Performance Workflow', () => {
+    it('should handle rapid message sending', () => {
+      cy.visit('/');
+
+      cy.get('a[href*="chat"], button:contains("chat")').first().click({ force: true });
+
+      // Send multiple messages rapidly
+      for (let i = 0; i < 5; i++) {
+        cy.get('input[type="text"], textarea, [contenteditable="true"]')
+          .filter(':visible')
+          .first()
+          .type(`Rapid message ${i}{enter}`);
+
+        // Very short delay
+        cy.wait(100);
+      }
+
+      // All messages should be visible
+      for (let i = 0; i < 5; i++) {
+        cy.contains(`Rapid message ${i}`).should('be.visible');
+      }
+
+      // Should still be responsive
+      cy.get('input[type="text"], textarea, [contenteditable="true"]')
+        .filter(':visible')
+        .first()
+        .should('not.be.disabled');
+    });
+  });
+});
+
+/**
+ * WORKFLOW TESTING BEST PRACTICES
+ *
+ * 1. COMPLETE JOURNEYS
+ *    - Test from start to finish
+ *    - Include navigation between features
+ *    - Verify state persistence
+ *    - Test error recovery
+ *
+ * 2. REALISTIC SCENARIOS
+ *    - New user experience
+ *    - Power user workflows
+ *    - Edge cases and errors
+ *    - Performance under load
+ *
+ * 3. STATE MANAGEMENT
+ *    - Test across refreshes
+ *    - Multiple sessions
+ *    - Browser back/forward
+ *    - Local storage
+ *
+ * 4. INTEGRATION POINTS
+ *    - API interactions
+ *    - Real-time updates
+ *    - Authentication flows
+ *    - Data persistence
+ *
+ * WORKFLOW PATTERNS:
+ * - Always start from a clean state
+ * - Use realistic timing between actions
+ * - Verify intermediate states
+ * - Test both happy and error paths
+ * - Consider mobile workflows
+ */

package/templates/project-starter/src/__tests__/cypress/support/commands.ts

@@ -0,0 +1,44 @@
+// ***********************************************
+// This file is where you can create custom Cypress commands
+// and overwrite existing commands.
+//
+// For comprehensive examples, visit:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// Example custom command
+// Cypress.Commands.add('login', (email, password) => { ... })
+
+// Extend Window interface
+declare global {
+  interface Window {
+    ELIZA_CONFIG?: {
+      agentId: string;
+      apiBase: string;
+    };
+  }
+}
+
+// Custom command to check if element is in dark mode
+Cypress.Commands.add('shouldBeDarkMode', () => {
+  cy.get('html').should('have.class', 'dark');
+});
+
+// Custom command to set ELIZA_CONFIG
+Cypress.Commands.add('setElizaConfig', (config) => {
+  cy.window().then((win) => {
+    win.ELIZA_CONFIG = config;
+  });
+});
+
+// TypeScript definitions
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      shouldBeDarkMode(): Chainable<JQuery<HTMLElement>>;
+      setElizaConfig(config: { agentId: string; apiBase: string }): Chainable<Window>;
+    }
+  }
+}
+
+export {};

package/templates/project-starter/src/__tests__/cypress/support/component-index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cypress Component Testing</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>