Merge pull request #246 from PDOK/html-tests

test: add e2e HTML validation tests
PDOK · Oct 1, 2024 · 14cfada · 14cfada
2 parents 2542661 + eb7d121
commit 14cfada
Show file tree

Hide file tree

Showing 25 changed files with 689 additions and 75 deletions.
diff --git a/internal/engine/templates/layout.go.html b/internal/engine/templates/layout.go.html
@@ -33,7 +33,7 @@
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:alt" content="{{ i18n "Logo" }}" />
 
-    <script type="text/javascript">
+    <script>
         // match window title to page title
         window.addEventListener("load", (event) => {
             if (document.getElementById("title")) {

diff --git a/internal/engine/testdata/expected_conformance.html b/internal/engine/testdata/expected_conformance.html
@@ -1,8 +1,8 @@
 <table class="table table-borderless table-sm">
   <thead>
   <tr>
-    <th>Conformance</th>
-    <th>Status</th>
+    <th scope="col">Conformance</th>
+    <th scope="col">Status</th>
   </tr>
   </thead>
   <tbody>
@@ -38,8 +38,8 @@ <h2 class="card-header h5">Features</h2>
       <table class="table table-borderless table-sm">
         <thead>
         <tr>
-          <th>Conformance</th>
-          <th>Status</th>
+          <th scope="col">Conformance</th>
+          <th scope="col">Status</th>
         </tr>
         </thead>
         <tbody>
@@ -75,8 +75,8 @@ <h2 class="card-header h5">Styles</h2>
       <table class="table table-borderless table-sm">
         <thead>
         <tr>
-          <th>Conformance</th>
-          <th>Status</th>
+          <th scope="col">Conformance</th>
+          <th scope="col">Status</th>
         </tr>
         </thead>
         <tbody>
@@ -100,8 +100,8 @@ <h2 class="card-header h5">3D GeoVolumes</h2>
       <table class="table table-borderless table-sm">
         <thead>
         <tr>
-          <th>Conformance</th>
-          <th>Status</th>
+          <th scope="col">Conformance</th>
+          <th scope="col">Status</th>
         </tr>
         </thead>
         <tbody>
@@ -121,8 +121,8 @@ <h2 class="card-header h5">Tiles</h2>
       <table class="table table-borderless table-sm">
         <thead>
         <tr>
-          <th>Conformance</th>
-          <th>Status</th>
+          <th scope="col">Conformance</th>
+          <th scope="col">Status</th>
         </tr>
         </thead>
         <tbody>

diff --git a/internal/ogc/common/core/templates/conformance.go.html b/internal/ogc/common/core/templates/conformance.go.html
@@ -18,8 +18,8 @@ <h2 class="card-header h5">Common</h2>
                 <table class="table table-borderless table-sm">
                     <thead>
                     <tr>
-                        <th>Conformance</th>
-                        <th>Status</th>
+                        <th scope="col">Conformance</th>
+                        <th scope="col">Status</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -59,8 +59,8 @@ <h2 class="card-header h5">Features</h2>
                     <table class="table table-borderless table-sm">
                         <thead>
                         <tr>
-                            <th>Conformance</th>
-                            <th>Status</th>
+                            <th scope="col">Conformance</th>
+                            <th scope="col">Status</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -125,8 +125,8 @@ <h2 class="card-header h5">Styles</h2>
                 <table class="table table-borderless table-sm">
                     <thead>
                     <tr>
-                        <th>Conformance</th>
-                        <th>Status</th>
+                        <th scope="col">Conformance</th>
+                        <th scope="col">Status</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -153,8 +153,8 @@ <h2 class="card-header h5">3D GeoVolumes</h2>
                 <table class="table table-borderless table-sm">
                     <thead>
                     <tr>
-                        <th>Conformance</th>
-                        <th>Status</th>
+                        <th scope="col">Conformance</th>
+                        <th scope="col">Status</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -177,8 +177,8 @@ <h2 class="card-header h5">Tiles</h2>
                 <table class="table table-borderless table-sm">
                     <thead>
                     <tr>
-                        <th>Conformance</th>
-                        <th>Status</th>
+                        <th scope="col">Conformance</th>
+                        <th scope="col">Status</th>
                     </tr>
                     </thead>
                     <tbody>
@@ -249,8 +249,8 @@ <h2 class="card-header h5">Processes</h2>
                 <table class="table table-borderless table-sm">
                     <thead>
                     <tr>
-                        <th>Conformance</th>
-                        <th>Status</th>
+                        <th scope="col">Conformance</th>
+                        <th scope="col">Status</th>
                     </tr>
                     </thead>
                     <tbody>

diff --git a/internal/ogc/features/templates/feature.go.html b/internal/ogc/features/templates/feature.go.html
@@ -38,7 +38,7 @@ <h1 class="title h2" id="title">{{ .Config.Title }} - {{ if and .Params.Metadata
         <table class="table table-striped">
             <thead>
             <tr>
-                <th colspan="2">{{ .Params.FeatureID }}</th>
+                <th colspan="2" scope="row">{{ .Params.FeatureID }}</th>
             </tr>
             </thead>
             <tbody>
@@ -86,7 +86,7 @@ <h1 class="title h2" id="title">{{ .Config.Title }} - {{ if and .Params.Metadata
     <div class="col-md-4 col-sm-12">
         <link rel="stylesheet" type="text/css" href="view-component/styles.css">
         <script type="module" src="view-component/main.js"></script>
-        <script type="text/javascript" src="view-component/polyfills.js"></script>
+        <script src="view-component/polyfills.js"></script>
 
         {{/* different viewer settings depending on whether features are map sheets or not */}}
         {{ if $mapSheetProperties }}

diff --git a/internal/ogc/features/templates/features.go.html b/internal/ogc/features/templates/features.go.html
@@ -159,7 +159,7 @@ <h2 class="card-header h5">
     <div class="col-md-6 col-sm-12">
         <link rel="stylesheet" type="text/css" href="view-component/styles.css">
         <script type="module" src="view-component/main.js"></script>
-        <script type="text/javascript" src="view-component/polyfills.js"></script>
+        <script src="view-component/polyfills.js"></script>
 
         {{/* different viewer settings depending on whether features are map sheets or not */}}
         {{ if $mapSheetProperties }}
@@ -267,7 +267,7 @@ <h2 class="card-header h5">
         <table class="table table-striped">
             <thead>
             <tr>
-                <th colspan="2"><a href="{{ $baseUrl }}/collections/{{ $.Params.CollectionID }}/items/{{ $feat.ID }}" aria-label="{{ i18n "To" }} feature {{ $feat.ID }}">{{ $feat.ID }}</a></th>
+                <th colspan="2" scope="row"><a href="{{ $baseUrl }}/collections/{{ $.Params.CollectionID }}/items/{{ $feat.ID }}" aria-label="{{ i18n "To" }} feature {{ $feat.ID }}">{{ $feat.ID }}</a></th>
             </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/features/testdata/expected_feature_4030.html b/internal/ogc/features/testdata/expected_feature_4030.html
@@ -1,7 +1,7 @@
         <table class="table table-striped">
             <thead>
             <tr>
-                <th colspan="2">4030</th>
+                <th colspan="2" scope="row">4030</th>
             </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/features/testdata/expected_foo_collection_snippet.html b/internal/ogc/features/testdata/expected_foo_collection_snippet.html
@@ -1,7 +1,7 @@
         <table class="table table-striped">
             <thead>
             <tr>
-                <th colspan="2"><a href="http://localhost:8080/collections/foo/items/3542" aria-label="Ga naar feature 3542">3542</a></th>
+                <th colspan="2" scope="row"><a href="http://localhost:8080/collections/foo/items/3542" aria-label="Ga naar feature 3542">3542</a></th>
             </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/styles/templates/style.go.html b/internal/ogc/styles/templates/style.go.html
@@ -12,7 +12,7 @@ <h1 class="title" id="title">{{ .Config.Title }} - {{ .Params.Title }}</h1>
     <div class="col-md-6">
         <link rel="stylesheet" type="text/css" href="view-component/styles.css">
         <script type="module" src="view-component/main.js"></script>
-        <script type="text/javascript" src="view-component/polyfills.js"></script>
+        <script src="view-component/polyfills.js"></script>
         <app-legend-view id="style-legend-view" class="card"
                          style-url="{{ $baseUrl }}/styles/{{ .Params.ID }}?f=mapbox">
         </app-legend-view>

diff --git a/internal/ogc/styles/templates/styles.go.html b/internal/ogc/styles/templates/styles.go.html
@@ -80,7 +80,7 @@ <h1 class="title" id="title">{{ .Config.Title }} - {{ i18n "Styles" }}</h1>
     <div class="col-md-6">
       <link rel="stylesheet" type="text/css" href="view-component/styles.css">
       <script type="module" src="view-component/main.js"></script>
-      <script type="text/javascript" src="view-component/polyfills.js"></script>
+      <script src="view-component/polyfills.js"></script>
        <p>{{ i18n "StylingExample" }}:</p>
       <app-vectortile-view id="styles-vectortile-view" class="card vectortile-view"
         tile-url="{{ $baseUrl }}/tiles/{{ get $projections $defaultSrs.Srs }}"

diff --git a/internal/ogc/tiles/templates/tileMatrixSets.go.html b/internal/ogc/tiles/templates/tileMatrixSets.go.html
@@ -15,8 +15,8 @@ <h1 class="title" id="title">{{ .Config.Title }} - {{ i18n "TileMatrixSets" }}</
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th>Tile Matrix Set</th>
-                    <th>{{ i18n "Description" }}</th>
+                    <th  scope="col">Tile Matrix Set</th>
+                    <th  scope="col">{{ i18n "Description" }}</th>
                 </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/tiles/templates/tileMatrixSets/EuropeanETRS89_LAEAQuad.go.html b/internal/ogc/tiles/templates/tileMatrixSets/EuropeanETRS89_LAEAQuad.go.html
@@ -11,14 +11,14 @@ <h1 class="title" id="title">EuropeanETRS89_LAEAQuad</h1>
     <table class="table table-striped">
       <thead>
         <tr>
-          <th>{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
-          <th>Tile width</th>
-          <th>Tile height</th>
-          <th>Matrix width</th>
-          <th>Matrix height</th>
-          <th>Scale</th>
-          <th>Cell size</th>
-          <th>Point of origin</th>
+          <th  scope="col">{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
+          <th  scope="col">Tile width</th>
+          <th  scope="col">Tile height</th>
+          <th  scope="col">Matrix width</th>
+          <th  scope="col">Matrix height</th>
+          <th  scope="col">Scale</th>
+          <th  scope="col">Cell size</th>
+          <th  scope="col">Point of origin</th>
         </tr>
       </thead>
       <tbody>

diff --git a/internal/ogc/tiles/templates/tileMatrixSets/NetherlandsRDNewQuad.go.html b/internal/ogc/tiles/templates/tileMatrixSets/NetherlandsRDNewQuad.go.html
@@ -12,14 +12,14 @@ <h1 class="title" id="title">NetherlandsRDNewQuad</h1>
     <table class="table table-striped">
       <thead>
         <tr>
-          <th>{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
-          <th>Tile width</th>
-          <th>Tile height</th>
-          <th>Matrix width</th>
-          <th>Matrix height</th>
-          <th>Scale</th>
-          <th>Cell size</th>
-          <th>Point of origin</th>
+          <th  scope="col">{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
+          <th  scope="col">Tile width</th>
+          <th  scope="col">Tile height</th>
+          <th  scope="col">Matrix width</th>
+          <th  scope="col">Matrix height</th>
+          <th  scope="col">Scale</th>
+          <th  scope="col">Cell size</th>
+          <th  scope="col">Point of origin</th>
         </tr>
       </thead>
       <tbody>

diff --git a/internal/ogc/tiles/templates/tileMatrixSets/WebMercatorQuad.go.html b/internal/ogc/tiles/templates/tileMatrixSets/WebMercatorQuad.go.html
@@ -12,14 +12,14 @@ <h1 class="title" id="title">WebMercatorQuad</h1>
     <table class="table table-striped">
       <thead>
         <tr>
-          <th>{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
-          <th>Tile width</th>
-          <th>Tile height</th>
-          <th>Matrix width</th>
-          <th>Matrix height</th>
-          <th>Scale</th>
-          <th>Cell size</th>
-          <th>Point of origin</th>
+          <th  scope="col">{{ i18n "ZoomLevel" }}<br/>(tile matrix id)</th>
+          <th  scope="col">Tile width</th>
+          <th  scope="col">Tile height</th>
+          <th  scope="col">Matrix width</th>
+          <th  scope="col">Matrix height</th>
+          <th  scope="col">Scale</th>
+          <th  scope="col">Cell size</th>
+          <th  scope="col">Point of origin</th>
         </tr>
       </thead>
       <tbody>

diff --git a/internal/ogc/tiles/templates/tiles.go.html b/internal/ogc/tiles/templates/tiles.go.html
@@ -105,7 +105,7 @@ <h1 class="title" id="title">{{ .Config.Title }} - {{ i18n "Tiles" }}</h1>
       </table>
       <link rel="stylesheet" type="text/css" href="view-component/styles.css">
       <script type="module" src="view-component/main.js"></script>
-      <script type="text/javascript" src="view-component/polyfills.js"></script>
+      <script src="view-component/polyfills.js"></script>
        <app-vectortile-view id="vectortileviewer" class="card vectortile-view"
         tile-url="{{ $baseUrlTiles }}/tiles/{{ get $projections $defaultSrs.Srs }}"
         {{ if .Config.OgcAPI.Styles }}style-url="{{ $.Config.BaseURL }}/styles/{{ .Config.OgcAPI.Styles.Default }}?f=mapbox"{{ end }}

diff --git a/internal/ogc/tiles/templates/tiles/EuropeanETRS89_LAEAQuad.go.html b/internal/ogc/tiles/templates/tiles/EuropeanETRS89_LAEAQuad.go.html
@@ -16,11 +16,11 @@ <h2>Tile matrix set limits</h2>
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th>{{ i18n "ZoomLevel" }} {z}</th>
-                    <th>{{ i18n "MinimumValue" }} {y}</th>
-                    <th>{{ i18n "MaximumValue" }} {y}</th>
-                    <th>{{ i18n "MinimumValue" }} {x}</th>
-                    <th>{{ i18n "MaximumValue" }} {x}</th>
+                    <th  scope="col">{{ i18n "ZoomLevel" }} {z}</th>
+                    <th  scope="col">{{ i18n "MinimumValue" }} {y}</th>
+                    <th  scope="col">{{ i18n "MaximumValue" }} {y}</th>
+                    <th  scope="col">{{ i18n "MinimumValue" }} {x}</th>
+                    <th  scope="col">{{ i18n "MaximumValue" }} {x}</th>
                 </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/tiles/templates/tiles/NetherlandsRDNewQuad.go.html b/internal/ogc/tiles/templates/tiles/NetherlandsRDNewQuad.go.html
@@ -16,11 +16,11 @@ <h2>Tile matrix set limits</h2>
         <table class="table table-striped">
             <thead>
             <tr>
-                <th>{{ i18n "ZoomLevel" }} {z}</th>
-                <th>{{ i18n "MinimumValue" }} {y}</th>
-                <th>{{ i18n "MaximumValue" }} {y}</th>
-                <th>{{ i18n "MinimumValue" }} {x}</th>
-                <th>{{ i18n "MaximumValue" }} {x}</th>
+                <th  scope="col">{{ i18n "ZoomLevel" }} {z}</th>
+                <th  scope="col">{{ i18n "MinimumValue" }} {y}</th>
+                <th  scope="col">{{ i18n "MaximumValue" }} {y}</th>
+                <th  scope="col">{{ i18n "MinimumValue" }} {x}</th>
+                <th  scope="col">{{ i18n "MaximumValue" }} {x}</th>
             </tr>
             </thead>
             <tbody>

diff --git a/internal/ogc/tiles/templates/tiles/WebMercatorQuad.go.html b/internal/ogc/tiles/templates/tiles/WebMercatorQuad.go.html
@@ -16,11 +16,11 @@ <h2>Tile matrix set limits</h2>
         <table class="table table-striped">
             <thead>
                 <tr>
-                    <th>{{ i18n "ZoomLevel" }} {z}</th>
-                    <th>{{ i18n "MinimumValue" }} {y}</th>
-                    <th>{{ i18n "MaximumValue" }} {y}</th>
-                    <th>{{ i18n "MinimumValue" }} {x}</th>
-                    <th>{{ i18n "MaximumValue" }} {x}</th>
+                    <th  scope="col">{{ i18n "ZoomLevel" }} {z}</th>
+                    <th  scope="col">{{ i18n "MinimumValue" }} {y}</th>
+                    <th  scope="col">{{ i18n "MaximumValue" }} {y}</th>
+                    <th  scope="col">{{ i18n "MinimumValue" }} {x}</th>
+                    <th  scope="col">{{ i18n "MaximumValue" }} {x}</th>
                 </tr>
           </thead>
           <tbody>

diff --git a/tests/cypress.config.ts b/tests/cypress.config.ts
@@ -1,10 +1,16 @@
 import { defineConfig } from "cypress";
+import htmlvalidate from "cypress-html-validate/plugin";
 
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:8080',
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      htmlvalidate.install(on, {
+        rules: {
+          "require-sri": "off",
+          "element-permitted-content": "off" // only because we use RDFa breadcrumbs
+        },
+      });
     },
   },
 });