added HTML validation for all the helpers and styles

apps/pagy_standalone_app.ru

@@ -40,7 +40,7 @@ Pagy::VARS[:trim] = false # opt-in trim
 
 # sinatra application
 require 'sinatra/base'
-class PagyApp < Sinatra::Base
+class PagyStandaloneApp < Sinatra::Base
   configure do
     enable :inline_templates
   end
@@ -81,7 +81,7 @@ class MockCollection < Array
   end
 end
 
-run PagyApp
+run PagyStandaloneApp
 
 __END__
 

pagy-on-docker/docker-compose.yml

@@ -38,7 +38,7 @@ services:
 #      - "1234:1234"   # RubyMine debugger
       - "4567:4567"   # default sinatra e2e/app.rb
       - "8080:8080"   # should you run the rackup apps/base_app.ru
-    command: rerun "test/e2e/app.rb -o 0.0.0.0"
+    command: rerun -- rackup -o 0.0.0.0 -p 4567 test/e2e/pagy_app.ru
     stdin_open: true
     tty: true
 

pagy-on-docker/pagy-cypress-uid1000.dockerfile

@@ -5,7 +5,7 @@ FROM cypress/included:7.3.0
 RUN apt-get update && apt-get install -y libcanberra-gtk* \
  && rm -rf /opt/firefox /usr/bin/firefox \
  && ln -s /root/.cache /home/node/.cache \
- && npm install --save-dev @cypress/snapshot
+ && npm install --save-dev @cypress/snapshot html-validate cypress-html-validate
 
 # make sure cypress looks in the right place
 ENV CYPRESS_CACHE_FOLDER=/home/node/.cache/Cypress

pagy-on-docker/pagy-cypress.dockerfile

@@ -13,7 +13,7 @@ RUN apt-get update && apt-get install -y libcanberra-gtk* \
  && install -d -m 0755 -o $user -g $user /home/$user \
  && rm -rf /opt/firefox /usr/bin/firefox \
  && ln -s /root/.cache /home/$user/.cache \
- && npm install --save-dev @cypress/snapshot
+ && npm install --save-dev @cypress/snapshot html-validate cypress-html-validate
 
 # make sure cypress looks in the right place
 ENV CYPRESS_CACHE_FOLDER=/home/$user/.cache/Cypress

test/e2e/cypress/integration/validate-html.spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+describe('Validate the HTML of all the styles helpers', () => {
+  const pages = [1, 25, 50]
+  for(let s = 0; s < styles.length; s++) {
+    let style = styles[s];
+    for (let p = 0; p < pages.length; p++) {
+      let page = pages[p];
+      it('test valid HTML for ' + style + ' page: ' + page, () => {
+        cy.visit(style + '?page=' + page);
+        cy.htmlvalidate();
+      });
+    }
+  }
+})

test/e2e/cypress/plugins/index.js

@@ -21,8 +21,18 @@
   // `config` is the resolved Cypress config
 // }
 
+const htmlvalidate = require('cypress-html-validate/dist/plugin');
 
 module.exports = (on, config) => {
+  const htmlConfig  = {
+    rules: {
+      // a few frameworks use ul or div for pagination, and aria-role="navigation" will trigger it
+      'prefer-native-element': 'off',
+      // not needed in test environment
+      'require-sri': 'off'
+    }
+  }
+  htmlvalidate.install(on, htmlConfig);
   /*
   on('before:browser:launch', (browser = {}, launchOptions) => {
     // `args` is an array of all the arguments that will

test/e2e/cypress/support/commands.js

@@ -25,6 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 require('@cypress/snapshot').register();
+import 'cypress-html-validate/dist/commands';
 
 global.styles = ['/bootstrap', '/bulma', '/foundation', '/materialize', '/navs', '/semantic', '/uikit'];
 

test/e2e/app.rb → test/e2e/pagy_app.ru

@@ -3,10 +3,10 @@
 # Self-contained sinatra app to test the pagy helpers in the browser
 
 # USAGE:
-#    test/e2e/app.rb -o 0.0.0.0
+#    rackup -o 0.0.0.0 -p 4567 test/e2e/pagy_app.ru
 
 # DEV USAGE:
-#    rerun "test/e2e/app.rb -o 0.0.0.0"
+#    rerun -- rackup -o 0.0.0.0 -p 4567 test/e2e/pagy_app.ru
 
 # Available at http://0.0.0.0:4567
 
@@ -28,55 +28,59 @@
 require_relative '../mock_helpers/collection'
 
 # sinatra setup
-require 'sinatra'
+require 'sinatra/base'
 
 # sinatra application
-enable :inline_templates
+class PagyApp < Sinatra::Base
+  enable :inline_templates
 
-include Pagy::Backend   # rubocop:disable Style/MixinUsage
+  include Pagy::Backend
 
-helpers do
-  include Pagy::Frontend
+  helpers do
+    include Pagy::Frontend
 
-  def site_map
-    html = +%(<div id="site-map">)
-    query_string = "?#{Rack::Utils.build_nested_query(params)}" unless params.empty?
-    [:home, *STYLES].each do |name|
-      html << %(<a href="/#{name}#{query_string}">#{name}</a> )
+    def site_map
+      html = +%(<div id="site-map">)
+      query_string = "?#{Rack::Utils.build_nested_query(params)}" unless params.empty?
+      [:home, *STYLES].each do |name|
+        html << %(<a href="/#{name}#{query_string}">#{name}</a> )
+      end
+      html << %(</div>)
     end
-    html << %(</div>)
-  end
 
-end
+  end
 
 
-get '/pagy.js' do
-  content_type 'application/javascript'
-  send_file Pagy.root.join('javascripts', 'pagy.js')
-end
+  get '/pagy.js' do
+    content_type 'application/javascript'
+    send_file Pagy.root.join('javascripts', 'pagy.js')
+  end
 
-%w[/ /home].each do |route|
-  get(route) { erb :home }
-end
+  %w[/ /home].each do |route|
+    get(route) { erb :home }
+  end
 
-# one route/action per style
-STYLES.each do |name|
-  get "/#{name}" do
-    collection = MockCollection.new
-    @pagy, @records = pagy(collection)
-    name_fragment = name == 'navs' ? '' : "#{name}_"
-    erb :helpers, locals: {name: name, name_fragment: name_fragment}
+  # one route/action per style
+  STYLES.each do |name|
+    get "/#{name}" do
+      collection = MockCollection.new
+      @pagy, @records = pagy(collection)
+      name_fragment = name == 'navs' ? '' : "#{name}_"
+      erb :helpers, locals: {name: name, name_fragment: name_fragment}
+    end
   end
 end
 
+run PagyApp
 
 __END__
 
 @@ layout
-<html>
+<html lang="en">
 <head>
-  <script type="application/javascript" src="/pagy.js"></script>
-  <script type="application/javascript">
+  <title>Pagy E2E</title>
+  <script src="/pagy.js"></script>
+  <script>
     window.addEventListener("load", Pagy.init);
   </script>
   <link rel="stylesheet" href="/normalize-styles.css">
@@ -91,7 +95,7 @@ def site_map
 
 @@ home
 <div id="home">
-  <h3>Pagy e2e app</h3>
+  <h1>Pagy e2e app</h1>
 
   <p>This app runs on Sinatra/Puma and is used for testing locally and in GitHub Actions CI with cypress, or just inspect the different helpers in the same page.</p>
 
@@ -104,7 +108,7 @@ def site_map
 
 
 @@ helpers
-<h3 id="style"><%= name %></h3>
+<h1 id="style"><%= name %></h1>
 <hr>
 
 <p>@records</p>