diff --git a/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js index 2a9632d..cc3b6d6 100644 --- a/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js +++ b/code/websites/pokedex.online/tests/integration/ApiKeyManager.test.js @@ -41,12 +41,15 @@ describe('ApiKeyManager - Integration Tests', () => { 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') - ); - + 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(); }); @@ -54,12 +57,14 @@ describe('ApiKeyManager - Integration Tests', () => { it('contains ChallongeApiKeyGuide component', () => { wrapper = mount(ApiKeyManager); // The guide component is conditionally rendered - expect(wrapper.findComponent({ name: 'ChallongeApiKeyGuide' }).exists()).toBe(true); + 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'); diff --git a/code/websites/pokedex.online/tests/integration/GamemasterManager.test.js b/code/websites/pokedex.online/tests/integration/GamemasterManager.test.js new file mode 100644 index 0000000..609e8d2 --- /dev/null +++ b/code/websites/pokedex.online/tests/integration/GamemasterManager.test.js @@ -0,0 +1,113 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; +import { mount } from '@vue/test-utils'; +import GamemasterManager from '../../../src/views/GamemasterManager.vue'; + +/** + * Integration tests for refactored GamemasterManager component + * Tests useAsyncState composable and api-client integration + */ +describe('GamemasterManager - Integration Tests', () => { + let wrapper; + + beforeEach(() => { + // Mock fetch globally + global.fetch = vi.fn(); + + // Mock router-link component + vi.stubGlobal('RouterLink', { + name: 'RouterLink', + template: '', + props: ['to'] + }); + }); + + afterEach(() => { + if (wrapper) { + wrapper.unmount(); + } + vi.clearAllMocks(); + }); + + it('renders the gamemaster manager page', () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + expect(wrapper.find('.gamemaster-manager').exists()).toBe(true); + expect(wrapper.find('h1').text()).toBe('Gamemaster Manager'); + }); + + it('has three main sections', () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + const sections = wrapper.findAll('.section'); + // At least 3 sections: fetch, break up, save to server + expect(sections.length).toBeGreaterThanOrEqual(3); + }); + + it('has fetch button with loading state', async () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + const buttons = wrapper.findAll('button'); + const fetchButton = buttons.find(b => b.text().includes('Fetch')); + + expect(fetchButton).toBeDefined(); + expect(fetchButton.attributes('disabled')).toBeUndefined(); + }); + + it('displays description text', () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + const description = wrapper.find('.description'); + expect(description.text()).toContain('PokeMiners'); + }); + + it('uses useAsyncState pattern for loading states', async () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + // Component should have computed loading property + expect(wrapper.vm.loading).toBeDefined(); + expect(typeof wrapper.vm.loading).toBe('boolean'); + }); + + it('uses computed error property for error handling', () => { + wrapper = mount(GamemasterManager, { + global: { + stubs: { + RouterLink: true + } + } + }); + + // Component should have computed error property + expect(wrapper.vm.error).toBeDefined(); + }); +});