A testing platform for testing authored content on websites
npm install content-testerContentTester
=============
A testing platform for testing authored content on websites
##Installation
#####Dependencies:
- node.js for the server
- jQuery on your website
#####The server
- run the command 'npm install content-tester'
- make the data directory writeable
- run the command 'node app.js'
- Visit http://localhost:3000/rules to initialise the database
#####The client
On the computer where you'll be running the tests, create a bookmarklet in your browser (create a new bookmark and in the URL field paste the following) containing the following:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://192.168.0.5:3000/client/client.js';})();
Don't forget to substitute the IP address with the IP address of the computer running the node.js editor
##Using the editor
###Components
Start by adding components to the component list. A component is essentially a part of the website. For example, it could be a image, a block of text, a menu, a video player, a carousel, the header, the footer. Essentially, break your page down into chunks that can be tested seperately.
Give each component a name and also specify the jQuery selector that you'd use to select that component on the page. For example, if you had a component that looks like this:
###Writing a test
A test compromises of 3 parts:
__It - A descriptive sentence explaining the test__
*E.g.
It.. should only have one header on the page*
__Test - A JavaScript function that returns a value to be compared against__
E.g.
return $selector.length;
__Comparison - What to compare the value returned from the test function against, to determine if the test passes or fails__
E.g. === 1
###Overall tests
Overall tests are any tests you want to run against all instances of a component on a page. For example, you might want to have a test to check the total number of instances of a particular component on a page (1x header, 1x footer, 1x menu etc).
When writing the test function, $selector will be a jQuery selector containing all the instances of the component on the page.
###Instance tests
Instance tests are any tests you want to run against each instance of a component on a page individually. This is likely where the majority of your tests will go. For example, you might want to check that each image on a page has correct dimensions.
When writing the test function, $selector will be a jQuery selector containing an instance of the component on the page.
###Child tests
Child tests allow you to test different instances of child elements within each instance of a component. For example, you might want to check that the total word length in each menu item doesn't go over a certain amount:
Child selector: .MainMenu li
Test function:
return $('> a', $selector).text().length;
The reason it is done as a child test instead of an instance test is because it'll run a test against each li element seperately. This means that when you run the test it can highlight the exact menu item which is at fault, rather than the whole menu.
##To run the tests
Open the website you wish to run the tests on and then click on the bookmarklet you created earlier. At the bottom of the page you should see the test results and any failed tests should be highlighted on the page.
You can install the bookmarklet on as many computers as you want to. This means lots of authors can test their content at the same time, and you can write the rules using the editor and they'll instantly be deployed to all the authors without any intervention.
##Todo
- Configuration editor (colours etc)
- Ability to import JSON file of rules & config