kite/frontend/src/__tests__/keyboard.test.js

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import { createRouter, createMemoryHistory } from 'vue-router'
import { nextTick } from 'vue'
import FileManagerView from '../views/FileManagerView.vue'

vi.mock('../api/client.js', () => ({
  listFolders: vi.fn().mockResolvedValue({ items: [] }),
  listDocuments: vi.fn().mockResolvedValue({ items: [], total: 0 }),
  getFolder: vi.fn().mockResolvedValue({ id: 'f1', name: 'Test', breadcrumb: [] }),
  createFolder: vi.fn(),
  renameFolder: vi.fn(),
  deleteFolder: vi.fn(),
  moveDocument: vi.fn(),
  deleteDocument: vi.fn().mockResolvedValue(null),
  getSharedWithMe: vi.fn().mockResolvedValue([]),
  listTopics: vi.fn().mockResolvedValue([]),
  getMyQuota: vi.fn().mockResolvedValue({ used_bytes: 0, limit_bytes: 104857600 }),
}))

vi.mock('../stores/auth.js', () => ({
  useAuthStore: () => ({
    user: { email: 'test@example.com', role: 'user' },
    accessToken: 'fake-token',
    fetchQuota: vi.fn().mockResolvedValue(null),
  }),
}))

vi.mock('../stores/topics.js', () => ({
  useTopicsStore: () => ({
    topics: [],
    loading: false,
    fetchTopics: vi.fn().mockResolvedValue(null),
  }),
}))

vi.mock('../components/ui/BreadcrumbBar.vue', () => ({
  default: { template: '<nav/>', props: ['segments', 'rootLabel'], emits: ['navigate'] },
}))
vi.mock('../components/upload/DropZone.vue', () => ({
  default: { template: '<div class="dropzone"/>', emits: ['files-selected'] },
}))
vi.mock('../components/upload/UploadProgress.vue', () => ({
  default: { template: '<div/>', props: ['items'] },
}))
vi.mock('../components/folders/FolderDeleteModal.vue', () => ({
  default: { template: '<div/>', props: ['folder'], emits: ['confirm', 'cancel'] },
}))
vi.mock('../components/sharing/ShareModal.vue', () => ({
  default: { template: '<div/>', props: ['doc'], emits: ['close'] },
}))
vi.mock('../components/documents/SearchBar.vue', () => ({
  default: { template: '<input/>', props: ['modelValue'] },
}))
vi.mock('../components/documents/SortControls.vue', () => ({
  default: { template: '<div/>', props: ['sort', 'order'], emits: ['change'] },
}))
vi.mock('../components/topics/TopicBadge.vue', () => ({
  default: { template: '<span/>', props: ['name', 'color'] },
}))

function makeRouter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', component: FileManagerView },
      { path: '/folders/:folderId', component: FileManagerView },
    ],
  })
}

async function mountFileManager(path = '/') {
  setActivePinia(createPinia())
  const router = makeRouter()
  await router.push(path)
  await router.isReady()
  const w = mount(FileManagerView, {
    global: { plugins: [router], stubs: { QuotaBar: true, AppSpinner: true } },
  })
  await flushPromises()
  return w
}

describe('UX-05: "/" focuses the search bar', () => {
  it('FileManagerView exposes focusSearch() that delegates to browserRef.focusSearch', async () => {
    const w = await mountFileManager()
    const focusSpy = vi.fn()
    const browserRef = w.vm.$.setupState.browserRef
    if (browserRef?.value) browserRef.value.focusSearch = focusSpy
    expect(typeof w.vm.focusSearch).toBe('function')
  })

  it('calling focusSearch() on the exposed interface does not throw when no ref mounted', async () => {
    const w = await mountFileManager()
    expect(() => w.vm.focusSearch()).not.toThrow()
  })

  it('focusSearch is part of defineExpose (accessible via vm)', async () => {
    const w = await mountFileManager()
    expect(w.vm.focusSearch).toBeDefined()
  })
})

