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");
}