ant-design-blazor/tests/AntDesign.Tests/Timeline/TimelineTests.razor

128 lines
4.8 KiB
C#
Raw Normal View History

@inherits AntDesignTestBase
@code {
[Fact]
public void Renders_basic_timeline()
{
var cut = Context.Render(
@<Timeline>
<TimelineItem>Create a services site 2015-09-01</TimelineItem>
<TimelineItem Color="red" >Solve initial network problems 2015-09-01</TimelineItem>
</Timeline>);
cut.MarkupMatches(
@<ul class="ant-timeline" id:ignore >
<li class="ant-timeline-item" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue" style="">
</div>
<div class="ant-timeline-item-content">
Create a services site 2015-09-01
</div>
</li>
<li class="ant-timeline-item ant-timeline-item-last" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-red" style="">
</div>
<div class="ant-timeline-item-content">
Solve initial network problems 2015-09-01
</div>
</li>
</ul>);
}
[Fact]
public void Renders_timeline_with_right_mode()
{
var cut = Context.Render(
@<Timeline Mode="@TimelineMode.Right">
<TimelineItem>Create a services site 2015-09-01</TimelineItem>
<TimelineItem Color="red" >Solve initial network problems 2015-09-01</TimelineItem>
</Timeline>);
cut.MarkupMatches(
@<ul class="ant-timeline ant-timeline-right" id:ignore >
<li class="ant-timeline-item ant-timeline-item-right" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue" style="">
</div>
<div class="ant-timeline-item-content">
Create a services site 2015-09-01
</div>
</li>
<li class="ant-timeline-item ant-timeline-item-right ant-timeline-item-last" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-red" style="">
</div>
<div class="ant-timeline-item-content">
Solve initial network problems 2015-09-01
</div>
</li>
</ul>);
}
[Theory]
[InlineData(TimelineMode.Left,"","left","left")]
[InlineData(TimelineMode.Right,"ant-timeline-right","right","right")]
[InlineData(TimelineMode.Alternate,"ant-timeline-alternate","left","right")]
public void Renders_timeline_with_alternate_mode(TimelineMode mode, string timelineModeClass, string firstItemMode,string secondItemMode)
{
var cut = Context.Render(
@<Timeline Mode="@mode">
<TimelineItem>Create a services site 2015-09-01</TimelineItem>
<TimelineItem>Solve initial network problems 2015-09-01</TimelineItem>
</Timeline>);
cut.MarkupMatches(
@<ul class="ant-timeline @timelineModeClass" id:ignore >
<li class="ant-timeline-item ant-timeline-item-@firstItemMode" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue" style="">
</div>
<div class="ant-timeline-item-content">
Create a services site 2015-09-01
</div>
</li>
<li class="ant-timeline-item ant-timeline-item-@secondItemMode ant-timeline-item-last" id:ignore >
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue" style="">
</div>
<div class="ant-timeline-item-content">
Solve initial network problems 2015-09-01
</div>
</li>
</ul>);
}
[Theory]
[InlineData(TimelineMode.Left,"left","left")]
[InlineData(TimelineMode.Right,"right","right")]
[InlineData(TimelineMode.Alternate,"left","right")]
public void Renders_timeline_with_label(TimelineMode mode,string firstItemMode,string secondItemMode)
{
var cut = Context.Render(
@<Timeline Mode="@mode">
<TimelineItem Label="2015-09-01">Create a services site</TimelineItem>
<TimelineItem Label="2015-09-02" Color="red" >Solve initial network problems</TimelineItem>
</Timeline>);
cut.MarkupMatches(
@<ul class="ant-timeline ant-timeline-label" id:ignore >
<li class="ant-timeline-item ant-timeline-item-@firstItemMode" id:ignore >
<div class="ant-timeline-item-label">2015-09-01</div>
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-blue" style="">
</div>
<div class="ant-timeline-item-content">
Create a services site
</div>
</li>
<li class="ant-timeline-item ant-timeline-item-@secondItemMode ant-timeline-item-last" id:ignore >
<div class="ant-timeline-item-label">2015-09-02</div>
<div class="ant-timeline-item-tail"></div>
<div class="ant-timeline-item-head ant-timeline-item-head-red" style="">
</div>
<div class="ant-timeline-item-content">
Solve initial network problems
</div>
</li>
</ul> );
}
}