import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/svelte'

import Avatar from '../../../src/lib/components/atoms/Avatar.svelte'

describe('Avatar.svelte', () => {
	it('should mount', () => {
		// Arrange
		// Nothing to prepare

		// Act
		const { container } = render(Avatar);

		// Assert
		expect(container).toBeTruthy()
	})

	it('should pick up the passed image', () => {
		// Arrange
		const avatar = 'https://example.com/avatar.png'

		// Act
		render(Avatar, { avatar })
		const figure = screen.getByTestId('avatar')
		const image = figure.querySelector('img')

		// Assert
		expect(figure).toBeInTheDocument()
		expect(image).not.toBeNull()
		expect(image).toHaveAttribute('src', avatar)
	})

	it('should use an image with alt text', () => {
		// Arrange
		const avatar = 'https://example.com/avatar.png'
		const displayName = 'Jane Doe'

		// Act
		render(Avatar, { avatar, displayName })
		const figure = screen.getByTestId('avatar')

		// Assert
		expect(figure).toBeInTheDocument()
		expect(screen.getByAltText(displayName)).toBeDefined()
	})

	it('should use the initials as text', () => {
		// Arrange
		const displayName = 'Jane Doe'
		const initials = displayName.substring(0, 2).toUpperCase()

		// Act
		render(Avatar, { displayName })
		const figure = screen.getByTestId('avatar')

		// Assert
		expect(figure).toBeInTheDocument()
		expect(screen.getByText(initials)).toBeDefined()
	})
})