From 5ff9164e68ba46519aec27f87fac2fb89e44658d Mon Sep 17 00:00:00 2001 From: Chris Mytton Date: Wed, 21 Sep 2016 10:42:30 +0100 Subject: [PATCH 01/11] Try using html-tidy for html validation --- Gemfile | 1 + Gemfile.lock | 2 ++ 2 files changed, 3 insertions(+) diff --git a/Gemfile b/Gemfile index 6b80efc68..f42893f78 100644 --- a/Gemfile +++ b/Gemfile @@ -25,6 +25,7 @@ group :test do gem 'rack-test' gem 'webmock' gem 'bundler-audit' + gem 'html_validation' end group :quality do diff --git a/Gemfile.lock b/Gemfile.lock index 899a70ad4..1d9753836 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -41,6 +41,7 @@ GEM ruby_parser (~> 3.1, > 3.1.0) sexp_processor (~> 4.4) hashdiff (0.3.0) + html_validation (1.1.3) ice_nine (0.11.2) iso_country_codes (0.7.1) json (1.8.2) @@ -121,6 +122,7 @@ DEPENDENCIES everypolitician (~> 0.18.0)! everypolitician-popolo! flog + html_validation iso_country_codes json minitest From c4b1e605d42ae9e075783c6d34fbf7154ded66af Mon Sep 17 00:00:00 2001 From: Chris Mytton Date: Wed, 21 Sep 2016 10:55:26 +0100 Subject: [PATCH 02/11] Travis CI config for html-tidy --- .travis.yml | 9 ++++++++- scripts/install_tidy.sh | 12 ++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100755 scripts/install_tidy.sh diff --git a/.travis.yml b/.travis.yml index 92c7b4810..141592239 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,6 +2,12 @@ language: ruby cache: bundler before_install: - echo -e "machine github.com\n login $GITHUB_ACCESS_TOKEN" >> ~/.netrc +addons: + apt: + packages: + - cmake +before_install: + - scripts/install_tidy.sh script: - bundle exec rake test:all - bundle exec rake rubocop @@ -15,4 +21,5 @@ notifications: secure: GVD9d+kwR5hzab5ZnWugbCkp9QSYyheSrABWkD+LmpMcWcx7jijajSn4LLvDi/zHYn1MdOBcPe08hSygmpm7ViUApp0EJcSzE4BLU/5oAs+ANV0Qq6jsssMlyo3v8eRAqHNiLxAiAsz+lc0EZWfQnSW8kHzzbO3NeYq1NRL5CgQ= env: global: - secure: cwq0zTDtALPr4nm29EgvQ6v5oIzYsE+DEP3Vt4unrTuv84JywWu2mry+YiXLCmcermD433BG5Fy/E+MUXAXiGjMtJr6wqkVe8HlDH3xOCJ4LBzR/hrE1x5Ufke6UmHCdpcWlSTNO8eQDP1k/X2Pz6Zng2TlmenLwGwUNZ82O5vM= + - secure: cwq0zTDtALPr4nm29EgvQ6v5oIzYsE+DEP3Vt4unrTuv84JywWu2mry+YiXLCmcermD433BG5Fy/E+MUXAXiGjMtJr6wqkVe8HlDH3xOCJ4LBzR/hrE1x5Ufke6UmHCdpcWlSTNO8eQDP1k/X2Pz6Zng2TlmenLwGwUNZ82O5vM= + - PATH="$PATH:$HOME/bin" diff --git a/scripts/install_tidy.sh b/scripts/install_tidy.sh new file mode 100755 index 000000000..5fc5205d9 --- /dev/null +++ b/scripts/install_tidy.sh @@ -0,0 +1,12 @@ +#!/usr/bin/env bash + +set -eo pipefail + +cd /tmp +wget https://github.com/htacg/tidy-html5/archive/5.2.0.zip +unzip 5.2.0.zip +cd tidy-html5-5.2.0/build/cmake +cmake ../.. +make +mkdir ~/bin +mv tidy ~/bin/tidy From 291e22059b1cad227991e774113d76d29dc9c8df Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Tue, 20 Sep 2016 16:05:26 +0100 Subject: [PATCH 03/11] Use tidy-html5 to validate the country page Errors corrected: - An "img" element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. At line 257, column 69 - End tag "div" seen, but there were open elements. At line 259, column 12 - Unclosed element "a". At line 255, column 77 --- t/test_helper.rb | 6 ++++++ t/web/country.rb | 8 ++++++++ views/country.erb | 6 +++--- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/t/test_helper.rb b/t/test_helper.rb index 855cdb746..02efdc76c 100644 --- a/t/test_helper.rb +++ b/t/test_helper.rb @@ -8,6 +8,7 @@ require 'pry' require 'webmock/minitest' require 'everypolitician' +require 'html_validation' module Minitest class Spec @@ -55,6 +56,11 @@ def stub_github_api stub_json('https://api.github.com/repos/everypolitician/everypolitician-data/issues?labels=New%20Country,3%20-%20WIP&per_page=100') end + def last_response_must_be_valid + validation = PageValidations::HTMLValidation.new.validation(last_response.body, last_request.url) + assert validation.valid?, validation.exceptions + end + private def ep_repo diff --git a/t/web/country.rb b/t/web/country.rb index 0e26e72fb..f9253bc77 100644 --- a/t/web/country.rb +++ b/t/web/country.rb @@ -42,4 +42,12 @@ links.last.text.must_equal '/united-states-of-america/senate/download.html' end end + + describe 'HTML validation' do + it 'has no errors in the country page' do + skip if `which tidy`.empty? + get '/estonia/' + last_response_must_be_valid + end + end end diff --git a/views/country.erb b/views/country.erb index e2fc6b6b8..eb3022ee5 100644 --- a/views/country.erb +++ b/views/country.erb @@ -51,10 +51,10 @@
- + Gender-Balance app preview
- - + + From 611273c85dfbc9078af24ccc9ab5969ab7b7f959 Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Tue, 20 Sep 2016 16:44:41 +0100 Subject: [PATCH 04/11] Use tidy-html5 to validate the term-table page Errors corrected: - An "img" element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. (All occurrences) --- t/web/term_table/nz.rb | 9 +++++++++ views/term_table.erb | 9 ++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/t/web/term_table/nz.rb b/t/web/term_table/nz.rb index 6cdbac0fd..3aca5f93a 100644 --- a/t/web/term_table/nz.rb +++ b/t/web/term_table/nz.rb @@ -17,4 +17,13 @@ subject.css('#term h1').text.must_include '51st Parliament' end end + + describe 'HTML validation' do + before { get '/new-zealand/house/term-table/51.html' } + + it 'has no errors in the term-table page' do + skip if `which tidy`.empty? + last_response_must_be_valid + end + end end diff --git a/views/term_table.erb b/views/term_table.erb index a11c9604a..c8170f554 100644 --- a/views/term_table.erb +++ b/views/term_table.erb @@ -140,10 +140,13 @@ - + class="person-card__image" + alt="Member headshot"> + <% else %> - + Placeholder image <% end %>

