Freecodecamp: Image's non-shortened URL not accepted by tests

[fr0d0202]

Challenge Add Images to your Website has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36.
Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
<img src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="kitten image"/>

[BKinahan]

The issue is that the shortened URL https://bit.ly/fcc-relaxing-cat points to the image at https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg, but a user can add the latter URL as the value of the src attribute of the img element and be told by the test message that they have not pointed to the correct image.

This could be a common initial point of failure for users who visit the link to see the image before including it in the HTML code, so perhaps either the test message should be adjusted or the test itself updated to also accept the image's true URL.

cc @FreeCodeCamp/issue-moderators Thoughts?

[raisedadead]

Yup. Makes sense.

[dhcodes]

Not a mod, but I recommend we consider using the real link (https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg). It would be more reliable longterm and is only 23 characters longer. I would wager many users are likely copying/pasting the src link anyway.

[johren02]

Would like to try my first pull request for this issue. Assuming I'm proposing a change to line 1131 in FreeCodeCamp/seed/challenges/01-front-end-development-certification/html5-and-css.json, correct all? Confused as to how the regex is created.

"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');",

If someone wants to explain how I would go about making a RegExp that would target the full amazonaws link, I'd be happy to try to do it.

[dhcodes]

@tertiaryidentifier ultimately you would need to rewrite the part in the paratheses after RegExp in the line you referenced to accept either the bit.ly link OR the amazon link as part of the test. You can use a bar (|) to denote 'or' in Regex. Note that since the file is JSON, slashes need to be escaped with an extra \ compared to standard regex.

To read more about regex, checkout RegexOne or Regexr. RegexOne can help you learn the concepts of Regex and Regexr allows you to test out your expressions to see if they catch your test cases.

You might wait a bit longer though to see if others agree this is the route to be taken before setting out to make the PR.

[johren02]

Thanks @dhcodes , I'll wait and see, and in the meantime, refresh my regexp knowledge. :)

I think that the regular expression should accept the bit.ly OR the full amazon link.

[BlauFeuer]

The test constraint doesn't state your image tag needs the correct link, so why does the test look for it?
(@tertiaryidentifier Unless your test is to write a test that tests it.)

Your img element should have the class smaller-image.

[BlauFeuer]

Anyway, I [thought that I] got stuck on this one. What drew me to this issue was the fact that I couldn't see the image in the browser, and figured that something was up with the link.

Sorry, somehow this issue came up when I searched for "Size your Images", the only HTML5 and CSS challenge that I have not completed. I skipped that one, but completed this one: Add Images to your Website even without seeing an image appear on the challenge page. I tested through the one you're currently discussing. Now I've finally opened an issue on the correct challenge I'm having trouble with: #10324 Forgive my confusion - you are correct, the test you're talking about in this issue actually does state the criteria and I succeeded in the challenge even though the image didn't appear in the browser (I'm thinking it's due to adblock).

[johren02]

@BlauFeuer, the test actually does state:

Your image should have a src attribute that points to the kitten image.

We can't alter the test to accept any link, because then someone could put in any image. The challenge is asking for this specific cat image, but currently only accepts one. I think the correct modification should be for the test to accept both, not all.

[raisedadead]

Yes, that is correct the test should accept both the bitly link as well as the full link.

[dhcodes]

@tertiaryidentifier you want to tackle this? If not, I'll try it

[johren02]

Working on it. I'll post my solution here before initiating a pull request.

[dhcodes]

@tertiaryidentifier cool, if you have any questions, jump into the Help Contributors room

[johren02]

Argh ... I think this is above my skill level. Sorry! One day I will
contribute robust regular expressions for testing, but today is not the
day. :(

On Wed, Aug 24, 2016 at 10:23 AM, Dylan H [email protected] wrote:

@tertiaryidentifier https://github.com/tertiaryidentifier cool, if you
have any questions, jump into the Help Contributors room
https://gitter.im/FreeCodeCamp/HelpContributors

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/10306#issuecomment-242082051,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ARtB_ey0hy9IzyOObBoOq7t64rN8WrAAks5qjFPpgaJpZM4JprZ4
.

[dhcodes]

@tertiaryidentifier jump on Gitter if you want to talk through it.