Add UI tests for request body compression

riganti · Feb 18, 2024 · dc1a62e · dc1a62e
1 parent 7a89c9c
commit dc1a62e
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 3 deletions.
diff --git a/src/Framework/Framework/Resources/Scripts/postback/http.ts b/src/Framework/Framework/Resources/Scripts/postback/http.ts
@@ -25,9 +25,9 @@ export async function postJSON<T>(url: string, postData: any, signal: AbortSigna
     headers.append('Content-Type', 'application/json');
     headers.append('X-DotVVM-PostBack', 'true');
     appendAdditionalHeaders(headers, additionalHeaders);
-    // if (postData.length > 1000 && options.compressPOST) {
-    //     postData = await compressString(postData, headers)
-    // }
+    if (postData.length > 1000 && options.compressPOST) {
+        postData = await compressString(postData, headers)
+    }
 
     return await fetchJson<T>(url, { body: postData, headers: headers, method: "POST", signal });
 }

diff --git a/src/Samples/Common/DotvvmStartup.cs b/src/Samples/Common/DotvvmStartup.cs
@@ -87,6 +87,12 @@ public void Configure(DotvvmConfiguration config, string applicationPath)
 
             config.Resources.RegisterStylesheetFile("bulma", "node_modules/bulma/css/bulma.css");
 
+            config.Runtime.CompressPostbacks.IncludeRoute("FeatureSamples_PostBack_RequestCompression");
+            if (config.ExperimentalFeatures.LazyCsrfToken.Enabled)
+                config.ExperimentalFeatures.LazyCsrfToken.ExcludeRoute("FeatureSamples_PostBack_RequestCompression");
+            if (config.ExperimentalFeatures.ServerSideViewModelCache.Enabled)
+                config.ExperimentalFeatures.ServerSideViewModelCache.ExcludeRoute("FeatureSamples_PostBack_RequestCompression");
+
             config.Markup.JavascriptTranslator.MethodCollection.AddMethodTranslator(typeof(JavascriptTranslationTestMethods),
                     nameof(JavascriptTranslationTestMethods.Unwrap),
                          new GenericMethodCompiler((a) =>

diff --git a/src/Samples/Common/ViewModels/FeatureSamples/PostBack/RequestCompressionViewModel.cs b/src/Samples/Common/ViewModels/FeatureSamples/PostBack/RequestCompressionViewModel.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using DotVVM.Framework.Hosting;
+using DotVVM.Framework.ViewModel;
+
+namespace DotVVM.Samples.BasicSamples.ViewModels.FeatureSamples.PostBack
+{
+    public class RequestCompressionViewModel : DotvvmViewModelBase
+    {
+        public string LargeField { get; set; } = new string('a', 100_000);
+
+        [Bind(Direction.ServerToClientFirstRequest)]
+        public int[] RequestSizes { get; set; } = new int[0];
+        [Bind(Direction.ServerToClientFirstRequest)]
+        public int[] ResponseSizes { get; set; } = new int[0];
+
+        public void Command()
+        {
+            LargeField += "b";
+        }
+
+        [AllowStaticCommand]
+        public static string StaticCommand(string data)
+        {
+            return data + "c";
+        }
+    }
+}
diff --git a/src/Samples/Common/Views/FeatureSamples/PostBack/RequestCompression.dothtml b/src/Samples/Common/Views/FeatureSamples/PostBack/RequestCompression.dothtml
@@ -0,0 +1,51 @@
+@viewModel DotVVM.Samples.BasicSamples.ViewModels.FeatureSamples.PostBack.RequestCompressionViewModel
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <h1>POST Request Gzip Compression</h1>
+
+    <p>
+        LargeField.Length = <span InnerText={value: LargeField.Length} data-ui="field-length"></span>
+    </p>
+    <p>
+        Request/Response Body size:
+        <table>
+            <dot:Repeater WrapperTagName="tr"  DataSource={value: RequestSizes} >
+                <td data-ui="request-size">{{value: _this}}</td>
+            </dot:Repeater>
+            <dot:Repeater WrapperTagName="tr"  DataSource={value: ResponseSizes} >
+                <td data-ui="response-size">{{value: _this}}</td>
+            </dot:Repeater>
+        </table>
+    </p>
+
+    <p>
+        <dot:Button Click={command: Command()} data-ui="button-command">Command</dot:Button>
+        <dot:Button Click={staticCommand: LargeField = RootViewModel.StaticCommand(LargeField)} data-ui="button-static-command"> StaticCommand</dot:Button>
+        <dot:Button Click={staticCommand: LargeField = LargeField + "d"} data-ui="button-client-side">Client-side StaticCommand</dot:Button>
+    </p>
+
+    <script type="text/javascript">
+        const fetchBackup = window.fetch;
+        window.fetch = function (url, init) {
+            console.log('fetch', url, init);
+            if (url == location.pathname && init.method == 'POST') {
+                const size = init.body?.size ?? new Blob([init.body]).size;
+                dotvvm.updateState(x => ({...x, RequestSizes: [...x.RequestSizes, size]}));
+            }
+            const result = fetchBackup.apply(window, arguments);
+            // result.then(async response => {
+            //     const responseSize = response.headers.get('Content-Length')
+            //     dotvvm.updateState(x => ({...x, ResponseSizes: [...x.ResponseSizes, responseSize]}));
+            // });
+            return result;
+        };
+    </script>
+</body>
+</html>
+
diff --git a/src/Samples/Tests/Abstractions/SamplesRouteUrls.designer.cs b/src/Samples/Tests/Abstractions/SamplesRouteUrls.designer.cs
diff --git a/src/Samples/Tests/Tests/Feature/PostBackTests.cs b/src/Samples/Tests/Tests/Feature/PostBackTests.cs
@@ -292,6 +292,29 @@ public void Feature_PostBack_PostBackHandlerCommandTypes()
             });
         }
 
+        [Fact]
+        public void Feature_PostBack_RequestCompression()
+        {
+            RunInAllBrowsers(browser => {
+                browser.NavigateToUrl(SamplesRouteUrls.FeatureSamples_PostBack_RequestCompression);
+                AssertUI.InnerTextEquals(browser.Single("field-length", SelectByDataUi), "100000");
+                browser.Single("button-command", SelectByDataUi).Click();
+                AssertUI.InnerTextEquals(browser.Single("field-length", SelectByDataUi), "100001");
+                int requestSize = int.Parse(browser.Last("request-size", SelectByDataUi).GetInnerText());
+                Assert.InRange(requestSize, 100, 2_000);
+
+                browser.Single("button-static-command", SelectByDataUi).Click();
+                AssertUI.InnerTextEquals(browser.Single("field-length", SelectByDataUi), "100002");
+                requestSize = int.Parse(browser.Last("request-size", SelectByDataUi).GetInnerText());
+                Assert.InRange(requestSize, 100, 2_000);
+                browser.FindElements("request-size", SelectByDataUi).ThrowIfDifferentCountThan(2);
+
+                browser.Single("button-client-side", SelectByDataUi).Click();
+                AssertUI.InnerTextEquals(browser.Single("field-length", SelectByDataUi), "100003");
+                browser.FindElements("request-size", SelectByDataUi).ThrowIfDifferentCountThan(2);
+            });
+        }
+
         public PostBackTests(ITestOutputHelper output) : base(output)
         {
         }