<%= person.name %>

From c3cbad8ea89a38c88d76ad396eea14555990c189 Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Tue, 20 Sep 2016 17:08:20 +0100 Subject: [PATCH 05/11] Use tidy-html5 to validate the house page Errors corrected: - An "img" element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images. At line 254, column 69. - End tag "div" seen, but there were open elements. At line 256, column 12. - Unclosed element "a". At line 252, column 77. --- t/web/house.rb | 7 +++++++ views/house.erb | 6 +++--- views/layout.erb | 2 +- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/t/web/house.rb b/t/web/house.rb index 09804f82f..62a276b2c 100644 --- a/t/web/house.rb +++ b/t/web/house.rb @@ -19,4 +19,11 @@ subject.css('.avatar-unit p').last.text.must_equal '1981-01-06 - 1983-01-03' end end + + describe 'HTML validation' do + it 'has no errors in the house page' do + skip if `which tidy`.empty? + last_response_must_be_valid + end + end end diff --git a/views/house.erb b/views/house.erb index 6cb200e1e..547694289 100644 --- a/views/house.erb +++ b/views/house.erb @@ -48,10 +48,10 @@
- + Gender-Balance app preview
- - + + diff --git a/views/layout.erb b/views/layout.erb index 409b2f651..769b5a795 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -64,7 +64,7 @@ <% end %> - <% if @house %>

<%= @house.name %>

<% end %> + <% if @house %>

<%= @house.name %>

<% end %>
-

mySociety Limited is a project of UK Citizens Online Democracy, a registered charity in England and Wales. For full details visit mysociety.org.

+

mySociety Limited is a project of UK Citizens Online Democracy, a registered charity in England and Wales. For full details visit mysociety.org.

From 1994b198e113ea39b7db604823d9058adf99aaad Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Thu, 22 Sep 2016 15:09:58 +0100 Subject: [PATCH 09/11] Add placeholder back to the select through JavaScript. --- public/javascript/main.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/javascript/main.js b/public/javascript/main.js index 69aafcd3d..eb8ff487f 100644 --- a/public/javascript/main.js +++ b/public/javascript/main.js @@ -305,6 +305,11 @@ $(function(){ }); // http://baymard.com/labs/country-selector + $('.js-select-to-autocomplete').attr({ + placeholder: 'Search by country name', + autocorrect: 'off', + autocomplete: 'off' + }); $('.js-select-to-autocomplete').selectToAutocomplete().on('change', function(){ var v = $(this).val(); if (v) { From 9dc19abf7a9e20cec20bfd0a8c4aecb29f50b349 Mon Sep 17 00:00:00 2001 From: octopusinvitro Date: Thu, 22 Sep 2016 15:25:27 +0100 Subject: [PATCH 10/11] fixup! Add placeholder back to the select through JavaScript. --- public/javascript/main.js | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/public/javascript/main.js b/public/javascript/main.js index eb8ff487f..084806667 100644 --- a/public/javascript/main.js +++ b/public/javascript/main.js @@ -305,20 +305,23 @@ $(function(){ }); // http://baymard.com/labs/country-selector - $('.js-select-to-autocomplete').attr({ - placeholder: 'Search by country name', - autocorrect: 'off', - autocomplete: 'off' - }); - $('.js-select-to-autocomplete').selectToAutocomplete().on('change', function(){ - var v = $(this).val(); - if (v) { - // Assumes the