From f6c83437510463627ab6572564fb5ffa88955173 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 11 Feb 2024 14:58:01 +0100
Subject: [PATCH] feat: extract Created partial from route
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is displaying the created time of the user's profile.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 src/lib/components/atoms/Created.svelte | 15 +++++
 src/routes/profile/+page.svelte         |  9 +--
 tests/components/atoms/Created.test.ts  | 76 +++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/atoms/Created.svelte
 create mode 100644 tests/components/atoms/Created.test.ts

diff --git a/src/lib/components/atoms/Created.svelte b/src/lib/components/atoms/Created.svelte
new file mode 100644
index 0000000..34f62ab
--- /dev/null
+++ b/src/lib/components/atoms/Created.svelte
@@ -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}
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index b6de84a..04db3a0 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Avatar from '$lib/components/atoms/Avatar.svelte';
+	import Created from '$lib/components/atoms/Created.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -13,10 +14,10 @@
 	<!-- Board -->
 	<div class="flex flex-1 flex-col pl-8">
 		<div class="self-end">
-			<span
-				>created <date datetime={data.user.created_at}>{@html data.user.created_at_formatted}</date
-				></span
-			>
+			<Created
+				created_at={data.user.created_at}
+				created_at_formatted={data.user.created_at_formatted}
+			/>
 			<button type="button" class="underline">block</button>
 			or
 			<button type="button" class="underline">report</button>
diff --git a/tests/components/atoms/Created.test.ts b/tests/components/atoms/Created.test.ts
new file mode 100644
index 0000000..360cdf7
--- /dev/null
+++ b/tests/components/atoms/Created.test.ts
@@ -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);
+			});
+		});
+	});
+});