From fd2ab00cb9883c2859bc48edf47acf2179608095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Sun, 11 Feb 2024 18:29:53 +0100
Subject: [PATCH] refactor: extract block or report buttons to atom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These have no handlers bound to them yet. At that point the atom might
be refactored to a molecule. Let's see.

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

diff --git a/src/lib/components/atoms/BlockOrReport.svelte b/src/lib/components/atoms/BlockOrReport.svelte
new file mode 100644
index 0000000..ac762c3
--- /dev/null
+++ b/src/lib/components/atoms/BlockOrReport.svelte
@@ -0,0 +1,3 @@
+<button type="button" class="underline">block</button>
+or
+<button type="button" class="underline">report</button>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 04db3a0..71c1b15 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 BlockOrReport from '$lib/components/atoms/BlockOrReport.svelte';
 	import Created from '$lib/components/atoms/Created.svelte';
 
 	/** @type {import('./$types').PageData} */
@@ -18,9 +19,7 @@
 				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>
+			<BlockOrReport />
 		</div>
 		<!-- Top Row -->
 		<div class="flex mt-2">
diff --git a/tests/components/atoms/BlockOrReport.test.ts b/tests/components/atoms/BlockOrReport.test.ts
new file mode 100644
index 0000000..aa75d21
--- /dev/null
+++ b/tests/components/atoms/BlockOrReport.test.ts
@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+
+import BlockOrReport from '../../../src/lib/components/atoms/BlockOrReport.svelte';
+
+describe('BlockOrReport.svelte', () => {
+	it('should mount', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		const { container } = render(BlockOrReport);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should allow for block', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(BlockOrReport);
+
+		// Assert
+		expect(screen.getByText('block')).toBeDefined();
+	});
+
+	it('should allow for report', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(BlockOrReport);
+
+		// Assert
+		expect(screen.getByText('report')).toBeDefined();
+	});
+});