Klantinteractie-Servicesysteem · felixcicatt · Dec 19, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/.github/workflows/playwright.yaml b/.github/workflows/playwright.yaml
@@ -7,6 +7,15 @@ on:
     paths: ['Kiss.Bff.EndToEndTest/**']
   workflow_dispatch:
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: false
+
 jobs:
   test:
     timeout-minutes: 60
@@ -31,27 +40,20 @@ jobs:
         'TestSettings:TEST_PASSWORD': '${{ secrets.PLAYWRIGHT_PASSWORD }}'
         'TestSettings:TEST_TOTP_SECRET': ${{ secrets.PLAYWRIGHT_TOTP_SECRET }}
         'TestSettings:TEST_BASE_URL': ${{ secrets.PLAYWRIGHT_BASE_URL }}
-    - name: Create html file
-      if: ${{ failure() && steps.e2e.conclusion == 'failure' }}
-      run: |
-        cd bin/Debug/net8.0/playwright-traces
-        my_string=$(echo *.zip)
-        IFS=' ' read -ra my_array <<< "$my_string"
-        result='<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Playwright traces</title></head><body><ul>'
-
-        #Print the split string
-        for i in "${my_array[@]}"
-        do
-            result+="<li><a target=\"_blank\" href=\"https://trace.playwright.dev/?trace=https://klantinteractie-servicesysteem.github.io/KISS-frontend/$i\">$i</a></li>"
-        done
-
-        result+="</ul></body></html>"
-        echo "$result"
-        echo "$result" > index.html
-    - name: Deploy to GitHub Pages
-      if: ${{ failure() && steps.e2e.conclusion == 'failure' }}
-      uses: peaceiris/actions-gh-pages@v4
+    - name: Upload artifact
+      if: ${{ always() }}
+      uses: actions/upload-pages-artifact@v3
       with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./Kiss.Bff.EndToEndTest/bin/Debug/net8.0/playwright-traces # directory of your reports
