✨ Add FileSelector component and corresponding unit tests

code/websites/pokedex.online/src/components/gamemaster/FileSelector.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="file-selector">
+    <label for="file-select">Select File:</label>
+    <select
+      id="file-select"
+      v-model="selectedFile"
+      :disabled="isLoading || uniqueFiles.length === 0"
+    >
+      <option value="">-- Choose a file --</option>
+      <option
+        v-for="file in uniqueFiles"
+        :key="file.filename"
+        :value="getFileType(file.filename)"
+      >
+        {{ formatFileName(file.filename) }} ({{ formatSize(file.size) }})
+      </option>
+    </select>
+
+    <span v-if="fileContent" class="file-info">
+      {{ fileLines.length.toLocaleString() }} lines
+      <template v-if="selectedFileMeta">
+        • {{ formatSize(selectedFileMeta.size) }}
+      </template>
+    </span>
+
+    <span v-if="isLoading" class="file-status">Loading...</span>
+    <span v-if="fileError" class="file-error">{{ fileError }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useGamemasterFiles } from '../../composables/useGamemasterFiles.js';
+
+const props = defineProps({
+  client: {
+    type: Object,
+    required: true
+  }
+});
+
+const {
+  selectedFile,
+  fileContent,
+  fileLines,
+  uniqueFiles,
+  isLoading,
+  fileError,
+  loadStatus,
+  formatSize,
+  formatFileName,
+  getFileType
+} = useGamemasterFiles(props.client);
+
+const selectedFileMeta = computed(() => {
+  if (!selectedFile.value) return null;
+  return uniqueFiles.value.find(
+    file => getFileType(file.filename) === selectedFile.value
+  );
+});
+
+onMounted(() => {
+  loadStatus();
+});
+</script>
+
+<style scoped>
+.file-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0;
+}
+
+.file-selector label {
+  font-weight: 600;
+  color: #333;
+}
+
+.file-selector select {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+}
+
+.file-selector select:disabled {
+  background: #f5f5f5;
+  color: #999;
+}
+
+.file-info {
+  font-size: 13px;
+  color: #666;
+}
+
+.file-status {
+  font-size: 13px;
+  color: #666;
+}
+
+.file-error {
+  font-size: 13px;
+  color: #d9534f;
+}
+</style>

code/websites/pokedex.online/tests/unit/components/gamemaster/FileSelector.test.js

@@ -0,0 +1,131 @@
+/**
+ * FileSelector Component Tests
+ * Verifies file selector UI and behavior
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import FileSelector from '../../../../src/components/gamemaster/FileSelector.vue';
+import { useGamemasterFiles } from '../../../../src/composables/useGamemasterFiles.js';
+
+vi.mock('../../../../src/composables/useGamemasterFiles.js', () => ({
+  useGamemasterFiles: vi.fn()
+}));
+
+const createFilesMock = overrides => ({
+  selectedFile: ref(''),
+  fileContent: ref(''),
+  fileLines: ref([]),
+  uniqueFiles: ref([]),
+  isLoading: ref(false),
+  fileError: ref(null),
+  loadStatus: vi.fn(),
+  formatSize: vi.fn(size => `${size} B`),
+  formatFileName: vi.fn(name => name),
+  getFileType: vi.fn(name => name.replace('.json', '')),
+  ...overrides
+});
+
+describe('FileSelector Component', () => {
+  let mockFiles;
+
+  beforeEach(() => {
+    mockFiles = createFilesMock();
+    useGamemasterFiles.mockReturnValue(mockFiles);
+  });
+
+  it('renders file selector with placeholder option', () => {
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    const select = wrapper.find('select');
+    expect(select.exists()).toBe(true);
+    expect(select.find('option').text()).toContain('Choose a file');
+  });
+
+  it('calls loadStatus on mount', () => {
+    mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    expect(mockFiles.loadStatus).toHaveBeenCalled();
+  });
+
+  it('renders available file options', () => {
+    mockFiles.uniqueFiles.value = [
+      { filename: 'pokemon.json', size: 100 },
+      { filename: 'moves.json', size: 200 }
+    ];
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    const options = wrapper.findAll('option');
+    expect(options.length).toBe(3); // Placeholder + 2 files
+    expect(options[1].text()).toContain('pokemon.json');
+    expect(options[2].text()).toContain('moves.json');
+  });
+
+  it('disables selector when loading', () => {
+    mockFiles.isLoading.value = true;
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    const select = wrapper.find('select');
+    expect(select.attributes('disabled')).toBeDefined();
+  });
+
+  it('disables selector when no files', () => {
+    mockFiles.uniqueFiles.value = [];
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    const select = wrapper.find('select');
+    expect(select.attributes('disabled')).toBeDefined();
+  });
+
+  it('shows file info when content is loaded', () => {
+    mockFiles.fileContent.value = '{"test": true}';
+    mockFiles.fileLines.value = ['{', '  "test": true', '}'];
+    mockFiles.selectedFile.value = 'pokemon';
+    mockFiles.uniqueFiles.value = [
+      { filename: 'pokemon.json', size: 300 }
+    ];
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    const info = wrapper.find('.file-info');
+    expect(info.exists()).toBe(true);
+    expect(info.text()).toContain('3 lines');
+    expect(info.text()).toContain('300 B');
+  });
+
+  it('shows loading status text', () => {
+    mockFiles.isLoading.value = true;
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    expect(wrapper.find('.file-status').text()).toContain('Loading');
+  });
+
+  it('shows error message', () => {
+    mockFiles.fileError.value = 'Failed to load file';
+
+    const wrapper = mount(FileSelector, {
+      props: { client: {} }
+    });
+
+    expect(wrapper.find('.file-error').text()).toContain('Failed to load file');
+  });
+});