Skip to content

Commit

Permalink
added HTML validation for all the helpers and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
ddnexus committed May 15, 2021
1 parent 87b2f62 commit 4ec03f1
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 39 deletions.
4 changes: 2 additions & 2 deletions apps/pagy_standalone_app.ru
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -81,7 +81,7 @@ class MockCollection < Array
end
end

run PagyApp
run PagyStandaloneApp

__END__

Expand Down
2 changes: 1 addition & 1 deletion pagy-on-docker/docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion pagy-on-docker/pagy-cypress-uid1000.dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion pagy-on-docker/pagy-cypress.dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 15 additions & 0 deletions test/e2e/cypress/integration/validate-html.spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
}
}
})
10 changes: 10 additions & 0 deletions test/e2e/cypress/plugins/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions test/e2e/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'];

Expand Down
72 changes: 38 additions & 34 deletions test/e2e/app.rb → test/e2e/pagy_app.ru
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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">
Expand All @@ -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>

Expand All @@ -104,7 +108,7 @@ def site_map


@@ helpers
<h3 id="style"><%= name %></h3>
<h1 id="style"><%= name %></h1>
<hr>

<p>@records</p>
Expand Down

0 comments on commit 4ec03f1

Please sign in to comment.