[Rating] New rating component

[franklupo]

Rating component

📖 Description

Rating component like https://mudblazor.com/components/rating

[vnbaaij]

This is great! Has been on my list of things to add for quite some time. Will do a full review soon.

Couple of quick remarks.

• Please follow our 'convention' of giving example pages a "...Page" name (so RatingPage.razor in your case)
• In CoreIcons I see both stars have IconVariant.Regular. Shouldn't one have IconVariant.Filled?
• We really need to have Unit Test. Can you try to add some, using the existing tests as your guidance. Thanks

Looking forward to getting this in!

[franklupo]

For CoreIcons I copied the previous line. There is an error in the previous line. I fixed it.

[dvoituron]

Great job :-)

Could you check all the properties inherited from FluentInputBase? to apply to your component. Example: AriaLabel, Autofocus, Label, Disabled, ... If a property cannot be used, I suggest overriding it to throw an exception (and update the doc for the user).

I will verify the code more in detail later :-)

Another detail, you have a "flick effect" in this case.

[dvoituron]

Adding this component in the page BasicFormFluentUIComponents.razor, the Required attribute doesn't work.

[franklupo]

BasicFormFluentUIComponents
like https://mudblazor.com/components/rating

when the pointer is on a star the previous ones and this one become full, the following ones empty

[dvoituron]

when the pointer is on a star the previous ones and this one become full, the following ones empty

Why this comment? I don't understand :-)
If it's related to my GIF, the problem is that the user is between two stars and you consider this area to be "external". You'd have to apply the "PointerOver" effect to the whole area (in purple below) and not just to the icon.

This effect does not occur with MudBlazor.

[vnbaaij]

One other thing...we have a pretty high bar on accessibility so adding keyboard support like the MudBlazor one has should be included as well.

We can use the FluentKeyCodeProvider for it. See for example FluentNavGroup.razor

[vnbaaij]

Would you think Size24 is too big for the icons? If not, we could change the component to also support half values for a rating. (StarHalf icon is not available in Size20). Would of course require more change like FluentInputBase<double>, etc but think it could be valuable.
We have an internal React rating component version that also supports half ratings

[franklupo]

Would you think Size24 is too big for the icons? If not, we could change the component to also support half values for a rating. (StarHalf icon is not available in Size20). Would of course require more change like FluentInputBase<double>, etc but think it could be valuable. We have an internal React rating component version that also supports half ratings

IMO for now we could ignore the half values.

[dvoituron]

⚠️ Don't forget to add unit tests (we can't publish this component if no tests are included).

Check examples in FluentButtonTests.razor

[Fact]
public void FluentButton_Title()
{
    // Arrange && Act
    var cut = Render(@<FluentButton Title="My Title">My button</FluentButton>);

    // Assert
    cut.Verify();
}

[vnbaaij]

@franklupo Both Denis and I are creating a lot of comments/remarks/suggestions.

Please, please do not see this as criticism. We are really happy with your contributions. We are just trying to look after quality and coding standards (and can be real nitpickers about that sometimes 😑).

[franklupo]

@franklupo Both Denis and I are creating a lot of comments/remarks/suggestions.

Please, please do not see this as criticism. We are really happy with your contributions. We are just trying to look after quality and coding standards (and can be real nitpickers about that sometimes 😑).

I understand, no problem. I have a lot to learn.

[franklupo]

⚠️ Don't forget to add unit tests (we can't publish this component if no tests are included).

Check examples in FluentButtonTests.razor

[Fact]
public void FluentButton_Title()
{
    // Arrange && Act
    var cut = Render(@<FluentButton Title="My Title">My button</FluentButton>);

    // Assert
    cut.Verify();
}

I'm having trouble with tests. Could you help me create one?

[dvoituron]

one

Sure. I will create some Unit Tests later in the day 😊

[dvoituron]

Example of FluentRatingTests.razor file:

1. Create this test file and insert this code.
2. Run the Unit Tests (using the Text Explorer) and you will find 2 tests failed (due to cut.Verify();)
   a. You will have 2 files FluentRatingTests.FluentRating_[xxx].received.razor.html
   b. Rename the received part to verified and check if the HTML content seems correct.
3. Run again the tests... all will be fine.

Your job:

1. Add a test for each property/attribute to validate each feature.
2. Add other tests to validate other parts of the code.
3. Run the _StartCodeCoverage.cmd file to verify the Code Coverage of your component (at least 80%)
   Read the first line of this file to install the necessary tools.

@using Xunit;
@inherits TestContext
@code
{
    public FluentRatingTests()
    {
        JSInterop.Mode = JSRuntimeMode.Loose;
        Services.AddSingleton(new LibraryConfiguration());
    }

    [Fact]
    public void FluentRating_Empty()
    {
        // Arrange && Act
        var cut = Render(@<FluentRating />);

        // Assert
        cut.Verify();
    }

    [Fact]
    public void FluentRating_Value()
    {
        // Arrange && Act
        var cut = Render(@<FluentRating MaxValue="10" Value="2" />);

        // Assert
        cut.Verify();
    }

    [Fact]
    public void FluentRating_SelectValue()
    {
        int value = 0;

        // Arrange
        var cut = Render(@<FluentRating @bind-Value="@value" />);

        // Act: Click on the second star
        cut.FindAll("svg").ElementAt(1).Click();

        // Assert
        Assert.Equal(2, value);
    }

    [Fact]
    public void FluentRating_AllowResetFalse()
    {
        int value = 0;

        // Arrange
        var cut = Render(@<FluentRating @bind-Value="@value" AllowReset="false" />);

        // Act: Click twice on the second star
        cut.FindAll("svg").ElementAt(1).Click();
        cut.FindAll("svg").ElementAt(1).Click();

        // Assert
        Assert.Equal(2, value);
    }

    [Fact]
    public void FluentRating_AllowResetTrue()
    {
        int value = 0;

        // Arrange
        var cut = Render(@<FluentRating @bind-Value="@value" AllowReset="true" />);

        // Act: Click twice on the second star
        cut.FindAll("svg").ElementAt(1).Click();
        cut.FindAll("svg").ElementAt(1).Click();

        // Assert
        Assert.Equal(0, value);
    }
}

[dvoituron]

Could you tell us when your PR will be finished (all discussions resolved)?
That way, we can check the code one last time before merging it.

[franklupo]

If I haven't forgotten anything, that's fine with me.

[dvoituron]

If I haven't forgotten anything, that's fine with me.

And Unit Tests (to have 80%) and the Accessiblity issue ?

[vnbaaij]

@franklupo thanks again for your contribution! We are merging this in now and will make some final tweaks before release.

[franklupo]

To add aria-label="@CurrentValue" and the new unit test do I need to create a new PR?

[vnbaaij]

No, all good. Doing some final tweaks and this is one of them.

[dvoituron]

@franklupo I don't know why (not yet check), but this component is instable (flicker effect) :-(
Can you check how to fix that?

You can go to https://preview.fluentui-blazor.net/Rating to reproduce this behavior.

FluentRating-Instable.mp4

[dvoituron]

I'm working on it and I think I've found a solution.
I'm going to refactor a few elements to make it less heavy on event exchanges