667
edits
Changes
Created page with "==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 specia..."
==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 <code>gh-pages</code> 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:
<pre>
When I use Safari on my Mac, I notice that <img> elements in my page don't seem to always have their onload event fire. 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";
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.
</pre>
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 <code>img</code> with a given <code>src</code> (use any image URL you want)
# make sure the <code>onload</code> event fires
# after the first <code>onload</code> is completed, update the <code>img.src</code> to the '''same''' URL you used in step 1.
# make sure a second <code>onload</code> 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 <code>background-color</code> of the <code>document.body</code> to <code>red</code> after the first <code>onload</code> and then to <code>green</code> 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 <code>gh-pages</code> branch: GitHub will host any static web content you put on a <code>gh-pages</code> branch on a special URL.
# Create a new repo on GitHub for your test case.
# [https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages Enable gh-pages publishing]
# Clone your repo locally
# Switch to your <code>gh-pages</code> branch: <code>git checkout gh-pages</code>
# Add your test case HTML file, commit, and push your <code>gh-pages</code> 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 <code>github.io</code>.
==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.
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''': [https://trac.webkit.org/browser WebKit Trac]
** '''Chromium''': [https://cs.chromium.org/ Search] or [https://chromium.googlesource.com/chromium/src.git Browse]
** '''Mozilla''': [https://dxr.mozilla.org/mozilla-central/source/ 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.
{| class="wikitable"
! style="font-weight: bold;" | #
! style="font-weight: bold;" | Name
! style="font-weight: bold;" | Test Case Repo (URL)
! style="font-weight: bold;" | Gh-Pages Test Case (URL)
! style="font-weight: bold;" | Blog Post (URL)
|-
| 1
|
|
|
|
|-
| 2
|
|
|
|
|-
| 3
|
|
|
|
|-
| 4
|
|
|
|
|-
| 5
|
|
|
|
|-
| 6
|
|
|
|
|-
| 7
|
|
|
|
|-
| 8
|
|
|
|
|-
| 9
|
|
|
|
|-
| 10
|
|
|
|
|-
| 11
|
|
|
|
|-
| 12
|
|
|
|
|-
| 13
|
|
|
|
|-
| 14
|
|
|
|
|-
| 15
|
|
|
|
|-
| 16
|
|
|
|
|-
| 17
|
|
|
|
|-
| 18
|
|
|
|
|-
| 19
|
|
|
|
|-
| 20
|
|
|
|
|-
| 21
|
|
|
|
|-
| 22
|
|
|
|
|-
| 23
|
|
|
|
|-
| 24
|
|
|
|
|-
| 25
|
|
|
|
|-
| 26
|
|
|
|
|-
| 27
|
|
|
|
|-
| 28
|
|
|
|
|-
| 29
|
|
|
|
|-
| 30
|
|
|
|
|-
| 31
|
|
|
|
|-
| 32
|
|
|
|
|-
| 33
|
|
|
|
|-
| 34
|
|
|
|
|-
| 35
|
|
|
|
|-
| 36
|
|
|
|
|-
| 37
|
|
|
|
|-
| 38
|
|
|
|
|-
| 39
|
|
|
|
|-
| 40
|
|
|
|
|}
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 <code>gh-pages</code> 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:
<pre>
When I use Safari on my Mac, I notice that <img> elements in my page don't seem to always have their onload event fire. 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";
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.
</pre>
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 <code>img</code> with a given <code>src</code> (use any image URL you want)
# make sure the <code>onload</code> event fires
# after the first <code>onload</code> is completed, update the <code>img.src</code> to the '''same''' URL you used in step 1.
# make sure a second <code>onload</code> 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 <code>background-color</code> of the <code>document.body</code> to <code>red</code> after the first <code>onload</code> and then to <code>green</code> 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 <code>gh-pages</code> branch: GitHub will host any static web content you put on a <code>gh-pages</code> branch on a special URL.
# Create a new repo on GitHub for your test case.
# [https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages Enable gh-pages publishing]
# Clone your repo locally
# Switch to your <code>gh-pages</code> branch: <code>git checkout gh-pages</code>
# Add your test case HTML file, commit, and push your <code>gh-pages</code> 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 <code>github.io</code>.
==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.
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''': [https://trac.webkit.org/browser WebKit Trac]
** '''Chromium''': [https://cs.chromium.org/ Search] or [https://chromium.googlesource.com/chromium/src.git Browse]
** '''Mozilla''': [https://dxr.mozilla.org/mozilla-central/source/ 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.
{| class="wikitable"
! style="font-weight: bold;" | #
! style="font-weight: bold;" | Name
! style="font-weight: bold;" | Test Case Repo (URL)
! style="font-weight: bold;" | Gh-Pages Test Case (URL)
! style="font-weight: bold;" | Blog Post (URL)
|-
| 1
|
|
|
|
|-
| 2
|
|
|
|
|-
| 3
|
|
|
|
|-
| 4
|
|
|
|
|-
| 5
|
|
|
|
|-
| 6
|
|
|
|
|-
| 7
|
|
|
|
|-
| 8
|
|
|
|
|-
| 9
|
|
|
|
|-
| 10
|
|
|
|
|-
| 11
|
|
|
|
|-
| 12
|
|
|
|
|-
| 13
|
|
|
|
|-
| 14
|
|
|
|
|-
| 15
|
|
|
|
|-
| 16
|
|
|
|
|-
| 17
|
|
|
|
|-
| 18
|
|
|
|
|-
| 19
|
|
|
|
|-
| 20
|
|
|
|
|-
| 21
|
|
|
|
|-
| 22
|
|
|
|
|-
| 23
|
|
|
|
|-
| 24
|
|
|
|
|-
| 25
|
|
|
|
|-
| 26
|
|
|
|
|-
| 27
|
|
|
|
|-
| 28
|
|
|
|
|-
| 29
|
|
|
|
|-
| 30
|
|
|
|
|-
| 31
|
|
|
|
|-
| 32
|
|
|
|
|-
| 33
|
|
|
|
|-
| 34
|
|
|
|
|-
| 35
|
|
|
|
|-
| 36
|
|
|
|
|-
| 37
|
|
|
|
|-
| 38
|
|
|
|
|-
| 39
|
|
|
|
|-
| 40
|
|
|
|
|}
