9c4c8f04f4
For now I'm following the Atomic Design philosophy with respect to organising the components. I started with Avatar which wraps the SvelteKit library with some defaults. I test it using vitest which is now configured accordingly. All dependencies were updated to their latest version. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
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()
|
|
})
|
|
})
|