73 lines
2.0 KiB
JavaScript
73 lines
2.0 KiB
JavaScript
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');
|
|
});
|
|
});
|