- Using the OnChange event one can be notified about the matching of the provided query.
+
+
+ Media queries are not only about the viewport width. Any media feature the browser understands works as a custom query,
+ such as the orientation of the screen, the preferred color scheme, the precision of the pointing device, or the reduced motion preference.
+
+
+
+ The screen is in landscape orientation.
+ The screen is in portrait orientation.
+
+
+
+ The system prefers a dark color scheme.
+ The system prefers a light color scheme.
+
+
+
+ The primary pointing device is precise (e.g. a mouse).
+ The primary pointing device is coarse or absent (e.g. a touchscreen).
+
+
+
+ Reduced motion is requested by the system.
+ Reduced motion is not requested by the system.
+
+
+
+
+
+ By default the active content renders inside a root div element. NoWrapper removes it and renders the content directly,
+ which is useful when the extra element would interfere with the surrounding layout (for example inside a flex or grid container).
+ You can inspect the rendered output below to see that no wrapping element exists around the content.
+
+
+
+ This content renders without a wrapping element (BitScreenQuery.GtSm).
+ [BitScreenQuery.GtSm] NotMatched! (still no wrapping element)
+
+
+
+
+
+ Until the browser evaluates the query for the first time, the component renders as not matched.
+ DefaultMatched flips that initial state so the Matched content renders first,
+ avoiding a flash of the wrong content during prerendering, where no JavaScript is available to evaluate the query yet.
+ As soon as the actual result arrives from the browser, it takes over.
+
+
+
+ This is Matched (BitScreenQuery.GtSm), also rendered before the query gets evaluated.
+ [BitScreenQuery.GtSm] NotMatched!.
+
+
+
+
+
+ The OnChange event notifies about each change of the matched state of the provided query,
+ including once with the initial result, right after the query gets evaluated by the browser for the first time.
+ The current state is also always available through the IsMatched property of the component.
+
-
+
[BitScreenQuery.Md] IsMatched?: @isMatched
+ [BitScreenQuery.Md] via the IsMatched property: @(mediaQueryRef?.IsMatched ?? false)
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor.cs
index 5afbb1ae352..60d182d72f6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/MediaQuery/BitMediaQueryDemo.razor.cs
@@ -12,6 +12,14 @@ public partial class BitMediaQueryDemo
Description = "The content of the element to render if the specified query is matched.",
},
new()
+ {
+ Name = "DefaultMatched",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "The initial matched state to render with until the actual result of the query arrives from the browser. " +
+ "Useful to avoid a flash of the wrong content during prerendering, where the query cannot be evaluated yet.",
+ },
+ new()
{
Name = "Matched",
Type = "RenderFragment?",
@@ -26,135 +34,196 @@ public partial class BitMediaQueryDemo
Description = "The content to be rendered if the provided query is not matched.",
},
new()
+ {
+ Name = "NoWrapper",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Renders the active content directly, without the wrapping root element. " +
+ "Since no element is rendered, everything that describes one (class, style, id, dir, ...) is ignored.",
+ },
+ new()
{
Name = "OnChange",
Type = "EventCallback",
DefaultValue = "",
- Description = "The event callback to be called when the state of the media query has been changed.",
+ Description = "The event callback to be called when the state of the media query has been changed. " +
+ "It is also called once with the initial matched state, right after the query gets evaluated by the browser for the first time.",
},
new()
{
Name = "Query",
Type = "string?",
DefaultValue = "null",
- Description = "Specifies the custom query to be matched.",
+ Description = "Specifies the custom query to be matched. Any valid CSS media query is accepted, including non-viewport features " +
+ "such as orientation, pointer, or prefers-color-scheme. Takes precedence over ScreenQuery when both are provided.",
},
new()
{
Name = "ScreenQuery",
Type = "BitScreenQuery?",
DefaultValue = "null",
- Description = "Defines the screen query to be matched, amongst the predefined Bit screen media queries.",
+ Description = "Defines the screen query to be matched, amongst the predefined Bit screen media queries. " +
+ "The actual query is built at runtime from the live theme breakpoints (the --bit-bp-* CSS variables), " +
+ "so customized theme breakpoints are honored.",
LinkType = LinkType.Link,
Href = "#screen-query-enum"
},
];
+ private readonly List componentPublicMembers =
+ [
+ new()
+ {
+ Name = "IsMatched",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Gets the current matched state of the provided query: the latest result reported by the browser, " +
+ "or DefaultMatched while no result has arrived yet.",
+ },
+ ];
+
private readonly List componentSubEnums =
[
new()
{
Id = "screen-query-enum",
Name = "BitScreenQuery",
- Description = "The predefined screen media queries in the bit BlazorUI.",
+ Description = "The predefined screen media queries in the bit BlazorUI. The actual query is built at runtime from the live theme breakpoints " +
+ "(the --bit-bp-* CSS variables), so customized theme breakpoints are honored; the pixel values below are the built-in defaults.",
Items =
[
new()
{
Name= "Xs",
- Description="Extra small query: [@media screen and (max-width: 600px)]",
+ Description="Extra small query: [@media screen and (max-width: 599px)]",
Value="0",
},
new()
{
Name= "Sm",
- Description="Small query: [@media screen and (min-width: 601px) and (max-width: 960px)]",
+ Description="Small query: [@media screen and (min-width: 600px) and (max-width: 959px)]",
Value="1",
},
new()
{
Name= "Md",
- Description="Medium query: [@media screen and (min-width: 961px) and (max-width: 1280px)]",
+ Description="Medium query: [@media screen and (min-width: 960px) and (max-width: 1279px)]",
Value="2",
},
new()
{
Name= "Lg",
- Description="Large query: [@media screen and (min-width: 1281px) and (max-width: 1920px)]",
+ Description="Large query: [@media screen and (min-width: 1280px) and (max-width: 1919px)]",
Value="3",
},
new()
{
Name= "Xl",
- Description="Extra large query: [@media screen and (min-width: 1921px) and (max-width: 2560px)]",
+ Description="Extra large query: [@media screen and (min-width: 1920px) and (max-width: 2559px)]",
Value="4",
},
new()
{
Name= "Xxl",
- Description="Extra extra large query: [@media screen and (min-width: 2561px)]",
+ Description="Extra extra large query: [@media screen and (min-width: 2560px)]",
Value="5",
},
new()
{
Name= "LtSm",
- Description="Less than small query: [@media screen and (max-width: 600px)]",
+ Description="Less than small query: [@media screen and (max-width: 599px)]",
Value="6",
},
new()
{
Name= "LtMd",
- Description="Less than medium query: [@media screen and (max-width: 960px)]",
+ Description="Less than medium query: [@media screen and (max-width: 959px)]",
Value="7",
},
new()
{
Name= "LtLg",
- Description="Less than large query: [@media screen and (max-width: 1280px)]",
+ Description="Less than large query: [@media screen and (max-width: 1279px)]",
Value="8",
},
new()
{
Name= "LtXl",
- Description="Less than extra large query: [@media screen and (max-width: 1920px)]",
+ Description="Less than extra large query: [@media screen and (max-width: 1919px)]",
Value="9",
},
new()
{
Name= "LtXxl",
- Description="Less than extra extra large query: [@media screen and (max-width: 2560px)]",
+ Description="Less than extra extra large query: [@media screen and (max-width: 2559px)]",
Value="10",
},
new()
{
Name= "GtXs",
- Description="Greater than extra small query: [@media screen and (min-width: 601px)]",
+ Description="Greater than extra small query: [@media screen and (min-width: 600px)]",
Value="11",
},
new()
{
Name= "GtSm",
- Description="Greater than extra small query: [@media screen and (min-width: 601px)]",
+ Description="Greater than small query: [@media screen and (min-width: 960px)]",
Value="12",
},
new()
{
Name= "GtMd",
- Description="Greater than medium query: [@media screen and (min-width: 1281px)]",
+ Description="Greater than medium query: [@media screen and (min-width: 1280px)]",
Value="13",
},
new()
{
Name= "GtLg",
- Description="Greater than large query: [@media screen and (min-width: 1921px)]",
+ Description="Greater than large query: [@media screen and (min-width: 1920px)]",
Value="14",
},
new()
{
Name= "GtXl",
- Description="Greater than extra large query: [@media screen and (min-width: 2561px)]",
+ Description="Greater than extra large query: [@media screen and (min-width: 2560px)]",
Value="15",
},
+ new()
+ {
+ Name= "SmToMd",
+ Description="Small through medium query: [@media screen and (min-width: 600px) and (max-width: 1279px)]",
+ Value="16",
+ },
+ new()
+ {
+ Name= "SmToLg",
+ Description="Small through large query: [@media screen and (min-width: 600px) and (max-width: 1919px)]",
+ Value="17",
+ },
+ new()
+ {
+ Name= "SmToXl",
+ Description="Small through extra large query: [@media screen and (min-width: 600px) and (max-width: 2559px)]",
+ Value="18",
+ },
+ new()
+ {
+ Name= "MdToLg",
+ Description="Medium through large query: [@media screen and (min-width: 960px) and (max-width: 1919px)]",
+ Value="19",
+ },
+ new()
+ {
+ Name= "MdToXl",
+ Description="Medium through extra large query: [@media screen and (min-width: 960px) and (max-width: 2559px)]",
+ Value="20",
+ },
+ new()
+ {
+ Name= "LgToXl",
+ Description="Large through extra large query: [@media screen and (min-width: 1280px) and (max-width: 2559px)]",
+ Value="21",
+ },
]
}
];
@@ -162,6 +231,11 @@ public partial class BitMediaQueryDemo
private bool isMatched;
+ private BitMediaQuery? mediaQueryRef;
+ private readonly BitTheme breakpointsTheme = new()
+ {
+ Layout = { Breakpoints = { Md = "700px", Lg = "900px" } }
+ };
@@ -183,7 +257,14 @@ public partial class BitMediaQueryDemo
This is GtSm (Greater Than Small).
This is GtMd (Greater Than Medium).
This is GtLg (Greater Than Large).
-This is GtXl (Greater Than Extra Large).";
+This is GtXl (Greater Than Extra Large).
+
+This is SmToMd (Small through Medium).
+This is SmToLg (Small through Large).
+This is SmToXl (Small through Extra Large).
+This is MdToLg (Medium through Large).
+This is MdToXl (Medium through Extra Large).
+This is LgToXl (Large through Extra Large).";
private string example2RazorCode = @"
@@ -196,6 +277,26 @@ public partial class BitMediaQueryDemo
";
private string example3RazorCode = @"
+Document breakpoints (Md: 960px to 1279px):
+
+ Md is matched.
+ Md is not matched.
+
+
+Customized breakpoints (Md: 700px to 899px):
+
+
+ Md is matched.
+ Md is not matched.
+
+";
+ private string example3CsharpCode = @"
+private readonly BitTheme breakpointsTheme = new()
+{
+ Layout = { Breakpoints = { Md = ""700px"", Lg = ""900px"" } }
+};";
+
+ private string example4RazorCode = @"
This is screen and (max-width: 999px).
@@ -203,11 +304,55 @@ public partial class BitMediaQueryDemo
Not matched yet!
+
+
+
+
+ The width is between 400px and 700px (range syntax).
+
+
+ The width is outside the 400px to 700px range.
+
";
- private string example4RazorCode = @"
- isMatched = v"" />
-[BitScreenQuery.Md] IsMatched?: @isMatched
";
- private string example4CsharpCode = @"
-private bool isMatched;";
+ private string example5RazorCode = @"
+
+ The screen is in landscape orientation.
+ The screen is in portrait orientation.
+
+
+
+ The system prefers a dark color scheme.
+ The system prefers a light color scheme.
+
+
+
+ The primary pointing device is precise (e.g. a mouse).
+ The primary pointing device is coarse or absent (e.g. a touchscreen).
+
+
+
+ Reduced motion is requested by the system.
+ Reduced motion is not requested by the system.
+";
+
+ private string example6RazorCode = @"
+
+ This content renders without a wrapping element (BitScreenQuery.GtSm).
+ [BitScreenQuery.GtSm] NotMatched! (still no wrapping element)
+";
+
+ private string example7RazorCode = @"
+
+ This is Matched (BitScreenQuery.GtSm), also rendered before the query gets evaluated.
+ [BitScreenQuery.GtSm] NotMatched!.
+";
+
+ private string example8RazorCode = @"
+ isMatched = v"" />
+[BitScreenQuery.Md] IsMatched?: @isMatched
+[BitScreenQuery.Md] via the IsMatched property: @(mediaQueryRef?.IsMatched ?? false)
";
+ private string example8CsharpCode = @"
+private bool isMatched;
+private BitMediaQuery? mediaQueryRef;";
}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/MediaQuery/BitMediaQueryTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/MediaQuery/BitMediaQueryTests.cs
index 2f35e1e9b2e..7fb3b7661b9 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/MediaQuery/BitMediaQueryTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/MediaQuery/BitMediaQueryTests.cs
@@ -1,4 +1,5 @@
-using System.Threading.Tasks;
+using System.Linq;
+using System.Threading.Tasks;
using Bunit;
using Microsoft.AspNetCore.Components;
using Microsoft.VisualStudio.TestTools.UnitTesting;
@@ -9,50 +10,570 @@ namespace Bit.BlazorUI.Tests.Components.Utilities.MediaQuery;
public class BitMediaQueryTests : BunitTestContext
{
[TestMethod]
- public void BitMediaQueryShouldRenderMatchedChildContentWhenQueryGiven()
+ public void BitMediaQueryShouldRenderNothingWithoutAnyContent()
{
- Context.JSInterop.SetupVoid("BitBlazorUI.MediaQuery.setup");
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.Add(p => p.OnChange, (bool _) => { });
+ });
+
+ Assert.AreEqual(string.Empty, component.Markup.Trim());
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderRootElementWhenContentProvided()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
- var comp = RenderComponent(parameters =>
+ var root = component.Find(".bit-mdq");
+ Assert.IsNotNull(root);
+ Assert.IsFalse(string.IsNullOrEmpty(root.Id));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderNotMatchedContentInitially()
+ {
+ var component = RenderComponent(parameters =>
{
parameters.Add(p => p.Query, "(max-width: 600px)");
parameters.Add(p => p.Matched, (RenderFragment)(b => b.AddMarkupContent(0, "Matched
")));
parameters.Add(p => p.NotMatched, (RenderFragment)(b => b.AddMarkupContent(0, "NotMatched
")));
});
- // initial call to JS returns default(T) so no content change expected, component should render container
- var root = comp.Find(".bit-mdq");
- Assert.IsNotNull(root);
+ Assert.AreEqual(0, component.FindAll(".matched").Count);
+ Assert.AreEqual(1, component.FindAll(".notmatched").Count);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderMatchedContentInitiallyWithDefaultMatched()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.DefaultMatched, true);
+ parameters.Add(p => p.Matched, (RenderFragment)(b => b.AddMarkupContent(0, "Matched
")));
+ parameters.Add(p => p.NotMatched, (RenderFragment)(b => b.AddMarkupContent(0, "NotMatched
")));
+ });
+
+ Assert.AreEqual(1, component.FindAll(".matched").Count);
+ Assert.AreEqual(0, component.FindAll(".notmatched").Count);
+ Assert.IsTrue(component.Instance.IsMatched);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldSwitchContentOnMatchChange()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.Matched, (RenderFragment)(b => b.AddMarkupContent(0, "Matched
")));
+ parameters.Add(p => p.NotMatched, (RenderFragment)(b => b.AddMarkupContent(0, "NotMatched
")));
+ });
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+
+ Assert.AreEqual(1, component.FindAll(".matched").Count);
+ Assert.AreEqual(0, component.FindAll(".notmatched").Count);
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(false).AsTask()).GetAwaiter().GetResult();
+
+ Assert.AreEqual(0, component.FindAll(".matched").Count);
+ Assert.AreEqual(1, component.FindAll(".notmatched").Count);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderChildContentAsMatchedContent()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("Child
");
+ });
+
+ Assert.AreEqual(0, component.FindAll(".child").Count);
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+
+ Assert.AreEqual(1, component.FindAll(".child").Count);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldPreferMatchedOverChildContent()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.Matched, (RenderFragment)(b => b.AddMarkupContent(0, "Matched
")));
+ parameters.AddChildContent("Child
");
+ });
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+
+ Assert.AreEqual(1, component.FindAll(".matched").Count);
+ Assert.AreEqual(0, component.FindAll(".child").Count);
}
[TestMethod]
public void BitMediaQueryShouldInvokeOnChangeWhenJsNotifies()
{
- Context.JSInterop.SetupVoid("BitBlazorUI.MediaQuery.setup");
+ bool? changed = null;
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.OnChange, (bool v) => changed = v);
+ });
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+ Assert.IsTrue(changed);
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(false).AsTask()).GetAwaiter().GetResult();
+ Assert.IsFalse(changed);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldExposeIsMatchedState()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ Assert.IsFalse(component.Instance.IsMatched);
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+
+ Assert.IsTrue(component.Instance.IsMatched);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldCallJsSetupWithCustomQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.AreEqual("(max-width: 600px)", invocation.Arguments[1]);
+ Assert.IsNull(invocation.Arguments[2]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldCallJsSetupWithScreenQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.GtSm);
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.IsNull(invocation.Arguments[1]);
+ Assert.AreEqual("GtSm", invocation.Arguments[2]);
+ }
+
+ [TestMethod]
+ [DataRow(BitScreenQuery.Xs, "Xs")]
+ [DataRow(BitScreenQuery.LtXxl, "LtXxl")]
+ [DataRow(BitScreenQuery.GtXl, "GtXl")]
+ [DataRow(BitScreenQuery.SmToMd, "SmToMd")]
+ [DataRow(BitScreenQuery.LgToXl, "LgToXl")]
+ public void BitMediaQueryShouldPassScreenQueryNameToJs(BitScreenQuery screenQuery, string expectedName)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, screenQuery);
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.IsNull(invocation.Arguments[1]);
+ Assert.AreEqual(expectedName, invocation.Arguments[2]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldPreferCustomQueryOverScreenQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.AreEqual("(max-width: 600px)", invocation.Arguments[1]);
+ Assert.IsNull(invocation.Arguments[2]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldTreatBlankQueryAsAbsent()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, " ");
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Lg);
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.IsNull(invocation.Arguments[1]);
+ Assert.AreEqual("Lg", invocation.Arguments[2]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldNotRepeatJsSetupForUnchangedCustomQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
- var changed = false;
- var comp = RenderComponent(parameters =>
+ component.Render();
+
+ Assert.AreEqual(1, Context.JSInterop.Invocations.Count(i => i.Identifier == "BitBlazorUI.MediaQuery.setup"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRepeatJsSetupForChangedCustomQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 900px)");
+ });
+
+ var invocations = Context.JSInterop.Invocations.Where(i => i.Identifier == "BitBlazorUI.MediaQuery.setup").ToList();
+ Assert.AreEqual(2, invocations.Count);
+ Assert.AreEqual("(max-width: 900px)", invocations[1].Arguments[1]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRepeatJsSetupForScreenQueryOnRerender()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.AddChildContent("content");
+ });
+
+ component.Render();
+
+ // The effective query of a ScreenQuery is resolved on the JS side from the live theme
+ // breakpoints, so setup is re-invoked on every render (JS reuses the listener when the
+ // resolved expression is unchanged).
+ Assert.AreEqual(2, Context.JSInterop.Invocations.Count(i => i.Identifier == "BitBlazorUI.MediaQuery.setup"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldSwitchBetweenScreenQueryAndCustomQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.AddChildContent("content");
+ });
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ });
+
+ var invocations = Context.JSInterop.Invocations.Where(i => i.Identifier == "BitBlazorUI.MediaQuery.setup").ToList();
+ Assert.AreEqual(2, invocations.Count);
+ Assert.AreEqual("Md", invocations[0].Arguments[2]);
+ Assert.AreEqual("(max-width: 600px)", invocations[1].Arguments[1]);
+ Assert.IsNull(invocations[1].Arguments[2]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldReSetupWhenIdChanges()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.Id, "first-id");
+ parameters.AddChildContent("content");
+ });
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Id, "second-id");
+ });
+
+ // The JS listener is keyed by the element id, so a changed Id disposes the old key and
+ // sets the listener up again under the new one.
+ var disposeInvocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.dispose");
+ Assert.AreEqual("first-id", disposeInvocation.Arguments[0]);
+
+ var setups = Context.JSInterop.Invocations.Where(i => i.Identifier == "BitBlazorUI.MediaQuery.setup").ToList();
+ Assert.AreEqual(2, setups.Count);
+ Assert.AreEqual("first-id", setups[0].Arguments[0]);
+ Assert.AreEqual("second-id", setups[1].Arguments[0]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldSetupAgainAfterQueryRemovedAndReadded()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Query, (string?)null);
+ });
+
+ Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.dispose");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 900px)");
+ });
+
+ var setups = Context.JSInterop.Invocations.Where(i => i.Identifier == "BitBlazorUI.MediaQuery.setup").ToList();
+ Assert.AreEqual(2, setups.Count);
+ Assert.AreEqual("(max-width: 900px)", setups[1].Arguments[1]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldNotCallJsSetupWithoutAnyQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.AddChildContent("content");
+ });
+
+ Assert.AreEqual(0, Context.JSInterop.Invocations.Count(i => i.Identifier == "BitBlazorUI.MediaQuery.setup"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldCallJsDisposeWhenQueryRemoved()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Query, (string?)null);
+ });
+
+ Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.dispose");
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldCallJsDisposeOnDispose()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.AddChildContent("content");
+ });
+
+ Context.DisposeComponentsAsync().GetAwaiter().GetResult();
+
+ Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.dispose");
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldNotCallJsDisposeOnDisposeWithoutAnyQuery()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.AddChildContent("content");
+ });
+
+ Context.DisposeComponentsAsync().GetAwaiter().GetResult();
+
+ // No listener was ever set up, so there is nothing to tear down on the JS side.
+ Assert.AreEqual(0, Context.JSInterop.Invocations.Count(i => i.Identifier == "BitBlazorUI.MediaQuery.dispose"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldNotInvokeOnChangeAfterDispose()
+ {
+ bool? changed = null;
+ var component = RenderComponent(parameters =>
{
parameters.Add(p => p.Query, "(max-width: 600px)");
parameters.Add(p => p.OnChange, (bool v) => changed = v);
});
- // simulate JS invocation by calling the internal method via reflection
- var instance = comp.Instance;
- var method = instance.GetType().GetMethod("_OnMatchChange", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Public);
- Assert.IsNotNull(method);
+ var instance = component.Instance;
+
+ Context.DisposeComponentsAsync().GetAwaiter().GetResult();
- var invokeResult = method!.Invoke(instance, [true]);
+ // A notification racing the disposal must be ignored instead of rendering a disposed component.
+ instance._OnMatchChange(true).GetAwaiter().GetResult();
+
+ Assert.IsNull(changed);
+ }
- if (invokeResult is ValueTask vt)
+ [TestMethod]
+ public void BitMediaQueryShouldRenderAriaLabel()
+ {
+ var component = RenderComponent(parameters =>
{
- vt.GetAwaiter().GetResult();
- }
- else if (invokeResult is Task t)
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.AriaLabel, "media query region");
+ parameters.AddChildContent("content");
+ });
+
+ var root = component.Find(".bit-mdq");
+ Assert.AreEqual("media query region", root.GetAttribute("aria-label"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRespectClassStyleIdAndDir()
+ {
+ var component = RenderComponent(parameters =>
{
- t.GetAwaiter().GetResult();
- }
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.Class, "custom-class");
+ parameters.Add(p => p.Style, "color: red;");
+ parameters.Add(p => p.Id, "custom-id");
+ parameters.Add(p => p.Dir, BitDir.Rtl);
+ parameters.AddChildContent("content");
+ });
- Assert.IsTrue(changed);
+ var root = component.Find(".bit-mdq");
+ Assert.IsTrue(root.ClassList.Contains("custom-class"));
+ Assert.IsTrue(root.ClassList.Contains("bit-rtl"));
+ StringAssert.Contains(root.GetAttribute("style"), "color: red");
+ Assert.AreEqual("custom-id", root.Id);
+ Assert.AreEqual("rtl", root.GetAttribute("dir"));
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderWithoutRootElementWithNoWrapper()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.NoWrapper, true);
+ parameters.Add(p => p.Matched, (RenderFragment)(b => b.AddMarkupContent(0, "Matched
")));
+ parameters.Add(p => p.NotMatched, (RenderFragment)(b => b.AddMarkupContent(0, "NotMatched
")));
+ });
+
+ Assert.AreEqual(0, component.FindAll(".bit-mdq").Count);
+ Assert.AreEqual(1, component.FindAll(".notmatched").Count);
+
+ component.InvokeAsync(() => component.Instance._OnMatchChange(true).AsTask()).GetAwaiter().GetResult();
+
+ Assert.AreEqual(0, component.FindAll(".bit-mdq").Count);
+ Assert.AreEqual(1, component.FindAll(".matched").Count);
+ }
+
+ [TestMethod]
+ [DataRow(true)]
+ [DataRow(false)]
+ public void BitMediaQueryShouldPassNoWrapperFlagToJsSetup(bool noWrapper)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.Add(p => p.NoWrapper, noWrapper);
+ parameters.AddChildContent("content");
+ });
+
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.AreEqual(noWrapper, invocation.Arguments[3]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldPassNoWrapperFlagWhenTheContentCarriesTheSameId()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ // A themed ScreenQuery is the case that reads the --bit-bp-* breakpoints off an
+ // element, and NoWrapper renders the content directly, so nothing but the content
+ // itself can carry the id the listener is keyed by.
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.Add(p => p.NoWrapper, true);
+ parameters.Add(p => p.Id, "mdq-id");
+ parameters.Add(p => p.DefaultMatched, true);
+ parameters.AddChildContent("Child
");
+ });
+
+ Assert.AreEqual(0, component.FindAll(".bit-mdq").Count);
+ Assert.AreEqual("mdq-id", component.Find(".child").Id);
+
+ // The id is only the listener key here: the flag tells the JS side to resolve the
+ // breakpoints from the document root rather than from the content that carries it.
+ var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.MediaQuery.setup");
+ Assert.AreEqual("mdq-id", invocation.Arguments[0]);
+ Assert.AreEqual("Md", invocation.Arguments[2]);
+ Assert.AreEqual(true, invocation.Arguments[3]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldPassTheUpdatedNoWrapperFlagWhenItToggles()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ScreenQuery, BitScreenQuery.Md);
+ parameters.Add(p => p.Id, "mdq-id");
+ parameters.AddChildContent("content");
+ });
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.NoWrapper, true);
+ });
+
+ // A ScreenQuery re-invokes setup on every render, so the scope the breakpoints are read
+ // from follows the toggle instead of staying at what the first setup was told.
+ var setups = Context.JSInterop.Invocations.Where(i => i.Identifier == "BitBlazorUI.MediaQuery.setup").ToList();
+ Assert.AreEqual(2, setups.Count);
+ Assert.AreEqual(false, setups[0].Arguments[3]);
+ Assert.AreEqual(true, setups[1].Arguments[3]);
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRenderNothingWithNoWrapperWhenCollapsed()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.NoWrapper, true);
+ parameters.Add(p => p.Visibility, BitVisibility.Collapsed);
+ parameters.Add(p => p.NotMatched, (RenderFragment)(b => b.AddMarkupContent(0, "NotMatched
")));
+ });
+
+ Assert.AreEqual(string.Empty, component.Markup.Trim());
+ }
+
+ [TestMethod]
+ public void BitMediaQueryShouldRespectVisibility()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Query, "(max-width: 600px)");
+ parameters.Add(p => p.Visibility, BitVisibility.Collapsed);
+ parameters.AddChildContent("content");
+ });
+
+ var root = component.Find(".bit-mdq");
+ StringAssert.Contains(root.GetAttribute("style"), "display:none");
}
}