From d782eba3b449814cf320c33d5d6bb0d8ba344ccc Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 22:42:16 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=91=20Add=20integration=20tests=20for?=
 =?UTF-8?q?=20API=20key=20management?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tests/integration/ApiKeyManager.test.js   | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js

diff --git a/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js
new file mode 100644
index 0000000..2a9632d
--- /dev/null
+++ b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js
@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ApiKeyManager from '../../../src/views/ApiKeyManager.vue';
+
+/**
+ * Integration tests for refactored ApiKeyManager component
+ * Tests the use of BaseModal and refactored state management
+ */
+describe('ApiKeyManager - Integration Tests', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    // Create target element for Teleport (BaseModal uses Teleport)
+    const el = document.createElement('div');
+    el.id = 'modal-target';
+    document.body.appendChild(el);
+
+    // Mock localStorage
+    global.localStorage = {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+      clear: vi.fn()
+    };
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('renders the API key manager page', () => {
+    wrapper = mount(ApiKeyManager);
+    expect(wrapper.find('.api-key-manager').exists()).toBe(true);
+    expect(wrapper.find('h1').text()).toBe('API Key Manager');
+  });
+
+  it('shows delete confirmation modal using BaseModal', async () => {
+    wrapper = mount(ApiKeyManager);
+    
+    // Find the button that triggers the delete modal
+    const deleteButton = wrapper.findAll('button').find(b => 
+      b.text().includes('Clear Stored Key') || b.text().includes('Delete')
+    );
+    
+    // Modal should not be visible initially
+    expect(document.querySelector('.modal-overlay')).toBeFalsy();
+  });
+
+  it('contains ChallongeApiKeyGuide component', () => {
+    wrapper = mount(ApiKeyManager);
+    // The guide component is conditionally rendered
+    expect(wrapper.findComponent({ name: 'ChallongeApiKeyGuide' }).exists()).toBe(true);
+  });
+
+  it('has proper form structure for API key input', () => {
+    wrapper = mount(ApiKeyManager);
+    
+    const input = wrapper.find('#api-key');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('password');
+  });
+});