Change:
A camper managed to fail the challenge despite having a close enough correct solution for the challenge. It even displays correctly in the browser. I do not believe the tests should be failing if there are spaces around the words "cat photos" in the anchor element. The user should be proceeding to another challenge. No response Device: Desktop OS: Windows 10 Browser: FireFox Version: 118.0.2 No response
I think here we should actually expect correct whitespace.
They shouldn't be messing with that element in the first place in step 13. I think step 12 is more relevant for this issue. And yes, a lot of people add extra spaces in the link text and get bit by this. This was mentioned in issue and I think the consensus is that a test should be specifically to check for the extra white space. I would normally agree that extra white space should not be an issue and the tests should not be so strict about it. But for link text I can see the reasoning. If you add extra white space after "photos" then you will see the underline on the link extend past the word "photos" into the white space after the word. This is one of those few instances where white space actually does make a difference.
Hey, I am a first-timer and I would like to solve this issue
Please read our contributing guide. This issue is not marked as ready for contributions and we do not assign issues.
There is a test where the user is prompted for typos. So instead of writing a test for just detecting whitespaces can't we just mention to avoid whitespaces in that prompt? !
I think it would probably be better to mention whitespace separately since it's early in the curriculum
Sorry if I am wrong about this but do you mean we should make the test less strict and allow whitespaces?
Nope. I think we should check whitespace and typos separately.
does this work then?
The link's text should be . You have either whitespaces before or after the text javascript const nestedAnchor = $('p a')[0]; const hasWhiteSpaceBeforeCat = /^(nestedAnchor ); const hasWhiteSpaceAfterPhotos = /s+$/.test(nestedAnchor ); assert( hasWhiteSpaceBeforeCat hasWhiteSpaceAfterPhotos );
The test for the p element content probably also needs an adjustment to be agnostic to whitespace? And then this test for whitespace would follow?
This regex pattern tests true for sentences with single whitespace between words and no whitespaces before and after the starting and ending word respectively. You can try below code for verifying that So I can write a single test to verify if there are no extra whitespaces between words and no whitespaces before and after the first and last word. So if I get the innerText of the tag then I can just run the test on that to verify the text inside the nestedAnchor tag.
I'm talking about modifying the current test that checks forboth typos and spaces at the same time.
This is the current test for only typos.
The link's text should be cat photos. You have either omitted the text or have a typo. As far as I can understand you want this modification to the test right? javascript const nestedAnchor = $('p a')[0]; const pText = document.querySelector('p').innerText.toLowerCase(); //get the inner text which includes text inside anchor tag const typoCheck = nestedAnchor.innerText.toLowerCase().replace(/s+/g, ' ') === 'cat photos'; //checking for typos const whiteSpacesCheck = /^(S+sS+)+$/.test(pText); assert( typoCheck whiteSpacesCheck ); //if either is false then it will fail
I'm saying that test needs to be two tests.
I have three options of writing the test: telling the users to avoid whitespaces when the typo test fails and this text is prompted to the user 'The link's text should be cat photos. You have either omitted the text or have a typo or have extra whitespaces.' and not adding a new test. separate tests for checking typos and whitespaces. The link's text should be cat photos. You have either omitted the text or have a typo. AND The link text seems to contain extra whitespaces. both the tests into one single test. The link's text should be cat photos. You have either omitted the text or have a typo or have extra whitespaces. Please tell me which option solves the issue. If none of them are correct then please elaborate more on the proper solution I am unable to understand the proposed solution. Also sorry if this is causing you inconvenience.
Your option 2 is almost correct, but those two tests cannot be quite like that. First we should check if the contents of the a element match the correct text with or without spaces. So ' cat photos ' or 'cat photos ' or ' cat photos ' or 'cat photos' should all pass while 'foo bar' would not. Then we should check if the contents of the a element are exactly 'cat photos'. The tests have to be in order.
I found another challenge that deals with the same anchor and spacing issue. I'd like to try to come up with some regex myself for the tests. I'll add an additional comment with some ideas.
I was thinking a little something for the I mentioned right before the last test You should not have extra spaces around the .
Is this the correct way now? The link's text should be cat photos. You have either omitted the text or have a typo. NEXT TEST The link's text should be cat photos. You either have leading or ending whitespaces.
The second test doesn't need to be that complicated. It should match for the string literal without extra spaces.
yeah sorry I was too engrossed in learning regex xD You can check the second test I have updated it.
should I raise a PR then? or is this issue not open for PRs?
I think the actual implementation details of the tests are better suited in a PR. I will open this up to contribution. If other challenges need the same change we can collect them in this issue and make it more general. An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors. If you would like to contribute and have not read the contributors docs, please do so here: If you have any issues with contributing, be sure to join us on the , or on the
I will repeat what I posted in the PR here as well. If we are really concerned about the anchor element content we shouldn't be lowercasing it or removing anything and we should use or and not . Something about this I didn't realize is the spacing inside only happens if the element is followed by outside text (which seems bizarre). and will always show the actual element content. We should replace jQuery for any test we see that is using it.
hey everyone i think that when it comes to whitespaces - the user includes whitespaces before or after or in both sides of the anchor text - if we want to ignore whitespaces i think a regex should just be included in the source code and replaces it with an empty string ''" like showed in a code earlier. So that wouldn't be a big issue later on. And about typos normally they shouldn't be allowed. Like if the user is supposed to type 'cat photos' and instead they type 'cat photo' that obviously shouldn't pass and they shouldn't be able to go to the next challenge until they enter the exact anchor text asked. Hope this was understandable.
I think we agreed above that we don't want to ignore the whitespaces
oh ok i get it
I did the last instruction to delete the entire anchor element below the p element and it passed.

Discussion:
The link's text should be `cat photos`. You have either omitted the text or have a typo. ```js <del> const nestedAnchor = document.querySelector(`p > a`); assert( nestedAnchor.innerText.toLowerCase().replace(/s+/g, ' ') === 'cat photos' ); </del> <ins> const nestedAnchor = document.querySelector('p > a'); const innerContent = nestedAnchor.innerHTML; assert.isTrue(innerContent.trim() === 'cat photos'); ``` The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`. ```js const nestedAnchor = document.querySelector('p > a'); const innerContent = nestedAnchor.innerHTML; assert.isNotTrue(/^s+|s+$/.test(innerContent)); </ins> ``` After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.