Add Tenon WCAG linting

[dotherightthing]

• https://tenon.io/documentation/videos/
• https://blog.tenon.io/tutorial-using-tenon-as-a-grunt-task/
• Free plan is USD 10 per 200 calls https://tenon.io/buyboosts.php

[dotherightthing]

Tenon runs on HTML pages or a website URL. Could it integrate with the Unit Testing environment?

• https://blog.tenon.io/guest-post-tenon-io-the-ultimate-accessibility-linter-by-joe-watkins/
• https://tenon.io/getcode.php

[dotherightthing]

Tenon.io December webinar is now online

API Settings

The Tenon website is a client of the Tenon API.

The defaults which are inherited by all projects. These can be overridden in Project-Level API settings.

Settings can also be stored in .tenonrc.

Snippets can also be tested on the website.

1. Tenon > Dashboard > Settings > API Settings > Certainty 100 is suitable for CIs - i.e. we want to be 100% sure that a problem is real before we will allow it to fail the build (to avoid false positives) 80+ = error 80- = warning

2. Tenon > Dashboard > Settings > API Settings > Priority Ranks issues on ease of repair, impact on user etc 100: high impact on user, easy to repair 60-80: to capture more issues

3. Tenon > Dashboard > Settings > API Settings > Fragment Whole page or part of a page / partial

4. Tenon > Dashboard > Settings > API Settings > Store Results? Archive test results

5. Tenon > Dashboard > Settings > API Settings > User-Agent String Only for developer's own usage

6. Tenon > Dashboard > Settings > API Settings > Viewport Height/Width Runs in a headless (JS) DOM-aware browser, so can be passed responsive breakpoints, but the defaults are setup for low vision users

7. Tenon > Dashboard > Settings > API Settings > Delay Useful if JS takes some time to kick in, specify in milliseconds

Projects

Projects > Add a new project

1. Add/ remove urls for testing Accepts a list (each URL on a new line, can also pull URLs from other text

Project results:

1. Duplicate issues Highlights issues in components which are used in multiple places

2. Issues by WCAG Success Criteria Greyed out rows indicate which items require non-automated human testing

---

API Integrations

I need to integrate Travis with WPUnit so that mock WordPress pages can be tested in Travis. In the future I'd like to use Selenium to change the page state prior to testing.

1. Access Monitor plugin for WordPress
2. Grunt plugin
3. https://www.npmjs.com/package/gulp-tenon-client
4. https://www.npmjs.com/package/tenon-api-client
5. https://www.npmjs.com/package/tenon-reporters
6. https://github.com/tenon-io/sample-php-class

Travis

Karl ran grunt-tenon-demo through Travis:

// travis.yml 
before_script
- grunt

Selenium

Selenium example - https://blog.tenon.io/does-tenon-integrate-with-selenium/

1. Selenium triggers an interaction
2. Tenon checks that there are no errors in the resultant page state

PHPUnit + Selenium (+ php-webdriver)

https://codeception.com/11-12-2013/working-with-phpunit-and-selenium-webdriver.html

There is PHPUnit_Selenium extension you may use. We will use php-webdriver instead because this implementation is modern and its API is more clean and looks much the same way as original Java Selenium API. That’s why it is easier to learn, and much powerful, then the PHPUnit’s one. For example, it allows you use send native touch events, which is important in era of mobile-ready web applications.

However note that this example uses a local testing browser.

Selenium + Travis

Node.js

Starting a Selenium Server inside TravisCI

TL;DR: To start a Selenium Server, namely a Chrome Driver, inside TravisCI builds you have to install and run a Google Chrome instance using your .travis.yml configuration, like in this working example:

Vagrant

https://github.com/yandod/travis-ci-selenium-php

PHP

PHP Test Club How to know if Selenium Server is ready?

In our continuous integration at Travis we start the selenium server this way:

#!/bin/sh
# wait4selenium.sh
# Loop until selenium server is available
printf 'Waiting Selenium Server to load\n'
until $(curl --output /dev/null --silent --head --fail http://localhost:4444/wd/hub); do
    printf '.'
    sleep 1
done
printf '\n'

// travis.yml

  # Selenium server
 - "wget http://selenium-release.storage.googleapis.com/2.43/selenium-server-standalone-2.43.1.jar"
 - "java -jar selenium-server-standalone-2.43.1.jar > /dev/null 2>/dev/null &"
 - .travis/wait4selenium.sh

and

Switched current acceptance tests to Chromedriver and Ubuntu Trusty

PHP + WordPress

https://github.com/joedolson/access-monitor/blob/master/src/access-monitor.php

$tenon = new tenon( TENON_API_URL, $opts );
$tenon->submit( AM_DEBUG );

https://github.com/joedolson/access-monitor/blob/master/src/t/class-tenon.php

        $args   = array(
            'method'  => 'POST',
            'body'    => $this->opts,
            'headers' => '',
            'timeout' => 60,
        );
        $result = wp_remote_post( $this->url, $args );

        if ( is_wp_error( $result ) ) {
            $this->tenon_response = $result->errors;
        } else {
            // the test results.
            $this->tenon_response = $result;
        }

However note that if testing WordPress Admin pages, the entire page would be tested, rather than just the rendered DTRT plugin partial.

[dotherightthing]

I've set up a test on wpdtrt-gallery as follows:

Travis

1. Added Tenon API key to https://travis-ci.org/dotherightthing/wpdtrt-gallery/settings as TENON_AUTH
2. Exposed Tenon API key to Travis environment:

# travis.yml

before_script:
  - export TENON_AUTH="$TENON_AUTH"

PHPUnit

Added function tenon to test-wpdtrt-gallery.php. This is used inside an assertion to test that Tenon's response resultSet is empty (no failing tests). PHP gets the value of TENON_AUTH using getenv.

Issues

Tenon

The Tenon API can only access publicly available URLs. In late 2015 the developers said that Tenon Tunnel was on the roadmap, but there's no mention of this on the tenon.io website or blog so I have asked for clarification.

A workaround is to post HTML/CSS/JS $src instead of a $url. This will likely require using a headless browser to scrape the page. This could dovetail with the work to set up Selenium to change the page state prior to testing it.

Tenon + Travis

None - working.

Tenon + MAMP Pro (local dev)

The request fails on local dev (MAMP Pro 4.1.1).

wp_remote_post returns the error:

cURL error 56: SSLRead() return error -9806

This appears to be caused by the wrong SSL application being used - SecureTransport instead of OpenSSL (https://www.codesd.com/item/osx-10-10-curl-post-to-https-url-gives-sslread-error.html)

php -i | grep "SSL Version"
SSL Version => SecureTransport

• MAMP Pro 4.1.1 is supposed to have OpenSSL 1.0.2j(https://www.mamp.info/en/documentation/ > Version History)
• MAMP Pro -> Check for Updates = nothing about OpenSSL
• MAMP Pro -> Tools > Extras = nothing about OpenSSL

[dotherightthing]

Added Proof of Concept to wpdtrt-gallery:1.7.15