Changed approval tests to shouldly should match approved to avoid weird errors

Fixed problem with changing context tests - split out html helpers and tag helpers

Author: robdmoore

ChameleonForms.AcceptanceTests/ChameleonForms.AcceptanceTests.csproj

@@ -11,7 +11,6 @@
   <ItemGroup>
     <PackageReference Include="AngleSharp" Version="0.14.0" />
     <PackageReference Include="AngleSharp.Io" Version="0.14.0" />
-    <PackageReference Include="ApprovalTests" Version="3.0.18" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="3.1.3" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.9.0" />
     <PackageReference Include="Shouldly" Version="3.0.2" />

ChameleonForms.AcceptanceTests/IntegrationTests/ChangingContextTests.cs

@@ -56,5 +56,41 @@ public async Task Post_child_view_model_and_bind_to_parent_on_postback()
             IsSame.ViewModelAs(enteredViewModel, page.ReadParentModel());
             page.HasValidationErrors().ShouldBeFalse();
         }
+
+        [Fact]
+        public async Task Post_different_view_model_and_bind_on_postback_taghelpers()
+        {
+            var enteredViewModel = ObjectMother.ChangingContextViewModels.DifferentViewModel;
+
+            var page = await _client.GetPageAsync<ChangingContextPage>("/ExampleForms/ChangingContextTH");
+            page = await page.PostDifferentModelAsync(enteredViewModel); ;
+
+            IsSame.ViewModelAs(enteredViewModel, page.ReadDifferentModel());
+            page.HasValidationErrors().ShouldBeFalse();
+        }
+
+        [Fact]
+        public async Task Post_child_view_model_and_bind_on_postback_taghelpers()
+        {
+            var enteredViewModel = ObjectMother.ChangingContextViewModels.ChildViewModel;
+
+            var page = await _client.GetPageAsync<ChangingContextPage>("/ExampleForms/ChangingContextTH");
+            page = await page.PostChildModelAsync(enteredViewModel);
+
+            IsSame.ViewModelAs(enteredViewModel, page.ReadChildModel());
+            page.HasValidationErrors().ShouldBeFalse();
+        }
+
+        [Fact]
+        public async Task Post_child_view_model_and_bind_to_parent_on_postback_taghelpers()
+        {
+            var enteredViewModel = ObjectMother.ChangingContextViewModels.ParentViewModel;
+
+            var page = await _client.GetPageAsync<ChangingContextPage>("/ExampleForms/ChangingContextTH");
+            page = await page.PostParentModelAsync(enteredViewModel);
+
+            IsSame.ViewModelAs(enteredViewModel, page.ReadParentModel());
+            page.HasValidationErrors().ShouldBeFalse();
+        }
     }
 }

ChameleonForms.AcceptanceTests/IntegrationTests/PartialForTests.Should_render_correctly_when_used_via_form_or_section_and_when_used_for_top_level_property_or_sub_property.approved.html

