chore: apply formatting
We want to be a good citizen, don't we? Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
parent
9c4c8f04f4
commit
406b38698c
4 changed files with 42 additions and 54 deletions
|
@ -1,21 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
/**
|
||||
* URL to Avatar image.
|
||||
*/
|
||||
export let avatar: string | undefined = '';
|
||||
/**
|
||||
* URL to Avatar image.
|
||||
*/
|
||||
export let avatar: string | undefined = '';
|
||||
|
||||
/**
|
||||
* Name to derive initials from if no avatar is given.
|
||||
*/
|
||||
export let displayName: string | undefined = '';
|
||||
/**
|
||||
* Name to derive initials from if no avatar is given.
|
||||
*/
|
||||
export let displayName: string | undefined = '';
|
||||
</script>
|
||||
|
||||
<Avatar
|
||||
src={avatar}
|
||||
alt={displayName}
|
||||
width="w-32"
|
||||
rounded="rounded-full"
|
||||
initials={displayName}
|
||||
/>
|
||||
<Avatar src={avatar} alt={displayName} width="w-32" rounded="rounded-full" initials={displayName} />
|
||||
|
|
|
@ -8,10 +8,7 @@
|
|||
<section class="w-full mx-auto flex px-8 pt-8">
|
||||
<!-- Profile header -->
|
||||
<div>
|
||||
<Avatar
|
||||
avatar={data.user.avatar}
|
||||
displayName={data.user.display_name}
|
||||
/>
|
||||
<Avatar avatar={data.user.avatar} displayName={data.user.display_name} />
|
||||
</div>
|
||||
<!-- Board -->
|
||||
<div class="flex flex-1 flex-col pl-8">
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import '@testing-library/jest-dom'
|
||||
import { render, screen } from '@testing-library/svelte'
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/svelte';
|
||||
|
||||
import Avatar from '../../../src/lib/components/atoms/Avatar.svelte'
|
||||
import Avatar from '../../../src/lib/components/atoms/Avatar.svelte';
|
||||
|
||||
describe('Avatar.svelte', () => {
|
||||
it('should mount', () => {
|
||||
|
@ -12,49 +12,49 @@ describe('Avatar.svelte', () => {
|
|||
const { container } = render(Avatar);
|
||||
|
||||
// Assert
|
||||
expect(container).toBeTruthy()
|
||||
})
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should pick up the passed image', () => {
|
||||
// Arrange
|
||||
const avatar = 'https://example.com/avatar.png'
|
||||
const avatar = 'https://example.com/avatar.png';
|
||||
|
||||
// Act
|
||||
render(Avatar, { avatar })
|
||||
const figure = screen.getByTestId('avatar')
|
||||
const image = figure.querySelector('img')
|
||||
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)
|
||||
})
|
||||
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'
|
||||
const avatar = 'https://example.com/avatar.png';
|
||||
const displayName = 'Jane Doe';
|
||||
|
||||
// Act
|
||||
render(Avatar, { avatar, displayName })
|
||||
const figure = screen.getByTestId('avatar')
|
||||
render(Avatar, { avatar, displayName });
|
||||
const figure = screen.getByTestId('avatar');
|
||||
|
||||
// Assert
|
||||
expect(figure).toBeInTheDocument()
|
||||
expect(screen.getByAltText(displayName)).toBeDefined()
|
||||
})
|
||||
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()
|
||||
const displayName = 'Jane Doe';
|
||||
const initials = displayName.substring(0, 2).toUpperCase();
|
||||
|
||||
// Act
|
||||
render(Avatar, { displayName })
|
||||
const figure = screen.getByTestId('avatar')
|
||||
render(Avatar, { displayName });
|
||||
const figure = screen.getByTestId('avatar');
|
||||
|
||||
// Assert
|
||||
expect(figure).toBeInTheDocument()
|
||||
expect(screen.getByText(initials)).toBeDefined()
|
||||
})
|
||||
})
|
||||
expect(figure).toBeInTheDocument();
|
||||
expect(screen.getByText(initials)).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -4,12 +4,9 @@ import { defineConfig } from 'vitest/config';
|
|||
export default defineConfig({
|
||||
plugins: [svelte({ hot: !process.env.VITEST })],
|
||||
test: {
|
||||
|
||||
coverage: {
|
||||
include: [
|
||||
'src/**/*.svelte'
|
||||
]
|
||||
},
|
||||
coverage: {
|
||||
include: ['src/**/*.svelte']
|
||||
},
|
||||
include: ['tests/**/*.test.ts'],
|
||||
environment: 'jsdom',
|
||||
globals: true
|
||||
|
|
Loading…
Reference in a new issue