設定画面 (#34) (#397)

Reviewed-on: #397
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/posts/PostSearchPage.test.tsx

@@ -4,6 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import PostSearchPage from '@/pages/posts/PostSearchPage'
 import { buildPost, buildTag } from '@/test/factories'
 import { renderWithProviders } from '@/test/render'
+import { CLIENT_SETTINGS_STORAGE_KEY } from '@/lib/settings'
 
 const postsApi = vi.hoisted (() => ({
   fetchPosts: vi.fn (),
@@ -18,6 +19,7 @@ vi.mock ('@/lib/api', () => api)
 
 describe ('PostSearchPage', () => {
   beforeEach (() => {
+    localStorage.clear ()
     vi.clearAllMocks ()
     api.apiGet.mockResolvedValue ([])
   })
@@ -40,6 +42,7 @@ describe ('PostSearchPage', () => {
             tags:  'x',
             match: 'any',
             page:  2,
+            limit: 20,
           }),
       )
     })
@@ -81,4 +84,41 @@ describe ('PostSearchPage', () => {
 
     expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
   })
+
+  it ('uses URL limit before localStorage and stores the active list settings', async () => {
+    localStorage.setItem (
+        CLIENT_SETTINGS_STORAGE_KEY,
+        JSON.stringify ({ lists: { postSearch: { limit: 100, order: 'title:asc' } } }))
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    renderWithProviders (
+        <PostSearchPage/>,
+        { route: '/posts/search?limit=50&order=created_at%3Adesc' },
+    )
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+          expect.objectContaining ({ limit: 50, order: 'created_at:desc' }),
+      )
+    })
+    expect (JSON.parse (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY) ?? '{}'))
+        .toMatchObject ({ lists: { postSearch: { limit: 50, order: 'created_at:desc' } } })
+  })
+
+  it ('moves the compact limit control outside the search form and resets page on change', async () => {
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostSearchPage/>, { route: '/posts/search?page=4' })
+
+    const limitSelect = await screen.findByLabelText ('件数')
+    expect (limitSelect.closest ('form')).toBeNull ()
+
+    fireEvent.change (limitSelect, { target: { value: '100' } })
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenLastCalledWith (
+          expect.objectContaining ({ page: 1, limit: 100 }),
+      )
+    })
+  })
 })