Navigate to tests/visual/. You should see two directories: components/ and utils/.
For each component and util:
Navigate to the component or util’s test path, e.g. ./components/align/
The test file contains a set of test cases, each of which starts with an assertion of the form “It should…” that describes an aspect of how that style should render. Check that the browser’s rendering matches the description. You can compare the result with desktop Chrome’s rendering by pointing Chrome at http://localhost:8000. There should be no major discrepancies.
If the browser doesn’t seem to render a test case correctly, take a screenshot and make a note of the issue.
When done checking the test file, if there are problems, open a ticket on the GitHub repo at https://github.com/mobify/stencil/issues. Use the title format “{Name} {type} – visual issues in {browser}”, e.g. “Align component – visual issues in iOS 5” or “Layout utils – visual issues in Andoid 4.1”.
In the issue body, describe the problems and attach screenshots.
Tag the issue with “device-testing”.
If the above has been done for each component and util in every browser, you’re done!
Needs manual checking of its tests on:
[x] Android 2.3 Browser
Manual testing instructions
sass -v
# Sass 3.3.x or aboveIf you have Sass < 3.3, run
gem update sass
bower -v
# e.g. 1.3.5If not, run
npm install -g bower
git@github.com:mobify/stencil.git
. Tests should be done on master.stencil
directory and runnpm install && bower install
grunt
to compile the test stylesheetspython -m SimpleHTTPServer
to make the visual tests available on localhost:8000stencil/tests/visual/
tests/visual/
. You should see two directories:components/
andutils/
../components/align/