Add Integration test for gutenberg frontend

Author: VikramAditya33

.github/workflows/Tests.yaml

@@ -69,6 +69,7 @@ jobs:
         working-directory: ui
         run: |
           npm run test:unit
+          npm run test:integration
 
       - name: Build
         working-directory: ui

ui/package.json

@@ -10,7 +10,10 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
-    "test:unit": "vitest",
+    "test:unit": "vitest --run --exclude \"**/*.integration.spec.ts\"",
+    "test:integration": "vitest --run integration",
+    "test:all": "vitest --run",
+    "test:watch": "vitest",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --fix",

ui/src/stores/main.integration.spec.ts

@@ -0,0 +1,199 @@
+/**
+ * Integration tests for main store
+ * Tests complete data fetching flow with axios and error handling
+ */
+
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useMainStore } from './main'
+import axios from 'axios'
+import type { Config } from '@/types'
+
+vi.mock('axios')
+
+describe('Main Store Integration', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('Data Fetching', () => {
+    it('fetches books and updates count', async () => {
+      const store = useMainStore()
+      const mockData = { totalCount: 100, books: [] }
+      vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+      const result = await store.fetchBooks()
+
+      expect(axios.get).toHaveBeenCalledWith('./books.json')
+      expect(result).toEqual(mockData)
+      expect(store.booksCount).toBe(100)
+      expect(store.loading).toBe(false)
+      expect(store.errorMessage).toBeNull()
+    })
+
+    it('fetches authors and updates count', async () => {
+      const store = useMainStore()
+      const mockData = { totalCount: 50, authors: [] }
+      vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+      const result = await store.fetchAuthors()
+
+      expect(axios.get).toHaveBeenCalledWith('./authors.json')
+      expect(result).toEqual(mockData)
+      expect(store.authorsCount).toBe(50)
+      expect(store.loading).toBe(false)
+      expect(store.errorMessage).toBeNull()
+    })
+
+    it('fetches shelves and updates count', async () => {
+      const store = useMainStore()
+      const mockData = { totalCount: 20, shelves: [] }
+      vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+      const result = await store.fetchLCCShelves()
+
+      expect(axios.get).toHaveBeenCalledWith('./lcc_shelves.json')
+      expect(result).toEqual(mockData)
+      expect(store.shelvesCount).toBe(20)
+      expect(store.loading).toBe(false)
+      expect(store.errorMessage).toBeNull()
+    })
+
+    it.each([
+      { method: 'fetchBook' as const, param: 42, url: './books/42.json' },
+      { method: 'fetchAuthor' as const, param: 'austen-jane', url: './authors/austen-jane.json' },
+      { method: 'fetchLCCShelf' as const, param: 'PR', url: './lcc_shelves/PR.json' }
+    ])('$method fetches single item by ID', async ({ method, param, url }) => {
+      const store = useMainStore()
+      const mockData = { id: param }
+      vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+      const result = await store[method](param as never)
+
+      expect(axios.get).toHaveBeenCalledWith(url)
+      expect(result).toEqual(mockData)
+    })
+
+    it('fetches config data', async () => {
+      const store = useMainStore()
+      const mockConfig: Config = {
+        title: 'Gutenberg Library',
+        description: 'Project Gutenberg books',
+        primaryColor: null,
+        secondaryColor: null
+      }
+
+      vi.mocked(axios.get).mockResolvedValue({ data: mockConfig })
+
+      const result = await store.fetchConfig()
+
+      expect(axios.get).toHaveBeenCalledWith('./config.json')
+      expect(result).toEqual(mockConfig)
+    })
+  })
+
+  describe('Loading State', () => {
+    it('sets loading during fetch', async () => {
+      const store = useMainStore()
+      vi.mocked(axios.get).mockImplementation(
+        () =>
+          new Promise((resolve) =>
+            setTimeout(() => resolve({ data: { totalCount: 0, books: [] } }), 50)
+          )
+      )
+
+      const promise = store.fetchBooks()
+      expect(store.loading).toBe(true)
+
+      await promise
+      expect(store.loading).toBe(false)
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('sets error message on fetch failure', async () => {
+      const store = useMainStore()
+      vi.mocked(axios.get).mockRejectedValue(new Error('Network error'))
+
+      await expect(store.fetchBooks()).rejects.toThrow('Network error')
+
+      expect(store.errorMessage).toBe('Network error')
+      expect(store.loading).toBe(false)
+    })
+
+    it('uses custom error message when error message is empty', async () => {
+      const store = useMainStore()
+      vi.mocked(axios.get).mockRejectedValue(new Error(''))
+
+      await expect(store.fetchBooks()).rejects.toThrow()
+
+      expect(store.errorMessage).toBe('Failed to load books')
+    })
+
+    it('clears error message', () => {
+      const store = useMainStore()
+      store.errorMessage = 'Test error'
+
+      store.clearError()
+
+      expect(store.errorMessage).toBeNull()
+    })
+
+    it('clears previous error on successful fetch', async () => {
+      const store = useMainStore()
+      store.errorMessage = 'Previous error'
+
+      vi.mocked(axios.get).mockResolvedValue({ data: { totalCount: 0, books: [] } })
+
+      await store.fetchBooks()
+
+      expect(store.errorMessage).toBeNull()
+    })
+
+    it('throws error when response data is empty', async () => {
+      const store = useMainStore()
+      vi.mocked(axios.get).mockResolvedValue({ data: null })
+
+      await expect(store.fetchBooks()).rejects.toThrow('Empty response from ./books.json')
+      expect(store.errorMessage).toContain('Empty response')
+    })
+  })
+
+  describe('Request Deduplication', () => {
+    it('deduplicates identical concurrent requests', async () => {
+      const store = useMainStore()
+      const mockData = { totalCount: 0, books: [] }
+      vi.mocked(axios.get).mockResolvedValue({ data: mockData })
+
+      const [result1, result2, result3] = await Promise.all([
+        store.fetchBooks(),
+        store.fetchBooks(),
+        store.fetchBooks()
+      ])
+
+      expect(axios.get).toHaveBeenCalledTimes(1)
+      expect(result1).toEqual(mockData)
+      expect(result2).toEqual(mockData)
+      expect(result3).toEqual(mockData)
+    })
+
+    it('allows different requests concurrently', async () => {
+      const store = useMainStore()
+      vi.mocked(axios.get).mockImplementation((url) => {
+        if (url === './books.json') {
+          return Promise.resolve({ data: { totalCount: 0, books: [] } })
+        }
+        return Promise.resolve({ data: { totalCount: 0, authors: [] } })
+      })
+
+      await Promise.all([store.fetchBooks(), store.fetchAuthors()])
+
+      expect(axios.get).toHaveBeenCalledTimes(2)
+    })
+  })
+})

ui/src/views/AuthorListView.integration.spec.ts

@@ -0,0 +1,170 @@
+/**
+ * Integration tests for AuthorListView
+ * Tests author browsing with search and pagination
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import AuthorListView from './AuthorListView.vue'
+import { useMainStore } from '@/stores/main'
+import type { Authors } from '@/types'
+
+const mockAuthorsData: Authors = {
+  totalCount: 5,
+  authors: [
+    { id: 'austen-jane', name: 'Jane Austen', bookCount: 6 },
+    { id: 'dickens-charles', name: 'Charles Dickens', bookCount: 15 },
+    { id: 'shakespeare-william', name: 'William Shakespeare', bookCount: 20 },
+    { id: 'hugo-victor', name: 'Victor Hugo', bookCount: 10 },
+    { id: 'twain-mark', name: 'Mark Twain', bookCount: 12 }
+  ]
+}
+
+describe('AuthorListView Integration', () => {
+  let router: ReturnType<typeof createRouter>
+  let store: ReturnType<typeof useMainStore>
+  let pinia: ReturnType<typeof createPinia>
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    store = useMainStore()
+    router = createRouter({
+      history: createMemoryHistory(),
+      routes: [{ path: '/authors', component: AuthorListView }]
+    })
+  })
+
+  const mountView = async (mockData: Authors = mockAuthorsData) => {
+    vi.spyOn(store, 'fetchAuthors').mockResolvedValue(mockData)
+    const wrapper = mount(AuthorListView, {
+      global: {
+        plugins: [pinia, router]
+      }
+    })
+    await flushPromises()
+    return wrapper
+  }
+
+  describe('Data Loading', () => {
+    it('loads and displays authors on mount', async () => {
+      const wrapper = await mountView()
+
+      expect(store.fetchAuthors).toHaveBeenCalledOnce()
+      expect(wrapper.text()).toContain('Jane Austen')
+      expect(wrapper.text()).toContain('Charles Dickens')
+      expect(wrapper.text()).toContain('William Shakespeare')
+    })
+
+    it('shows empty state when no authors available', async () => {
+      const wrapper = await mountView({ totalCount: 0, authors: [] })
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      expect(listWrapper.props('hasItems')).toBe(false)
+    })
+  })
+
+  describe('Search Functionality', () => {
+    it('filters authors by search query', async () => {
+      const wrapper = await mountView()
+
+      expect(wrapper.text()).toContain('Jane Austen')
+      expect(wrapper.text()).toContain('Charles Dickens')
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      await listWrapper.vm.$emit('update:searchQuery', 'Jane')
+      await wrapper.vm.$nextTick()
+
+      const authorGrid = wrapper.findComponent({ name: 'AuthorGrid' })
+      expect(authorGrid.props('authors')).toHaveLength(1)
+      expect(authorGrid.props('authors')[0].name).toBe('Jane Austen')
+    })
+
+    it('shows all authors when search is cleared', async () => {
+      const wrapper = await mountView()
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      await listWrapper.vm.$emit('update:searchQuery', 'Jane')
+      await wrapper.vm.$nextTick()
+
+      const authorGrid = wrapper.findComponent({ name: 'AuthorGrid' })
+      expect(authorGrid.props('authors')).toHaveLength(1)
+
+      await listWrapper.vm.$emit('update:searchQuery', '')
+      await wrapper.vm.$nextTick()
+
+      expect(authorGrid.props('authors')).toHaveLength(5)
+    })
+
+    it('handles case-insensitive search', async () => {
+      const wrapper = await mountView()
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      await listWrapper.vm.$emit('update:searchQuery', 'DICKENS')
+      await wrapper.vm.$nextTick()
+
+      const authorGrid = wrapper.findComponent({ name: 'AuthorGrid' })
+      expect(authorGrid.props('authors')).toHaveLength(1)
+      expect(authorGrid.props('authors')[0].name).toBe('Charles Dickens')
+    })
+  })
+
+  describe('Sorting', () => {
+    it('sorts authors alphabetically by default', async () => {
+      const wrapper = await mountView()
+
+      const authorGrid = wrapper.findComponent({ name: 'AuthorGrid' })
+      const authors = authorGrid.props('authors')
+
+      expect(authors[0].name).toBe('Charles Dickens')
+      expect(authors[1].name).toBe('Jane Austen')
+      expect(authors[2].name).toBe('Mark Twain')
+    })
+  })
+
+  describe('Pagination', () => {
+    const createManyAuthors = () => ({
+      totalCount: 30,
+      authors: Array.from({ length: 30 }, (_, i) => ({
+        id: `author-${i}`,
+        name: `Author ${String(i + 1).padStart(2, '0')}`,
+        bookCount: 5
+      }))
+    })
+
+    it('paginates when more than 24 authors', async () => {
+      const wrapper = await mountView(createManyAuthors())
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      expect(listWrapper.props('totalPages')).toBeGreaterThan(1)
+    })
+
+    it('resets to page 1 when search query changes', async () => {
+      const wrapper = await mountView(createManyAuthors())
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      await listWrapper.vm.$emit('goToPage', 2)
+      await wrapper.vm.$nextTick()
+
+      expect(listWrapper.props('currentPage')).toBe(2)
+
+      await listWrapper.vm.$emit('update:searchQuery', 'test')
+      await wrapper.vm.$nextTick()
+
+      expect(listWrapper.props('currentPage')).toBe(1)
+    })
+  })
+
+  describe('Item Count', () => {
+    it('displays correct author count', async () => {
+      const wrapper = await mountView()
+
+      const listWrapper = wrapper.findComponent({ name: 'ListViewWrapper' })
+      expect(listWrapper.props('currentCount')).toBe(5)
+      expect(listWrapper.props('totalCount')).toBe(5)
+      expect(listWrapper.props('itemType')).toBe('authors')
+    })
+  })
+})