@elizaos/cli 1.0.8 → 1.0.10

package/templates/plugin-starter/src/__tests__/cypress/component/PanelComponent.cy.tsx

@@ -0,0 +1,287 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { panels } from '../../../frontend/index';
+
+// Time response interface
+interface TimeResponse {
+  timestamp: string;
+  unix: number;
+  formatted: string;
+  timezone: string;
+}
+
+// Enhanced Panel Component with time display
+const EnhancedPanelComponent: React.FC<{ agentId: string }> = ({ agentId }) => {
+  const apiBase = window.ELIZA_CONFIG?.apiBase || 'http://localhost:3000';
+
+  const {
+    data: timeData,
+    isLoading,
+    error,
+  } = useQuery<TimeResponse>({
+    queryKey: ['panelTime', agentId],
+    queryFn: async () => {
+      const response = await fetch(`${apiBase}/api/time`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch time');
+      }
+      return response.json();
+    },
+    refetchInterval: 5000, // Refresh every 5 seconds
+  });
+
+  return (
+    <div className="p-4 space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold mb-2">Example Panel</h2>
+        <div>Hello {agentId}!</div>
+      </div>
+
+      <div className="border-t pt-4">
+        <h3 className="text-md font-medium mb-2">Server Time</h3>
+        {isLoading && <div className="text-gray-600">Loading time...</div>}
+        {error && <div className="text-red-600">Error loading time</div>}
+        {timeData && (
+          <div className="text-sm space-y-1">
+            <div>Time: {timeData.formatted}</div>
+            <div className="text-gray-600">Timezone: {timeData.timezone}</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+describe('PanelComponent Tests', () => {
+  // Get the Panel component from the exported panels
+  const PanelComponent = panels[0]?.component;
+
+  describe('Panel Registration', () => {
+    it('should export panels array with correct structure', () => {
+      expect(panels).to.be.an('array');
+      expect(panels).to.have.length.greaterThan(0);
+
+      const panel = panels[0];
+      expect(panel).to.have.property('name', 'Example');
+      expect(panel).to.have.property('path', 'example');
+      expect(panel).to.have.property('component');
+      expect(panel).to.have.property('icon', 'Book');
+      expect(panel).to.have.property('public', false);
+      expect(panel).to.have.property('shortLabel', 'Example');
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render with agent ID', () => {
+      const testAgentId = 'test-agent-12345';
+
+      if (!PanelComponent) {
+        throw new Error('PanelComponent not found in panels export');
+      }
+
+      cy.mount(<PanelComponent agentId={testAgentId} />);
+
+      // Updated to match the corrected text in the component
+      cy.contains(`Hello ${testAgentId}!`).should('be.visible');
+    });
+
+    it('should handle different agent IDs', () => {
+      const agentIds = ['agent-1', 'agent-2', '12345678-1234-1234-1234-123456789abc', 'test-agent'];
+
+      agentIds.forEach((agentId) => {
+        cy.mount(<PanelComponent agentId={agentId} />);
+        cy.contains(`Hello ${agentId}!`).should('be.visible');
+      });
+    });
+
+    it('should render without crashing with empty agent ID', () => {
+      cy.mount(<PanelComponent agentId="" />);
+      cy.contains('Hello !').should('be.visible');
+    });
+  });
+
+  describe('Enhanced Panel with Time Display', () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    beforeEach(() => {
+      // Set up ELIZA_CONFIG for API testing
+      cy.window().then((win) => {
+        win.ELIZA_CONFIG = {
+          agentId: 'test-agent',
+          apiBase: 'http://localhost:3000',
+        };
+      });
+    });
+
+    it('should fetch and display time in panel', () => {
+      cy.intercept('GET', '**/api/time', {
+        statusCode: 200,
+        body: {
+          timestamp: '2024-01-01T12:00:00.000Z',
+          unix: 1704110400,
+          formatted: '1/1/2024, 12:00:00 PM',
+          timezone: 'America/New_York',
+        },
+      }).as('getPanelTime');
+
+      cy.mount(
+        <QueryClientProvider client={queryClient}>
+          <EnhancedPanelComponent agentId="test-panel-123" />
+        </QueryClientProvider>
+      );
+
+      // Wait for API call
+      cy.wait('@getPanelTime');
+
+      // Check panel content
+      cy.contains('Example Panel').should('be.visible');
+      cy.contains('Hello test-panel-123!').should('be.visible');
+
+      // Check time display
+      cy.contains('Server Time').should('be.visible');
+      cy.contains('Time: 1/1/2024, 12:00:00 PM').should('be.visible');
+      cy.contains('Timezone: America/New_York').should('be.visible');
+    });
+
+    it('should handle API errors in panel', () => {
+      cy.intercept('GET', '**/api/time', {
+        statusCode: 500,
+        body: { error: 'Server error' },
+      }).as('getPanelTimeError');
+
+      cy.mount(
+        <QueryClientProvider client={queryClient}>
+          <EnhancedPanelComponent agentId="test-panel-error" />
+        </QueryClientProvider>
+      );
+
+      // Wait for failed API call
+      cy.wait('@getPanelTimeError');
+
+      // Check error display
+      cy.contains('Error loading time').should('be.visible');
+    });
+
+    it('should show loading state in panel', () => {
+      cy.intercept('GET', '**/api/time', (req) => {
+        // Use simpler delay approach
+        req.reply({
+          statusCode: 200,
+          body: {
+            timestamp: new Date().toISOString(),
+            unix: Math.floor(Date.now() / 1000),
+            formatted: new Date().toLocaleString(),
+            timezone: 'UTC',
+          },
+          delay: 1000, // Add delay directly
+        });
+      }).as('getPanelTimeDelayed');
+
+      cy.mount(
+        <QueryClientProvider client={queryClient}>
+          <EnhancedPanelComponent agentId="test-panel-loading" />
+        </QueryClientProvider>
+      );
+
+      // Check loading state
+      cy.contains('Loading time...').should('be.visible');
+
+      // Wait for data
+      cy.wait('@getPanelTimeDelayed');
+      cy.contains('Loading time...').should('not.exist');
+    });
+  });
+
+  describe('Panel Integration', () => {
+    it('should integrate with agent UI system', () => {
+      // Verify panel can be used in the agent UI
+      const panel = panels[0];
+
+      // Create a mock agent UI container
+      const AgentUIContainer = ({ agentId }: { agentId: string }) => {
+        const Component = panel.component;
+        return (
+          <div className="agent-ui-container">
+            <div className="panel-header">
+              <span className="panel-icon">{panel.icon}</span>
+              <span className="panel-name">{panel.name}</span>
+            </div>
+            <div className="panel-content">
+              <Component agentId={agentId} />
+            </div>
+          </div>
+        );
+      };
+
+      cy.mount(<AgentUIContainer agentId="ui-test-agent" />);
+
+      // Verify integration
+      cy.get('.agent-ui-container').should('be.visible');
+      cy.get('.panel-icon').contains('Book').should('be.visible');
+      cy.get('.panel-name').contains('Example').should('be.visible');
+      cy.get('.panel-content').contains('Hello ui-test-agent!').should('be.visible');
+    });
+
+    it('should handle panel switching', () => {
+      // Simulate multiple panels
+      const mockPanels = [
+        ...panels,
+        {
+          name: 'Second Panel',
+          path: 'second',
+          component: ({ agentId }: { agentId: string }) => <div>Second panel for {agentId}</div>,
+          icon: 'Settings',
+          public: false,
+          shortLabel: 'Second',
+        },
+      ];
+
+      let currentPanel = 0;
+
+      const PanelSwitcher = () => {
+        const [activePanel, setActivePanel] = React.useState(0);
+        const ActiveComponent = mockPanels[activePanel].component;
+
+        return (
+          <div>
+            <div className="panel-tabs">
+              {mockPanels.map((panel, index) => (
+                <button
+                  key={panel.path}
+                  onClick={() => setActivePanel(index)}
+                  className={activePanel === index ? 'active' : ''}
+                  data-testid={`tab-${panel.path}`}
+                >
+                  {panel.name}
+                </button>
+              ))}
+            </div>
+            <div className="panel-content">
+              <ActiveComponent agentId="switch-test" />
+            </div>
+          </div>
+        );
+      };
+
+      cy.mount(<PanelSwitcher />);
+
+      // Check initial panel
+      cy.contains('Hello switch-test!').should('be.visible');
+
+      // Switch to second panel
+      cy.get('[data-testid="tab-second"]').click();
+      cy.contains('Second panel for switch-test').should('be.visible');
+      cy.contains('Hello switch-test!').should('not.exist');
+
+      // Switch back
+      cy.get('[data-testid="tab-example"]').click();
+      cy.contains('Hello switch-test!').should('be.visible');
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+/// <reference types="@cypress/react" />
+
+// ***********************************************
+// 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) => { ... })
+
+// 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 as any).ELIZA_CONFIG = config;
+  });
+});
+
+// TypeScript definitions
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      shouldBeDarkMode(): Chainable<JQuery<HTMLElement>>;
+      setElizaConfig(config: { agentId: string; apiBase?: string }): Chainable<Window>;
+      mount(component: React.ReactElement): Chainable<any>;
+    }
+  }
+}
+
+export {};

package/templates/plugin-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 id="__cy_root" data-cy-root></div>
+  </body>
+</html>

package/templates/plugin-starter/src/__tests__/cypress/support/component.ts

@@ -0,0 +1,33 @@
+// ***********************************************************
+// This file is processed and loaded automatically before your test files.
+// You can change the location of this file or turn off processing using the
+// 'supportFile' config option.
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Import Testing Library Cypress commands
+import '@testing-library/cypress/add-commands';
+
+// Import styles
+import '../../../frontend/index.css';
+
+// Add custom TypeScript types
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to mount React components
+       * @example cy.mount(<Component />)
+       */
+      mount(component: React.ReactElement): Chainable<any>;
+    }
+  }
+}
+
+// Import React mount function
+import { mount } from '@cypress/react';
+
+// Make mount available globally
+Cypress.Commands.add('mount', mount);

