GithubHelp home page GithubHelp logo

spjwebster / frontend-test-suite Goto Github PK

View Code? Open in Web Editor NEW

This project forked from neilcrosby/frontend-test-suite

1.0 3.0 1.0 161 KB

People don't give love to automated testing of the frontend. I intend to.

License: Other

PHP 100.00%

frontend-test-suite's Introduction

The latest and most up to date version of the Frontend Test Suite can be found on GitHub. Go there for the official, and most up-to-date version of this suite.

Frontend Test Suite

Automated testing of Frontend Web Systems is a task that's rarely implemented, and when it is it's generally a just case of "Lets write some Selenium tests" and that will be the end of things.

I believe that starting to test Frontend Web Systems using the JavaScript layer within the browser is starting too far down the chain. As developers we will all sporadically test for HTML and CSS validity, we will look for errors cropping up in our JavaScript, and we'll try and make sure that our pages contain no XSS holes.

The problem with this is that this testing only tends to happen when we remember about it. Easy bugs to fix can go unnoticed for months, and others can appear which take hours to fix purely because we do not notice that a span tag has been left unclosed.

By automatically and continuously running a suite of frontend tests a greater level of confidence in the quality of code can be attained. By notifying developers of issues with their commited code fixes can be pushed within minutes, rather than hours. By running the tests as pre-commit hooks, bad code can be stopped from even being allowed into the system.

Phase 1

  • HTML Validation (Complete)
    • Page level (Complete)
    • Module level (Complete)
    • Ability to validate using a different doctype to the one given on the page to allow for well documented exceptions. (Complete)
  • CSS Validation (Complete)
    • Ability to allow through certain known hacks. (Complete)
    • Ability to allow the YUI's CSS to pass, even after allowing for those known hacks. (Complete)
  • Javascript linting (Complete)
    • Ability to pass through a known configuration for linting against. (Complete)
  • Documentation to make it easy for others to use the framework.

Phase 2

  • "Whitelisting" sections of known bad code - eg external adverts pulled into a page.
  • HTML well-formedness testing. Whitelisted sections of code should still be well formed.
  • Basic accessibility rules checking.

Tools required

Given the number of tests that will generally be being run per hour, it would be rude to rely on free external services that others provide. Instead, you should install your own local versions of these services so as not to put unnecessary strain on the public versions.

  • HTML Validator
  • CSS Validator
  • JSLint

frontend-test-suite's People

Contributors

mikewest avatar neilcrosby avatar spjwebster avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.