back_office components tests

back_office/components/document_card_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"bytes"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+	"kita.gawa.moe/paweljw/vellum/models"
+	g "maragu.dev/gomponents"
+)
+
+func TestDocumentCard_Basic(t *testing.T) {
+	publishedOn, _ := time.Parse("2006-01-02", "2021-01-01")
+
+	doc := models.Document{
+		ID:          1,
+		Title:       "Test Document",
+		Slug:        "test-document",
+		BakedPath:   "/test-document",
+		PublishedOn: publishedOn,
+		Tags: []models.Tag{
+			{
+				ID:   1,
+				Slug: "test-tag",
+			},
+		},
+	}
+
+	card := components.DocumentCard(doc)
+	html := renderToString(card)
+
+	require.Equal(
+		t,
+		`<div class="pl-2 pb-2 inline-flex w-full flex-row justify-between gap-2"><div class="flex flex-col truncate"><a href="/!d/-/test-document">Test Document</a><p class="text-xs text-gray-500 p-0 m-0 truncate">private, about 4 years ago (2021-01-01)</p><p class="text-s text-gray-600 p-0 m-0 truncate"></p></div><div class="flex flex-row gap-2 items-baseline hidden md:flex"><div class="flex gap-1"><span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span></div><div class="text-sm text-gray-500 flex">/test-document</div></div></div>`,
+		html,
+	)
+}
+
+func TestDocumentCard_InternalRedirect(t *testing.T) {
+	publishedOn, _ := time.Parse("2006-01-02", "2021-01-01")
+
+	doc := models.Document{
+		ID:             1,
+		Title:          "Test Document",
+		Slug:           "test-document",
+		BakedPath:      "/test-document",
+		PublishedOn:    publishedOn,
+		IsRedirect:     true,
+		IsExternalLink: false,
+		Tags: []models.Tag{
+			{
+				ID:   1,
+				Slug: "test-tag",
+			},
+		},
+	}
+
+	card := components.DocumentCard(doc)
+	html := renderToString(card)
+
+	require.Equal(
+		t,
+		`<div class="pl-2 pb-2 inline-flex w-full flex-row justify-between gap-2"><div class="flex flex-col truncate"><a href="/!d/-/test-document">Test Document <span title="This is a redirect">🔀</span></a><p class="text-xs text-gray-500 p-0 m-0 truncate">private, about 4 years ago (2021-01-01)</p><p class="text-s text-gray-600 p-0 m-0 truncate"></p></div><div class="flex flex-row gap-2 items-baseline hidden md:flex"><div class="flex gap-1"><span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span></div><div class="text-sm text-gray-500 flex">/test-document</div></div></div>`,
+		html,
+	)
+}
+
+func TestDocumentCard_ExternalLink(t *testing.T) {
+	publishedOn, _ := time.Parse("2006-01-02", "2021-01-01")
+
+	doc := models.Document{
+		ID:             1,
+		Title:          "Test Document",
+		Slug:           "test-document",
+		BakedPath:      "/test-document",
+		PublishedOn:    publishedOn,
+		IsRedirect:     true,
+		IsExternalLink: true,
+		Tags: []models.Tag{
+			{
+				ID:   1,
+				Slug: "test-tag",
+			},
+		},
+	}
+
+	card := components.DocumentCard(doc)
+	html := renderToString(card)
+
+	require.Equal(
+		t,
+		`<div class="pl-2 pb-2 inline-flex w-full flex-row justify-between gap-2"><div class="flex flex-col truncate"><a href="/!d/-/test-document">Test Document <span title="This is an external link">🔗</span></a><p class="text-xs text-gray-500 p-0 m-0 truncate">private, about 4 years ago (2021-01-01)</p><p class="text-s text-gray-600 p-0 m-0 truncate"></p></div><div class="flex flex-row gap-2 items-baseline hidden md:flex"><div class="flex gap-1"><span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span></div><div class="text-sm text-gray-500 flex">/test-document</div></div></div>`,
+		html,
+	)
+}
+
+func renderToString(node g.Node) string {
+	buffer := bytes.NewBuffer(nil)
+	_ = node.Render(buffer)
+	return buffer.String()
+}

