Comments (7)
@QuincyLarson Before going ahead with creating a PR for this issue I would like to better understand the purpose of the "technical-documentation-page" assignment. Looking at the existing tests, I am guessing the goal for the assignment is to have the student use the <nav>
(and related) elements along with some other basic elements like <code>
, <li>
, and <p>
.
Concerning the layout, the <nav>
element must stay visible, and the page should use at least one media query.
If the above is correct and I am not missing anything, then I recommend the following approach to the 2 issues described by @sue888.
The header requirement
"The first element within the navbar should be a <header>
which contains text that describes the topic."
This can be improved by making the requirement slightly more flexible:
"The navbar element should contain one <header>
element which contains text that describes the topic".
The existing test checks for firstElementChild
which does not allow any container <divs>
because the <header>
must be the very first and top child. I would change this to use getElementsByTagName('header').length === 1
. getElementsByTagName()
searches the entire sub-tree so this would allow for any number of containers before the <header>
. I think this test alone would be good enough, but if we wanted to make sure the header appears before any navbar links, I could try to add a test for that too. Something like "The <header>
element inside the navbar must appear before any <a>
elements with the class of "nav-link"."
NOTE: The codepen provided by @sue888 uses the <header>
element for every link within the navbar, so my new proposed test would still cause that code to fail. However, I believe it should fail because using the <header>
element for each <a>
link in the navbar is not recommended. The <header>
element should only be used once within the navbar.
The layout requirement
"On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user."
failed with "AssertionError: expected -1000 to be close to 0 +/- 10
I believe this is working as intended. If you look at the working example pen, the element with id="navbar" has CSS specifying position:fixed
, keeping the <nav>
element on the top left.
But on the CodePen provided by @sue888, the element with id="navbar" does not have a fixed position.
The navbar appears to stay at a fixed position because a container within the navbar (<div id="fixed-or-not">
) does have a fixed position. Visually all of the navbar content stays on the top left, but in reality the <nav>
element actually does scroll off the top of the viewport when the user scrolls down.
I have not tried it, and I think it would be out of scope for me, but I believe it would be possible to make the navbar a fixed position while still using a flexbox layout. So I don't see a problem with keeping this test as-is, and having students make sure the <nav>
element itself stays on the top left. I.e. this test is working as intended and the CodePen provided by @sue888 should be fixed instead.
Your thoughts?
from testable-projects-fcc.
@tchaffee Awesome! OK - It sounds like we can close this issue, and @sue888 can update her pen when she has time.
I'm going to close this issue but if there's anything else related to this, feel free to reopen it.
from testable-projects-fcc.
@sue888 it's a good point, but we've been struggling to account for everything with these. Hard to be completely agnostic with the way people implement these projects when it comes to testing.
@QuincyLarson what do you think? We've been running in to plenty of similar issues that in one way or another limit people, finding it tough to keep up. "Perfect" may be more unattainable than usual for these...
from testable-projects-fcc.
@tchaffee I agree with you about
"The navbar element should contain one
element which contains text that describes the topic".
The existing test checks for firstElementChild which does not allow any container because the
must be the very first and top child. I would change this to use getElementsByTagName('header').length === 1. getElementsByTagName() searches the entire sub-tree so this would allow for any number of containers before the . I think this test alone would be good enough, but if we wanted to make sure the header appears before any navbar links, I could try to add a test for that too. Something like "The element inside the navbar must appear before any elements with the class of "nav-link"."
NOTE: The codepen provided by @sue888 uses the
element for every link within the navbar, so my new proposed test would still cause that code to fail. However, I believe it should fail because using the element for each link in the navbar is not recommended. The element should only be used once within the navbar.
I agree with you.
Please use this Pen (on freecodecamp's CodePen account) instead - we can refactor it to get it to pass your new tests. You can fork it then let me know when it passes and I can fork it back with the official account. https://codepen.io/freeCodeCamp/pen/NdrKKL
Here are all the freeCodeCamp pens for your reference: https://codepen.io/freeCodeCamp/
from testable-projects-fcc.
@QuincyLarson No need to refactor the example code. My new test works with the old code at the same time allowing more flexibility with multiple levels of container <div>
. The only thing that will continue to break is the pen provided by @sue888. That code would need to be refactored, because the tests are correct and there are a couple of problems with the code provided by @sue888.
from testable-projects-fcc.
I still have a PR for this that I need to push when it is ready.
from testable-projects-fcc.
@tchaffee this thorough explanation was helpful for me to better understand your PR. Everything looks good to me except the merge conflicts need to be resolved because @tbushman's PR was merged ahead of yours.
You can rebase on top of this and update the PR to fix. Then we should be good to go on this. I agree with your assessment and choices. Nice work!
from testable-projects-fcc.
Related Issues (20)
- test issue when i'm working with survey project , test shows test failed list of tribute page HOT 1
- Test failing but test requirement has been met HOT 1
- getting an error on product landing page #landing test. it says the navbar should always be at the top of the page. the navbar is at the top of my page but i am still receiving the error. HOT 1
- FCC Personal Portfolio - Can't get Layout #3 test to pass regarding navbar and viewport HOT 2
- project verification script not detecting required id tags in my code HOT 1
- User Story #11: Within the form, there is a submit input with a corresponding id="submit" HOT 1
- Test scripts are not correct HOT 1
- Personal Portfolio Project Bugs
- i think this is bog, 3 hour i am trying HOT 1
- Pomodoro Clock #15 Test of "25 + 5" Test Suite May Be Yielding Incorrect Results HOT 3
- Survey Form Test Issues
- FCC: Tribute Page
- Potrfolio tests: typo in #Content test number 4
- the test is not running HOT 1
- Markdown Preview tests not compatible with Vue HOT 1
- TypeError: Cannot read property '1' of null for Pomodoro clock. Why?????!!!!!!! HOT 1
- Issue with image running Tribute Page tests HOT 2
- Dependency Dashboard
- Build a JavaScript Calculator tests typo HOT 3
- incomplete fix for 25+5 with React@18 in #1485
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from testable-projects-fcc.