Issue #352 - Improve the overall design of the reports

.gitattributes

@@ -1,2 +1,3 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
+*.epgz filter=lfs diff=lfs merge=lfs -text

.github/workflows/dotnetCi.yml

@@ -45,7 +45,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
           lfs: true
@@ -55,7 +55,7 @@ jobs:
       - name: Add .NET global tools location to PATH
         run: echo "$HOME/.dotnet/tools" >> "$GITHUB_PATH"
       - name: Install .NET
-        uses: actions/setup-dotnet@v4
+        uses: actions/setup-dotnet@v5
         with:
           dotnet-version: ${{ env.DotnetVersion }}
       - name: Install SonarScanner
@@ -123,7 +123,7 @@ jobs:
               echo "failures=true" >> "$GITHUB_OUTPUT"
             fi
           done
-      - name: Run JavaScript tests with coverage
+      - name: Run Client script tests with coverage
         id: js_tests
         shell: bash {0}
         run: |
@@ -146,24 +146,26 @@ jobs:
         run: killall Xvfb
         continue-on-error: true
       - name: Upload .NET test results artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: NUnit test results
           path: Tests/*.Tests/**/TestResults.xml
-      # This step won't produce any artifacts if the verbose factory isn't
-      # selected via appsettings.json in CSF.Screenplay.Selenium.Tests, but that's OK
       - name: Upload verbose webdriver log artifacts
-        uses: actions/upload-artifact@v4
+        # This step is only relevant if the ChromeDriver with verbose logging is selected, such as via
+        # appsettings.json in CSF.Screenplay.Selenium.Tests.
+        # If verbose logs aren't created then this step is skipped to avoid a build warning about missing artifacts.
+        if: ${{ hashFiles('**/chrome-verbose-log.txt') != '' }}
+        uses: actions/upload-artifact@v7
         with:
           name: Verbose webdriver logs
           path: '**/chrome-verbose-log.txt'
       - name: Upload JS test results artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
-          name: Jest test results
+          name: Client script test results
           path: CSF.Screenplay.JsonToHtmlReport.Template/src/TestResults/**/*
       - name: Upload Screenplay JSON report artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: Screenplay JSON reports
           path: Tests/**/ScreenplayReport.json
@@ -177,7 +179,7 @@ jobs:
             dotnet run --no-build --framework $Tfm -c ${{ env.Configuration }} --project CSF.Screenplay.JsonToHtmlReport --ReportPath "$report" --OutputPath "$outputFile"
           done
       - name: Upload Screenplay HTML report artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: Screenplay HTML reports
           path: Tests/**/ScreenplayReport.html
@@ -194,14 +196,14 @@ jobs:
       - name: Build, in release configuration
         run: dotnet pack -p:VersionSuffix=$VersionSuffix -o packages
       - name: Upload build result artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: Build results (NuGet)
           path: packages/*.nupkg
       - name: Build docs website
         run: dotnet build -c Docs
       - name: Upload docs website artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: Docs website
           path: docs/**/*

.sonarqube-analysisproperties.xml

@@ -2,12 +2,12 @@
 <SonarQubeAnalysisProperties xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                              xmlns:xsd="http://www.w3.org/2001/XMLSchema"
                              xmlns="http://www.sonarsource.com/msbuild/integration/2015/1">
-  <Property Name="sonar.coverage.exclusions">Tests\**\*,**\*Exception.cs,**\*.spec.js,**\*.config.js,CSF.Screenplay.Selenium\Resources\**\*.js</Property>
+  <Property Name="sonar.coverage.exclusions">Tests\**\*,**\*Exception.cs,**\*.spec.ts,**\*.config.ts,CSF.Screenplay.Selenium\Resources\**\*.js</Property>
   <Property Name="sonar.exclusions">docs\**\*,*_old\**\*</Property>
-  <Property Name="sonar.cpd.exclusions">Tests\**\*,**\*.spec.js</Property>
+  <Property Name="sonar.cpd.exclusions">Tests\**\*,**\*.spec.ts</Property>
   <Property Name="sonar.cs.nunit.reportsPaths">Tests\**\TestResults.xml</Property>
   <Property Name="sonar.cs.opencover.reportsPaths">TestResults\*.opencover.xml</Property>
   <Property Name="sonar.scanner.scanAll">false</Property>
-  <Property Name="sonar.test.inclusions">Tests\**\*,**\*.spec.js</Property>
+  <Property Name="sonar.test.inclusions">Tests\**\*,**\*.spec.ts</Property>
   <Property Name="sonar.scanner.skipJreProvisioning">true</Property>
 </SonarQubeAnalysisProperties>

.vscode/settings.json

