From fecd15f86256a266d626196e25d4f4e8c92d0e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Wed, 14 Feb 2024 11:24:41 +0100
Subject: [PATCH] refactor: extract display name into component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I could imagine that we will refactor this into even smaller components
in the future but for now, I bundle the pronoun with the display name
like this.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 src/lib/components/atoms/DisplayName.svelte | 17 +++++++++++++++++
 src/routes/profile/+page.svelte             |  7 ++-----
 tests/components/atoms/DisplayName.test.ts  | 20 ++++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/atoms/DisplayName.svelte
 create mode 100644 tests/components/atoms/DisplayName.test.ts

diff --git a/src/lib/components/atoms/DisplayName.svelte b/src/lib/components/atoms/DisplayName.svelte
new file mode 100644
index 0000000..7f344b4
--- /dev/null
+++ b/src/lib/components/atoms/DisplayName.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	/**
+	 * Under which name shall the person be known?
+	 */
+	export let displayName: string = '';
+
+	/**
+	 * How to correctly address this person.
+	 */
+	export let pronoun: string = '';
+</script>
+
+<h1 class="h1 font-semibold text-4xl leading-tight">
+	<span class="sr-only">Profile for </span>
+	{@html displayName}
+</h1>
+<p class="leading-normal my-1">({@html pronoun})</p>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 71c1b15..7ee499a 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -2,6 +2,7 @@
 	import Avatar from '$lib/components/atoms/Avatar.svelte';
 	import BlockOrReport from '$lib/components/atoms/BlockOrReport.svelte';
 	import Created from '$lib/components/atoms/Created.svelte';
+	import DisplayName from '$lib/components/atoms/DisplayName.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -26,11 +27,7 @@
 			<!-- Board -->
 			<div class="flex flex-col flex-1 gap-2">
 				<div class="flex items-end">
-					<h1 class="h1 font-semibold text-4xl leading-tight">
-						<span class="sr-only">Profile for </span>
-						{@html data.user.display_name}
-					</h1>
-					<p class="leading-normal my-1">(she/her)</p>
+					<DisplayName displayName={data.user.display_name} pronoun={data.user.pronoun} />
 				</div>
 				<span class="leading-tight">
 					{@html data.user.username}@{@html data.user.instance}
diff --git a/tests/components/atoms/DisplayName.test.ts b/tests/components/atoms/DisplayName.test.ts
new file mode 100644
index 0000000..10cf548
--- /dev/null
+++ b/tests/components/atoms/DisplayName.test.ts
@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+
+import DisplayName from '../../../src/lib/components/atoms/DisplayName.svelte';
+
+describe('DisplayName.svelte', () => {
+	it('should mount', () => {
+		// Arrange
+		const displayName = 'Jane Doe';
+		const pronoun = 'she/her';
+
+		// Act
+		render(DisplayName, { displayName, pronoun });
+
+		// Assert
+		expect(screen.getByText(displayName)).toBeInTheDocument();
+		// Turn into regular expression to respect round brackets
+		expect(screen.getByText(new RegExp(pronoun))).toBeInTheDocument();
+	});
+});