DPS909/OSD600 Fall 2017 Lab 11
Contents
Introduction
In this lab you will practice reading code on a large, open source project. You will also create a simple HTML/JS test case, and learn about GitHub's special gh-pages
branch and static web publishing.
Step 1. Write a Test Case
One of your friends is building a web site for a local company. She has noticed that in some browsers, one of her pages isn't working correctly. She's been able to reduce the problem down to how images are loading. Here is her latest email to you:
With some browsers, I notice that <img> elements in my page don't seem to always fire their onload event. Specifically, when I set the .src of an image to the same URL as it's already using, no load event fires. My code looks something like this: var img = document.querySelector('#image-1234'); img.onload = function loaded() { ... }; img.src = "http://some.url.com/image"; ... // Some where late in the code I set the URL to the same thing again img.src = "http://some.url.com/image"; // I'd expect the onload event to fire a second time, but it doesn't always in this case! Later on, I sometimes need to reset the image, and in some cases, it needs to use the same URL again. I expect to get an onload event firing every time I change the img.src, no matter what the URL is.
You are asked to write a simple Test Case to test whether a browser has this bug or not. Your test should be a very basic HTML page with some JavaScript that tries to do what your friend is describing:
- load an
img
with a givensrc
(use any image URL you want) - make sure the
onload
event fires - after the first
onload
is completed, update theimg.src
to the same URL you used in step 1. - make sure a second
onload
event fires. If the second event fires, your test passes. If not, it fails.
You can use CSS to indicate if your test passed or failed (e.g., set the background-color
of the document.body
to red
after the first onload
and then to green
after the second, or do any other visual thing you want to indicate pass/fail).
NOTE: your test case should be simple. Don't use extra JavaScript or CSS libraries. You don't need to use any special testing infrastructure. Just a basic HTML page with some JavaScript.
Step 2. Host your Test Case on GH-PAGES
To make it easy for anyone to try our test case, we'll host it on the web. One easy way to do this is to use GitHub's special gh-pages
branch: GitHub will host any static web content you put on a gh-pages
branch on a special URL.
- Create a new repo on GitHub for your test case.
- Enable gh-pages publishing
- Clone your repo locally
- Switch to your
gh-pages
branch:git checkout gh-pages
- Add your test case HTML file, commit, and push your
gh-pages
branch to GitHub
You should now be able to browse to your test case by altering the format of your URL like so:
- repo: https://github.com/{username}/{repo-name}/{test-case-file.html}
- web: https://{username}.github.io/{repo-name}/{test-case-file.html}
Confirm that you can see your test case via github.io
.
Step 3. Test in Various Browsers
See which browsers have this bug by running your test case in various browsers (depending on OS):
- MS Edge
- Firefox
- Chrome
- Safari
- Opera
If you don't have access to a browser due to operating system issues, ask a friend to test for you. You can also try downloading Nightly versions of these browsers instead of building them yourself:
- https://www.google.com/chrome/browser/canary.html
- https://www.mozilla.org/en-US/firefox/channel/desktop/
- https://webkit.org/downloads/
- http://blogs.opera.com/desktop/streams/
Which browsers pass your test? Which fail?
Step 4. Read the code
Pick one of Safari, Chrome, or Firefox, and try to find the code where image's are loaded, and the load event is fired:
- WebKit: WebKit Trac
- Chromium: Search or Browse
- Mozilla: Mozilla DXR
Figure out where in code where your test case is passing or failing.
Submission
Please add your info to the table below. You need to include a blog post which covers how your test case works, how you searched the code, your thoughts about gh-pages, code reading on something is bug, etc.