How to test the User Interface after a modification?

This page is a checklist describing every User Interface features of piwik that you have to test after any modification in UI code, or before any public release.

If you have modified the Javascript code, CSS, HTML, or PHP code that can be related to the User Interface, you have to go through this list to make sure everything is still working.

Browsers to use to test the UI

These different features should be tested within several browsers:

  • Firefox,
  • Firefox with Firebug extension, check that there is no error or notice in the JS code,
  • Internet Explorer 6,7,
  • Internet Explorer with Debug enabled (set debugging in Tools > Internet > Advanced > Debug),
  • Opera,
  • Safari

To help you, try to generate screenshots of the websites using http://browsershots.org/

Standard Datatable

Style

Check that:

  • Different styles for Column header
  • Different styles for Odd/Even lines
  • Icons are present (eg: icon of google/yahoo/...)
  • Footer style (footer buttons not always visible)
  • Text is truncated when necessary, and a tooltip displays original text

Table behaviour

Test the features:

  • Sort by column ("column sorted" icon should appear once the action is completed)
  • Pagination (previous/next), verify that 'current' and 'max' numbers are correct
  • Pagination should be reseted after a table refresh (column sort)
  • Test Include/Exclude low population

Test the following:

  • Find a string that is present in the table, navigate in the table and cancel the search
  • Try to find a string that is not present in the table (should display 'No data...')
  • Search for 'null string' (should be identical to cancelling a search)

Check that all links work:

  • data export (csv/xml/json/php)
  • pie chart
  • bar graph
  • tag cloud
  • table

Subdatatable

Check that:

  • Click on a row displays a datatable (eg. for Keywords) and verify all previous tests on this subDataTable (the same testing procedure as standard datatable)
  • There should be an external url link on some subdatatable rows (ie: Search engines subtable in the Keywords datatable)

Tagcloud

Check that:

  • The bigger is the font size, the bigger the value should be
  • Tooltip indicate exact values

Graph

Check that:

  • Verify that every graph works (=> graph lib input is not broken)

Action Datatable

  • Run the same test than standard datatable
  • Expand/Minimize tree rows through several nesting levels (check that the left margin is growing)
  • Check that the figures sums up correctly in 'include low pop' mode

Sparklines

Check that:

  • Click on a sparkline should update the graph with correct data

Dashboard

Test the features:

  • Move widgets around
  • Delete widget
  • Add a new widget
  • You should be able to quit the modal dialog by pressing 'esc' key
  • Make sure that already added widgets cannot be added again

Calendar

Check that:

  • The currently selected period is highlighted in the calendar
  • Try to change date and period

Test the following:

  • Click on a main menu item should select the first submenu item
  • The menu should indicate the current category when mouse isn't over it (timeout)
  • Test all menu/submenu for broken links