👁 Image
BlazorPro.BlazorSize.UnitTesting 6.0.0

Requires BlazorSize 5.0 +

BlazorSize will use a FakeMediaQueryService for test cases.

Example:

<h1>Sample.razor</h1>
<MediaQuery Media="@Breakpoints.SmallDown">
 <Matched>
 MATCHES
 </Matched>
 <Unmatched>
 DOES NOT MATCH
 </Unmatched>
</MediaQuery>

Use SetActiveBreakPoint to toggle the media query under test.

[Fact]
public void Shows_Correct_Content_Based_On_MediaQuery()
{
 // Arrange
 using var ctx = new TestContext();
 
 // Resolve FakeMediaQueryService
 var blazorSizeState = ctx.AddBlazorSize(); 

 // Determine what breakpoint to respond to
 blazorSizeState.SetActiveBreakPoint(Breakpoints.LargeDown);

 // Act
 var cut = ctx.RenderComponent<Sample>();

 // Assert
 cut.MarkupMatches("DOES NOT MATCH");

 // Change breakpoint
 blazorSizeState.SetActiveBreakPoint(Breakpoints.SmallDown);

 // Assert
 cut.MarkupMatches("MATCHES");
}