feat(theme): upstream router controls and responsive shell fixes
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
namespace ZB.MOM.WW.Theme.Tests;
|
||||
|
||||
public class ThemeShellTests : TestContext
|
||||
public class ThemeShellTests : BunitContext
|
||||
{
|
||||
[Fact]
|
||||
public void Renders_product_nav_and_body()
|
||||
{
|
||||
var cut = RenderComponent<ThemeShell>(p => p
|
||||
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>"));
|
||||
@@ -18,7 +18,7 @@ public class ThemeShellTests : TestContext
|
||||
[Fact]
|
||||
public void Accent_sets_css_variable_on_shell_root()
|
||||
{
|
||||
var cut = RenderComponent<ThemeShell>(p => p
|
||||
var cut = Render<ThemeShell>(p => p
|
||||
.Add(x => x.Product, "ScadaBridge")
|
||||
.Add(x => x.Accent, "#2f855a"));
|
||||
var shell = cut.Find(".app-shell");
|
||||
@@ -28,14 +28,14 @@ public class ThemeShellTests : TestContext
|
||||
[Fact]
|
||||
public void No_accent_emits_no_style()
|
||||
{
|
||||
var cut = RenderComponent<ThemeShell>(p => p.Add(x => x.Product, "MXAccess Gateway"));
|
||||
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 = RenderComponent<ThemeShell>(p => p
|
||||
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"));
|
||||
@@ -47,7 +47,7 @@ public class ThemeShellTests : TestContext
|
||||
[Fact]
|
||||
public void Mobile_toggle_is_a_css_only_details_disclosure_not_bootstrap_collapse()
|
||||
{
|
||||
var cut = RenderComponent<ThemeShell>(p => p.Add(x => x.Product, "OtOpcUa"));
|
||||
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");
|
||||
@@ -62,4 +62,18 @@ public class ThemeShellTests : TestContext
|
||||
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"));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user