-        publish_branch: gh-pages/e2e # deploying to gh-pages branch
+        # directory of your reports
+        path: './Kiss.Bff.EndToEndTest/bin/Debug/net8.0/playwright-traces'
+  deploy:
+    if: ${{ always() && github.ref == 'refs/heads/main' && github.event_name != 'pull_request' }}
+    needs: test
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/Kiss.Bff.EndToEndTest/Helpers/AcceptAllDialogs.cs b/Kiss.Bff.EndToEndTest/Helpers/AcceptAllDialogs.cs
@@ -0,0 +1,19 @@
+namespace Kiss.Bff.EndToEndTest.Helpers
+{
+    public static class AcceptAllDialogsExtension
+    {
+        public static IDisposable AcceptAllDialogs(this IPage page)
+        {
+            page.Dialog += Accept;
+            return new DoOnDispose(() => page.Dialog -= Accept);
+        }
+
+        private static async void Accept(object? _, IDialog dialog) => await dialog.AcceptAsync();
+
+
+        private sealed class DoOnDispose(Action action) : IDisposable
+        {
+            public void Dispose() => action();
+        }
+    }
+}
diff --git a/Kiss.Bff.EndToEndTest/Helpers/Pagination.cs b/Kiss.Bff.EndToEndTest/Helpers/Pagination.cs
@@ -0,0 +1,25 @@
+namespace Kiss.Bff.EndToEndTest.Helpers
+{
+    internal static class Pagination
+    {
+        public static ILocator GetCurrentPageLink(this ILocator locator) => locator.Locator("[aria-current=page]").First;
+        public static ILocator GetNextPageLink(this ILocator locator) => locator.Locator("[rel='next']").First;
+        public static ILocator GetPreviousPageLink(this ILocator locator) => locator.Locator("[rel='prev']").First;
+        public static async Task<bool> IsDisabledPageLink(this ILocator locator)
+        {
+            await locator.WaitForAsync();
+
+            var classes = await locator.GetAttributeAsync("class");
+            if (classes == null) return false;
+            // when the page is disabled it doesn't get a disabled attribute.
+            // TODO: research if there is a better pattern for this that is compatible with the den haag pagination component:
+            // https://nl-design-system.github.io/denhaag/?path=/docs/react-navigation-pagination--docs
+            // Note that their component renders invalid html: a button with a rel attribute.
+            // this might serve as a source of inspiration:
+            // https://design.homeoffice.gov.uk/components?name=Pagination
+            // https://design-system.w3.org/components/pagination.html
+            return classes.Contains("denhaag-pagination__link--disabled")
+                || classes.Contains("denhaag-pagination__link--current");
+        }
+    }
+}
diff --git a/Kiss.Bff.EndToEndTest/Infrastructure/BaseTestInitializer.cs b/Kiss.Bff.EndToEndTest/Infrastructure/BaseTestInitializer.cs
diff --git a/Kiss.Bff.EndToEndTest/Infrastructure/KissPlaywrightTest.cs b/Kiss.Bff.EndToEndTest/Infrastructure/KissPlaywrightTest.cs
@@ -0,0 +1,155 @@
+using System.Collections.Concurrent;
+using System.Text.Encodings.Web;
+using Microsoft.Extensions.Configuration;
+
+
+namespace Kiss.Bff.EndToEndTest
+{
+    /// <summary>
+    /// Inherit this class in each test class. This does the following:<br/>
+    /// 1. Makes sure the user is logged in before each test starts<br/>
+    /// 2. Makes sure Playwright records traces for each test<br/>
+    /// 3. Exposes a <see cref="Step(string)"/> method to define test steps. These show up in the Playwright traces and in the test report.<br/>
+    /// 4. Builds a html test report after all tests in a test class are done.
+    /// We upload these to <a href="https://klantinteractie-servicesysteem.github.io/KISS-frontend/">github pages</a>
+    /// </summary>
+    [TestClass]
+    public class KissPlaywrightTest : PageTest
+    {
+        private const string StoragePath = "./auth.json";
+
+        private static readonly IConfiguration s_configuration = new ConfigurationBuilder()
+            .AddUserSecrets<KissPlaywrightTest>()
+            .AddEnvironmentVariables()
+            .Build();
+
+        private static readonly UniqueOtpHelper s_uniqueOtpHelper = new(GetRequiredConfig("TestSettings:TEST_TOTP_SECRET"));
+
+        // this is used to build a test report for each test
+        private static readonly ConcurrentDictionary<string, string> s_testReports = [];
+
+        private readonly List<string> _steps = [];
+
+        /// <summary>
+        /// This is run before each test
+        /// </summary>
+        /// <returns></returns>
+        [TestInitialize]
+        public virtual async Task TestInitialize()
+        {
+            // log in with azure ad
+            var username = GetRequiredConfig("TestSettings:TEST_USERNAME");
+            var password = GetRequiredConfig("TestSettings:TEST_PASSWORD");
+
+            var loginHelper = new AzureAdLoginHelper(Page, username, password, s_uniqueOtpHelper);
+            await loginHelper.LoginAsync();
+            // store the cookie so we stay logged in in each test
+            await Context.StorageStateAsync(new() { Path = StoragePath });
+
+            // start tracing. we do this AFTER logging in so the password doesn't end up in the tracing
+            await Context.Tracing.StartAsync(new()
+            {
+                Title = $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}",
+                Screenshots = true,
+                Snapshots = true,
+                Sources = true,
+            });
+        }
+
+        /// <summary>
+        /// Start a test step. This ends up in the test report and as group in the playwright tracing
+        /// </summary>
+        /// <param name="description"></param>
+        /// <returns></returns>
+        protected async Task Step(string description)
+        {
+            await Context.Tracing.GroupEndAsync();
+            await Context.Tracing.GroupAsync(description);
+            _steps.Add(description);
+        }
+
+        /// <summary>
+        /// This is run after each test
+        /// </summary>
+        /// <returns></returns>
+        [TestCleanup]
+        public async Task TestCleanup()
+        {
+            // if we are in a group, end it
+            await Context.Tracing.GroupEndAsync();
+            var fileName = $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}.zip";
+            var fullPath = Path.Combine(Environment.CurrentDirectory, "playwright-traces", fileName);
+
+            // stop tracing and save a zip file in the output directory
+            await Context.Tracing.StopAsync(new()
+            {
+                Path = fullPath
+            });
+
+            // build a html report containing the test steps and a link to the playwright traces viewer
+            var html = $"""
+            <div data-outcome="{TestContext.CurrentTestOutcome}">
+                <h2>{HtmlEncoder.Default.Encode(TestContext.TestName ?? "")}</h2>
+                <a target="_blank" href="https://trace.playwright.dev/?trace=https://klantinteractie-servicesysteem.github.io/KISS-frontend/{fileName}">Playwright tracing</a>
+                <p>Steps:</p>
+                <ol>{string.Join("", _steps.Select(step => $"""
+                    <li>{HtmlEncoder.Default.Encode(step)}</li>
+                """))}
+                </ol>
+            </div>
+            """;
+
+            s_testReports.TryAdd(TestContext.TestName!, html);
+        }
+
+        /// <summary>
+        /// This is run after all tests in a test class are done
+        /// </summary>
+        /// <returns></returns>
+        [ClassCleanup(InheritanceBehavior.BeforeEachDerivedClass)]
+        public static async Task ClassCleanup()
+        {
+            // combine the reports for each test in a single html file
+            var html = $$"""
+            <!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src https://unpkg.com/[email protected]/simple.min.css 'sha256-l0D//z1BZPnhAdIJ0lA8dsfuil0AB4xBpnOa/BhNVoU=';">
+                <title>Playwright traces</title>
+                <link rel="stylesheet" href="https://unpkg.com/[email protected]/simple.min.css" integrity="sha384-Cxvt41nwdtHMOjpCqr+FaCybNL58LeIc0vPSLR4KlFSCBrHTb095iJbbw+hDTklQ" crossorigin="anonymous">
+                <style>[data-outcome=Failed]{color: var(--code)}[data-outcome=Inconclusive]{color: var(--text-light);font-style: italic;}[data-outcome=Inconclusive] a{display:none}</style>
+            </head>
+            <body>
+                <main>
+                    {{string.Join("", s_testReports.OrderBy(x=> x.Key).Select(x=> x.Value))}}
+                </main>
+            </body>
+            """;
+
+            using var writer = File.CreateText(Path.Combine(Environment.CurrentDirectory, "playwright-traces", "index.html"));
+            await writer.WriteLineAsync(html);
+        }
+
+        private static string GetRequiredConfig(string key)
+        {
+            var value = s_configuration[key];
+            if (string.IsNullOrEmpty(value))
+            {
+                throw new InvalidOperationException($"'{key}' is missing from the configuration");
+            }
+            return value;
+        }
+
+        public override BrowserNewContextOptions ContextOptions()
+        {
+            return new(base.ContextOptions())
+            {
+                BaseURL = GetRequiredConfig("TestSettings:TEST_BASE_URL"),
+                // save auth state so we don't need to log in in every single test
+                StorageStatePath = File.Exists(StoragePath) ? StoragePath : null,
+            };
+        }
+    }
+}
diff --git a/Kiss.Bff.EndToEndTest/Kiss.Bff.EndToEndTest.csproj b/Kiss.Bff.EndToEndTest/Kiss.Bff.EndToEndTest.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
@@ -12,12 +12,12 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="8.0.0" />
-    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.10.0" />
-    <PackageReference Include="MSTest.TestAdapter" Version="3.5.0" />
-    <PackageReference Include="MSTest.TestFramework" Version="3.5.0" />
-    <PackageReference Include="Microsoft.Playwright.MSTest" Version="1.45.1" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="8.0.1" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="8.0.1" />
+    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
+    <PackageReference Include="MSTest.TestAdapter" Version="3.6.4" />
+    <PackageReference Include="MSTest.TestFramework" Version="3.6.4" />
+    <PackageReference Include="Microsoft.Playwright.MSTest" Version="1.49.0" />
     <PackageReference Include="coverlet.collector" Version="6.0.2">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>