forge/Anvil
1
0
Fork 0
Code Pull requests Activity

refactor: extract display name into component

Browse source 
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>
This commit is contained in:
André Jaenisch 2024-02-14 11:24:41 +01:00
parent 508105681b
commit fecd15f862
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
3 changed files with 39 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/lib/components/atoms/DisplayName.svelte Normal file
View file

@ -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>

7
src/routes/profile/+page.svelte
View file

@ -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}

20
tests/components/atoms/DisplayName.test.ts Normal file
View file

@ -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();
});
});