@@ -10,7 +10,7 @@ <h1>Partials</h1>
 
 @using (var f = Html.BeginChameleonForm())
 {
-    @Html.Partial("_ParentPartial")
+    @await Html.PartialAsync("_ParentPartial")
     @(await Html.PartialAsync("_BaseParentPartial"))
     @(await f.PartialForAsync(m => m.Child, "_ChildPartial"))
     @(await f.PartialForAsync(m => m.BaseChild, "_BaseChildPartial"))
@@ -209,4 +209,5 @@ <h1>Partials</h1>
     </fieldset>
         <div class="form_navigation">
 <button type="submit">Submit</button>        </div>
+<input name="__RequestVerificationToken" type="hidden" value="...">
     </form>

ChameleonForms.AcceptanceTests/IntegrationTests/PartialForTests.Should_render_correctly_when_used_via_form_or_section_and_when_used_for_top_level_property_or_sub_property_via_tag_helpers.approved.html

@@ -226,4 +226,5 @@ <h1>Partials - Tag Helpers</h1>
         <button type="submit">Submit</button>
             </div>
 
+<input name="__RequestVerificationToken" type="hidden" value="...">
     </form>

ChameleonForms.AcceptanceTests/IntegrationTests/PartialForTests.cs

@@ -2,18 +2,16 @@
 using System.Net.Http;
 using System.Text.RegularExpressions;
 using System.Threading.Tasks;
-using ApprovalTests.Html;
-using ApprovalTests.Reporters;
 using ChameleonForms.AcceptanceTests.Helpers;
 using Microsoft.AspNetCore.Mvc.Testing;
+using Shouldly;
 using Xunit;
 
 namespace ChameleonForms.AcceptanceTests.IntegrationTests
 {
     /// <summary>
     /// Loading partial views is very difficult to test by unit testing.
     /// </summary>
-    [UseReporter(typeof(DiffReporter))]
     public class PartialForTests : IClassFixture<WebApplicationFactory<Example.Startup>>
     {
         private readonly HttpClient _client;
@@ -33,14 +31,18 @@ public PartialForTests(WebApplicationFactory<Example.Startup> factory)
         public async Task Should_render_correctly_when_used_via_form_or_section_and_when_used_for_top_level_property_or_sub_property()
         {
             var renderedSource = await GetRenderedSourceAsync("/ExampleForms/Partials");
-            HtmlApprovals.VerifyHtml($"Partials.cshtml\r\n\r\n{GetViewContents("Partials")}\r\n=====\r\n\r\n_ParentPartial.cshtml\r\n\r\n{GetViewContents("_ParentPartial")}\r\n=====\r\n\r\n_ChildPartial.cshtml\r\n\r\n{GetViewContents("_ChildPartial")}\r\n=====\r\n\r\n_BaseParentPartial.cshtml\r\n\r\n{GetViewContents("_BaseParentPartial")}\r\n=====\r\n\r\n_BaseChildPartial.cshtml\r\n\r\n{GetViewContents("_BaseChildPartial")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}");
+            var received = $"Partials.cshtml\r\n\r\n{GetViewContents("Partials")}\r\n=====\r\n\r\n_ParentPartial.cshtml\r\n\r\n{GetViewContents("_ParentPartial")}\r\n=====\r\n\r\n_ChildPartial.cshtml\r\n\r\n{GetViewContents("_ChildPartial")}\r\n=====\r\n\r\n_BaseParentPartial.cshtml\r\n\r\n{GetViewContents("_BaseParentPartial")}\r\n=====\r\n\r\n_BaseChildPartial.cshtml\r\n\r\n{GetViewContents("_BaseChildPartial")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}";
+            received = received.SanitiseRequestVerificationToken();
+            received.ShouldMatchApproved(b => b.WithFileExtension(".html"));
         }
 
         [Fact]
         public async Task Should_render_correctly_when_used_via_form_or_section_and_when_used_for_top_level_property_or_sub_property_via_tag_helpers()
         {
             var renderedSource = await GetRenderedSourceAsync("/ExampleForms/PartialsTH");
-            HtmlApprovals.VerifyHtml($"PartialsTH.cshtml\r\n\r\n{GetViewContents("PartialsTH")}\r\n=====\r\n\r\n_ParentPartialTH.cshtml\r\n\r\n{GetViewContents("_ParentPartialTH")}\r\n=====\r\n\r\n_ChildPartialTH.cshtml\r\n\r\n{GetViewContents("_ChildPartialTH")}\r\n=====\r\n\r\n_BaseParentPartialTH.cshtml\r\n\r\n{GetViewContents("_BaseParentPartialTH")}\r\n=====\r\n\r\n_BaseChildPartialTH.cshtml\r\n\r\n{GetViewContents("_BaseChildPartialTH")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}");
+            var received = $"PartialsTH.cshtml\r\n\r\n{GetViewContents("PartialsTH")}\r\n=====\r\n\r\n_ParentPartialTH.cshtml\r\n\r\n{GetViewContents("_ParentPartialTH")}\r\n=====\r\n\r\n_ChildPartialTH.cshtml\r\n\r\n{GetViewContents("_ChildPartialTH")}\r\n=====\r\n\r\n_BaseParentPartialTH.cshtml\r\n\r\n{GetViewContents("_BaseParentPartialTH")}\r\n=====\r\n\r\n_BaseChildPartialTH.cshtml\r\n\r\n{GetViewContents("_BaseChildPartialTH")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}";
+            received = received.SanitiseRequestVerificationToken();
+            received.ShouldMatchApproved(b => b.WithFileExtension(".html"));
         }
 
         private async Task<string> GetRenderedSourceAsync(string url)

ChameleonForms.AcceptanceTests/IntegrationTests/StringExtensions.cs

@@ -0,0 +1,14 @@
+using System.Text.RegularExpressions;
+
+namespace ChameleonForms.AcceptanceTests.IntegrationTests
+{
+    public static class StringExtensions
+    {
+        private static readonly Regex RequestVerificationToken = new Regex("<input name=\"__RequestVerificationToken\" type=\"hidden\" value=\".+?\">", RegexOptions.IgnoreCase);
+
+        public static string SanitiseRequestVerificationToken(this string html)
+        {
+            return RequestVerificationToken.Replace(html, "<input name=\"__RequestVerificationToken\" type=\"hidden\" value=\"...\">");
+        }
+    }
+}

ChameleonForms.AcceptanceTests/IntegrationTests/TagHelperTests.Should_render_correctly.approved.html

@@ -27,7 +27,7 @@ <h1>ChameleonForms TagHelpers example</h1>
 
     <form-section heading="Additional details">
         <field for="Bio" />
-        <field for="Homepage" placeholder="http://" />
+        <field for="Homepage" placeholder="https://" />
     </form-section>
 
     <form-message type="Action" heading="Confirm the Terms & Conditions">
@@ -119,7 +119,7 @@ <h3>Signup for an account</h3>
 
                     <dt><label for="Homepage">Homepage</label></dt>
             <dd>
-                <input id="Homepage" name="Homepage" placeholder="http://" type="url" value=""> <span class="field-validation-valid" data-valmsg-for="Homepage" data-valmsg-replace="true"></span>
+                <input id="Homepage" name="Homepage" placeholder="https://" type="url" value=""> <span class="field-validation-valid" data-valmsg-for="Homepage" data-valmsg-replace="true"></span>
             </dd>
 
             </dl>
@@ -144,4 +144,5 @@ <h3>Confirm the Terms &amp; Conditions</h3>
         <button class="btn-primary" type="submit">Signup</button>
             </div>
 
+<input name="__RequestVerificationToken" type="hidden" value="...">
     </form>

ChameleonForms.AcceptanceTests/IntegrationTests/TagHelperTests.cs

@@ -2,15 +2,13 @@
 using System.Net.Http;
 using System.Text.RegularExpressions;
 using System.Threading.Tasks;
-using ApprovalTests.Html;
-using ApprovalTests.Reporters;
 using ChameleonForms.AcceptanceTests.Helpers;
 using Microsoft.AspNetCore.Mvc.Testing;
+using Shouldly;
 using Xunit;
 
 namespace ChameleonForms.AcceptanceTests.IntegrationTests
 {
-    [UseReporter(typeof(DiffReporter))]
     public class TagHelperTests : IClassFixture<WebApplicationFactory<Example.Startup>>
     {
         private readonly HttpClient _client;
@@ -30,7 +28,9 @@ public TagHelperTests(WebApplicationFactory<Example.Startup> factory)
         public async Task Should_render_correctly()
         {
             var renderedSource = await GetRenderedSourceAsync("/Comparison/ChameleonFormsTH");
-            HtmlApprovals.VerifyHtml($"ChameleonFormsTH.cshtml\r\n\r\n{GetViewContents("Comparison/ChameleonFormsTH")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}");
+            var received = $"ChameleonFormsTH.cshtml\r\n\r\n{GetViewContents("Comparison/ChameleonFormsTH")}\r\n=====\r\n\r\nRendered Source\r\n\r\n{renderedSource}";
+            received = received.SanitiseRequestVerificationToken();
+            received.ShouldMatchApproved(b => b.WithFileExtension(".html"));
         }
 
         private async Task<string> GetRenderedSourceAsync(string url)

ChameleonForms.Example/Controllers/ExampleFormsController.cs

@@ -116,34 +116,39 @@ public ActionResult ChangingContext()
             return View(new ParentViewModel{Child = new ChildViewModel { ChildField = "Initial value from controller"}});
         }
 
+        public ActionResult ChangingContextTH()
+        {
+            return View(new ParentViewModel { Child = new ChildViewModel { ChildField = "Initial value from controller" } });
+        }
+
         [HttpPost]
-        public ActionResult PostDifferentModel(BasicViewModel vm)
+        public ActionResult PostDifferentModel(BasicViewModel vm, bool tagHelpers)
         {
             ViewBag.Action = "PostDifferentModel";
             ViewBag.ModelType = vm.GetType().Name;
             ViewBag.BoundModelData = JsonSerializer.Serialize(vm, new JsonSerializerOptions{WriteIndented = true});
             ViewBag.BoundModel = vm;
-            return View("ChangingContext");
+            return View(tagHelpers ? "ChangingContextTH" : "ChangingContext");
         }
 
         [HttpPost]
-        public ActionResult PostChildViewModel(ChildViewModel vm)
+        public ActionResult PostChildViewModel(ChildViewModel vm, bool tagHelpers)
         {
             ViewBag.Action = "PostChildViewModel";
             ViewBag.ModelType = vm.GetType().Name;
             ViewBag.BoundModelData = JsonSerializer.Serialize(vm, new JsonSerializerOptions { WriteIndented = true });
             ViewBag.BoundModel = vm;
-            return View("ChangingContext");
+            return View(tagHelpers ? "ChangingContextTH" : "ChangingContext");
         }
 
         [HttpPost]
-        public ActionResult PostParentViewModel(ParentViewModel vm)
+        public ActionResult PostParentViewModel(ParentViewModel vm, bool tagHelpers)
         {
             ViewBag.Action = "PostParentViewModel";
             ViewBag.ModelType = vm.GetType().Name;
             ViewBag.BoundModelData = JsonSerializer.Serialize(vm, new JsonSerializerOptions { WriteIndented = true });
             ViewBag.BoundModel = vm;
-            return View("ChangingContext");
+            return View(tagHelpers ? "ChangingContextTH" : "ChangingContext");
         }
     }
 

ChameleonForms.Example/Views/ExampleForms/ChangingContext.cshtml

@@ -5,7 +5,9 @@
     var differentViewModel = new BasicViewModel { RequiredString = "Initial value" };
 }
 
-<h1>Changing the context of HTML helper</h1>
+<h1>Changing the context of HTML helper - HTML Helpers</h1>
+
+<p><a asp-action="ChangingContextTH">Tag Helpers</a>.</p>
 
 <p>There are three separate forms tied to three different post actions. Turn off JavaScript, clear all the text fields and hit each of the three submit buttons and also play with putting in values and submitting the values to see how they are bound back.</p>
 
@@ -23,13 +25,7 @@
     </ul>
 }
 
-<h2>Completely different model - Tag Helpers</h2>
-
-<p><code>&lt;partial name="_FormAgainstDifferentModel" model="differentViewModel" /&gt;</code></p>
-
-<partial name="_FormAgainstDifferentModel" model="differentViewModel" />
-
-<h2>Completely different model - HTML Helpers</h2>
+<h2>Completely different model</h2>
 
 <p><code>@@using (var f = Html.BeginChameleonFormFor(new BasicViewModel { RequiredString = "Initial value" }, Url.Action("PostDifferentModel")))</code></p>
 
@@ -46,13 +42,7 @@
     }
 }
 