describe('UX-06: "Escape" clears active search (when no input focused)', () => {
  it('FileManagerView exposes clearSearch() method', async () => {
    const w = await mountFileManager()
    expect(typeof w.vm.clearSearch).toBe('function')
  })

  it('calling clearSearch() does not throw', async () => {
    const w = await mountFileManager()
    expect(() => w.vm.clearSearch()).not.toThrow()
  })
})

describe('UX-07: "U" triggers the upload picker', () => {
  it('FileManagerView exposes triggerUpload() method', async () => {
    const w = await mountFileManager()
    expect(typeof w.vm.triggerUpload).toBe('function')
  })

  it('calling triggerUpload() does not throw', async () => {
    const w = await mountFileManager()
    expect(() => w.vm.triggerUpload()).not.toThrow()
  })
})

describe('UX-08: "N" starts new folder input', () => {
  it('FileManagerView exposes startNewFolder() method', async () => {
    const w = await mountFileManager()
    expect(typeof w.vm.startNewFolder).toBe('function')
  })

  it('calling startNewFolder() via exposed interface delegates to browserRef without throwing', async () => {
    const w = await mountFileManager()
    expect(() => w.vm.startNewFolder()).not.toThrow()
  })
})

describe('Gap 4: getFileManagerInstance resolves to actual component, not RouterView proxy', () => {
  it('matched.find(r => r.instances?.default) returns an object with focusSearch defined when mounted via router-view', async () => {
    setActivePinia(createPinia())
    const router = makeRouter()
    await router.push('/')
    await router.isReady()
    // Mount via a router-view wrapper so Vue Router populates r.instances.default
    const { defineComponent, h } = await import('vue')
    const { RouterView } = await import('vue-router')
    const App = defineComponent({ render: () => h(RouterView) })
    mount(App, {
      global: { plugins: [router], stubs: { QuotaBar: true, AppSpinner: true } },
    })
    await flushPromises()
    const instance = router.currentRoute.value.matched.find(r => r.instances?.default)?.instances?.default
    expect(instance).not.toBeNull()
    expect(instance).toBeDefined()
    expect(typeof instance.focusSearch).toBe('function')
  })
})

// -----------------------------------------------------------------------
// RESP-01: Responsive shell drawer tests (App.vue / AdminLayout.vue)
// These tests exercise the drawer open/close logic defined in App.vue and
// AdminLayout.vue without mounting the full shell (which requires auth).
// Instead, they validate the pure ref+watch behaviour via a minimal component
// that mirrors the drawer state implementation.
// -----------------------------------------------------------------------

vi.mock('../stores/cloudConnections.js', () => ({
  useCloudConnectionsStore: () => ({
    connections: [],
    loading: false,
    fetchConnections: vi.fn(),
  }),
}))

