ant-design-blazor/tests/AntDesign.Tests/BackTop/BackTopTests.razor
James Yeung 97fdc2a1dc
fix(module: backtop): doesn't remove the dom when it's invisible (#2831)
* fix(module: backtop): doesn't remove the dom when visible is false

* fix animation

* add basic tests
2022-10-24 13:29:47 +08:00

60 lines
2.5 KiB
C#

@inherits AntDesignTestBase
@using System.Text.Json;
@code {
[Fact]
public void Renders_basic_backtop()
{
var cut = Render(@<BackTop />);
cut.MarkupMatches(
@<div class="ant-back-top" id:ignore>
<div>
<div class="ant-back-top-content ant-fade ant-fade-leave ant-fade-leave-active">
<div class="ant-back-top-icon">
<span role="img" class=" anticon anticon-vertical-align-top" id:ignore>
<svg focusable="false" width="1em" height="1em" fill="currentColor" style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
<path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 0 0-12.6 0l-112 141.7a7.98 7.98 0 0 0 6.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path>
</svg>
</span>
</div>
</div>
</div>
</div>);
}
[Fact]
public void Renders_basic_backtop_with_icon()
{
var cut = Render(@<BackTop Icon="@IconType.Outline.Up" />);
cut.MarkupMatches(
@<div class="ant-back-top" id:ignore>
<div>
<div class="ant-back-top-content ant-fade ant-fade-leave ant-fade-leave-active">
<div class="ant-back-top-icon">
<span role="img" class=" anticon anticon-up" id:ignore>
<svg focusable="false" width="1em" height="1em" fill="currentColor" style="pointer-events: none;" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
<path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path>
</svg>
</span>
</div>
</div>
</div>
</div>);
}
[Fact]
public void Renders_basic_backtop_with_child_content()
{
var cut = Render(@<BackTop><Text>BackTop</Text></BackTop>);
cut.MarkupMatches(
@<div class=" ant-back-top" id:ignore>
<div>
<div class="ant-fade ant-fade-leave ant-fade-leave-active">
<span class="ant-typography">BackTop</span>
</div>
</div>
</div>
);
}
}