youtube embeds

src/components/blog/BlogEntry.test.ts

@@ -0,0 +1,50 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it } from 'vitest'
+import { APP_SERVICES } from '$lib/app-services'
+import { status, testServices } from '$test/fixtures'
+import BlogEntry from './BlogEntry.svelte'
+
+function renderEntry(overrides: Parameters<typeof status>[0]) {
+  return render(BlogEntry, {
+    props: { status: status(overrides) },
+    context: new Map([[APP_SERVICES, testServices()]]),
+  })
+}
+
+describe('BlogEntry YouTube embeds', () => {
+  it('turns a YouTube note link into an attachment-style embed', () => {
+    const view = renderEntry({
+      content:
+        '<p>Watch this: <a href="https://www.youtube.com/watch?v=pyNCigSulNs">https://www.youtube.com/watch?v=pyNCigSulNs</a></p>',
+      card: {
+        url: 'https://www.youtube.com/watch?v=pyNCigSulNs',
+        title: 'Server-generated YouTube preview',
+        description: 'This should be replaced by the player.',
+        type: 'video',
+      },
+    })
+
+    const frame = view.getByTitle('YouTube video')
+    expect(frame).toHaveAttribute(
+      'src',
+      'https://www.youtube-nocookie.com/embed/pyNCigSulNs',
+    )
+    expect(frame.closest('.attachment')).toHaveAttribute('data-type', 'youtube')
+    expect(view.getByRole('link', { name: 'Watch on YouTube' })).toHaveAttribute(
+      'href',
+      'https://www.youtube.com/watch?v=pyNCigSulNs',
+    )
+    expect(view.queryByText('Server-generated YouTube preview')).not.toBeInTheDocument()
+  })
+
+  it('does not load a sensitive player before the reader reveals it', async () => {
+    const view = renderEntry({
+      content: '<p><a href="https://youtu.be/pyNCigSulNs">video</a></p>',
+      sensitive: true,
+    })
+
+    expect(view.queryByTitle('YouTube video')).not.toBeInTheDocument()
+    await fireEvent.click(view.getByRole('button', { name: 'Show sensitive video' }))
+    expect(view.getByTitle('YouTube video')).toBeInTheDocument()
+  })
+})