From f5288c0336e7f4fcc1e29986fa16e0d0fa2f4041 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 21 Nov 2024 00:32:40 -0500 Subject: [PATCH] chore(curriculum): update tests lab product page (#57225) Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> --- .../587d78af367417b2b2512b04.md | 105 ++++++++++-------- 1 file changed, 61 insertions(+), 44 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md b/curriculum/challenges/english/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md index b5f4fe2edd0..fd14bdc474a 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md +++ b/curriculum/challenges/english/25-front-end-development/lab-product-landing-page/587d78af367417b2b2512b04.md @@ -35,57 +35,63 @@ Fulfill the user stories below and get all the tests to pass to complete the lab You should have a `header` element with an `id` of `header`. ```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') +const el = document.getElementById('header'); +assert.exists(el); +assert.strictEqual(el.tagName, 'HEADER'); ``` You should have an `img` element with an `id` of `header-img`. ```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') +const el = document.getElementById('header-img'); +assert.exists(el); +assert.strictEqual(el.tagName, 'IMG'); ``` Your `#header-img` should be a descendant of the `#header`. ```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) +const els = document.querySelectorAll('#header #header-img'); +assert.isNotEmpty(els); ``` Your `#header-img` should have a `src` attribute. ```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) +const el = document.getElementById('header-img'); +assert.exists(el); +assert.exists(el.src); ``` Your `#header-img`’s `src` value should be a valid URL (starts with `http`). ```js const el = document.getElementById('header-img'); -assert(!!el && el.getAttribute('src') !== "" && /^http/.test(el.src)); +assert.exists(el); +assert.isNotEmpty(el.getAttribute('src')); +assert.match(el.src, /^http/); ``` You should have a `nav` element with an `id` of `nav-bar`. ```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') +const el = document.getElementById('nav-bar'); +assert.exists(el); +assert.strictEqual(el.tagName, "NAV"); ``` Your `#nav-bar` should be a descendant of the `#header`. ```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) +const els = document.querySelectorAll('#header #nav-bar'); +assert.isNotEmpty(els); ``` You should have at least 3 `.nav-link` elements within the `#nav-bar`. ```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) +const els = document.querySelectorAll('#nav-bar .nav-link'); +assert.isAtLeast(els.length, 3); ``` Each `.nav-link` element should have an `href` attribute. @@ -93,9 +99,10 @@ Each `.nav-link` element should have an `href` attribute. ```js const els = document.querySelectorAll('.nav-link') els.forEach(el => { - if (!el.href) assert(false) + assert.exists(el.href); + assert.isNotEmpty(el.href); }) -assert(els.length > 0) +assert.isNotEmpty(els); ``` Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`). @@ -104,16 +111,17 @@ Each `.nav-link` element should link to a corresponding element on the landing p const els = document.querySelectorAll('.nav-link') els.forEach(el => { const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) + assert.exists(document.getElementById(linkDestination)); }) -assert(els.length > 0) +assert.isNotEmpty(els); ``` You should have a `video` or `iframe` element with an `id` of `video`. ```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) +const el = document.getElementById('video'); +assert.exists(el); +assert.oneOf(el.tagName, ['VIDEO','IFRAME']); ``` Your `#video` should have a `src` attribute. @@ -128,77 +136,86 @@ if (sourceNode.length) { if (sourceElement) { el = sourceElement; } -assert(el.hasAttribute('src')); +assert.isTrue(el.hasAttribute('src')); ``` You should have a `form` element with an `id` of `form`. ```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') +const el = document.getElementById('form'); +assert.exists(el); +assert.strictEqual(el.tagName, "FORM"); ``` You should have an `input` element with an `id` of `email`. ```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') +const el = document.getElementById('email'); +assert.exists(el); +assert.strictEqual(el.tagName, "INPUT"); ``` Your `#email` should be a descendant of the `#form`. ```js const els = document.querySelectorAll('#form #email') -assert(els.length > 0) +assert.isNotEmpty(els); ``` Your `#email` should have the `placeholder` attribute with placeholder text. ```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) +const el = document.getElementById('email'); +assert.exists(el); +assert.exists(el.placeholder); +assert.isNotEmpty(el.placeholder); ``` Your `#email` should use HTML5 validation by setting its `type` to `email`. ```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') +const el = document.getElementById('email'); +assert.exists(el); +assert.strictEqual(el.type, "email"); ``` You should have an `input` element with an `id` of `submit`. ```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') +const el = document.getElementById('submit'); +assert.exists(el); +assert.strictEqual(el.tagName, "INPUT"); ``` Your `#submit` should be a descendant of the `#form`. ```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) +const els = document.querySelectorAll('#form #submit'); +assert.isNotEmpty(els); ``` Your `#submit` should have a `type` of `submit`. ```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') +const el = document.getElementById('submit'); +assert.exists(el); +assert.strictEqual(el.type, 'submit'); ``` Your `#form` should have an `action` attribute of `https://www.freecodecamp.org/email-submit`. ```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.org/email-submit') +const el = document.getElementById('form'); +assert.exists(el); +assert.strictEqual(el.action, 'https://www.freecodecamp.org/email-submit'); ``` Your `#email` should have a `name` attribute of `email`. ```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') +const el = document.getElementById('email'); +assert.exists(el); +assert.strictEqual(el.name, 'email'); ``` Your `#nav-bar` should always be at the top of the viewport. @@ -245,8 +262,8 @@ Your Product Landing Page should use at least one media query. ```js const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); +const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media'); +assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0); ``` Your Product Landing Page should use CSS Flexbox at least once. @@ -260,7 +277,7 @@ const usesFlex = cssRules.find(rule => hasFlex(rule)) const usesFlexMedia = mediaRules.find(mediaRule => { return [...mediaRule.cssRules].find(rule => hasFlex(rule)) }) -assert(usesFlex || usesFlexMedia) +assert.exists(usesFlex || usesFlexMedia); ``` # --seed--