@@ -3,5 +3,5 @@
         "Tests/CSF.Screenplay.SpecFlow.Tests/StepDefinitions/**/*.cs",
         "Tests/CSF.Screenplay.Reqnroll.Tests/StepDefinitions/**/*.cs"
     ],
-    "cucumberautocomplete.strictGherkinCompletion": true,
+    "cucumberautocomplete.strictGherkinCompletion": true
 }

.vscode/tasks.json

@@ -54,7 +54,7 @@
 			},
 			"type": "shell",
 			"command": "npm",
-			"args": ["test"],
+			"args": ["run", "test"],
 			"problemMatcher": [],
 			"label": "npm: test (Javascript)",
 			"options": {
@@ -92,6 +92,32 @@
 			"options": {
 				"cwd": "${workspaceFolder}/CSF.Screenplay.JsonToHtmlReport.Template/src"
 			}
+		},
+		{
+			"group": {
+				"kind": "build"
+			},
+			"type": "shell",
+			"command": "npm",
+			"args": ["run", "dev"],
+			"problemMatcher": [],
+			"label": "npm: dev (Javascript)",
+			"options": {
+				"cwd": "${workspaceFolder}/CSF.Screenplay.JsonToHtmlReport.Template/src"
+			}
+		},
+		{
+			"group": {
+				"kind": "build"
+			},
+			"type": "shell",
+			"command": "npm",
+			"args": ["run", "build"],
+			"problemMatcher": [],
+			"label": "npm: build (Javascript)",
+			"options": {
+				"cwd": "${workspaceFolder}/CSF.Screenplay.JsonToHtmlReport.Template/src"
+			}
 		}
 	]
 }

CSF.Screenplay.Docs/images/Report view mode design.README.txt

@@ -0,0 +1,4 @@
+This .epgz file is a Pencil document.
+Download the open source editor at https://pencil.evolus.vn/
+
+It is a design mockup for an improved report format.

CSF.Screenplay.JsonToHtmlReport.Template/CSF.Screenplay.JsonToHtmlReport.Template.proj

@@ -4,7 +4,7 @@
     <TemplateSourceDir>$(MSBuildProjectDirectory)\src</TemplateSourceDir>
     <OutputPath>$(MSBuildProjectDirectory)\..\CSF.Screenplay.JsonToHtmlReport\template</OutputPath>
     <TemplateOutputFile>$(OutputPath)\template.html</TemplateOutputFile>
-        <IsPackable>false</IsPackable>
+    <IsPackable>false</IsPackable>
   </PropertyGroup>
 
   <!-- We're not explicitly using anything in this targets file but without it there's an unwanted build warning for the 'Restore' target -->
@@ -24,16 +24,11 @@
           DependsOnTargets="EnsureTemplateDirectories"
           Inputs="$(TemplateSourceDir)\**\*"
           Outputs="$(OutputPath)">
-    <PropertyGroup>
-      <WebpackTask Condition="'$(Configuration)' == 'Debug'">buildDev</WebpackTask>
-      <WebpackTask Condition="'$(Configuration)' != 'Debug'">buildProd</WebpackTask>
-      <NodeCommand>npm</NodeCommand>
-    </PropertyGroup>
 
     <Error Text="Template source directory not found at $(TemplateSourceDir)" 
            Condition="!Exists('$(TemplateSourceDir)')" />
 
-    <Exec Command="$(NodeCommand) run $(WebpackTask) -- --output-path $(OutputPath)"
+    <Exec Command="npm run build -- --emptyOutDir --outDir $(OutputPath)"
           WorkingDirectory="$(TemplateSourceDir)"
           ContinueOnError="false" />
 

CSF.Screenplay.JsonToHtmlReport.Template/src/css/content.css

@@ -10,9 +10,8 @@
         font-family: Arial, Helvetica, sans-serif;
     }
     h1 {
-        font-size: 2.5em;
+        font-size: 1.8em;
         line-height: 1.35em;
-        margin: 0.2em 0 0.1em 1em;
     }
     h2 {
         font-size: 1.4em;
@@ -26,17 +25,28 @@
         font-weight: bold;
     }
     h4 {
+        font-size: 1.05em;
         line-height: 1.35em;
         margin: 0.4em 0 0;
-        font-weight: bold;
-    }
-    body > footer {
-        color: #666;
+        font-weight: normal;
     }
-    body > footer a {
-        color: #88A;
+    body > main > section > h2 {
+        display: none;
     }
-    body > footer a:hover {
-        color: #66D
+    @media screen and (max-width: 900px) {
+        h3 {
+            font-size: 1.3em;
+            line-height: 1.3em;
+            font-weight: normal;
+        }
+        h4 {
+            font-size: 1.1em;
+            line-height: 1.3em;
+            font-weight: normal;
+        }
+        main > section {
+            font-size: 0.9em;
+            padding: 0.5em 0;
+        }
     }
 }