Skip to content

Commit

Permalink
MudExpansionPanel: Use ParameterState, remove obsolete API and change…
Browse files Browse the repository at this point in the history 
… to async API (MudBlazor#8446)
  • Loading branch information
@ScarletKuro
ScarletKuro authored Mar 25, 2024
1 parent 61e8a76 commit ab608c2
Show file tree
Hide file tree
Showing 11 changed files with 250 additions and 151 deletions.
2 changes: 1 addition & 1 deletion ...MudBlazor.Docs/Pages/Components/ExpansionPanel/Examples/ExpansionPanelSimpleExample.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@


<MudExpansionPanels>
<MudExpansionPanel Text="Panel One" MaxHeight="150">
<MudExpansionPanel Text="Panel One" MaxHeight="150" IsExpanded="true">
Panel One Content
</MudExpansionPanel>
<MudExpansionPanel Text="Panel Two" MaxHeight="500">
Expand Down
1 change: 0 additions & 1 deletion ...onents/ExpansionPanel/ExpansionPanelExpandedMultipleWithoutMultipleExpansionSetTest.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,3 @@
Panel Two Content
</MudExpansionPanel>
</MudExpansionPanels>

3 changes: 0 additions & 3 deletions ...dBlazor.UnitTests.Viewer/TestComponents/ExpansionPanel/ExpansionPanelExpansionsTest.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,3 @@
Panel Three Content
</MudExpansionPanel>
</MudExpansionPanels>



3 changes: 0 additions & 3 deletions ...zor.UnitTests.Viewer/TestComponents/ExpansionPanel/ExpansionPanelMultiExpansionTest.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,3 @@
Panel Three Content
</MudExpansionPanel>
</MudExpansionPanels>



9 changes: 3 additions & 6 deletions ...tTests.Viewer/TestComponents/ExpansionPanel/ExpansionPanelStartExpandedMultipleTest.razor
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
@namespace MudBlazor.UnitTests.TestComponents

<MudExpansionPanels MultiExpansion>
<MudExpansionPanel Class="panel-one" Text="Panel One" IsInitiallyExpanded>
<MudExpansionPanel Class="panel-one" Text="Panel One" IsExpanded="true">
Panel One Content
</MudExpansionPanel>
<MudExpansionPanel Class="panel-two" Text="Panel Two" IsInitiallyExpanded>
<MudExpansionPanel Class="panel-two" Text="Panel Two" IsExpanded="true">
Panel Two Content
</MudExpansionPanel>
<MudExpansionPanel Class="panel-three" Text="Panel Three" IsInitiallyExpanded>
<MudExpansionPanel Class="panel-three" Text="Panel Three" IsExpanded="true">
Panel Three Content
</MudExpansionPanel>
</MudExpansionPanels>



12 changes: 9 additions & 3 deletions ...azor.UnitTests.Viewer/TestComponents/ExpansionPanel/ExpansionPanelStartExpandedTest.razor
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
@namespace MudBlazor.UnitTests.TestComponents

<MudExpansionPanels>
<MudExpansionPanel Class="panel-one" Text="Panel One">
<MudExpansionPanel @bind-IsExpanded="Panel1IsExpanded" Class="panel-one" Text="Panel One">
Panel One Content
</MudExpansionPanel>
<MudExpansionPanel Class="panel-two" Text="Panel Two" IsInitiallyExpanded>
<MudExpansionPanel @bind-IsExpanded="Panel2IsExpanded" Class="panel-two" Text="Panel Two">
Panel Two Content
</MudExpansionPanel>
<MudExpansionPanel Class="panel-three" Text="Panel Three">
<MudExpansionPanel @bind-IsExpanded="Panel3IsExpanded" Class="panel-three" Text="Panel Three">
Panel Three Content
</MudExpansionPanel>
</MudExpansionPanels>

@code
{
public bool Panel1IsExpanded { get; set; }

public bool Panel2IsExpanded { get; set; } = true;

public bool Panel3IsExpanded { get; set; }
}
46 changes: 46 additions & 0 deletions ...azor.UnitTests.Viewer/TestComponents/ExpansionPanel/ExpansionPanelTwoWayBIndingTest.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@namespace MudBlazor.UnitTests.TestComponents

<MudExpansionPanels>
<MudExpansionPanel @bind-IsExpanded="Expansion[0]" Text="Panel One" MaxHeight="150">
Panel One Content
</MudExpansionPanel>
<MudExpansionPanel @bind-IsExpanded="Expansion[1]" Text="Panel Two" MaxHeight="500">
Panel Two Content
</MudExpansionPanel>
<MudExpansionPanel @bind-IsExpanded="Expansion[2]" Text="Panel Three" MaxHeight="1000">
Panel Three Content
</MudExpansionPanel>
<MudExpansionPanel @bind-IsExpanded="Expansion[3]" Text="Panel Four">
Panel Four Content
</MudExpansionPanel>
</MudExpansionPanels>

@code {
public bool[] Expansion = [true, false, false, false];

public void ToggleExpansion1()
{
// Simulating MudSwitch toggle, we need StateHasChanged.
// Usually it would be updated from an EventCallback (or bind syntax) that updates the UI automatically but we doing it directly.
Expansion[0] = !Expansion[0];
StateHasChanged();
}

public void ToggleExpansion2()
{
Expansion[1] = !Expansion[1];
StateHasChanged();
}

public void ToggleExpansion3()
{
Expansion[2] = !Expansion[2];
StateHasChanged();
}

public void ToggleExpansion4()
{
Expansion[3] = !Expansion[3];
StateHasChanged();
}
}
164 changes: 118 additions & 46 deletions src/MudBlazor.UnitTests/Components/ExpansionPanelTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,85 +143,157 @@ public async Task MudExpansionPanel_Other()
{
var comp = Context.RenderComponent<ExpansionPanelStartExpandedTest>();
var panel = comp.FindComponent<MudExpansionPanel>();
#pragma warning disable BL0005
await comp.InvokeAsync(() => panel.Instance.Disabled = true);
await comp.InvokeAsync(() => panel.Instance.ToggleExpansion());
await comp.InvokeAsync(() => panel.Instance.Expand());
comp.WaitForAssertion(() => panel.Instance.IsExpanded.Should().BeTrue());
await comp.InvokeAsync(() => panel.Instance.Collapse());
comp.WaitForAssertion(() => panel.Instance.IsExpanded.Should().BeFalse());
panel.SetParametersAndRender(parameters => parameters.Add(parameter => parameter.Disabled, true));

comp.WaitForAssertion(() => comp.Instance.Panel1IsExpanded.Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Panel2IsExpanded.Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Panel3IsExpanded.Should().BeFalse());
await comp.InvokeAsync(panel.Instance.ToggleExpansionAsync);
comp.WaitForAssertion(() => comp.Instance.Panel1IsExpanded.Should().BeFalse()); // ToggleExpansionAsync checks for Disabled, so nothing happens
comp.WaitForAssertion(() => comp.Instance.Panel2IsExpanded.Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Panel3IsExpanded.Should().BeFalse());
await comp.InvokeAsync(panel.Instance.ExpandAsync);
comp.WaitForAssertion(() => comp.Instance.Panel1IsExpanded.Should().BeTrue()); // ExpandAsync ignores Disabled
comp.WaitForAssertion(() => comp.Instance.Panel2IsExpanded.Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Panel3IsExpanded.Should().BeFalse());
await comp.InvokeAsync(panel.Instance.CollapseAsync);
comp.WaitForAssertion(() => comp.Instance.Panel1IsExpanded.Should().BeFalse()); // ExpandAsync ignores Disabled
comp.WaitForAssertion(() => comp.Instance.Panel2IsExpanded.Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Panel3IsExpanded.Should().BeFalse());
}

/// <summary>
/// Tests that ExpandAll method expands all panels.
/// </summary>
[Test]
public void MudExpansionPanel_ExpandAll()
public async Task MudExpansionPanel_ExpandAllAync()
{
var panels = Context.RenderComponent<MudExpansionPanels>();
var panel1 = new MudExpansionPanel();
var panel2 = new MudExpansionPanel();
var panel3 = new MudExpansionPanel();
panels.Instance.AddPanel(panel1);
panels.Instance.AddPanel(panel2);
panels.Instance.AddPanel(panel3);
panel1.IsExpanded.Should().BeFalse();
panel2.IsExpanded.Should().BeFalse();
panel3.IsExpanded.Should().BeFalse();
panels.Instance.ExpandAll();
panel1.IsExpanded.Should().BeTrue();
panel2.IsExpanded.Should().BeTrue();
panel3.IsExpanded.Should().BeTrue();
await panels.Instance.AddPanelAsync(panel1);
await panels.Instance.AddPanelAsync(panel2);
await panels.Instance.AddPanelAsync(panel3);
// We check _isExpandedState because we do not modify IsExpanded directly, therefore the parameter doesn't change.
// For parameter to change you need to bind panels IsExpansion it via razor syntax, so that parent would update it.
panel1._isExpandedState.Value.Should().BeFalse();
panel2._isExpandedState.Value.Should().BeFalse();
panel3._isExpandedState.Value.Should().BeFalse();
await panels.Instance.ExpandAllAsync();
panel1._isExpandedState.Value.Should().BeTrue();
panel2._isExpandedState.Value.Should().BeTrue();
panel3._isExpandedState.Value.Should().BeTrue();
}

/// <summary>
/// Tests that CollapseAll method collapses all panels.
/// </summary>
[Test]
public void MudExpansionPanel_CollapseAll()
public async Task MudExpansionPanel_CollapseAllAsync()
{
var panels = Context.RenderComponent<MudExpansionPanels>();
var panel1 = new MudExpansionPanel();
var panel2 = new MudExpansionPanel();
var panel3 = new MudExpansionPanel();
panels.Instance.AddPanel(panel1);
panels.Instance.AddPanel(panel2);
panels.Instance.AddPanel(panel3);
panel1.Expand(false);
panel2.Expand(false);
panel3.Expand(false);
panel1.IsExpanded.Should().BeTrue();
panel2.IsExpanded.Should().BeTrue();
panel3.IsExpanded.Should().BeTrue();
panels.Instance.CollapseAll();
panel1.IsExpanded.Should().BeFalse();
panel2.IsExpanded.Should().BeFalse();
panel3.IsExpanded.Should().BeFalse();
await panels.Instance.AddPanelAsync(panel1);
await panels.Instance.AddPanelAsync(panel2);
await panels.Instance.AddPanelAsync(panel3);
await panel1.ExpandAsync();
await panel2.ExpandAsync();
await panel3.ExpandAsync();
// We check _isExpandedState because we do not modify IsExpanded directly, therefore the parameter doesn't change.
// For parameter to change you need to bind panels IsExpansion it via razor syntax, so that parent would update it.
panel1._isExpandedState.Value.Should().BeTrue();
panel2._isExpandedState.Value.Should().BeTrue();
panel3._isExpandedState.Value.Should().BeTrue();
await panels.Instance.CollapseAllAsync();
panel1._isExpandedState.Value.Should().BeFalse();
panel2._isExpandedState.Value.Should().BeFalse();
panel3._isExpandedState.Value.Should().BeFalse();
}

/// <summary>
/// Tests that CollapseAllExcept method collapses all panels except one.
/// </summary>
[Test]
public void MudExpansionPanel_CollapseAllExcept()
public async Task MudExpansionPanel_CollapseAllExceptAsync()
{
var panels = Context.RenderComponent<MudExpansionPanels>();
var panel1 = new MudExpansionPanel();
var panel2 = new MudExpansionPanel();
var panel3 = new MudExpansionPanel();
panels.Instance.AddPanel(panel1);
panels.Instance.AddPanel(panel2);
panels.Instance.AddPanel(panel3);
panel1.Expand(false);
panel2.Expand(false);
panel3.Expand(false);
panel1.IsExpanded.Should().BeTrue();
panel2.IsExpanded.Should().BeTrue();
panel3.IsExpanded.Should().BeTrue();
panels.Instance.CollapseAllExcept(panel2);
panel1.IsExpanded.Should().BeFalse();
panel2.IsExpanded.Should().BeTrue();
panel3.IsExpanded.Should().BeFalse();
await panels.Instance.AddPanelAsync(panel1);
await panels.Instance.AddPanelAsync(panel2);
await panels.Instance.AddPanelAsync(panel3);
await panel1.ExpandAsync();
await panel2.ExpandAsync();
await panel3.ExpandAsync();
// We check _isExpandedState because we do not modify IsExpanded directly, therefore the parameter doesn't change.
// For parameter to change you need to bind panels IsExpansion it via razor syntax, so that parent would update it.
panel1._isExpandedState.Value.Should().BeTrue();
panel2._isExpandedState.Value.Should().BeTrue();
panel3._isExpandedState.Value.Should().BeTrue();
await panels.Instance.CollapseAllExceptAsync(panel2);
panel1._isExpandedState.Value.Should().BeFalse();
panel2._isExpandedState.Value.Should().BeTrue();
panel3._isExpandedState.Value.Should().BeFalse();
}

/// <summary>
/// Test for https://github.com/MudBlazor/MudBlazor/issues/8429
/// </summary>
[Test]
public async Task MudExpansionPanel_TwoWayBinding()
{
var comp = Context.RenderComponent<ExpansionPanelTwoWayBIndingTest>();

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());

await comp.InvokeAsync(comp.Instance.ToggleExpansion2);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());

