hamburger menu, article view

2026-06-08 06:39:47 +02:00
parent 39f08c7218
commit b4fc86302f
8 changed files with 784 additions and 203 deletions
@@ -0,0 +1,142 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import axios from 'axios'
+import { useFeeds } from '../useFeeds'
+
+vi.mock('axios')
+
+class FakeIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
+
+describe('useFeeds', () => {
+  const { feeds, showMessage, message, showModal, fetchData, sync, getReadable } = useFeeds()
+
+  beforeEach(() => {
+    localStorage.setItem('user-token', 'test-token')
+    localStorage.setItem('user-id', '7')
+    vi.clearAllMocks()
+
+    feeds.value = []
+    showMessage.value = false
+    message.value = ''
+    showModal.value = false
+  })
+
+  it('fetches and flattens articles for the current user', async () => {
+    axios.get.mockResolvedValueOnce({
+      data: {
+        feeds: [
+          {
+            title: 'My Feed',
+            items: [
+              {
+                id: 1,
+                title: 'Article one',
+                content: '<p>hello</p>',
+                url: 'https://example.test/1',
+                timestamp: '2026-01-01 10:00:00',
+              },
+            ],
+          },
+        ],
+      },
+    })
+
+    await fetchData()
+
+    expect(axios.get).toHaveBeenCalledWith('/api/v1/article/get/7', expect.anything())
+    expect(feeds.value).toHaveLength(1)
+    expect(feeds.value[0]).toMatchObject({ title: 'Article one', feedTitle: 'My Feed' })
+  })
+
+  it('sorts articles by timestamp across feeds, newest first', async () => {
+    axios.get.mockResolvedValueOnce({
+      data: {
+        feeds: [
+          {
+            title: 'Old Feed',
+            items: [
+              { id: 1, title: 'Older article', content: '', url: 'https://example.test/1', timestamp: '2026-01-01 10:00:00' },
+            ],
+          },
+          {
+            title: 'New Feed',
+            items: [
+              { id: 2, title: 'Newer article', content: '', url: 'https://example.test/2', timestamp: '2026-02-01 10:00:00' },
+            ],
+          },
+        ],
+      },
+    })
+
+    await fetchData()
+
+    expect(feeds.value.map(f => f.title)).toEqual(['Newer article', 'Older article'])
+  })
+
+  it('syncs feeds for the current user and refetches', async () => {
+    axios.post.mockResolvedValueOnce({ status: 200 })
+    axios.get.mockResolvedValue({ data: { feeds: [] } })
+
+    await sync()
+
+    expect(axios.post).toHaveBeenCalledWith(
+      '/api/v1/article/sync',
+      { user_id: 7 },
+      expect.anything(),
+    )
+    expect(axios.get).toHaveBeenCalledWith('/api/v1/article/get/7', expect.anything())
+  })
+
+  it('resolves Deutsche-Welle-style templated image URLs from data-format/data-url', async () => {
+    feeds.value = [{
+      id: 1,
+      title: 'Article one',
+      url: 'https://www.dw.com/en/article-one/a-1',
+      content: '',
+    }]
+    axios.post.mockResolvedValueOnce({
+      data: {
+        content: `<html><body><article>
+          <img data-format="MASTER_LANDSCAPE" data-id="76212061"
+               data-url="https://static.dw.com/image/76212061_\${formatId}.jpg"
+               data-aspect-ratio="16/9" alt="Merz and Trump"
+               src="https://static.dw.com/image/76212061_$%7BformatId%7D.jpg">
+          <p>some article text long enough for readability to keep the image and paragraph together in the parsed output, padded with extra words to pass the content-length heuristics used by Mozilla Readability when scoring candidate nodes for the main article body.</p>
+        </article></body></html>`,
+      },
+    })
+
+    await getReadable(feeds.value[0], 0)
+
+    expect(feeds.value[0].content).toContain('src="https://static.dw.com/image/76212061_MASTER_LANDSCAPE.jpg"')
+    // The rendered `src` is what matters — `data-url` retaining the raw
+    // template is harmless since browsers don't load images from data-* attrs.
+    expect(feeds.value[0].content).not.toMatch(/src="[^"]*(\$\{|%7[bB])/)
+  })
+
+  it('drops unresolvable templated images instead of leaving a broken src', async () => {
+    feeds.value = [{
+      id: 1,
+      title: 'Article one',
+      url: 'https://example.test/article-one',
+      content: '',
+    }]
+    axios.post.mockResolvedValueOnce({
+      data: {
+        content: `<html><body><article>
+          <img data-url="https://example.test/img_\${size}.jpg" src="https://example.test/img_%7Bsize%7D.jpg">
+          <p>some article text long enough for readability to keep the paragraph as the main content body, padded with extra words to pass the content-length heuristics used by Mozilla Readability when scoring candidate nodes.</p>
+        </article></body></html>`,
+      },
+    })
+
+    await getReadable(feeds.value[0], 0)
+
+    expect(feeds.value[0].content).not.toContain('%7Bsize%7D')
+    expect(feeds.value[0].content).not.toContain('<img')
+  })
+})