back_office/components/document_listing_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+	"kita.gawa.moe/paweljw/vellum/models"
+)
+
+func TestDocumentListing(t *testing.T) {
+	docs := []models.Document{
+		{
+			ID:    1,
+			Title: "Test Document",
+			Slug:  "test-document",
+			Tags: []models.Tag{
+				{
+					ID:   1,
+					Slug: "test-tag",
+				},
+			},
+		},
+	}
+
+	listing := components.DocumentListing(docs)
+	html := renderToString(listing)
+
+	require.Equal(
+		t,
+		`<ul class="list-none truncate"><li class="px-0 pt-2 border-b border-gray-200 last:border-none last:pb-2"><div class="pl-2 pb-2 inline-flex w-full flex-row justify-between gap-2"><div class="flex flex-col truncate"><a href="/!d/-">Test Document</a><p class="text-xs text-gray-500 p-0 m-0 truncate">private, over 292 years ago (0001-01-01)</p><p class="text-s text-gray-600 p-0 m-0 truncate"></p></div><div class="flex flex-row gap-2 items-baseline hidden md:flex"><div class="flex gap-1"><span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span></div><div class="text-sm text-gray-500 flex"></div></div></div></li></ul>`,
+		html,
+	)
+}

back_office/components/document_specification_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+	"kita.gawa.moe/paweljw/vellum/models"
+)
+
+func TestDocumentSpecification(t *testing.T) {
+	doc := models.Document{
+		ID:    1,
+		Title: "Test Document",
+		Slug:  "test-document",
+		Tags: []models.Tag{
+			{
+				ID:   1,
+				Slug: "test-tag",
+			},
+		},
+	}
+
+	specification := components.DocumentSpecification(doc)
+	html := renderToString(specification)
+
+	require.Equal(
+		t,
+		`<div class="flex flex-wrap gap-1 mb-4"><span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span></div><div class="grid grid-flow-row-dense grid-cols-2 gap-2 mt-2"><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p>Path: <strong class="font-mono"></strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p class="font-mono">Published on: <strong>0001-01-01</strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p>Created At: <strong title="Mon, 01 Jan 0001 00:00:00 UTC" class="font-mono">over 292 years ago</strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p>Updated At: <strong title="Mon, 01 Jan 0001 00:00:00 UTC" class="font-mono">over 292 years ago</strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p>Status: <strong class="font-mono">private</strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4 truncate"><p>Cache Hash: <strong class="font-mono"></strong></p></div><div class="col-span-1 rounded shadow-sm bg-white border border-gray-200 p-2 px-4"><p>DB ID: <strong class="font-mono">1</strong></p></div></div>`,
+		html,
+	)
+}

back_office/components/footer_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+)
+
+func TestFooter(t *testing.T) {
+	footer := components.Footer()
+	html := renderToString(footer)
+
+	require.Equal(
+		t,
+		`<footer class="w-full flex justify-center items-center py-4"><p class="text-center">Built with ❤️ by <a href="https://paweljw.al">Paweł J. Wal</a></p></footer>`,
+		html,
+	)
+}

back_office/components/page_header_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+	g "maragu.dev/gomponents"
+	h "maragu.dev/gomponents/html"
+)
+
+func TestPageHeader(t *testing.T) {
+	header := components.PageHeader("Test Page", nil)
+	html := renderToString(header)
+
+	require.Equal(
+		t,
+		`<div class="flex flex-col md:flex-row justify-between pb-1 mb-4 gap-4 md:gap-0"><h1 class="text-4xl font-bold truncate">Test Page</h1></div><nav class="z-40 sticky top-0 bg-white bg-opacity-70 backdrop-blur-md flex flex-row flex-wrap max-w-screen justify-around md:justify-start gap-4 mb-3 p-4 py-2 ml-[-1rem] mr-[-1rem] border-b border-t border-gray-200"><a href="/" class="flex">pub</a><a href="/!d" class="flex">docs</a><a href="/!dm" class="flex">media</a><a href="/!dt" class="flex">tags</a><a href="/!da" class="flex">sessions</a><form method="POST" action="/!l/clear" data-danger="true"><button class="text-red-500 hover:text-red-600">sign out</button></form></nav>`,
+		html,
+	)
+}
+
+func TestPageHeader_WithExtraNav(t *testing.T) {
+	extraNav := h.A(g.Text("Test Item"), h.Href("/test-item"))
+	header := components.PageHeader("Test Page", extraNav)
+	html := renderToString(header)
+
+	require.Equal(
+		t,
+		`<div class="flex flex-col md:flex-row justify-between pb-1 mb-4 gap-4 md:gap-0"><h1 class="text-4xl font-bold truncate">Test Page</h1></div><nav class="z-40 sticky top-0 bg-white bg-opacity-70 backdrop-blur-md flex flex-row flex-wrap max-w-screen justify-around md:justify-start gap-4 mb-3 p-4 py-2 ml-[-1rem] mr-[-1rem] border-b border-t border-gray-200"><a href="/" class="flex">pub</a><a href="/!d" class="flex">docs</a><a href="/!dm" class="flex">media</a><a href="/!dt" class="flex">tags</a><a href="/!da" class="flex">sessions</a><form method="POST" action="/!l/clear" data-danger="true"><button class="text-red-500 hover:text-red-600">sign out</button></form><a href="/test-item">Test Item</a></nav>`,
+		html,
+	)
+}

back_office/components/search_bar_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+)
+
+func TestSearchBar(t *testing.T) {
+	searchBar := components.SearchBar("Test Search")
+	html := renderToString(searchBar)
+
+	require.Equal(
+		t,
+		`<form class="w-full flex flex-row justify-between py-4" action="/!ds" method="GET"><input type="text" placeholder="Search" value="Test Search" name="query" class="w-full p-2 rounded-md border border-neutral-200" id="search-input"></form>`,
+		html,
+	)
+}

back_office/components/slim_button.go

@@ -9,10 +9,6 @@ import (
 	h "maragu.dev/gomponents/html"
 )
 
-func SlimButton(text, color, href string) g.Node {
-	return h.A(g.Text(text), h.Href(href), h.Class("bg-"+color+"-500 hover:bg-"+color+"-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap"))
-}
-
 func SlimInfoButton(text, href string) g.Node {
 	return h.A(g.Text(text), h.Href(href), h.Class("bg-blue-500 hover:bg-blue-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap"))
 }

back_office/components/slim_button_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+)
+
+func TestSlimInfoButton(t *testing.T) {
+	button := components.SlimInfoButton("Test Button", "/test-button")
+	html := renderToString(button)
+
+	require.Equal(
+		t,
+		`<a href="/test-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap">Test Button</a>`,
+		html,
+	)
+}
+
+func TestSlimDangerButton(t *testing.T) {
+	button := components.SlimDangerButton("Test Button", "/test-button")
+	html := renderToString(button)
+
+	require.Equal(
+		t,
+		`<a href="/test-button" class="bg-red-500 hover:bg-red-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap">Test Button</a>`,
+		html,
+	)
+}
+
+func TestSlimNeutralButton(t *testing.T) {
+	button := components.SlimNeutralButton("Test Button", "/test-button")
+	html := renderToString(button)
+
+	require.Equal(
+		t,
+		`<a href="/test-button" class="bg-slate-500 hover:bg-slate-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap">Test Button</a>`,
+		html,
+	)
+}
+
+func TestSlimSuccessButton(t *testing.T) {
+	button := components.SlimSuccessButton("Test Button", "/test-button")
+	html := renderToString(button)
+
+	require.Equal(
+		t,
+		`<a href="/test-button" class="bg-emerald-500 hover:bg-emerald-600 text-white font-bold px-2 hover:text-white rounded-md text-nowrap">Test Button</a>`,
+		html,
+	)
+}

back_office/components/tag_test.go

+// SPDX-FileCopyrightText: © 2025 Paweł J. Wal <p@steamshard.net>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package components_test
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"kita.gawa.moe/paweljw/vellum/back_office/components"
+	"kita.gawa.moe/paweljw/vellum/models"
+)
+
+func TestTag(t *testing.T) {
+	tag := components.Tag(models.Tag{
+		ID:   1,
+		Slug: "test-tag",
+	})
+	html := renderToString(tag)
+
+	require.Equal(
+		t,
+		`<span class="text-sm text-gray-800 bg-gray-100 p-1 rounded-md px-2" style="background-color: #c1f2cd"><a href="/!dt/test-tag" class="text-gray-800 hover:text-gray-900">test-tag</a></span>`,
+		html,
+	)
+}