await comp.InvokeAsync(comp.Instance.ToggleExpansion3);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());

await comp.InvokeAsync(comp.Instance.ToggleExpansion4);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeTrue());

await comp.InvokeAsync(comp.Instance.ToggleExpansion3);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());

await comp.InvokeAsync(comp.Instance.ToggleExpansion2);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());

await comp.InvokeAsync(comp.Instance.ToggleExpansion1);

comp.WaitForAssertion(() => comp.Instance.Expansion[0].Should().BeTrue());
comp.WaitForAssertion(() => comp.Instance.Expansion[1].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[2].Should().BeFalse());
comp.WaitForAssertion(() => comp.Instance.Expansion[3].Should().BeFalse());
}
}
}
6 changes: 3 additions & 3 deletions src/MudBlazor/Components/ExpansionPanel/MudExpansionPanel.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@inherits MudComponentBase

<div @attributes="UserAttributes" class="@Classname" style="@Style">
<div class="mud-expand-panel-header" @onclick="ToggleExpansion">
<div class="mud-expand-panel-header" @onclick="ToggleExpansionAsync">
<div class="mud-expand-panel-text">
@if (TitleContent is not null)
{
Expand All @@ -15,10 +15,10 @@
</div>
@if (!HideIcon)
{
<MudIcon Icon="@Icon" class="@(IsExpanded? "mud-expand-panel-icon mud-transform" : "mud-expand-panel-icon")" />
<MudIcon Icon="@Icon" class="@(_isExpandedState.Value? "mud-expand-panel-icon mud-transform" : "mud-expand-panel-icon")" />
}
</div>
<MudCollapse Expanded="@_collapseIsExpanded" MaxHeight="@MaxHeight">
<MudCollapse Expanded="_isExpandedState.Value" MaxHeight="@MaxHeight">
<div class="@PanelContentClassname">
@ChildContent
</div>
Expand Down
Loading

0 comments on commit ab608c2

Please sign in to comment.