@priscilla-ai/vue 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.0.7] - 12-04-2026
+- Added comprehensive test suite with 50 unit and integration tests
+- Tests cover plugin initialization, component integration, props validation, error handling, performance, and memory management
+- Configured Vitest with Vue Test Utils and happy-dom
+- Added test scripts: test, test:run, test:ui, test:coverage
+- All tests use standard CSS (no Tailwind dependencies)
+
+## [1.0.6] - 11-04-2026
+- Minor fixes and improvements
+
 ## [1.0.0] - 18-03-2026
 - First Release
 - Vue 3 plugin for AI-powered code

package/FIXES_AND_RECOMMENDATIONS.md

@@ -0,0 +1,604 @@
+# PriscillaAI Component - Implementation Fixes & Recommendations
+
+## Quick Reference: Issues Found & Solutions
+
+### 🔴 CRITICAL ISSUES (Do First)
+
+#### Issue 1: No Element Existence Validation
+**Problem:** Component assumes the XPath target element exists  
+**Risk:** Silent failures, non-functional component  
+**Solution Level:** HIGH PRIORITY
+
+```javascript
+// BEFORE (Current - Problematic)
+mounted() {
+  const element = document.evaluate(this.xpath, document);
+  // No check if element actually exists!
+  this.bindToElement(element);
+}
+
+// AFTER (Fixed)
+mounted() {
+  if (!this.validateTargetElement()) {
+    this.handleErrorState('Target element not found at XPath: ' + this.xpath);
+    return;
+  }
+  this.bindToElement(this.getTargetElement());
+}
+
+validateTargetElement() {
+  try {
+    const result = document.evaluate(
+      this.xpath,
+      document,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null
+    );
+    return result.singleNodeValue !== null;
+  } catch (error) {
+    console.error('Invalid XPath:', error);
+    return false;
+  }
+}
+
+getTargetElement() {
+  const result = document.evaluate(
+    this.xpath,
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null
+  );
+  return result.singleNodeValue;
+}
+```
+
+#### Issue 2: No Error Logging or User Feedback
+**Problem:** API errors and failures are silent  
+**Risk:** Difficult debugging, poor user experience  
+**Solution Level:** HIGH PRIORITY
+
+```javascript
+// Add to component data
+data() {
+  return {
+    errors: [],
+    warnings: [],
+    lastErrorTime: null,
+    errorRecoveryAttempts: 0,
+  };
+}
+
+// Add error handler
+handleError(context, error) {
+  const errorEntry = {
+    timestamp: new Date().toISOString(),
+    context,
+    message: error.message,
+    stack: error.stack,
+  };
+  
+  this.errors.push(errorEntry);
+  this.lastErrorTime = Date.now();
+  
+  // Log to console in development
+  if (process.env.NODE_ENV === 'development') {
+    console.error(`[PriscillaAI] ${context}:`, error);
+  }
+  
+  // Send to error tracking service (Sentry, LogRocket, etc.)
+  if (window.__errorTracker) {
+    window.__errorTracker.captureException(error, {
+      tags: { component: 'PriscillaAI', context },
+    });
+  }
+  
+  // Emit error event for parent component
+  this.$emit('error', errorEntry);
+}
+
+// Update API calls to use error handler
+async initializeAPI() {
+  try {
+    const response = await fetch(`${this.apiUrl}/chapters/${this.chapterId}`);
+    if (!response.ok) {
+      throw new Error(`API Error ${response.status}: ${response.statusText}`);
+    }
+    return await response.json();
+  } catch (error) {
+    this.handleError('API Initialization', error);
+    return null;
+  }
+}
+```
+
+#### Issue 3: Missing Prop Type Validation
+**Problem:** Component accepts any prop type  
+**Risk:** Runtime errors from invalid data  
+**Solution Level:** HIGH PRIORITY
+
+```javascript
+// Update props definition
+props: {
+  xpath: {
+    type: String,
+    required: true,
+    validator(value) {
+      if (!value) {
+        console.warn('[PriscillaAI] xpath prop is required and cannot be empty');
+        return false;
+      }
+      if (!value.startsWith('//') && !value.startsWith('/')) {
+        console.warn('[PriscillaAI] xpath must be a valid XPath expression starting with "/" or "//"');
+        return false;
+      }
+      return true;
+    },
+  },
+  chapterId: {
+    type: Number,
+    required: true,
+    validator(value) {
+      if (!Number.isInteger(value)) {
+        console.warn('[PriscillaAI] chapterId must be an integer');
+        return false;
+      }
+      if (value <= 0) {
+        console.warn('[PriscillaAI] chapterId must be a positive number');
+        return false;
+      }
+      return true;
+    },
+  },
+  programId: {
+    type: Number,
+    required: true,
+    validator(value) {
+      if (!Number.isInteger(value)) {
+        console.warn('[PriscillaAI] programId must be an integer');
+        return false;
+      }
+      if (value <= 0) {
+        console.warn('[PriscillaAI] programId must be a positive number');
+        return false;
+      }
+      return true;
+    },
+  },
+  apiUrl: {
+    type: String,
+    default: 'http://localhost:8000/api/v1',
+    validator(value) {
+      try {
+        new URL(value);
+        return true;
+      } catch {
+        console.warn('[PriscillaAI] apiUrl must be a valid URL');
+        return false;
+      }
+    },
+  },
+}
+```
+
+---
+
+### 🟠 HIGH PRIORITY FEATURES (Implement Next)
+
+#### Feature 1: API Request Timeout
+**Problem:** API calls can hang indefinitely on slow networks  
+**Impact:** Page becomes unresponsive  
+
+```javascript
+// Add timeout utility
+const createTimeoutPromise = (ms) => new Promise((_, reject) =>
+  setTimeout(() => reject(new Error(`Request timeout after ${ms}ms`)), ms)
+);
+
+const fetchWithTimeout = async (url, options = {}) => {
+  const timeout = options.timeout || 8000; // 8 second default
+  
+  return Promise.race([
+    fetch(url, {
+      ...options,
+      signal: AbortSignal.timeout(timeout),
+    }),
+    createTimeoutPromise(timeout),
+  ]);
+};
+
+// Use in component
+async initializeAPI() {
+  try {
+    const response = await fetchWithTimeout(
+      `${this.apiUrl}/chapters/${this.chapterId}`,
+      { timeout: this.requestTimeout || 8000 }
+    );
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (error.name === 'AbortError' || error.message.includes('timeout')) {
+      this.handleError('API Timeout', new Error('Request took too long'));
+      this.retryWithBackoff();
+    } else {
+      this.handleError('API Request', error);
+    }
+  }
+}
+
+// Add retry with exponential backoff
+async retryWithBackoff(attempt = 1, maxAttempts = 3) {
+  const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000);
+  
+  if (attempt > maxAttempts) {
+    this.handleError('Max Retries', new Error('Failed after 3 attempts'));
+    return false;
+  }
+  
+  console.info(`[PriscillaAI] Retrying API call (attempt ${attempt}/${maxAttempts})`);
+  
+  await new Promise(resolve => setTimeout(resolve, delay));
+  
+  const success = await this.initializeAPI();
+  if (!success) {
+    return this.retryWithBackoff(attempt + 1, maxAttempts);
+  }
+  return true;
+}
+```
+
+#### Feature 2: Loading State & User Feedback
+**Problem:** No visual feedback during initialization  
+**Impact:** Users think component is broken  
+
+```javascript
+// Add to data
+data() {
+  return {
+    isLoading: false,
+    isInitialized: false,
+    hasError: false,
+    errorMessage: '',
+    loadingMessage: 'Initializing code editor...',
+  };
+}
+
+// Add to template
+<template>
+  <div class="priscilla-ai-wrapper">
+    <!-- Loading State -->
+    <div v-if="isLoading" class="priscilla-ai-loading">
+      <div class="spinner"></div>
+      <p class="loading-text">{{ loadingMessage }}</p>
+    </div>
+    
+    <!-- Error State -->
+    <div v-if="hasError" class="priscilla-ai-error">
+      <div class="error-icon">⚠️</div>
+      <p class="error-message">{{ errorMessage }}</p>
+      <button @click="retry" class="retry-button">Try Again</button>
+    </div>
+    
+    <!-- Success State (component renders here) -->
+    <div v-if="isInitialized && !hasError" class="priscilla-component-container">
+      <!-- PriscillaAI component content -->
+    </div>
+  </div>
+</template>
+
+// Add styling
+<style scoped>
+.priscilla-ai-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.priscilla-ai-error {
+  background: #fee;
+  border: 2px solid #fcc;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 10px 0;
+}
+
+.error-icon {
+  font-size: 32px;
+  margin-bottom: 10px;
+}
+
+.error-message {
+  color: #c33;
+  margin: 10px 0;
+}
+
+.retry-button {
+  background: #3498db;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.retry-button:hover {
+  background: #2980b9;
+}
+</style>
+
+// Add lifecycle methods
+mounted() {
+  this.isLoading = true;
+  this.loadingMessage = 'Initializing code editor...';
+  this.initialize();
+}
+
+methods: {
+  async initialize() {
+    try {
+      this.isLoading = true;
+      
+      // Validate target element
+      if (!this.validateTargetElement()) {
+        throw new Error(`Target element not found: ${this.xpath}`);
+      }
+      
+      // Initialize API
+      await this.initializeAPI();
+      
+      this.isInitialized = true;
+      this.$emit('ready');
+    } catch (error) {
+      this.handleError('Initialization', error);
+      this.hasError = true;
+      this.errorMessage = error.message;
+    } finally {
+      this.isLoading = false;
+    }
+  },
+  
+  async retry() {
+    this.hasError = false;
+    this.errorMessage = '';
+    await this.initialize();
+  },
+}
+```
+
+#### Feature 3: Dynamic Element Re-binding
+**Problem:** Won't work if target element is added after component mounts  
+**Impact:** Breaks with dynamic content loading  
+
+```javascript
+// Add computed getter
+computed: {
+  targetElement() {
+    try {
+      const result = document.evaluate(
+        this.xpath,
+        document,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      );
+      return result.singleNodeValue;
+    } catch {
+      return null;
+    }
+  },
+}
+
+// Add watchers
+watch: {
+  xpath(newXpath) {
+    console.log('[PriscillaAI] XPath changed, re-binding...');
+    this.rebind();
+  },
+  
+  targetElement(newElement, oldElement) {
+    if (!oldElement && newElement) {
+      console.log('[PriscillaAI] Target element appeared, binding...');
+      this.bindToNewElement();
+    }
+  },
+}
+
+// Add mutation observer
+mounted() {
+  this.observeDOM();
+}
+
+methods: {
+  observeDOM() {
+    const config = {
+      childList: true,
+      subtree: true,
+      attributes: false,
+    };
+    
+    this.observerCallback = () => {
+      // Check if target element appears
+      if (this.targetElement && !this.isBound) {
+        this.bind();
+      }
+    };
+    
+    this.observer = new MutationObserver(this.observerCallback);
+    this.observer.observe(document.body, config);
+  },
+}
+
+beforeUnmount() {
+  if (this.observer) {
+    this.observer.disconnect();
+  }
+}
+```
+
+---
+
+### 🟡 MEDIUM PRIORITY IMPROVEMENTS
+
+#### Improvement 1: Flexible Configuration
+**Location:** `src/components/Navbar.vue`
+
+```vue
+<template>
+  <nav class="bg-green-700 border-b border-green-500">
+    <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+      <div class="flex h-20 items-center justify-between">
+        <div class="flex flex-1 items-center justify-center md:items-stretch md:justify-start">
+          <a class="flex flex-shrink-0 items-center mr-4" href="/">
+            <img class="h-10 w-auto" :src="logo" alt="Vue Jobs" />
+            <span class="hidden md:block text-white text-2xl font-bold ml-2">
+              Vue Jobs
+            </span>
+          </a>
+          <div class="md:ml-auto">
+            <div class="flex space-x-2">
+              <!-- Make props dynamic from route -->
+              <PriscillaAI
+                :xpath="currentXPath"
+                :chapterId="currentChapterId"
+                :programId="currentProgramId"
+                @ready="onEditorReady"
+                @error="onEditorError"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import logo from '@/assets/img/logo.png';
+
+const route = useRoute();
+
+// Default selectors and IDs
+const DEFAULT_XPATH = "//textarea[@id='code-block']";
+const DEFAULT_CHAPTER_ID = 12;
+const DEFAULT_PROGRAM_ID = 589;
+
+// Computed properties from route params or defaults
+const currentXPath = computed(() => 
+  route.query.xpath || DEFAULT_XPATH
+);
+
+const currentChapterId = computed(() => 
+  parseInt(route.query.chapterId) || DEFAULT_CHAPTER_ID
+);
+
+const currentProgramId = computed(() => 
+  parseInt(route.query.programId) || DEFAULT_PROGRAM_ID
+);
+
+const onEditorReady = () => {
+  console.log('[Navbar] PriscillaAI editor is ready');
+};
+
+const onEditorError = (errorEntry) => {
+  console.warn('[Navbar] Editor error:', errorEntry);
+  // Optionally show error notification to user
+};
+</script>
+```
+
+#### Improvement 2: Test Expansion
+**Add integration and e2e tests:**
+
+```bash
+# Install additional testing tools
+npm install --save-dev @testing-library/vue @testing-library/user-event cypress
+
+# Create integration test
+cat > src/__tests__/PriscillaAI.integration.spec.js << 'EOF'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import Navbar from '../components/Navbar.vue'
+
+describe('PriscillaAI Integration Tests', () => {
+  // Test real API connectivity
+  // Test with actual DOM elements
+  // Test error recovery flows
+})
+EOF
+
+# Update package.json
+npm script additions:
+"test": "vitest",
+"test:integration": "vitest src/__tests__/*.integration.spec.js",
+"test:e2e": "cypress open",
+"test:coverage": "vitest run --coverage"
+```
+
+---
+
+## 📋 Implementation Checklist
+
+- [ ] **Week 1: Critical Fixes**
+  - [ ] Add element validation to PriscillaAI component
+  - [ ] Implement error logging system
+  - [ ] Add prop type validators
+  - [ ] Test in staging environment
+  - [ ] Deploy to production
+
+- [ ] **Week 2: High Priority Features**
+  - [ ] Implement request timeout handling
+  - [ ] Build loading state UI
+  - [ ] Add mutation observer for dynamic elements
+  - [ ] Create user-facing error messages
+  - [ ] Update end-to-end tests
+
+- [ ] **Week 3: Medium Priority**
+  - [ ] Make props configurable from routes
+  - [ ] Add analytics integration
+  - [ ] Expand test coverage
+  - [ ] Create documentation
+
+---
+
+## 📊 Before & After Comparison
+
+| Aspect | Before | After |
+|--------|--------|-------|
+| Element Validation | ❌ None | ✅ Comprehensive |
+| Error Logging | ❌ Silent | ✅ Detailed |
+| Type Safety | ⚠️ Partial | ✅ Full |
+| Timeouts | ❌ No | ✅ 8s default |
+| Loading UI | ❌ None | ✅ Spinner + Message |
+| Dynamic Binding | ❌ No | ✅ Yes |
+| Test Coverage | ⚠️ 50 tests | ✅ 80+ tests |
+
+---
+
+## Contact & Support
+
+For questions about these recommendations:
+- Review TEST_REPORT.md for full test details
+- Check test files in src/__tests__/ for examples
+- Consult this document for implementation guides

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@priscilla-ai/vue",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Vue 3 Plugin in Options Api for Priscilla learning portal",
   "private": false,
   "license": "MIT",
@@ -44,7 +44,11 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix --cache",
-    "format": "prettier --write --experimental-cli src/"
+    "format": "prettier --write --experimental-cli src/",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "axios": "^1.13.2"
@@ -56,17 +60,22 @@
     "@tsconfig/node24": "^24.0.3",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vitest/ui": "^4.1.4",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "~10.5.1",
+    "happy-dom": "^20.8.9",
     "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
     "vite-plugin-vue-devtools": "^8.0.5",
+    "vitest": "^4.1.4",
     "vue-tsc": "^3.1.5"
   }
 }