Skip to content

Commit

Permalink
Merge pull request #123 from emncnozge/components-new-props
Browse files Browse the repository at this point in the history
Add New Properties to Select and DateDropdown Components
  • Loading branch information
emncnozge authored Mar 3, 2025
2 parents 2ed687e + 28f321a commit 9e8b802
Show file tree
Hide file tree
Showing 7 changed files with 720 additions and 217 deletions.
149 changes: 76 additions & 73 deletions SiemensIXBlazor.Tests/DateDropdownTest.cs
Original file line number Diff line number Diff line change
Expand Up @@ -19,87 +19,90 @@ namespace SiemensIXBlazor.Tests;

public class DateDropdownTest : TestContextBase
{
[Fact]
public void ComponentRendersWithoutCrashing()
{
// Arrange
var cut = RenderComponent<DateDropdown>();
[Fact]
public void ComponentRendersWithoutCrashing()
{
// Arrange
var cut = RenderComponent<DateDropdown>();

// Assert
cut.MarkupMatches(@"
<ix-date-dropdown id="""" custom-range-allowed="""" date-range-id=""custom"" format=""yyyy/LL/dd"" i18n-custom-item=""Custom..."" i18n-done=""Done"" i18n-no-range=""No range set"" range=""""></ix-date-dropdown>
// Assert
cut.MarkupMatches(@"
<ix-date-dropdown id='' custom-range-allowed='' week-start-index='0' date-range-id='custom' format='yyyy/LL/dd' i18n-custom-item='Custom...' i18n-done='Done' i18n-no-range='No range set' range=''></ix-date-dropdown>
");
}
}

[Fact]
public void AllPropertiesAreSetCorrectly()
{
// Arrange
var dateDropdownOptions = new DateDropdownOption[] { new() { Id = "test", Label = "Test" } };
var dateRangeChangeEvent = new EventCallbackFactory().Create<DateDropdownResponse>(this, response =>
{
/* your action here */
});
[Fact]
public void AllPropertiesAreSetCorrectly()
{
// Arrange
var dateDropdownOptions = new DateDropdownOption[] { new() { Id = "test", Label = "Test" } };
var dateRangeChangeEvent = new EventCallbackFactory().Create<DateDropdownResponse>(this, response =>
{
/* your action here */
});

var cut = RenderComponent<DateDropdown>(parameters => parameters
.Add(p => p.Id, "testId")
.Add(p => p.CustomRangeAllowed, true)
.Add(p => p.DateRangeId, "custom")
.Add(p => p.DateRangeOptions, dateDropdownOptions)
.Add(p => p.Format, "yyyy/LL/dd")
.Add(p => p.From, "2022/01/01")
.Add(p => p.I18NCustomItem, "Custom...")
.Add(p => p.I18NDone, "Done")
.Add(p => p.I18NNoRange, "No range set")
.Add(p => p.MaxDate, "2022/12/31")
.Add(p => p.MinDate, "2022/01/01")
.Add(p => p.Range, true)
.Add(p => p.To, "2022/12/31")
.Add(p => p.DateRangeChangeEvent, dateRangeChangeEvent)
.Add(p => p.Disabled, true));
var cut = RenderComponent<DateDropdown>(parameters => parameters
.Add(p => p.Id, "testId")
.Add(p => p.CustomRangeAllowed, true)
.Add(p => p.DateRangeId, "custom")
.Add(p => p.DateRangeOptions, dateDropdownOptions)
.Add(p => p.Format, "yyyy/LL/dd")
.Add(p => p.From, "2022/01/01")
.Add(p => p.I18NCustomItem, "Custom...")
.Add(p => p.I18NDone, "Done")
.Add(p => p.I18NNoRange, "No range set")
.Add(p => p.MaxDate, "2022/12/31")
.Add(p => p.MinDate, "2022/01/01")
.Add(p => p.Range, true)
.Add(p => p.To, "2022/12/31")
.Add(p => p.Locale, "en")
.Add(p => p.WeekStartIndex, 2)
.Add(p => p.DateRangeChangeEvent, dateRangeChangeEvent)
.Add(p => p.Disabled, true));

// Assert
cut.MarkupMatches(@"
<ix-date-dropdown id=""testId"" custom-range-allowed="""" date-range-id=""custom"" format=""yyyy/LL/dd"" from=""2022/01/01"" i18n-custom-item=""Custom..."" i18n-done=""Done"" i18n-no-range=""No range set"" max-date=""2022/12/31"" min-date=""2022/01/01"" range="""" to=""2022/12/31"" disabled></ix-date-dropdown>
// Assert
cut.MarkupMatches(@"
<ix-date-dropdown id='testId' locale='en' week-start-index='2' custom-range-allowed='' date-range-id='custom' format='yyyy/LL/dd' from='2022/01/01' i18n-custom-item='Custom...' i18n-done='Done' i18n-no-range='No range set' max-date='2022/12/31' min-date='2022/01/01' range='' to='2022/12/31' disabled></ix-date-dropdown>
");
}
}

[Fact]
public void DateRangeChangeEventIsTriggeredCorrectly()
{
// Arrange
var dateDropdownOptions = new DateDropdownOption[]
{
new() { Id = "test", Label = "Test", From = "2022/01/01", To = "2022/12/31" },
new() { Id = "test2", Label = "Test2", From = "2023/01/01", To = "2023/12/31" }
};
var dateRangeChangeEventTriggered = false;
var dateRangeChangeEvent =
new EventCallbackFactory().Create<DateDropdownResponse>(this,
response => { dateRangeChangeEventTriggered = true; });
[Fact]
public void DateRangeChangeEventIsTriggeredCorrectly()
{
// Arrange
var dateDropdownOptions = new DateDropdownOption[]
{
new() { Id = "test", Label = "Test", From = "2022/01/01", To = "2022/12/31" },
new() { Id = "test2", Label = "Test2", From = "2023/01/01", To = "2023/12/31" }
};
var dateRangeChangeEventTriggered = false;
var dateRangeChangeEvent =
new EventCallbackFactory().Create<DateDropdownResponse>(this,
response => { dateRangeChangeEventTriggered = true; });

var cut = RenderComponent<DateDropdown>(parameters => parameters
.Add(p => p.Id, "testId")
.Add(p => p.CustomRangeAllowed, true)
.Add(p => p.DateRangeId, "test1")
.Add(p => p.DateRangeOptions, dateDropdownOptions)
.Add(p => p.Format, "yyyy/LL/dd")
.Add(p => p.From, "2022/01/01")
.Add(p => p.I18NCustomItem, "Custom...")
.Add(p => p.I18NDone, "Done")
.Add(p => p.I18NNoRange, "No range set")
.Add(p => p.MaxDate, "2022/12/31")
.Add(p => p.MinDate, "2022/01/01")
.Add(p => p.Range, true)
.Add(p => p.To, "2022/12/31")
.Add(p => p.DateRangeChangeEvent, dateRangeChangeEvent));
var cut = RenderComponent<DateDropdown>(parameters => parameters
.Add(p => p.Id, "testId")
.Add(p => p.CustomRangeAllowed, true)
.Add(p => p.DateRangeId, "test1")
.Add(p => p.DateRangeOptions, dateDropdownOptions)
.Add(p => p.Format, "yyyy/LL/dd")
.Add(p => p.From, "2022/01/01")
.Add(p => p.I18NCustomItem, "Custom...")
.Add(p => p.I18NDone, "Done")
.Add(p => p.I18NNoRange, "No range set")
.Add(p => p.MaxDate, "2022/12/31")
.Add(p => p.MinDate, "2022/01/01")
.Add(p => p.Range, true)
.Add(p => p.To, "2022/12/31")
.Add(p => p.WeekStartIndex, 0)
.Add(p => p.DateRangeChangeEvent, dateRangeChangeEvent));

// Act
var json = JsonSerializer.Serialize(new DateDropdownResponse { Id = "test2" });
var parsedJson = JsonDocument.Parse(json).RootElement;
cut.Instance.DateRangeChange(parsedJson);
// Act
var json = JsonSerializer.Serialize(new DateDropdownResponse { Id = "test2" });
var parsedJson = JsonDocument.Parse(json).RootElement;
cut.Instance.DateRangeChange(parsedJson);

// Assert
Assert.True(dateRangeChangeEventTriggered);
}
// Assert
Assert.True(dateRangeChangeEventTriggered);
}
}
163 changes: 163 additions & 0 deletions SiemensIXBlazor.Tests/Select/SelectItemTest.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
// -----------------------------------------------------------------------
// SPDX-FileCopyrightText: 2025 Siemens AG
//
// SPDX-License-Identifier: MIT
//
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
// -----------------------------------------------------------------------

using Bunit;
using Microsoft.AspNetCore.Components;
using SiemensIXBlazor.Components;

namespace SiemensIXBlazor.Tests.Select;

public class SelectItemTests : TestContextBase
{
[Fact]
public void ComponentRendersWithoutCrashing()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item"));

// Assert
cut.MarkupMatches("<ix-select-item id='test-select-item'></ix-select-item>");
}

[Fact]
public void IdPropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "custom-item-id"));

// Assert
Assert.Equal("custom-item-id", cut.Instance.Id);
cut.MarkupMatches("<ix-select-item id='custom-item-id'></ix-select-item>");
}

[Fact]
public void LabelPropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.Label, "Test Label"));

// Assert
Assert.Equal("Test Label", cut.Instance.Label);
cut.MarkupMatches("<ix-select-item id='test-select-item' label='Test Label'></ix-select-item>");
}

[Fact]
public void ValuePropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.Value, "item-value"));

// Assert
Assert.Equal("item-value", cut.Instance.Value);
cut.MarkupMatches("<ix-select-item id='test-select-item' value='item-value'></ix-select-item>");
}

[Fact]
public void SelectedPropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.Selected, true));

// Assert
Assert.True(cut.Instance.Selected);
cut.MarkupMatches("<ix-select-item id='test-select-item' selected></ix-select-item>");
}

[Fact]
public void ClassPropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.Class, "custom-class"));

// Assert
Assert.Equal("custom-class", cut.Instance.Class);
cut.MarkupMatches("<ix-select-item id='test-select-item' class='custom-class'></ix-select-item>");
}

[Fact]
public void StylePropertyIsSetCorrectly()
{
// Arrange
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.Style, "color: red;"));

// Assert
Assert.Equal("color: red;", cut.Instance.Style);
cut.MarkupMatches("<ix-select-item id='test-select-item' style='color: red;'></ix-select-item>");
}

[Fact]
public async Task ItemClickEventIsTriggeredCorrectly()
{
// Arrange
string? clickedItem = null;
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "test-select-item")
.Add(p => p.ItemClickEvent, EventCallback.Factory.Create<string>(this, (item) => clickedItem = item)));

// Act
cut.Instance.ItemClicked("Item Label");

// Assert
Assert.Equal("Item Label", clickedItem);
}

[Fact]
public void CompleteSelectItemRendersCorrectly()
{
// Arrange & Act
var cut = RenderComponent<SelectItem>(parameters => parameters
.Add(p => p.Id, "selectItem1")
.Add(p => p.Label, "Item 1")
.Add(p => p.Value, "1")
.Add(p => p.Selected, true)
.Add(p => p.Class, "custom-class")
.Add(p => p.Style, "margin-top: 5px;"));

// Assert
cut.MarkupMatches("<ix-select-item id='selectItem1' label='Item 1' value='1' selected " +
"style='margin-top: 5px;' class='custom-class'></ix-select-item>");
}

[Fact]
public void SelectItemRendersWithinSelect()
{
// Arrange & Act
var cut = RenderComponent<Components.Select>(parameters => parameters
.Add(p => p.Id, "parent-select")
.Add(p => p.Value, "1")
.Add(p => p.ChildContent, builder =>
{
builder.OpenComponent<SelectItem>(0);
builder.AddAttribute(1, "Id", "selectItem1");
builder.AddAttribute(2, "Label", "Item 1");
builder.AddAttribute(3, "Value", "1");
builder.CloseComponent();
}));

// Assert
cut.MarkupMatches("<ix-select id='parent-select' value='1' " +
"i-1-8n-placeholder='Select an option' i-1-8n-placeholder-editable='Type of select option' " +
"i-1-8n-select-list-header='Please select an option' mode='single'" +
"i-1-8n-no-matches='No matches'>" +
"<ix-select-item id='selectItem1' label='Item 1' value='1'></ix-select-item>" +
"</ix-select>");
}
}
Loading

0 comments on commit 9e8b802

Please sign in to comment.