ATProto social network
Something went wrong. Try again.
3.1 kB · 104 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105import { describe, it, expect } from 'vitest';import { render, screen } from '@testing-library/svelte';import ImageBlock from './ImageBlock.svelte';import type { ImageBlock as ImageBlockType } from '$lib/types/content-blocks';
describe('ImageBlock', () => { it('renders a single image', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { image: { $type: 'blob', ref: { $link: '/img/test.png' }, mimeType: 'image/png', size: 1024 }, alt: 'Test image' } ] }; render(ImageBlock, { props: { block } }); const img = screen.getByRole('img'); expect(img).toHaveAttribute('src', '/img/test.png'); expect(img).toHaveAttribute('alt', 'Test image'); });
it('renders multiple images', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { image: { $type: 'blob', ref: { $link: '/img/1.png' }, mimeType: 'image/png', size: 1024 }, alt: 'Image 1' }, { image: { $type: 'blob', ref: { $link: '/img/2.png' }, mimeType: 'image/png', size: 2048 }, alt: 'Image 2' } ] }; render(ImageBlock, { props: { block } }); const images = screen.getAllByRole('img'); expect(images).toHaveLength(2); });
it('applies lazy loading', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { image: { $type: 'blob', ref: { $link: '/img/lazy.png' }, mimeType: 'image/png', size: 512 }, alt: 'Lazy' } ] }; render(ImageBlock, { props: { block } }); const img = screen.getByRole('img'); expect(img).toHaveAttribute('loading', 'lazy'); });
it('renders an image with externalUri instead of blob', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { externalUri: 'https://example.com/photo.jpg', alt: 'External image' } ] }; render(ImageBlock, { props: { block } }); const img = screen.getByRole('img'); expect(img).toHaveAttribute('src', 'https://example.com/photo.jpg'); expect(img).toHaveAttribute('alt', 'External image'); });
it('prefers externalUri over blob when both are present', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { image: { $type: 'blob', ref: { $link: '/img/blob.png' }, mimeType: 'image/png', size: 1024 }, externalUri: 'https://example.com/external.jpg', alt: 'Both provided' } ] }; render(ImageBlock, { props: { block } }); const img = screen.getByRole('img'); expect(img).toHaveAttribute('src', 'https://example.com/external.jpg'); });
it('renders alt text as sr-only caption', () => { const block: ImageBlockType = { $type: 'at.riven.block.image', images: [ { image: { $type: 'blob', ref: { $link: '/img/a.png' }, mimeType: 'image/png', size: 100 }, alt: 'Descriptive text' } ] }; render(ImageBlock, { props: { block } }); const caption = screen.getByTestId('image-block').querySelector('figcaption'); expect(caption?.textContent).toBe('Descriptive text'); expect(caption?.className).toContain('sr-only'); });});