feat: extract Created partial from route
This is displaying the created time of the user's profile. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
parent
406b38698c
commit
f6c8343751
3 changed files with 96 additions and 4 deletions
15
src/lib/components/atoms/Created.svelte
Normal file
15
src/lib/components/atoms/Created.svelte
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* Formatted datetime according to the locale.
|
||||||
|
*/
|
||||||
|
export let created_at_formatted: string | null = '';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Date object for created time.
|
||||||
|
*/
|
||||||
|
export let created_at: Date | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if created_at && created_at_formatted}
|
||||||
|
<span>created <date datetime={created_at}>{@html created_at_formatted}</date></span>
|
||||||
|
{/if}
|
|
@ -1,5 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import Avatar from '$lib/components/atoms/Avatar.svelte';
|
import Avatar from '$lib/components/atoms/Avatar.svelte';
|
||||||
|
import Created from '$lib/components/atoms/Created.svelte';
|
||||||
|
|
||||||
/** @type {import('./$types').PageData} */
|
/** @type {import('./$types').PageData} */
|
||||||
export let data;
|
export let data;
|
||||||
|
@ -13,10 +14,10 @@
|
||||||
<!-- Board -->
|
<!-- Board -->
|
||||||
<div class="flex flex-1 flex-col pl-8">
|
<div class="flex flex-1 flex-col pl-8">
|
||||||
<div class="self-end">
|
<div class="self-end">
|
||||||
<span
|
<Created
|
||||||
>created <date datetime={data.user.created_at}>{@html data.user.created_at_formatted}</date
|
created_at={data.user.created_at}
|
||||||
></span
|
created_at_formatted={data.user.created_at_formatted}
|
||||||
>
|
/>
|
||||||
<button type="button" class="underline">block</button>
|
<button type="button" class="underline">block</button>
|
||||||
or
|
or
|
||||||
<button type="button" class="underline">report</button>
|
<button type="button" class="underline">report</button>
|
||||||
|
|
76
tests/components/atoms/Created.test.ts
Normal file
76
tests/components/atoms/Created.test.ts
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
|
import { render, screen } from '@testing-library/svelte';
|
||||||
|
|
||||||
|
import Created from '../../../src/lib/components/atoms/Created.svelte';
|
||||||
|
|
||||||
|
describe('Created.svelte', () => {
|
||||||
|
it('should mount', () => {
|
||||||
|
// Arrange
|
||||||
|
// Nothing to prepare
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const { container } = render(Created);
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(container).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when no created_at is passed', () => {
|
||||||
|
describe('when no created_at_formatted is passed', () => {
|
||||||
|
it('should be empty', () => {
|
||||||
|
// Arrange
|
||||||
|
// Nothing to prepare
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const { container } = render(Created);
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(container.textContent).toEqual('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when created_at_formatted is passed', () => {
|
||||||
|
it('should be empty', () => {
|
||||||
|
// Arrange
|
||||||
|
const created_at_formatted = '2024-02-11';
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const { container } = render(Created, { created_at_formatted });
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(container.textContent).toEqual('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when created_at is passed', () => {
|
||||||
|
describe('when no created_at_formatted is passed', () => {
|
||||||
|
it('should be empty', () => {
|
||||||
|
// Arrange
|
||||||
|
const created_at = new Date();
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const { container } = render(Created, { created_at });
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(container.textContent).toEqual('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when created_at_formatted is passed', () => {
|
||||||
|
it('should be empty', () => {
|
||||||
|
// Arrange
|
||||||
|
const created_at = new Date().toISOString();
|
||||||
|
const created_at_formatted = created_at.toString();
|
||||||
|
|
||||||
|
// Act
|
||||||
|
const { container } = render(Created, { created_at, created_at_formatted });
|
||||||
|
|
||||||
|
// Assert
|
||||||
|
expect(container.textContent).not.toEqual('');
|
||||||
|
expect(screen.getByText(created_at_formatted)).toBeDefined();
|
||||||
|
expect(screen.getByText(created_at_formatted)).toHaveAttribute('datetime', created_at);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue