Skip to content
Snippets Groups Projects
Verified Commit b78e3370 authored by Paweł J. Wal's avatar Paweł J. Wal :wave:
Browse files

back_office components tests

parent ce67d12b
No related branches found
No related tags found
1 merge request!46components-level tests
Pipeline #511 passed
// 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()
}
// 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,
)
}
// 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,
)
}
// 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,
)
}
// 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,
)
}
// 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,
)
}
......@@ -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"))
}
......
// 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,
)
}
// 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,
)
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment