Joseph Doherty
80 lines
3.2 KiB
C#
80 lines
3.2 KiB
C#
namespace ZB.MOM.WW.Theme.Tests;
|
|
|
|
public class ThemeShellTests : BunitContext
|
|
{
|
|
[Fact]
|
|
public void Renders_product_nav_and_body()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p
|
|
.Add(x => x.Product, "OtOpcUa")
|
|
.Add(x => x.Nav, (RenderFragment)(b => b.AddMarkupContent(0, "<a class='rail-link'>N</a>")))
|
|
.AddChildContent("<div class='pagebody'>BODY</div>"));
|
|
Assert.NotNull(cut.Find(".side-rail .brand"));
|
|
Assert.Contains("OtOpcUa", cut.Markup);
|
|
Assert.NotNull(cut.Find(".side-rail .rail-link"));
|
|
Assert.NotNull(cut.Find("main.page .pagebody"));
|
|
}
|
|
|
|
[Fact]
|
|
public void Accent_sets_css_variable_on_shell_root()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p
|
|
.Add(x => x.Product, "ScadaBridge")
|
|
.Add(x => x.Accent, "#2f855a"));
|
|
var shell = cut.Find(".app-shell");
|
|
Assert.Contains("--accent: #2f855a", shell.GetAttribute("style"));
|
|
}
|
|
|
|
[Fact]
|
|
public void No_accent_emits_no_style()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p.Add(x => x.Product, "MXAccess Gateway"));
|
|
Assert.False(cut.Find(".app-shell").HasAttribute("style"));
|
|
}
|
|
|
|
[Fact]
|
|
public void RailFooter_renders_when_supplied()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p
|
|
.Add(x => x.Product, "OtOpcUa")
|
|
.Add(x => x.RailFooter, (RenderFragment)(b => b.AddMarkupContent(0, "<span class='sess'>S</span>"))));
|
|
Assert.NotNull(cut.Find(".rail-foot .sess"));
|
|
}
|
|
|
|
// Theme-001: the mobile hamburger must work without Bootstrap collapse JS.
|
|
// The shell is a native <details> disclosure whose <summary> is the toggle —
|
|
// no data-bs-toggle / data-bs-target attributes, so no Bootstrap JS dependency.
|
|
[Fact]
|
|
public void Mobile_toggle_is_a_css_only_details_disclosure_not_bootstrap_collapse()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p.Add(x => x.Product, "OtOpcUa"));
|
|
|
|
// Root is a <details> whose direct <summary> is the hamburger toggle.
|
|
var shell = cut.Find("details.app-shell");
|
|
var summary = cut.Find("details.app-shell > summary.rail-toggle");
|
|
Assert.NotNull(summary);
|
|
|
|
// The rail is plain markup inside the <details> — no Bootstrap .collapse class.
|
|
var rail = cut.Find("#theme-rail");
|
|
Assert.DoesNotContain("collapse", rail.ClassList);
|
|
|
|
// No Bootstrap collapse JS hooks anywhere in the shell markup.
|
|
Assert.DoesNotContain("data-bs-toggle", shell.OuterHtml);
|
|
Assert.DoesNotContain("data-bs-target", shell.OuterHtml);
|
|
}
|
|
|
|
[Fact]
|
|
public void Closed_shell_keeps_page_body_separate_from_the_toggled_rail()
|
|
{
|
|
var cut = Render<ThemeShell>(p => p.Add(x => x.Product, "OEE")
|
|
.Add(x => x.Nav, builder => builder.AddMarkupContent(0, "<a href='/oee'>OEE</a>"))
|
|
.AddChildContent("<h1>OEE report</h1><input aria-label='Filter' />"));
|
|
|
|
Assert.False(cut.Find("details.app-shell").HasAttribute("open"));
|
|
Assert.NotNull(cut.Find("details.app-shell > #theme-rail > nav"));
|
|
Assert.Equal("OEE report", cut.Find("details.app-shell > main.page > h1").TextContent);
|
|
Assert.NotNull(cut.Find("details.app-shell > main.page > input"));
|
|
Assert.Empty(cut.FindAll("#theme-rail main"));
|
|
}
|
|
}
|