#434

frontend/server.ssr.test.mjs

@@ -65,7 +65,8 @@ const responseFor = url => {
   if (path === '/counts/posts' || path === '/counts/tags') {
     const resource = path.endsWith ('posts') ? 'posts' : 'tags'
     return { count: 1, page: 1, limit: 20, group_count: 1,
-      groups: [{ key: 'create', name: null, count: 1 }],
+      groups: [{ key: url.searchParams.get ('axis') === 'user' ? 1 : '2024-01',
+        name: null, count: 1 }],
       versions: resource === 'posts'
       ? [{ post_id: 1, version_no: 1, title: { current: `SSR count ${locale}` } }]
       : [{ tag_id: 1, version_no: 1, name: { current: `SSR count ${locale}` } }] }
@@ -317,6 +318,10 @@ test ('counts SSR renders history data and retains URL query state', async () =>
       assert.equal (result.status, 200)
       assert.match (result.html, new RegExp (`SSR count ${locale}`))
       assert.match (result.html, new RegExp (`/${locale}/${resource}/1`))
+      assert.doesNotMatch (result.html, /counts:|columns\.changedAt|fields\.actor/)
+      assert.match (result.html, /aria-expanded="false"/)
+      if (locale === 'ain-Kana')
+        assert.match (result.html, /lang="ja"[^>]*>集計実行/)
       assert.ok (requests.some (request => request.url.includes (`/counts/${resource}`)
         && request.url.includes ('user_id=4') && request.url.includes (`locale=${locale}`)))
     }
@@ -648,10 +653,44 @@ test ('hydrate every route with stored browser preferences', {
             if (ready) break
           }
           assert.ok (ready, 'history query results must render')
+          const layout = await evaluate (`(()=>{
+            const nav=document.getElementById('counts-targets');
+            const main=document.querySelector('main').getBoundingClientRect();
+            return {visible:nav.getClientRects().length>0,
+              right:nav.getBoundingClientRect().right,left:main.left,width:main.width};
+          })()`)
+          assert.ok (width >= 768 ? layout.visible && layout.right <= layout.left
+            : !layout.visible && layout.width >= width - 16,
+            'the sidebar sits beside the table on desktop and collapses on mobile')
+          const toggle = `Array.from(document.querySelectorAll('button'))
+            .find(button=>button.textContent.includes('集計条件'))`
+          assert.equal (await evaluate (`(${toggle}).getAttribute('aria-expanded')`), 'false')
+          await evaluate (`(${toggle}).click()`)
+          const positions = await evaluate (`(()=>{
+            const output=document.querySelector('[data-counts-output]').getBoundingClientRect();
+            const filters=document.querySelector('[data-counts-filters]').getBoundingClientRect();
+            return {left:output.left,right:filters.left,top:output.top,bottom:filters.top};
+          })()`)
+          assert.ok (width >= 768 ? positions.left < positions.right
+            : positions.top < positions.bottom, 'output precedes filters in the layout')
+          assert.ok (await evaluate ('document.documentElement.scrollWidth<=innerWidth'))
+          if (resource === 'posts' && process.env.SSR_COUNTS_ONLY === '1') {
+            const { writeFile } = await import ('node:fs/promises')
+            const shot = await send ('Page.captureScreenshot', { format: 'png' }, sessionId)
+            await writeFile (`/tmp/counts-${width}-conditions.png`,
+              Buffer.from (shot.data, 'base64'))
+          }
+          await evaluate (`(${toggle}).click()`)
           for (const dark of [false, true]) {
             await evaluate (`document.documentElement.classList.toggle('dark',${dark})`)
             assert.ok (await evaluate ('document.documentElement.scrollWidth<=innerWidth'),
               'counts controls must fit the viewport in both themes')
+            if (resource === 'posts' && process.env.SSR_COUNTS_ONLY === '1') {
+              const { writeFile } = await import ('node:fs/promises')
+              const shot = await send ('Page.captureScreenshot', { format: 'png' }, sessionId)
+              await writeFile (`/tmp/counts-${width}-${dark ? 'dark' : 'light'}.png`,
+                Buffer.from (shot.data, 'base64'))
+            }
           }
         })
       }