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
imgwith a givensrc(use any image URL you want) - make sure the
onloadevent fires - after the first
onloadis completed, update theimg.srcto the same URL you used in step 1. - make sure a second
onloadevent 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-pagesbranch:git checkout gh-pages - Add your test case HTML file, commit, and push your
gh-pagesbranch 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.