package/templates/plugin-starter/src/__tests__/cypress/support/e2e.ts

@@ -0,0 +1,11 @@
+// ***********************************************************
+// This file is processed and loaded automatically before your test files.
+// You can change the location of this file or turn off processing using the
+// 'supportFile' config option.
+// ***********************************************************
+
+// Import commands
+import './commands';
+
+// Import Testing Library Cypress commands
+import '@testing-library/cypress/add-commands';

package/templates/plugin-starter/src/__tests__/cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "types": ["cypress", "@testing-library/cypress"],
+    "isolatedModules": false
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

package/templates/plugin-starter/src/__tests__/e2e/README.md

@@ -0,0 +1,47 @@
+# E2E Tests for Plugin Starter
+
+This directory contains end-to-end tests for the ElizaOS plugin starter template.
+
+## Overview
+
+E2E tests run in a real ElizaOS runtime environment, allowing you to test your plugin's behavior as it would work in production.
+
+## Test Structure
+
+- **StarterPluginTestSuite** - Main test suite containing all e2e tests
+  - `example_test` - Verifies plugin is loaded correctly
+  - `should_have_hello_world_action` - Checks action registration
+  - `hello_world_action_test` - **Key test**: Simulates asking the agent to say "hello" and validates the response contains "hello world"
+  - `hello_world_provider_test` - Tests provider functionality
+  - `starter_service_test` - Tests service lifecycle
+
+## Running Tests
+
+```bash
+# Run all tests (component + e2e)
+npm test
+
+# Run only e2e tests
+npm run test:e2e
+
+# Run only component tests
+npm run test:component
+```
+
+## Implementation Details
+
+1. **Test Export**: Tests are exported through `src/tests.ts` to be included in the plugin build
+2. **Plugin Integration**: The test suite is added to the plugin's `tests` array
+3. **Runtime Access**: Each test receives a real runtime instance with full access to:
+   - Plugin actions, providers, and services
+   - Agent character configuration
+   - Database and model access
+
+## Known Issues
+
+- The test runner may look for tests on other plugins (e.g., @elizaos/plugin-sql) instead of the current plugin
+- TypeScript validation in the test runner may flag type issues that don't affect actual functionality
+
+## Writing New Tests
+
+See the comprehensive documentation at the top of `starter-plugin.ts` for detailed instructions on adding new tests.