-<h2>Sub model (binding to itself) - Tag Helpers</h2>
-
-<p><code>&lt;partial name="_FormAgainstChildProperty" for="Child" /&gt;</code></p>
-
-<partial name="_FormAgainstChildProperty" for="Child" />
-
-<h2>Sub model (binding to itself) - HTML Helpers</h2>
+<h2>Sub model (binding to itself)</h2>
 
 <p><code>@@using (var f = Html.BeginChameleonFormFor(m => m.Child, Url.Action("PostChildViewModel")))</code></p>
 
@@ -69,22 +59,7 @@
     }
 }
 
-
-<h2>Sub model (binding to parent) - Tag Helpers</h2>
-
-<p><code>&lt;form-partial name="_FormPartialAgainstChildProperty" for="Child" /&gt;</code></p>
-
-<chameleon-form action="@Url.Action("PostParentViewModel")">
-
-    <form-partial name="_FormPartialAgainstChildProperty" for="Child" />
-
-    <form-navigation>
-        <submit-button label="Submit" add-class="parent-model" />
-    </form-navigation>
-
-</chameleon-form>
-
-<h2>Sub model (binding to parent) - HTML Helpers</h2>
+<h2>Sub model (binding to parent)</h2>
 
 <p><code>@@using (var f = Html.For(m => m.Child, bindFieldsToParent: true).BeginChameleonForm(Url.Action("PostParentViewModel")))</code></p>
 

