MudMessageBox: Add button classes (MudBlazor#9293)

Qwertyluk · Jul 3, 2024 · 952e620 · 952e620
1 parent cb9985e
commit 952e620
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/src/MudBlazor.UnitTests/Components/MessageBoxTests.cs b/src/MudBlazor.UnitTests/Components/MessageBoxTests.cs
@@ -1,11 +1,7 @@
-
-using System;
-using System.Threading.Tasks;
+using System.Threading.Tasks;
 using Bunit;
 using FluentAssertions;
 using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Web;
-using MudBlazor.UnitTests.TestComponents;
 using NUnit.Framework;
 
 namespace MudBlazor.UnitTests.Components
@@ -23,22 +19,29 @@ public async Task MessageBox_Should_ReturnTrue(int clickButtonIndex, bool? expec
             comp.Markup.Trim().Should().BeEmpty();
             var service = Context.Services.GetService<IDialogService>() as DialogService;
             service.Should().NotBe(null);
-            // open mbox
+
+            // open message box.
             Task<bool?> yesNoCancel = null;
             await comp.InvokeAsync(() =>
             {
-                yesNoCancel = service?.ShowMessageBox("Boom!", "I'm a pickle. What do you make of that?", "Great",
-                    "Whatever", "Go away!");
+                yesNoCancel = service?.ShowMessageBox(
+                    "Boom!",
+                    "I'm a pickle. What do you make of that?",
+                    "Great",
+                    "Whatever",
+                    "Go away!");
             });
+
             comp.Find("div.mud-message-box").Should().NotBe(null);
             comp.Find("div.mud-dialog-container").Should().NotBe(null);
             comp.Find("div.mud-dialog-title").TrimmedText().Should().Contain("Boom!");
             comp.Find("div.mud-dialog-content").TrimmedText().Should().Contain("pickle");
-            comp.FindAll("button")[0].TrimmedText().Should().Be("Go away!");
-            comp.FindAll("button")[1].TrimmedText().Should().Be("Whatever");
-            comp.FindAll("button")[2].TrimmedText().Should().Be("Great");
+            comp.FindAll("button").Count.Should().Be(3);
+            comp.Find(".mud-message-box__cancel-button").TrimmedText().Should().Be("Go away!");
+            comp.Find(".mud-message-box__no-button").TrimmedText().Should().Be("Whatever");
+            comp.Find(".mud-message-box__yes-button").TrimmedText().Should().Be("Great");
 
-            // close by click on Great
+            // close message box by clicking on Great.
             comp.FindAll("button")[clickButtonIndex].Click();
             comp.Markup.Trim().Should().BeEmpty();
             yesNoCancel.Result.Should().Be(expectedResult);
@@ -48,28 +51,35 @@ await comp.InvokeAsync(() =>
         [TestCase(0, null)]
         [TestCase(1, false)]
         [TestCase(2, true)]
-        public async Task MessageBox_Should_ReturnTruewithMarkupVariant(int clickButtonIndex, bool? expectedResult)
+        public async Task MessageBox_Should_ReturnTrueWithMarkupVariant(int clickButtonIndex, bool? expectedResult)
         {
             var comp = Context.RenderComponent<MudDialogProvider>();
             comp.Markup.Trim().Should().BeEmpty();
             var service = Context.Services.GetService<IDialogService>() as DialogService;
             service.Should().NotBe(null);
-            // open mbox
+
+            // open message box.
             Task<bool?> yesNoCancel = null;
             await comp.InvokeAsync(() =>
             {
-                yesNoCancel = service?.ShowMessageBox("Boom!", (MarkupString)$"I'm a pickle. What do you make of that?", "Great",
-                    "Whatever", "Go away!");
+                yesNoCancel = service?.ShowMessageBox(
+                    "Boom!",
+                    (MarkupString)"I'm a pickle. What do you make of that?",
+                    "Great",
+                    "Whatever",
+                    "Go away!");
             });
+
             comp.Find("div.mud-message-box").Should().NotBe(null);
             comp.Find("div.mud-dialog-container").Should().NotBe(null);
             comp.Find("div.mud-dialog-title").TrimmedText().Should().Contain("Boom!");
             comp.Find("div.mud-dialog-content").TrimmedText().Should().Contain("pickle");
-            comp.FindAll("button")[0].TrimmedText().Should().Be("Go away!");
-            comp.FindAll("button")[1].TrimmedText().Should().Be("Whatever");
-            comp.FindAll("button")[2].TrimmedText().Should().Be("Great");
+            comp.FindAll("button").Count.Should().Be(3);
+            comp.Find(".mud-message-box__cancel-button").TrimmedText().Should().Be("Go away!");
+            comp.Find(".mud-message-box__no-button").TrimmedText().Should().Be("Whatever");
+            comp.Find(".mud-message-box__yes-button").TrimmedText().Should().Be("Great");
 
-            // close by click on Great
+            // close message box by clicking on Great.
             comp.FindAll("button")[clickButtonIndex].Click();
             comp.Markup.Trim().Should().BeEmpty();
             yesNoCancel.Result.Should().Be(expectedResult);
@@ -82,20 +92,28 @@ public async Task MessageBox_KeyNavTest()
             comp.Markup.Trim().Should().BeEmpty();
             var service = Context.Services.GetService<IDialogService>() as DialogService;
             service.Should().NotBe(null);
-            // open mbox
+
+            // open message box.
             Task<bool?> yesNoCancel = null;
             await comp.InvokeAsync(() =>
             {
-                yesNoCancel = service?.ShowMessageBox("Boom!", (MarkupString)$"I'm a pickle. What do you make of that?", "Great",
-                    "Whatever", "Go away!");
+                yesNoCancel = service?.ShowMessageBox(
+                    "Boom!",
+                    (MarkupString)"I'm a pickle. What do you make of that?",
+                    "Great",
+                    "Whatever",
+                    "Go away!");
             });
+
             comp.Find("div.mud-message-box").Should().NotBe(null);
             comp.Find("div.mud-dialog-container").Should().NotBe(null);
             comp.Find("div.mud-dialog-title").TrimmedText().Should().Contain("Boom!");
             comp.Find("div.mud-dialog-content").TrimmedText().Should().Contain("pickle");
-            comp.FindAll("button")[0].TrimmedText().Should().Be("Go away!");
-            comp.FindAll("button")[1].TrimmedText().Should().Be("Whatever");
-            comp.FindAll("button")[2].TrimmedText().Should().Be("Great");
+            comp.FindAll("button").Count.Should().Be(3);
+            comp.Find(".mud-message-box__cancel-button").TrimmedText().Should().Be("Go away!");
+            comp.Find(".mud-message-box__no-button").TrimmedText().Should().Be("Whatever");
+            comp.Find(".mud-message-box__yes-button").TrimmedText().Should().Be("Great");
+
             comp.FindAll(".mud-dialog-actions div")[0].KeyDown(Key.Escape);
 
             comp.FindAll("button").Should().BeEmpty();

diff --git a/src/MudBlazor/Components/MessageBox/MudMessageBox.razor b/src/MudBlazor/Components/MessageBox/MudMessageBox.razor
@@ -37,7 +37,7 @@
                 }
                 else if (!string.IsNullOrWhiteSpace(CancelText))
                 {
-                    <MudButton OnClick="OnCancelClicked">@CancelText</MudButton>
+                    <MudButton Class="mud-message-box__cancel-button" OnClick="OnCancelClicked">@CancelText</MudButton>
                 }
                 @if (NoButton is not null)
                 {
@@ -47,7 +47,7 @@
                 }
                 else if (!string.IsNullOrWhiteSpace(NoText))
                 {
-                    <MudButton OnClick="OnNoClicked">@NoText</MudButton>
+                    <MudButton Class="mud-message-box__no-button" OnClick="OnNoClicked">@NoText</MudButton>
                 }
                 @if (YesButton is not null)
                 {
@@ -57,7 +57,7 @@
                 }
                 else if (!string.IsNullOrWhiteSpace(YesText))
                 {
-                    <MudButton Color="Color.Primary" OnClick="OnYesClicked">@YesText</MudButton>
+                    <MudButton Class="mud-message-box__yes-button" Color="Color.Primary" OnClick="OnYesClicked">@YesText</MudButton>
                 }
             </MudFocusTrap>
         </div>