Skip to content

Commit 2ad622c

Browse files
egilegil
authored
Razor file based test definition done (#2)
* PoC semi working of razor files as tests * Defining tests in .razor files works pretty good now * Razor components test bits moved to right project * better naming, more control over tests
1 parent ade8b2c commit 2ad622c

20 files changed

+589
-196
lines changed

‎sample/ComponentLib/Alert.razor‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@code {
2+
[Parameter]
3+
public RenderFragment? ChildContent { get; set; }
4+
5+
[Parameter]
6+
public string? Class { get; set; }
7+
8+
[Parameter]
9+
public string? Color { get; set; }
10+
11+
[Parameter]
12+
public bool Dismissable { get; set; } = false;
13+
14+
[Parameter]
15+
public string Role { get; set; } = "alert";
16+
17+
[Parameter]
18+
public bool Visible { get; set; } = true;
19+
20+
private string CssClass
21+
{
22+
get
23+
{
24+
var cssClass = "alert fade";
25+
26+
if(Visible)
27+
cssClass = $"{cssClass} show";
28+
29+
if (Color != null)
30+
cssClass = $"{cssClass} alert-{Color}";
31+
32+
if (Dismissable)
33+
cssClass = $"{cssClass} alert-dismissible";
34+
35+
if (Class != null)
36+
cssClass = $"{cssClass} {Class}";
37+
38+
return cssClass;
39+
}
40+
}
41+
}
42+
<div class=@CssClass role=@Role>
43+
@if (Visible)
44+
{
45+
@if (ChildContent != null)
46+
{
47+
@ChildContent
48+
}
49+
@if (Dismissable)
50+
{
51+
<button type="button" class="close" aria-label="Close">
52+
<span aria-hidden="true">&amp;times;</span>
53+
</button>
54+
}
55+
}
56+
</div>

‎sample/ComponentLib/Component1.razor‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎sample/ComponentLib/ComponentLib.csproj‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@
1414
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
1515
</PropertyGroup>
1616

17-
<ItemGroup>
18-
<!-- .js/.css files will be referenced via <script>/<link> tags; other content files will just be included in the app's 'dist' directory without any tags referencing them -->
19-
<EmbeddedResource Include="content\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
20-
<EmbeddedResource Include="content\**\*.css" LogicalName="blazor:css:%(RecursiveDir)%(Filename)%(Extension)" />
21-
<EmbeddedResource Include="content\**" Exclude="**\*.js;**\*.css" LogicalName="blazor:file:%(RecursiveDir)%(Filename)%(Extension)" />
22-
</ItemGroup>
23-
2417
<ItemGroup>
2518
<PackageReference Include="Microsoft.AspNetCore.Components.Browser" Version="3.0.0-preview7.19365.7" />
2619
</ItemGroup>

‎sample/ComponentLib/ExampleJsInterop.cs‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎sample/ComponentLib/content/background.png‎

-378 Bytes
Binary file not shown.

‎sample/ComponentLib/content/exampleJsInterop.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎sample/ComponentLib/content/styles.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎sample/ComponentLibTests/AlertTests.razor‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
If a Fact components has an TestSetup and ExpectedHtml component,
2+
the result of rendering the two will be compared using the default
3+
unit test, and if there is a difference, the test will fail.
4+
5+
<Fact DisplayName="Alert renders as empty without child content">
6+
<TestSetup>
7+
<Alert />
8+
</TestSetup>
9+
<ExpectedHtml>
10+
<div class="alert fade show" role="alert"></div>
11+
</ExpectedHtml>
12+
</Fact>
13+
14+
<Fact DisplayName="Alert renders with child content if provided">
15+
<TestSetup>
16+
<Alert>FOO BAR BAZ</Alert>
17+
</TestSetup>
18+
<ExpectedHtml>
19+
<div class="alert fade show" role="alert">FOO BAR BAZ</div>
20+
</ExpectedHtml>
21+
</Fact>
22+
23+
<Fact DisplayName="Alert adds color when specified">
24+
<TestSetup>
25+
<Alert Color="primary" />
26+
</TestSetup>
27+
<ExpectedHtml>
28+
<div class="alert fade show alert-primary" role="alert"></div>
29+
</ExpectedHtml>
30+
</Fact>
31+
32+
<Fact DisplayName="Providing a role overrides default role value">
33+
<TestSetup>
34+
<Alert Role="banner" />
35+
</TestSetup>
36+
<ExpectedHtml>
37+
<div class="alert fade show" role="banner"></div>
38+
</ExpectedHtml>
39+
</Fact>
40+
41+
<Fact DisplayName="Setting Dismisasable to true renderes dismiss button below child content">
42+
<TestSetup>
43+
<Alert Dismissable>
44+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
45+
</Alert>
46+
</TestSetup>
47+
<ExpectedHtml>
48+
<div class="alert fade show alert-dismissible" role="alert">
49+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
50+
<button type="button" class="close" aria-label="Close">
51+
<span aria-hidden="true">&amp;times;</span>
52+
</button>
53+
</div>
54+
</ExpectedHtml>
55+
</Fact>
56+
57+
If you want more control over the assertion, use a HtmlSnippet component instead of a
58+
ExpectedHtml component. Then the default unit test will not run, and you can add your
59+
own, where you can access the RenderResults and do any comparison of the HTML (XML)
60+
you want.
61+
62+
@code {
63+
[Fact]
64+
public void A_Custom_Test()
65+
{
66+
// assert
67+
var result = RenderResults.Single(x => x.Id == (nameof(A_Custom_Test)));
68+
result.RenderedHtml.ShouldBe(result.Snippets.First());
69+
}
70+
}
71+
<Fact Id=@nameof(A_Custom_Test)>
72+
<TestSetup>
73+
<Alert Role="banner" Color="secondary" class="my-custom-class" Dismissable>
74+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
75+
</Alert>
76+
</TestSetup>
77+
<HtmlSnippet>
78+
<div class="alert fade show alert-secondary alert-dismissible my-custom-class" role="banner">
79+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
80+
<button type="button" class="close" aria-label="Close">
81+
<span aria-hidden="true">&amp;times;</span>
82+
</button>
83+
</div>
84+
</HtmlSnippet>
85+
</Fact>
86+
87+
If you want to assert directly on the rendered component or change its parameters
88+
and re-render, use the component reference syntax and the Render method.
89+
90+
@code {
91+
Alert sut;
92+
bool isVisible = true;
93+
94+
[Fact(DisplayName = "When Visible is toggled to false, all child content is removed from alert")]
95+
public async Task DismissTest()
96+
{
97+
// initial assert
98+
var result = RenderResults.Single(x => x.Id == (nameof(DismissTest)));
99+
result.RenderedHtml.ShouldBe(result.Snippets[0]);
100+
sut.Visible.ShouldBeTrue();
101+
102+
// act
103+
isVisible = false;
104+
this.Render();
105+
106+
// dismiss assert
107+
var dismissResult = RenderResults.Single(x => x.Id == (nameof(DismissTest)));
108+
dismissResult.RenderedHtml.ShouldBe(result.Snippets[1]);
109+
sut.Visible.ShouldBeFalse();
110+
}
111+
}
112+
<Fact Id=@nameof(DismissTest)>
113+
<TestSetup>
114+
<Alert @ref="sut" Visible=@isVisible>
115+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
116+
</Alert>
117+
</TestSetup>
118+
<HtmlSnippet>
119+
<div class="alert fade show" role="alert">
120+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
121+
</div>
122+
</HtmlSnippet>
123+
<HtmlSnippet>
124+
<div class="alert fade" role="alert"></div>
125+
</HtmlSnippet>
126+
</Fact>

‎sample/ComponentLibTests/Component1Test.cs‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎sample/ComponentLibTests/_Imports.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@inherits Egil.RazorComponents.Testing.RazorComponentTest
2+
3+
@using Xunit
4+
@using Moq
5+
@using Shouldly
6+
@using Egil.RazorComponents.Testing

0 commit comments

Comments
 (0)