freecodecamp / testable-projects-fcc Goto Github PK
View Code? Open in Web Editor NEWTest suite for freeCodeCamp's legacy Codepen-based Curriculum
License: BSD 3-Clause "New" or "Revised" License
Test suite for freeCodeCamp's legacy Codepen-based Curriculum
License: BSD 3-Clause "New" or "Revised" License
I am not quite sure at what point the issue occurred, but for some reason the "the height of the welcome section should be equal to the height of the viewport" test will not pass for me on the Personal Portfolio project. When I hide the navbar (visibility: none), I can see that there is space above the welcome section when there should not be (I had originally done nothing to change the positioning of this section when I first noticed the failure, though I did try translating the welcome section to pass the test to no avail). I believe this issue is being caused by the test suite, as I encountered it in at least one test before and it seemed to have sorted itself out. I cannot recall what fixed the issue last time.
Error:
AssertionError: The height of #welcome-section is not equal to the height of the viewport : expected 495 to equal 478 at n.<anonymous> (https://gitcdn.link/cdn/freeCodeCamp/testable-projects-fcc/b9a6558063e5349870a4123cceeb72f27d6fd9b9/build/bundle.js:20104:36) at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852) at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853) at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192 at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000 at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791) at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855 at i (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:1:559)
Relevant HTML:
<html>
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<body>
<nav id="navbar">
<h1>Jake Steele</h1>
<a href="#welcome-section">Top</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<main>
<div id="welcome-section">
<h1 class="intro-text">Hi. My name is Jake Steele.</h1>
<h3 class="intro-text">I dabble in web design.</h3>
</div>
</main>
</body>
</html>
Relevant CSS:
@media (maxheight: 640) {
font-size: 12px;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
background-color: #3C657F;
}
break {
flex-basis: 100%;
width: 0px;
height:0px;
overflow: hidden;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
nav {
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
height: 10vh;
width: 100vw;
background-color: #60A2CC;
border-bottom: solid #3A617A 1px;
padding: 0vh 10vw;
}
nav > a {
color: #FFF;
line-height: 10vh;
font-weight: 700;
margin: 0vh 1vw 0vh 0vw;
}
nav > h1 {
padding-right: 72vw;
}
#welcome-section {
top: 0px;
left: 0px;
height: 100vh;
width: 100vw;
background-color: #78CAFF;
text-align: center;
border-radius: 10px;
}
.intro-text {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
If this is just an error with my code, I'm sorry for wasting your time and I'll close the issue! Thank you!
@Christian-Paul, @paycoguy Hey guys, so... we finally got the test suite running in browsers other than Chrome - but now, we're discovering that individual projects not seem to have little eccentricities of their own.
Tree map is one - (most) tests fail and visualization does not show up at all in Safari. Haven't yet tested in FireFox and don't have a PC for IE or Edge. Can either of you investigate this on other browsers and let me know? And possibly look into why this is?
Thanks! Going to be opening up some other issues for other projects as well, feel free to jump in if you have any ideas. I'll tag you guys on D3 issues.
EDIT: Oh yeah, also, clicking the "Tests" button, does not bring up the modal for some reason, so you can't see what the issues are
When I run the JS Tribute Page Test, I get a failure for #2 of the Layout (The element should be centered within its parent element.).
...
<style> #img-div { margin: -5px; margin-top: 20px; width: 100%; border: 5px solid white; background: white; } #image { display: block; margin: auto; max-width: 100%; } </style> ```The description of the test says
the inner text of the .display element
The period in front of display makes it look like it is a class, but display is an id.
(And the test expects it to be an id, too)
I guess the period could just be removed.
Safari Version 9.1.2 (11601.7.7)
2 tests failing, but as of yet unknown as to which ones, as test modal will not open in Safari (see #63) - once this is resolved, we should be better able to troubleshoot this issue.
EDIT: was able to coerce the modal into opening, so it seems this is the same issue as #62 & #65, cannot use forEach()
method to iterate over NodeLists. Tests 7 & 8 failing
The test fails if the letters are inside p tags.
span tags work.
A bit unexpected (even though the text mentions "inner text").
Also wanted to mention that Test 3 pretty much expects a qwerty keyboard layout.
Doesn't make much sense on my qwertz keyboard to use z,x,c for the bottom row.
This fails:
<div class="drum-pad" id="heater-4">
<p class="drum-key">A</p>
This passes:
<div class="drum-pad" id="heater-4">
<span class="drum-key">A</span>
this was one of our first projects, and we were not being as thorough at the time. Explicit error messages are needed
The testing for this doesn't allow for flexbox configuration, since the contents of the flexbox need to be wrapped in a div with position set to fixed for it to work, and this causes the following conditions to fail:
CONTENT
9. The first element within the navbar should be a
LAYOUT
If your intention is to get people to use another approach, like fixed and absolute positioning for the two main sections - kindly ignore this issue!
Using iMac w/Chrome browser Version 56.0.2924.87 (64-bit)
When using Materialize as the CSS framework on Codepen, I am unable to select what test suite to run. Works fine when I remove Materialize.
http://codepen.io/msecrist/full/VPXMjw/
Also able to reproduce with the "Fork this pen!" example and adding https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css as external CSS.
@QuincyLarson I wanted to run this by you - I had a thought about adding a comment to the FCC proper issue template about the testable projects since there have been a couple of issues opened in the wrong repo regarding the test suites.
I've added a "report bug" link to the project, so hopefully people will use that, but in case they go straight to FCC main repo - I thought maybe a comment near the top that says "If you are opening an issue regarding a codepen test suite / project please open it at URL instead..." that way issues are opened in the right repo and are easier to track.
Thoughts?
copying the issue that was raised on the forum by @leonfeng here so it can be addressed:
This one made my head hurt 😵 https://codepen.io/leonfeng/pen/xgdqGR7
Personally I felt it was quite a leap from the D3 challenges to this treemap project. The D3 docs only helped a little. In the end I had to "borrow" code from a (GPL-licensed) tutorial, and to be honest I still don't understand half of the code.
In addition, I used a 3rd-party library to render the legend. And it fails the legend colours test (#9) even though each legend item has a unique colour. Are we expected to manually code the legend items? The user stories aren't clear on that 😕
@leonfeng Thanks for the feedback!
Test #9 states: "The legend items should use at least 2 different fill colors"
It expects the elements that have the different fill colors to have the class "legend-item"
In your project, only one element has the class of legend-item; if you made the path elements with class="swatch" also have the class of "legend-item" it should pass. We've tried to make the tests as general as possible so campers can employ whatever strategy they see fit, so using a library is fine, insofar as you can label the classes.
As for how we can improve the tests, @no-stack-dub-sack, @QuincyLarson, @paycoguy, I think making test #8 check for the presence of more than one element with class="legend-item" would make it more clear that there should be multiple elements with this class.
If popular legend libraries do not allow campers to assign class names, we'll need a different solution: perhaps we could iterate through the children of the top level legend element, and collect fill color information that way.
Layout test 1 - The #quote-box wrapper element should be horizontally centered
seems to be failing when a scroll bar is visible.
On my 13.3" display, there is always a scroll bar in editor view. The test never passes when run in editor view.
In Full Page view, the test passes as long as there is no scroll bar.
clientWidth does not take a scroll bar into account and might be throwing off the calculations in testHorizontallyCentered.
Would offsetWidth be a viable alternative to clientWidth?
http://codepen.io/c-herr/pen/dNWjby
(for some reason the pre-filled information report had no data filled in, so i deleted it, i'm using linux, chromium and desktop, if you need specific versions just ask)
Adapting the calculator project to fit the tests gave me the following problem: http://imgur.com/a/PvmhE
The test suite is able to successfully clear the screen and do operations, but it still doesn't pass the test. I tried rendering the display value in a different way (inside a div, like the official FCC solution does) but nothing changed. I'm using React + Redux.
Safari Version 9.1.2 (11601.7.7)
There's 2 issues here - first, the test modal does not open (see #63), second, similar to #62, we have NodeLists returned by querySelectorAll()
that we are trying to iterate over with forEach()
. This method is not supported on NodeLists in pre version 10.X.X Safari browsers or ANY Internet Explorer browser versions (not sure about Edge).
We will likely have to turn the NodeList into a true Array before iterating, this should solve the second part of this issue.
as pointed out by a camper during QA, the tests for the drum machine are dependent on the drum pads being in the right order. I think a quick change to the user stories will fix this, we need to require the drum pads be in a specific order
I somehow broke the Pomodoro test suite. I ran it on a nearly finished project, it gave me 21/25 passed tests, I change one symbol in my code ( wrote "<" instead of "<=") and ran it again, and it gave me '"before each" hook' and '"after all" hook' errors (screenshot below). I changed the code back just to be sure, but it still gave me this errors. I reloaded the page, closed it and opened again - nothing helped. Other test suites on other projects work fine.
Here's my pen: http://codepen.io/enk/pen/YNjGGr
For the Build a Product Landing Page project, it states "use whichever libraries you need". I decided to use Bootstrap and gave my navbar a class of "navbar-fixed-top". When I was finished with the project and ran the tests, the "The header element with id='header' should always be at the top of the viewport" step kept failing even though I had the fixed navbar nested within the header element.
I decided to try adding CSS for id="header" and set the position = fixed and set top = 0.
header {
position: fixed;
top: 0;
}
Doing this allowed the test case to pass, but I don't think this should be required if you're using a Bootstrap navbar with the class "navbar-fixed-top". Would it be possible for the test case to look for a navbar within the header element that has a "fixed-top" class, just in case other students decide to use a library that provides pre-defined classes for different navbar states like SemanticUI or Bootstrap?
https://codepen.io/kev0587/pen/yMpPdQ
I commented out the header css @ near the top of the file - if you run the test, it will fail. If you uncomment the header css and run the test, it will pass.
These projects have not been super thoroughly QAd and I anticipate a decent amount of issues - I think there should be a link somewhere so that people can report bugs in the right place, otherwise I fear they will likely get reported on the main repo and tracking will be a bit more difficult
thanks to @rmdawson71 for reporting this issue!
For some reason, bootstrap effects the width calculation made in layout test 2. Adds an extra 10px. Even though image is centered within parent, test fails. Forked @rmdawson71's pen to preserve this issue: http://codepen.io/no_stack_dub_sack/pen/dNmZrd (test should pass once issue is fixed though).
I confirmed bootstrap being the cause by taking the example project, which passes all the tests by default (and does not use bootstrap at all) and added bootstrap as a dependency without changing anything else in the CSS or HTML, and it caused the same test to fail, with the same exact error message - showing that bootstrap is somewhere adding an extra 10px
Working through the unit test in sequence, I only got test 1 & 2 to pass but test 4 shows as passing as well.
Not having read test 3, I added <div>s
right after the <section>s
.
It could be that it just came up because I don't work through all the user stories before testing but use the tests to find out the next user story...
Maybe the test should explicitly check for <header>
to pass or, in other words, not pass without test 3 having passed?
I created a separate pen: http://codepen.io/c-herr/pen/PWXQmE
The test suite does not run on the forked pen for the Pomodoro Clock. I tried forking it several different times and it never runs, no matter what is written into the editor. Testing other projects works fine for me and the tests on the example pomodoro also work fine.
Tests are failing randomly with the message:
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
8. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8538
at https://rawgit.com/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js:40238:26
9. My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8538
at https://rawgit.com/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js:40252:26
Just before submitting the issue, I ran the tests again and test 7 failed (see screenshot):
7. On first load, my quote machine displays the random quote's author in the element with id="author". ‣
Error: timeout of 4000ms exceeded. Ensure the done() callback is being called in this test.
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7724)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7934this.timeout(requestTimeout + 1000);
return new Promise(function (resolve, reject) {
setTimeout(function (_) {
var author = document.getElementById("author");
if (author.innerText.length > 0) resolve();else reject("There is no initial author displayed ");
}, requestTimeout);
});
http://codepen.io/c-herr/pen/dNWjby
Built this graph today but it's failing one test when it shouldn't be.
It's failing test number 8 of 15. I checked out the criteria for the test by visiting the test JS file here and then did a little bit of debugging.
It turns out that my scatter plot fails the test because the sort function in the test page sorts my array of dots in descending order rather than ascending, which means it fails at the very first assertion. If you look at the code and the chart itself, though, it's clearly all in working order.
Code for the appropriate failing test:
it('8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.', function () {
var dotsCollection = document.getElementsByClassName('dot');
//convert to array
var dots = [].slice.call(dotsCollection);
FCC_Global.assert.isAbove(dots.length, 0, 'there are no elements with the class of "dot" ');
//sort the dots based on yvalue in ascending order
var sortedDots = dots.sort(function (a, b) {
return new Date(a.getAttribute("data-yvalue")) - new Date(b.getAttribute("data-yvalue"));
});
//check to see if the y locations of the new sorted array are in ascending order
for (var i = 0; i < sortedDots.length - 1; ++i) {
FCC_Global.assert.isAtMost(+sortedDots[i].cy.baseVal.value, +sortedDots[i + 1].cy.baseVal.value, "y values don't line up with y locations ");
}
});
After clicking on the link for the Random Quote Machine example (https://codepen.io/FreeCodeCamp/full/ONjoLe/), you arrive at a broken app. The "New Quote" and Twitter buttons do nothing. You can reproduce it by either going directly to the link I provided for the CodePen app or by clicking on the link from the FCC page https://www.freecodecamp.com/challenges/build-a-random-quote-machine
I pasted the line of code that it causing the problem in the example pen. The link to my forked pen with the fix is https://codepen.io/Wjhurley/pen/NjBEod
var r = JSON.parse(response);
in the switch-case it checks "dizzle", but should be "drizzle"
Show the Local Weather
https://www.freecodecamp.com/challenges/show-the-local-weather
http://codepen.io/freeCodeCamp/pen/bELRjV?editors=1010
function IconGen(city) {
var city = city.toLowerCase()
switch (city) {
case 'dizzle':
addIcon(city)
break;
As mentioned on the Forum and in issue #31, tests are failing when using Vue.js.
The issue is that Vue updates the DOM asynchronously.
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
Here is an example test from the official docs:
https://vuejs.org/v2/guide/unit-testing.html#Asserting-Asynchronous-Updates
Assertions on DOM updates resulting from state change will have to be made in a Vue.nextTick callback:
it('updates the rendered message when vm.message updates', done => {
const vm = new Vue(MyComponent).$mount()
vm.message = 'foo'
// wait a "tick" after state change before asserting DOM updates
Vue.nextTick(() => {
expect(vm.$el.textContent).toBe('foo')
done()
})
})
I haven't looked at it in depth but there doesn't seem to be an easy way to just add some "Vue compatibility" to the existing tests.
The Vue page on unit tests mentions that it is planned to work on a collection of common test helpers that might make this easier.
It might be best, for now, to add a notice to the User stories and/or test suite that tests will fail with Vue.js.
The survey form test suite will indicate a project passes all tests even if they do not include a submit button for their survey.
<body>
<h1 id="title">Survey Form</h1>
<p id="description">This is a short description of the survey.</p>
<form>
<fieldset>
<div class="input-group">
<label for="name" id="name-label">Name:</label>
<input type="text" id="name" placeholder="John Doe" required>
</div>
<div class="input-group">
<label for="email" id="email-label">Email:</label>
<input type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="input-group">
<label for="number" id="number-label">Choose a number:</label>
<input type="number" id="number" min="1" max="100" placeholder="10">
</div>
<div class="input-group">
<label for="select">Choose from the list:</label>
<select>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
<div class="input-group">
<label>Choose a button:</label>
<input type="radio" value="left">Left
<input type="radio" value="right">Right
</div>
<div class="input-group">
<label>Choose some boxes:</label>
<input type="checkbox" name="one" value="one">One
<input type="checkbox" name="two" value="two">Two
<input type="checkbox" name="three" value="three">Three
</div>
<div class="input-group">
<label for="text-area">Write some text:</label>
<textarea rows="5" wrap="soft"></textarea>
</div>
</fieldset>
</form>
</body>
Information wasn't previously filled in, i've tried this on Chromium and Firefox. Using Fedora.
The following error happens on my treemap project:
Error: Tooltip should be hidden when mouse is not on an area
However the project is behaving correctly, i don't have enough information to debug it. I tried removing the animation time to fade and show the tooltip, it didn't work.
Here is the codepen: http://codepen.io/Selhar/full/eWKjbL/
It appears that the testing code isn't taking left and right padding of the wrapping div (#img-div) into account when checking for a centered image. The test code allows for +/- 10 px in it's test for centering, so if #img-div is padded by 5px or less, the image position falls within the allowed variance. However, when the image is padded by more than 5 px, then while the image is still correctly centered, it fails the test.
CSS Stylesheet
#img-div {
background-color: #fff;
box-sizing: border-box;
padding: 10px 20px;
width: 100%;
}
#img-div #image {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
#img-div #img-caption {
font-size: 0.8em;
}
HTML Code
<div id="img-div">
<img id="image" src="http://s33.postimg.org/v1na5y41b/John_Stewart_USO.jpg" alt="">
<p id="img-caption">Former Daily Show host Jon Stewart tells jokes behind the president’s lectern as President Barack Obama and First Lady Michelle Obama look on during the comedy show in celebration of the 75th anniversary of the USO and the 5th anniversary of Joining Forces at Joint Base Andrews in Washington, D.C. May 5, 2016. By DoD News Features (160505-D-DB155-002) [Public domain], <a href="https://commons.wikimedia.org/wiki/File%3AJon_Stewart_tells_jokes_behind_the_president%E2%80%99s_lectern_as_President_Obama_and_the_First_Lady_look_on_during_the_comedy_show_in_celebration_of_the_75th_anniversary_of_the_USO_and_the_5th_anniversary_of_Joining_Forces_(26240098743).jpg" target="_blank">via Wikimedia Commons</a></p>
</div>
Screenshot 1: Test fails with left and right padding of 20px.
Screenshot2: Test passes with left and right padding of 5px.
The test suite overrides the project's <body>
's margin and sets it to 0. Example.
A major issue right now with this project is that the test suite only runs in Chrome. This is not cool. If any visitors have any ideas on how to fix this, please feel free to check out the repo and comment here.
There is no technical issue, but the axes if this beta scatterplot are "default", ie time and year. But the data is much better visualized and impressive by sorting the finishing times by place, so that the sheer penetration of doping is seen.
There are other intersting things that can be seen from the date along x axis though, such as the slowing of times as the dopers get out of the sport, but it's not as impressive as using finishign place on the Y axis.
I spent a lot of time trying to determine the best way to present the data I collected...it would be nice to see it still in it's original format .
When implemented with vue.js, the markdown editor does not pass all tests even though it functions according to specs.
Thanks @christophherr for reporting this! I've forked your pen to preserve this issue in case you change or delete it.
Safari Version 9.1.2 (11601.7.7)
See below image - test number 5 failing. This seems to be because the NodeList.forEach()
method is not supported in Safari versions pre-10.X.X, so... will need to either go about this test another way, or add a quick alert as a stop gap using the global alertOnce
utility function.
original ticket here: freeCodeCamp/freeCodeCamp#13065
pen here: http://codepen.io/DarrenfJ/pen/jAxadd
Fails last 3 tests. Seems to not recognize that the id's img-caption and image are inside the div with id img-div. This was confirmed when I commented out 2 lines that linked to a youtube vid between the div img-div and the other 2
see original ticket, it captured that information
commented out the following and it passed all 9 tests (line 17 and 18 and corresponding closing div line 21
<!-- <div class="text-center">
<a href="https://youtu.be/lLvsnkQtZLI" target="_blank"> -->
between id="img-div"
and id="image"
and id="img-caption"
When running the test in codepen I get the message "The
element with id="header" should always be at the top of the viewport." The header is already at the top.https://codepen.io/albertomarin/pen/BWmvgE
The project's CSS could use a bit of a refactor to prevent CSS pollution in both directions, both the project's CSS affecting the test suite, and the test suites CSS affecting projects, will need to take a look and see what other improvements can be made like in #22
Safari Version 9.1.2 (11601.7.7)
@paycoguy, @Christian-Paul Passing 11/15 tests, no errors being thrown, cannot troubleshoot issue because test modal won't open (see #63)
http://codepen.io/bobbidigi34/pen/PmYgmx
My Pomodoro Clock project is failing all of the async tests at the moment. I'm sure there are problems with my code, as it's in very rough shape at the moment. However, it's odd that it's failing all and only the async tests (11, 19-26).
I'll focus on tests 11 and 19.
Error: timeout of 5000ms exceeded. Ensure the done() callback is being called in this test.
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7197
I'm not sure what to say about that. Looking at the test source, it seems like there are plenty of helpful errors in the promise. I'm just not seeing any of them.
TypeError: Cannot read property '1' of null
at getSeconds (https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:19461:24)
at n.<anonymous> (https://rawgit.com/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:19675:38)
at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852)
at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853)
at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192
at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000
at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791)
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855
That indicates that when getSeconds
tries to return matches[1]
, it's getting null
instead of an array. However, when I play with things in the console, matches are returned.
// suppose "time-left" displays "24:44"
var time = document.getElementById("time-left").innerHTML
var matches = /^\d{1,4}\s?:\s?(\d{2})/g.exec(time)
matches[1] // returns "44"
Can anyone point me in the right direction?
The last 3 error-messages all say write some markdown representing an <h1>
instead of the correct messages:
write some markdown representing an <blockquote>
write some markdown representing an <img>
and
write some markdown representing bolded text, <strong>...</strong>
This is quite confusing, I forgot the space between the > and the actual blockquote text.
The error I received always said I need to represent an <h1>, which I already had.
Content tests 1 and 2 test for document.getElementById(), could test for document.getElementByTagName(). This would match the syntax of using <main>
and <title>
tags as taught in the course work.
Issue Description:
Bootstrap add-in from CodePen will not give the same results as the tribute page example provided by Free Code Camp
In the Codepen tribute page example of Dr. Norman Borlaug, the Bootstrap add-in you have is:
Which is not the default bootstrap add-in that Codepen provides, which is:
The video shown in: https://www.freecodecamp.com/challenges/build-a-tribute-page did not specify this difference, which led me to waste a couple of hours to troubleshoot why certain elements were not being responsive - even with the bootstrap add-in that was provided by codepen.
The minute I added the same bootstrap url found in the Dr. Norman Borlaug tribute page, my tribute page became responsive.
Environment Info
Browser: Chrome
OS: Windows 10
Link to My Pen
https://www.freecodecamp.com/challenges/build-a-tribute-page
FYI - I shared the link with the Bootstrap URL that is provided with Codepen.
Safari Version 9.1.2 (11601.7.7)
This is an issue across several (most) test suites - some of the suites that it affects have other problems, and some pass all tests, except for this: the test modal that displays the individual unit tests and their statuses DOES NOT open.
This is definitely the case in pre-10 Safari, but not sure about FF or IE or Edge.
Occasionally, it will work, but most times, the modal just won't open, no errors in console, and works fine in Chrome. Here are the suites that I have found this to affect so far:
Luckily, this does not affect the boilerplate empty test pen, so somehow the projects built around them is causing this.
CC'ing @Christian-Paul && @paycoguy here in case this is somehow related to D3 in those projects, but I doubt this is the case because oddly enough, the Heat Map and Bar Chart pass all tests and the modal opens as intended - very strange, not sure yet what is causing this.
EDIT: For all suites where the modal does not open, if you click the Tests button, then close the test suite interface by pressing the "X" in the top left, the modal will open! I'm still stumped as to why this is, but at least now other errors can be troubleshot
I raised a similar issue yesterday with the scatter plot project, but the same problem appears to be happening with the heat map project I built today, too. It's failing a test because apparently the cells don't line up with the appropriate y-axis values, when they clearly do just by looking at the graph, or by checking out the attributes of the relevant svg elements using Chrome's dev tools. Might be worth having a look at that test and maybe seeing if there is a more flexible way of checking if a project has satisfied the particular user story. The current test logic is a bit too restrictive IMO!
Codepen: http://codepen.io/tom-p-uk/pen/ZeQEaE?editors=1010
Failing test code:
it('9. My heat map should have cells that align with the corresponding month on the y-axis.', function () {
var cellsCollection = document.querySelectorAll('.cell');
FCC_Global.assert.isAbove(cellsCollection.length, 0, "Could not find any elements with a class=\"cell\" ");
//convert to array
var cells = [].slice.call(cellsCollection);
var sortedCells = cells.sort(function (a, b) {
return a.getAttribute("data-month") - b.getAttribute("data-month");
});
//check to see if the y locations of the new sorted array are in ascending order
for (var i = 0; i < sortedCells.length - 1; ++i) {
FCC_Global.assert.isAtMost(+sortedCells[i].getAttribute("y"), +sortedCells[i + 1].getAttribute("y"), "month values don't line up with y locations ");
}
});
Tests pass on CodePen, but do not pass with the same code in local environment. CSS stylesheet is linked and working, same code in both places, and those two tests are the only tests not passing. GitHub repo of page is here
@media (min-width: 600px) {
.mobile-stack {
flex-direction: row;
}
}
.flex {
display: flex;
}
Relevant tests
it('2. My product landing page should have at least one media query.', function() {
let queryRules = [];
// loop through all associated stylesheets and look for media query
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules !== null) {
for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].type === 4) {
// push query rules to empty array
queryRules.push(document.styleSheets[i].cssRules[j]);
}
}
}
}
// there is one media query in Mocha.css, so must detect more than 1 query
FCC_Global.assert.isAbove(queryRules.length, 1, 'No media queries detected ');
});
it('3. My product landing page should utilize CSS flexbox at least once.', function() {
// loop through all associated stylesheets and look for display of flex
const flexCount = [];
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules !== null) {
for (var j = 0; j < document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].style !== undefined &&
document.styleSheets[i].cssRules[j].style.display === 'flex' ||
document.styleSheets[i].cssRules[j].style !== undefined &&
document.styleSheets[i].cssRules[j].style.display === 'inline-flex') {
flexCount.push(1);
}
}
}
}
// our test suite uses a display of flex, so we need to count how many times its used
// and confirm that its more than once. If we just detect one instance, its ours.
FCC_Global.assert.isAbove(flexCount.length, 1, 'We do not detect a display property set to flex or inline-flex anywhere in your CSS ')
});
Ok so this is not exactly a bug report, just a suggestion to add another test to the JS Calculator Test.
Here is the mistake my code produced that was not caught:
code is still messy but i will leave it like this for a while in case you want to check it
This issue (#12837) was originally opened on FCC main, see it here
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.