ChameleonForms.Example/Views/ExampleForms/ChangingContextTH.cshtml

@@ -0,0 +1,52 @@
+@model ParentViewModel
+
+@{
+    ViewBag.Title = "Changing context";
+    var differentViewModel = new BasicViewModel { RequiredString = "Initial value" };
+}
+
+<h1>Changing the context of the model - Tag Helpers</h1>
+
+<p><a asp-action="ChangingContext">HTML Helpers</a>.</p>
+
+<p>There are three separate forms tied to three different post actions. Turn off JavaScript, clear all the text fields and hit each of the three submit buttons and also play with putting in values and submitting the values to see how they are bound back.</p>
+
+@if (Context.Request.Method.ToUpperInvariant() == "POST")
+{
+    if (ViewBag.Action == "PostDifferentModel")
+    {
+        differentViewModel = ViewBag.BoundModel;
+    }
+    <h2>Binding data</h2>
+    <ul>
+        <li><strong>Action:</strong> @ViewBag.Action</li>
+        <li><strong>Model type:</strong> @ViewBag.ModelType</li>
+        <li><strong>Model data:</strong> <pre>@ViewBag.BoundModelData</pre></li>
+    </ul>
+}
+
+<h2>Completely different model</h2>
+
+<p><code>&lt;partial name="_FormAgainstDifferentModel" model="differentViewModel" /&gt;</code></p>
+
+<partial name="_FormAgainstDifferentModel" model="differentViewModel" />
+
+<h2>Sub model (binding to itself)</h2>
+
+<p><code>&lt;partial name="_FormAgainstChildProperty" model="Model?.Child" /&gt;</code></p>
+
+<partial name="_FormAgainstChildProperty" model="Model?.Child" />
+
+<h2>Sub model (binding to parent)</h2>
+
+<p><code>&lt;form-partial name="_FormPartialAgainstChildProperty" for="Child" /&gt;</code></p>
+
+<chameleon-form action="@Url.Action("PostParentViewModel")?tagHelpers=true">
+
+    <form-partial name="_FormPartialAgainstChildProperty" for="Child"/>
+
+    <form-navigation>
+        <submit-button label="Submit" add-class="parent-model"/>
+    </form-navigation>
+
+</chameleon-form>

