roles
This commit is contained in:
parent
8c8cbfd7dd
commit
41d48bf60a
28 changed files with 434 additions and 7 deletions
4
templates/components/nav.html
Normal file
4
templates/components/nav.html
Normal file
|
@ -0,0 +1,4 @@
|
|||
<nav>
|
||||
<div class="logo">Roleypoly</div>
|
||||
<div class="username">41666</div>
|
||||
</nav>
|
10
templates/components/role.html
Normal file
10
templates/components/role.html
Normal 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>
|
57
templates/components/role_test.go
Normal file
57
templates/components/role_test.go
Normal 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)
|
||||
}
|
|
@ -11,6 +11,6 @@
|
|||
<link rel="stylesheet" href="/static/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
{{embed}}
|
||||
{{ template "components/nav" . }} {{embed}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
16
templates/tests/picker.html
Normal file
16
templates/tests/picker.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue