[Beta] Applied Accessibility - Tests fails to check for the closing </time> tag #16423

Asjas · 2018-01-06T12:40:57Z

Challenge Name

https://beta.freecodecamp.org/en/challenges/applied-accessibility/standardize-times-with-the-html5-datetime-attribute

Issue Description

The test is failing to check for the closing </time> tag. You can reproduce this issue by using the opening <time> tag and leaving out the closing tag.

Browser Information

Browser Name, Version: Chrome, Version 63.0.3239.108 (Official Build) (64-bit)
Operating System: Windows 10 Pro
Mobile, Desktop, or Tablet: Desktop

Your Code

<body>
  <header>
    <h1>Tournaments</h1>
  </header>
  <article>
    <h2>Mortal Combat Tournament Survey Results</h2>
    
    <!-- Add your code below this line -->
    
    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the 
vaunted Mortal Combat tournament is <time datetime="2016-09-15">Thursday, September
 15<sup>th</sup>. May the best ninja win!</p>
    
    <!-- Add your code above this line -->
    
    <section>
      <h3>Comments:</h3>
      <article>
        <p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
        <p>Johnny Cage better be there, I'll finish him!</p>
      </article>
      <article>
        <p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
        <p>Wow, much combat, so mortal.</p>
      </article>
      <article>
        <p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
        <p>Looks like I'll be busy that day.</p>
      </article>
    </section>
  </article>
  <footer>&copy; 2016 Camper Cat</footer>
</body>

Screenshot

The text was updated successfully, but these errors were encountered:

ooade · 2018-01-08T21:26:16Z

Possible fix for this too on this line

$('time').first().text() == "Thursday, September 15th"

PolarisTLX · 2018-01-19T15:22:03Z

Hi there, this seems simple enough for me to fix.

I presume we simply need to modify the first test condition.
The description of the first condition should change from:
"Your time tags should wrap around the text "Thursday, September 15^th"."
to:
"Your time tags should wrap around the text "Thursday, September 15^th", with an opening AND closing tag."

And the code in the background should verify for both the opening and closing before it changes the icon next to the test condition from the "refresh-icon::before" to the "success-icon::before".

I've tried downloading the website to look into the JavaScript files, naturally there is quite a bit of code in there. Am I on the right path to finding that particular line of code to adjust?

Asjas · 2018-01-19T17:59:23Z

Hi @PolarisTLX

Yes you are on the correct path. Basically you need to setup a local dev environment using the Contributing Guide as a reference. Once you have a local dev environment you can then start changing code and testing if it works locally.

The code you will probably look for is in the challenge seed directory. Each individual section in the map is split into folders. You will be looking for the Applied Accessibility json file. Once you have made changes to the file and saved it you will need to run node seed to update mongod. AFAIK you will also need to restart nodemon by typing rs to restart it before you run your test.

Coming to the testing of both opening and closing brackets. I myself have been trying to test for both opening and closing footer elements on issue #16416 and I haven't found a way. I've tried Regex but I'm not really the best at it. I've also tried playing with how Chai counts or selects elements but that hasn't worked for testing the closing element. I would love to see your solution and to test it on my issue to see if it also fixes it.

Asjas · 2018-01-19T18:01:46Z

The only solution I've found was to write a really really long Regexp. But I'm not sure if it's really a good enough solution to PR.

PolarisTLX · 2018-01-19T23:01:58Z

Alright I have the local dev environment up and running, and I have found the test in question in the applied-accessibility.json file. And I think I have code required, however, I am not sure where to place this code.

I also think a RegExp is the quickest solution, and here is mine:

/(\<time).*\>Thursday, September 15\<sup\>th\<\/sup\>\<\/time\>\./;

When testing it in a console, I verified it worked on what the users solution should look like:
The test in the console:

var string = '<time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>.' 
var time = /(\<time).*\>Thursday, September 15\<sup\>th\<\/sup\>\<\/time\>\./;

console.log(time.test(string));
// true   (thus it should work)

It appears that it would also work if it was shortened to just:

/(\<time).*\>.*\<\/time\>/;

But that might be less accurate.

Asjas · 2018-01-20T07:37:14Z

Okay so looking at the test for the time challenge you'll have to replace the current assert($('time').text().match(/Thursday, September 15th/g) with assert(code.match(regexp)). Then replace the word regexp with your RegExp. That should then work.

For reference on how the test should look you can also look at the Jump Straight to the Content Using the main Element challenge in the applied-accessibility.json file. The second test for it has a RegExp you can reference.

PolarisTLX · 2018-01-22T23:41:37Z

Alright I've successfully been running and modifying the local dev environment.

Then I modified the code on line 706 of file "applied-accessibility.json"
From:
"assert($('time').text().match(/Thursday, September 15th/g), 'message: Yo..."
To:
"assert(code.match(/<time.*>Thursday, September 15^{th</sup></time>/g), 'message: Yo..."}

I can tell that it is being tested as I can modify the "message" part. But the test is not working.
I suspect there is something with "assert(code.match(..." that isn't right. What is the variable "code" here?

Added test cases with assert statements BREAKING CHANGE: no Closes freeCodeCamp#16415 Closes freeCodeCamp#16424 Closes freeCodeCamp#16423 Closes freeCodeCamp#16422 Closes freeCodeCamp#16420 Closes freeCodeCamp#16419 Closes freeCodeCamp#16417 Closes freeCodeCamp#16414

raisedadead added the beta label Jan 6, 2018

raisedadead added help wanted Open for all. You do not need permission to work on these. type: tests labels Jan 11, 2018

anhtran1906 mentioned this issue Jan 26, 2018

fix(seed): Add a test case for closing tag for the nav tag #16575

Merged

10 tasks

raisedadead closed this as completed in #16575 Jan 30, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Beta] Applied Accessibility - Tests fails to check for the closing </time> tag #16423

[Beta] Applied Accessibility - Tests fails to check for the closing </time> tag #16423

Asjas commented Jan 6, 2018

ooade commented Jan 8, 2018 •

edited

PolarisTLX commented Jan 19, 2018

Asjas commented Jan 19, 2018

Asjas commented Jan 19, 2018

PolarisTLX commented Jan 19, 2018 •

edited

Asjas commented Jan 20, 2018

PolarisTLX commented Jan 22, 2018

[Beta] Applied Accessibility - Tests fails to check for the closing </time> tag #16423

[Beta] Applied Accessibility - Tests fails to check for the closing </time> tag #16423

Comments

Asjas commented Jan 6, 2018

Challenge Name

Issue Description

Browser Information

Your Code

Screenshot

ooade commented Jan 8, 2018 • edited

PolarisTLX commented Jan 19, 2018

Asjas commented Jan 19, 2018

Asjas commented Jan 19, 2018

PolarisTLX commented Jan 19, 2018 • edited

Asjas commented Jan 20, 2018

PolarisTLX commented Jan 22, 2018

ooade commented Jan 8, 2018 •

edited

PolarisTLX commented Jan 19, 2018 •

edited