ChameleonForms.Example/Views/ExampleForms/_FormAgainstChildProperty.cshtml

@@ -1,6 +1,6 @@
 @model ChildViewModel
 
-<chameleon-form action="@Url.Action("PostChildViewModel")">
+<chameleon-form action="@Url.Action("PostChildViewModel")?tagHelpers=true">
     <form-section>
         <field for="ChildField" />
         <field for="SomeEnum" />

ChameleonForms.Example/Views/ExampleForms/_FormAgainstDifferentModel.cshtml

@@ -1,11 +1,11 @@
 @model BasicViewModel
 
-<chameleon-form action="@Url.Action("PostDifferentModel")">
+<chameleon-form action="@Url.Action("PostDifferentModel")?tagHelpers=true">
     <form-section>
-        <field for="RequiredString" />
-        <field for="SomeCheckbox" />
+        <field for="RequiredString"/>
+        <field for="SomeCheckbox"/>
     </form-section>
     <form-navigation>
-        <submit-button add-class="different-model" label="Submit" />
+        <submit-button add-class="different-model" label="Submit"/>
     </form-navigation>
 </chameleon-form>

ChameleonForms.Example/Views/Home/Index.cshtml

@@ -33,7 +33,8 @@
     <li>@Html.ActionLink("Null list", "NullList", "ExampleForms")</li>
     <li>@Html.ActionLink("Buttons", "Buttons", "ExampleForms")</li>
     <li>@Html.ActionLink("Partials", "Partials", "ExampleForms") | @Html.ActionLink("Partials - Tag Helpers", "PartialsTH", "ExampleForms")</li>
-    <li>@Html.ActionLink("Changing HTML Helper context", "ChangingContext", "ExampleForms")</li>
+    <li>@Html.ActionLink("Changing model context - HTML Helpers", "ChangingContext", "ExampleForms")</li>
+    <li>@Html.ActionLink("Changing model context - Tag Helpers", "ChangingContextTH", "ExampleForms")</li>
 </ul>
 
 <h2>Random forms and UI tests</h2>

docs/different-form-models.md

@@ -190,7 +190,7 @@ Tag Helpers are explicitly tied to the model of the page so it's not possible to
 @model SomeViewModel
 
 <h1>Creating new xyz against @Model.ReadonlyProperty</h1>
-<partial name="_SomeViewModelInputForm" for="InputModel" />
+<partial name="_SomeViewModelInputForm" model="Model?.InputModel" />
 ```
 
 *_SomeViewModelInputForm.cshtml*
@@ -272,4 +272,4 @@ This is still easily possible, but it's just a little more verbose since it's li
 
 ## Try working examples
 
-See also the working examples in the [source code](https://github.com/MRCollective/ChameleonForms/blob/master/ChameleonForms.Example/Views/ExampleForms/ChangingContext.cshtml), which can be run so you can see how it works.
+See also the working examples in the [source](https://github.com/MRCollective/ChameleonForms/blob/master/ChameleonForms.Example/Views/ExampleForms/ChangingContextTH.cshtml) [code](https://github.com/MRCollective/ChameleonForms/blob/master/ChameleonForms.Example/Views/ExampleForms/ChangingContext.cshtml), which can be run so you can see how it works.