diff --git a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js index 55e84c6..fb6bae2 100644 --- a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js +++ b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js @@ -1,10 +1,59 @@ -import { describe, it } from 'vitest' +import { describe, it, expect, beforeEach } from 'vitest' +import { mount } from '@vue/test-utils' +import { createPinia, setActivePinia } from 'pinia' +import StorageBrowser from '../StorageBrowser.vue' + +const globalStubs = { + BreadcrumbBar: true, + FolderBreadcrumb: true, + SearchBar: true, + SortControls: true, + DropZone: true, + UploadProgress: true, + TopicBadge: true, + AppIcon: true, + EmptyState: true, +} describe('UX-02: StorageBrowser shows skeleton rows during loading', () => { - it.todo('renders 5+ skeleton rows when loading=true (replaces Loading… text)') - it.todo('skeleton rows use grid-cols-[2rem_1fr_6rem_8rem_6rem] matching real row grid') - it.todo('skeleton rows use animate-pulse') - it.todo('Loading… text is absent when loading=true (skeleton replaces it)') + beforeEach(() => { + setActivePinia(createPinia()) + }) + + it('renders 5 skeleton rows when loading=true and lists empty', () => { + const wrapper = mount(StorageBrowser, { + props: { loading: true, folders: [], files: [] }, + global: { stubs: globalStubs }, + }) + const pulseEls = wrapper.findAll('.animate-pulse') + expect(pulseEls.length).toBeGreaterThanOrEqual(5) + }) + + it('Loading… text is absent when loading=true', () => { + const wrapper = mount(StorageBrowser, { + props: { loading: true, folders: [], files: [] }, + global: { stubs: globalStubs }, + }) + expect(wrapper.text()).not.toContain('Loading…') + }) + + it('skeleton rows are NOT rendered when loading=false', () => { + const wrapper = mount(StorageBrowser, { + props: { loading: false, folders: [], files: [] }, + global: { stubs: globalStubs }, + }) + const pulseEls = wrapper.findAll('.animate-pulse') + expect(pulseEls.length).toBe(0) + }) + + it('skeleton row grid matches grid-cols-[2rem_1fr_6rem_8rem_6rem]', () => { + const wrapper = mount(StorageBrowser, { + props: { loading: true, folders: [], files: [] }, + global: { stubs: globalStubs }, + }) + const skeletonGrids = wrapper.findAll('.grid-cols-\\[2rem_1fr_6rem_8rem_6rem\\]') + expect(skeletonGrids.length).toBeGreaterThanOrEqual(1) + }) }) describe('UX-13: StorageBrowser folder picker uses Teleport + getBoundingClientRect', () => {