Add failing test with type-level validations

Author: oroztocil

src/Components/test/E2ETest/ServerRenderingTests/AddValidationIntegrationTest.cs

@@ -20,15 +20,15 @@ public AddValidationIntegrationTest(BrowserFixture browserFixture, BasicTestAppS
     {
     }
 
-    protected override void InitializeAsyncCore()
-    {
-        Navigate("subdir/forms/add-validation-form");
-        Browser.Exists(By.Id("is-interactive"));
-    }
+    public override Task InitializeAsync()
+        => InitializeAsync(BrowserFixture.StreamingContext);
 
     [Fact]
     public void FormWithNestedValidation_Works()
     {
+        Navigate("subdir/forms/add-validation-form");
+        Browser.Exists(By.Id("is-interactive"));
+
         Browser.Exists(By.Id("submit-form")).Click();
 
         Browser.Exists(By.Id("is-invalid"));
@@ -58,4 +58,53 @@ public void FormWithNestedValidation_Works()
 
         Assert.Equal(expected, individual);
     }
+
+    [Fact]
+    public void FormWithTypeLevelValidations_Works()
+    {
+        // This is the new way of initializing test page
+        Navigate("subdir/forms/type-level-validation-form");
+        Browser.Exists(By.Id("is-interactive"));
+
+        // These have been replaced to use Browser.FindElement directly
+        var isCatCheckbox = Browser.FindElement(By.ClassName("cattiness")).FindElement(By.TagName("input"));
+        var ageInput = Browser.FindElement(By.ClassName("age")).FindElement(By.TagName("input"));
+        var submitButton = Browser.FindElement(By.CssSelector("button[type=submit]"));
+        var modelMessagesAccessor = CreateValidationMessagesAccessor(
+            Browser.FindElement(By.ClassName("model-errors")),
+            "ul.model-summary-custom-class > .validation-message"); // This shows we can override the ul's CSS class
+        var allMessagesAccessor = CreateValidationMessagesAccessor(
+            Browser.FindElement(By.ClassName("all-errors")));
+
+        //// Cause a property-level validation error
+        ageInput.Clear();
+        ageInput.SendKeys("-1");
+        submitButton.Click();
+        Browser.Collection(allMessagesAccessor, x => Assert.Equal("Under-zeros should not be filling out forms", x));
+        Browser.Empty(modelMessagesAccessor);
+
+        //// Cause a model-level validation error
+        ageInput.Clear();
+        ageInput.SendKeys("10");
+        submitButton.Click();
+        Browser.Collection(allMessagesAccessor, x => Assert.Equal("Sorry, you're not old enough as a non-cat", x));
+        Browser.Collection(modelMessagesAccessor, x => Assert.Equal("Sorry, you're not old enough as a non-cat", x));
+
+        //// Become valid
+        isCatCheckbox.Click();
+        submitButton.Click();
+        Browser.Empty(allMessagesAccessor);
+        Browser.Empty(modelMessagesAccessor);
+
+        Func<string[]> logEntries = () => Browser.FindElements(By.ClassName("submission-log-entry")).Select(x => x.Text).ToArray();
+        Browser.Collection(logEntries, x => Assert.Equal("OnValidSubmit", x));
+    }
+
+    private Func<string[]> CreateValidationMessagesAccessor(IWebElement appElement, string messageSelector = ".validation-message")
+    {
+        return () => appElement.FindElements(By.CssSelector(messageSelector))
+            .Select(x => x.Text)
+            .OrderBy(x => x)
+            .ToArray();
+    }
 }

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/Forms/TypeLevelValidationForm.razor

@@ -0,0 +1,6 @@
+@page "/forms/type-level-validation-form"
+@rendermode RenderMode.InteractiveServer
+
+<h3>This form demostrates using `AddValidation` from Microsoft.Extensions.Validation with type-level validations</h3>
+
+<TypeLevelValidationComponent></TypeLevelValidationComponent>

src/Components/test/testassets/Components.TestServer/RazorComponents/TypeLevelValidationComponent.razor

@@ -0,0 +1,50 @@
+@using System.ComponentModel.DataAnnotations
+@using BasicTestApp.ValidationModels
+@using Microsoft.AspNetCore.Components.Forms
+
+@if (RendererInfo.IsInteractive)
+{
+    <p id="is-interactive"></p>
+}
+
+<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
+    <DataAnnotationsValidator />
+
+    <h2>We only accept cats over 3 years of age, or non-cats over 18 years of age.</h2>
+
+    <p class="cattiness">
+        <label>
+            <InputCheckbox @bind-Value="person.IsACat" /> I am a cat
+        </label>
+    </p>
+
+    <p class="age">
+        Age (years): <InputNumber @bind-Value="person.AgeInYears" placeholder="Enter your age" />
+    </p>
+
+    <button type="submit">Submit</button>
+
+    <p class="model-errors">
+        <ValidationSummary Model="person" class="model-summary-custom-class" />
+    </p>
+
+    <p class="all-errors">
+        <ValidationSummary />
+    </p>
+</EditForm>
+
+<ul>@foreach (var entry in submissionLog) {
+<li class="submission-log-entry">@entry</li>
+}
+</ul>
+
+@code {
+    Person person = new Person();
+
+    List<string> submissionLog = new List<string>(); // So we can assert about the callbacks
+
+    void HandleValidSubmit()
+    {
+        submissionLog.Add("OnValidSubmit");
+    }
+}

src/Components/test/testassets/Components.TestServer/RazorComponents/ValidationModels/PersonModel.cs

@@ -0,0 +1,28 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+using System.ComponentModel.DataAnnotations;
+using Microsoft.Extensions.Validation;
+
+namespace BasicTestApp.ValidationModels;
+#pragma warning disable ASP0029 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
+[ValidatableType]
+#pragma warning restore ASP0029 // Type is for evaluation purposes only and is subject to change or removal in future updates. Suppress this diagnostic to proceed.
+public class Person : IValidatableObject
+{
+    [Required]
+    public bool IsACat { get; set; }
+
+    [Range(0, int.MaxValue, ErrorMessage = "Under-zeros should not be filling out forms")]
+    public int AgeInYears { get; set; }
+
+    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
+    {
+        var minAge = IsACat ? 3 : 18;
+        if (AgeInYears < minAge)
+        {
+            // Supply a model-level error (i.e., not attached to a specific property)
+            yield return new ValidationResult($"Sorry, you're not old enough as a {(IsACat ? "cat" : "non-cat")}");
+        }
+    }
+}