describe('RESP-01: App drawer — open, backdrop close, route-change close', () => {
  it('hamburger button element can be rendered via data-test attribute', async () => {
    // Verify the data-test attribute we rely on in App.vue is consistent
    const { defineComponent, ref, h } = await import('vue')
    const Stub = defineComponent({
      setup() {
        const drawerOpen = ref(false)
        return { drawerOpen }
      },
      template: `
        <div>
          <button data-test="hamburger-btn" @click="drawerOpen = true">Menu</button>
          <div v-if="drawerOpen" data-test="drawer-backdrop" @click="drawerOpen = false"></div>
          <div data-test="app-sidebar-wrapper" :class="drawerOpen ? 'translate-x-0' : '-translate-x-full'"></div>
        </div>
      `,
    })
    const w = mount(Stub)
    expect(w.find('[data-test="hamburger-btn"]').exists()).toBe(true)
    // Initially drawer closed
    expect(w.find('[data-test="drawer-backdrop"]').exists()).toBe(false)
    expect(w.find('[data-test="app-sidebar-wrapper"]').classes()).toContain('-translate-x-full')
    // Click hamburger
    await w.find('[data-test="hamburger-btn"]').trigger('click')
    await nextTick()
    expect(w.find('[data-test="drawer-backdrop"]').exists()).toBe(true)
    expect(w.find('[data-test="app-sidebar-wrapper"]').classes()).toContain('translate-x-0')
    // Click backdrop to close
    await w.find('[data-test="drawer-backdrop"]').trigger('click')
    await nextTick()
    expect(w.find('[data-test="drawer-backdrop"]').exists()).toBe(false)
    expect(w.find('[data-test="app-sidebar-wrapper"]').classes()).toContain('-translate-x-full')
  })

  it('drawer state closes on route fullPath change (watch behaviour)', async () => {
    const { defineComponent, ref, watch } = await import('vue')
    // Simulate the watch pattern from App.vue
    const routePath = ref('/')
    const drawerOpen = ref(false)
    watch(() => routePath.value, () => { drawerOpen.value = false })

    drawerOpen.value = true
    expect(drawerOpen.value).toBe(true)
    // Simulate navigation
    routePath.value = '/settings'
    await nextTick()
    expect(drawerOpen.value).toBe(false)
  })
})

describe('RESP-05: AdminLayout drawer — same pattern as user drawer', () => {
  it('admin hamburger button renders with data-test="admin-hamburger-btn"', async () => {
    const { defineComponent, ref } = await import('vue')
    const Stub = defineComponent({
      setup() {
        const drawerOpen = ref(false)
        return { drawerOpen }
      },
      template: `
        <div>
          <button data-test="admin-hamburger-btn" @click="drawerOpen = true">Menu</button>
          <div v-if="drawerOpen" data-test="admin-drawer-backdrop" @click="drawerOpen = false"></div>
          <div data-test="admin-sidebar-wrapper" :class="drawerOpen ? 'translate-x-0' : '-translate-x-full'"></div>
        </div>
      `,
    })
    const w = mount(Stub)
    expect(w.find('[data-test="admin-hamburger-btn"]').exists()).toBe(true)
    await w.find('[data-test="admin-hamburger-btn"]').trigger('click')
    await nextTick()
    expect(w.find('[data-test="admin-drawer-backdrop"]').exists()).toBe(true)
    expect(w.find('[data-test="admin-sidebar-wrapper"]').classes()).toContain('translate-x-0')
  })

  it('admin drawer closes on backdrop tap', async () => {
    const { defineComponent, ref } = await import('vue')
    const Stub = defineComponent({
      setup() {
        const drawerOpen = ref(false)
        return { drawerOpen }
      },
      template: `
        <div>
          <button data-test="admin-hamburger-btn" @click="drawerOpen = true">Menu</button>
          <div v-if="drawerOpen" data-test="admin-drawer-backdrop" @click="drawerOpen = false"></div>
          <div data-test="admin-sidebar-wrapper" :class="drawerOpen ? 'translate-x-0' : '-translate-x-full'"></div>
        </div>
      `,
    })
    const w = mount(Stub)
    await w.find('[data-test="admin-hamburger-btn"]').trigger('click')
    await nextTick()
    await w.find('[data-test="admin-drawer-backdrop"]').trigger('click')
    await nextTick()
    expect(w.find('[data-test="admin-drawer-backdrop"]').exists()).toBe(false)
    expect(w.find('[data-test="admin-sidebar-wrapper"]').classes()).toContain('-translate-x-full')
  })

  it('admin drawer closes on route change (watch behaviour)', async () => {
    const { ref, watch } = await import('vue')
    const routePath = ref('/admin')
    const drawerOpen = ref(true)
    watch(() => routePath.value, () => { drawerOpen.value = false })

    expect(drawerOpen.value).toBe(true)
    routePath.value = '/admin/users'
    await nextTick()
    expect(drawerOpen.value).toBe(false)
  })
})