This commit is contained in:
41666 2025-04-05 22:02:17 -07:00
parent 8c8cbfd7dd
commit 41d48bf60a
28 changed files with 434 additions and 7 deletions

View file

@ -0,0 +1,4 @@
<nav>
<div class="logo">Roleypoly</div>
<div class="username">41666</div>
</nav>

View file

@ -0,0 +1,10 @@
{{ $for := printf "category-%s_role-%s" .CategoryID .ID }}
<div
class="role"
style="--role-color: {{.Colors.Main}}; --contrast-color: var({{if .Colors.IsDark}}--grey600{{else}}--grey100{{end}});"
data-testid="role-{{.ID}}"
>
<input type="{{.InputType}}" id="{{$for}}" {{if eq .InputType
"radio"}}name="category_group_{{.CategoryID}}"{{end}} />
<label for="{{$for}}">{{.Name}}</label>
</div>

View file

@ -0,0 +1,57 @@
package components_test
import (
"bytes"
"fmt"
"html/template"
"testing"
"git.sapphic.engineer/roleypoly/v4/presentation"
"git.sapphic.engineer/roleypoly/v4/templates"
"git.sapphic.engineer/roleypoly/v4/types"
"git.sapphic.engineer/roleypoly/v4/types/fixtures"
"github.com/stretchr/testify/assert"
)
var (
Templates = template.Must(template.ParseFS(templates.FS, "components/*.html"))
)
func renderRole(t *testing.T, c *types.Category, r *types.Role, s bool) string {
data := presentation.Role(c, r, s)
buf := bytes.Buffer{}
err := Templates.ExecuteTemplate(&buf, "role.html", data)
if err != nil {
t.Fatal("template failed to render", err)
}
return buf.String()
}
func TestRole(t *testing.T) {
c := &fixtures.CategoryMulti
r := &fixtures.RoleWithDarkColor
html := renderRole(t, c, r, false)
assert.Contains(t, html, "--role-color: #a20000;", "role color is set")
assert.Contains(t, html, "--contrast-color: var(--grey600);", "contrast color is set")
assert.Contains(t, html, fmt.Sprintf(`id="%s"`, roleInputID(c, r)), "input has ID attr")
assert.Contains(t, html, fmt.Sprintf(`for="%s"`, roleInputID(c, r)), "label has for attr")
assert.Contains(t, html, `type="checkbox"`, "multi has input type=checkbox")
assert.NotContains(t, html, fmt.Sprintf(`name="%s"`, roleInputName(c)), "multi has no name attr")
// TODO: selected?
c = &fixtures.CategorySingle
r = &fixtures.RoleWithLightColor
html = renderRole(t, c, r, true)
assert.Contains(t, html, "--contrast-color: var(--grey100);", "single has name attr")
assert.Contains(t, html, `type="radio"`, "single has input type=radio")
assert.Contains(t, html, fmt.Sprintf(`name="%s"`, roleInputName(c)), "single has name attr")
}
// TODO: these can probably be string utils that are injected as functions into template
func roleInputID(c *types.Category, r *types.Role) string {
return fmt.Sprintf("category-%s_role-%s", c.ID, r.ID)
}
func roleInputName(c *types.Category) string {
return fmt.Sprintf("category_group_%s", c.ID)
}

View file

@ -11,6 +11,6 @@
<link rel="stylesheet" href="/static/main.css" />
</head>
<body>
{{embed}}
{{ template "components/nav" . }} {{embed}}
</body>
</html>

View file

@ -0,0 +1,16 @@
<style>
.container {
margin: 3rem;
}
</style>
<div class="container">
<div class="cat-multi">
{{ template "components/role" .TestRole }} {{ template "components/role"
.TestRole2 }}
</div>
<div class="cat-single">
{{ template "components/role" .TestRole3 }} {{ template "components/role"
.TestRole4 }}
</div>
</div>