test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-05 05:27:37 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
26b4d948c0
ant-design-blazor/tests/AntDesign.Tests/Menu/Menu.Horizontal.Tests.razor
James Yeung ec25f008ee
fix(module: ResizeObserver): work incorrectly cause by wrong key type (#3030) 
* fix(module: ResizeObserver): work incorrectly cause by wrong key type

* fix test

* fix build
2023-01-20 00:28:13 +08:00

216 lines
10 KiB
C#
Raw Blame History

@using AntDesign.Core.JsInterop.Modules.Components
@inherits AntDesignTestBase
@code {
public Menu_Horizontal_Tests()
{
JSInterop.Setup<AntDesign.JsInterop.DomRect>(JSInteropConstants.GetBoundingClientRect, _ => true)
.SetResult(new AntDesign.JsInterop.DomRect());
JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.AddOverlayToContainer, _ => true)
.SetResult(new OverlayPosition() { Top = 0, Left = 0, ZIndex = 5000, Placement = Placement.BottomLeft });
JSInterop.Setup<HtmlElement>(JSInteropConstants.DomInfoHelper.GetFirstChildDomInfo, _ => true)
.SetResult(new HtmlElement { ClientWidth = 123 });
JSInterop.Setup<OverlayPosition>(JSInteropConstants.OverlayComponentHelper.UpdateOverlayPosition, _ => true);
}
private RenderFragment GetBasicHorizontalRender()
{
return
@<Menu Mode=MenuMode.Horizontal>
<MenuItem>Navigation One</MenuItem>
<SubMenu Title="Navigation Two">
<MenuItemGroup Title="Item 1">
<MenuItem Key="nest:2:1">Option 1</MenuItem>
<MenuItem>Option 2</MenuItem>
</MenuItemGroup>
<MenuDivider />
<MenuItemGroup Title="Item 2">
<MenuItem>Option 3</MenuItem>
<SubMenu Title="Option 4">
<MenuItem Key="nest:2:2:4">Option 1</MenuItem>
<SubMenu Title="Option 5">
<MenuItem Key="nest:2:2:4:5:1">Option 1</MenuItem>
<MenuItem Key="nest:2:2:4:5:2">Option 2</MenuItem>
</SubMenu>
</SubMenu>
</MenuItemGroup>
</SubMenu>
<MenuItem>Navigation Three</MenuItem>
</Menu>;
}
[Fact]
public void Basic_horizontal_top_nested_menu_renders_correctly()
{
//Arrange
var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
//Act
//Assert
cut.MarkupMatches(@"
<ul class=""ant-menu ant-menu-root ant-menu-light ant-menu-horizontal"" id:ignore direction=""ltr"" role=""menu"">
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Navigation One
</span>
</li>
<li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
<div class=""ant-menu-submenu-title"" role=""button"">
<span class=""ant-menu-title-content"">
Navigation Two
</span>
</div>
</li>
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Navigation Three
</span>
</li>
</ul>");
}
[Fact]
public async Task Basic_horizontal_submenu_should_be_hidden_when_mouseleave()
{
//Arrange
var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
//Act
var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseenter", EventArgs.Empty);
await cut.Find(".ant-menu-submenu").TriggerEventAsync("onmouseleave", EventArgs.Empty);
await cut.InvokeAsync(() => topExpandable.Instance.Show());
// Assert
var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
topOverlay.Find(".ant-menu-submenu").ClassList.Contains("ant-menu-submenu-hidden");
}
[Fact]
public async Task Basic_horizontal_first_nested_menu_with_groups_renders_correctly()
{
//Arrange
var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
//Act
var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
cut.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await cut.InvokeAsync(() => topExpandable.Instance.Show());
var topOverlay = topExpandable.FindComponent<AntDesign.Internal.Overlay>();
//Assert
topOverlay.MarkupMatches(@"
<div class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-bottomLeft ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"" style:ignore>
<ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
<li class=""ant-menu-item-group"">
<div class=""ant-menu-item-group-title"">
Item 1
</div>
<ul class=""ant-menu-item-group-list"">
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 1
</span>
</li>
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 2
</span>
</li>
</ul>
</li>
<li class=""ant-menu-item-divider""></li>
<li class=""ant-menu-item-group"">
<div class=""ant-menu-item-group-title"">
Item 2
</div>
<ul class=""ant-menu-item-group-list"">
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 3
</span>
</li>
<li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
<div class=""ant-menu-submenu-title"" role=""button"">
<span class=""ant-menu-title-content"">
Option 4
</span>
<i class=""ant-menu-submenu-arrow""></i>
</div>
</li>
</ul>
</li>
</ul>
</div>
");
}
[Fact]
public async Task Basic_horizontal_second_nested_menu_renders_correctly()
{
//Arrange
var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
//Act
var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
topExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await cut.InvokeAsync(() => topExpandable.Instance.Show());
var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
midExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
var midOverlay = midExpandable.FindComponent<AntDesign.Internal.Overlay>();
//Assert
midOverlay.MarkupMatches(@"
<div style:ignore class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
<ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 1
</span>
</li>
<li class=""ant-menu-submenu ant-menu-submenu-vertical"" role=""menuitem"" style=""position:relative;"">
<div class=""ant-menu-submenu-title"" role=""button"">
<span class=""ant-menu-title-content"">
Option 5
</span>
<i class=""ant-menu-submenu-arrow""></i>
</div>
</li>
</ul>
</div>");
}
[Fact]
public async Task Basic_horizontal_third_nested_menu_renders_correctly()
{
//Arrange
var cut = Render<AntDesign.Menu>(GetBasicHorizontalRender());
//Act
var topExpandable = cut.FindComponent<AntDesign.Internal.SubMenuTrigger>();
cut.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await cut.InvokeAsync(() => topExpandable.Instance.Show());
var midExpandable = topExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
midExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await topExpandable.InvokeAsync(() => midExpandable.Instance.Show());
var bottomExpandable = midExpandable.FindComponent<AntDesign.Internal.SubMenuTrigger>();
bottomExpandable.Find(".ant-menu-submenu").TriggerEvent("onmouseenter", EventArgs.Empty);
await midExpandable.InvokeAsync(() => bottomExpandable.Instance.Show());
var bottomOverlay = bottomExpandable.FindComponent<AntDesign.Internal.Overlay>();
//Assert
bottomOverlay.MarkupMatches(@"
<div style:ignore class=""ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light ant-menu-submenu-placement-rightTop ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"">
<ul direction=""ltr"" class=""ant-menu ant-menu-sub ant-menu-light ant-menu-vertical"" style=""min-width: 123px"" role=""menu"">
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 1
</span>
</li>
<li class=""ant-menu-item"" role=""menuitem"" style="""">
<span class=""ant-menu-title-content"">
Option 2
</span>
</li>
</ul>
</div>");
}
}
Reference in New Issue View Git Blame Copy Permalink