jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-05 09:01:18 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): ensure innerText test assertions use .trim() (#61624)

Browse Source
This commit is contained in:
Nishat Ayub
2025-08-04 22:06:22 +05:30
committed by GitHub
parent 143565ce63
commit 86f52e82f3
20 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/english/25-front-end-development/lab-blog-post-card/66eaddd04a9e533fba689001.md
View File

@@ -116,7 +116,7 @@ Your `.read-more` element should have the text `Read More`.
```js
const el = document.querySelector("div.post-content a.read-more");
assert.exists(el);
assert.strictEqual(el.textContent, "Read More");
assert.strictEqual(el.textContent.trim(), "Read More");
```
Your `.blog-post-card` element should have a `border-radius` property with a value (should not be `0` or a negative value).

10
curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
View File

@@ -147,7 +147,7 @@ When you click `#add-bookmark-button`, you should update the inner text of `.cat
const addBookMarkButtonTest = document.getElementById("add-bookmark-button");
const categoryDropdownTest = document.getElementById("category-dropdown");
addBookMarkButtonTest.dispatchEvent(new Event("click"));
const categoryName = document.querySelector(".category-name").innerText;
const categoryName = document.querySelector(".category-name").innerText.trim();
assert.strictEqual(categoryName.toLowerCase(), categoryDropdownTest.value.toLowerCase());
```
@@ -255,7 +255,7 @@ When you click `#view-category-button`, you should update the inner text of `.ca
const viewCategoryButtonTest = document.getElementById("view-category-button");
const categoryDropdownTest = document.getElementById("category-dropdown");
viewCategoryButtonTest.dispatchEvent(new Event("click"));
const categoryName = document.querySelector(".category-name").innerText;
const categoryName = document.querySelector(".category-name").innerText.trim();
assert.strictEqual(categoryName.toLowerCase(), categoryDropdownTest.value.toLowerCase());
```
@@ -327,9 +327,9 @@ try {
viewCategoryButtonTest.dispatchEvent(new Event("click"));
const bookmarkAnchorsDisplayed = document.querySelectorAll('#category-list label>a');
assert.lengthOf(bookmarkAnchorsDisplayed, 2);
assert.strictEqual(bookmarkAnchorsDisplayed[0].innerText, "example1");
assert.strictEqual(bookmarkAnchorsDisplayed[0].innerText.trim(), "example1");
assert.isTrue(bookmarkAnchorsDisplayed[0].href.endsWith("example1.com"));
assert.strictEqual(bookmarkAnchorsDisplayed[1].innerText, "example4");
assert.strictEqual(bookmarkAnchorsDisplayed[1].innerText.trim(), "example4");
assert.isTrue(bookmarkAnchorsDisplayed[1].href.endsWith("example4.com"));
} finally {
resetLocalStorage();
@@ -385,7 +385,7 @@ try {
const paragraphs = document.querySelectorAll("#category-list p");
assert.lengthOf(paragraphs, 1);
assert.strictEqual(paragraphs[0].innerText, "No Bookmarks Found");
assert.strictEqual(paragraphs[0].innerText.trim(), "No Bookmarks Found");
} finally {
resetLocalStorage();
clearCategoryList();

14
curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
View File

@@ -60,7 +60,7 @@ Inside the `header` element, you should have an `h1` element that contains the t
```js
const h1Element = document.querySelector('header h1');
assert.strictEqual(h1Element?.innerText, "Event Hub");
assert.strictEqual(h1Element?.innerText.trim(), "Event Hub");
```
Inside the `header` element, after the `h1` element, you should have a `nav` element.
@@ -96,7 +96,7 @@ The text of the first item in the unordered list should be `Upcoming Events`.
```js
const firstLink = document.querySelectorAll('header nav>ul>li>a')[0];
assert.strictEqual(firstLink.innerText, "Upcoming Events");
assert.strictEqual(firstLink.innerText.trim(), "Upcoming Events");
```
The first item in the unordered list should have the `href` set to `#upcoming-events`.
@@ -111,7 +111,7 @@ The text of the second item in the unordered list should be `Past Events`.
```js
const secondLink = document.querySelectorAll('header nav>ul>li>a')[1];
assert.strictEqual(secondLink.innerText, "Past Events");
assert.strictEqual(secondLink.innerText.trim(), "Past Events");
```
The second item in the unordered list should have the `href` set to `#past-events`.
@@ -156,7 +156,7 @@ Inside the `#upcoming-events` section, you should have an `h2` element with the
```js
const h2Element = document.querySelector('#upcoming-events h2');
assert.strictEqual(h2Element?.innerText, "Upcoming Events");
assert.strictEqual(h2Element?.innerText.trim(), "Upcoming Events");
```
Inside the `#upcoming-events` section, you should have two `article` elements below the `h2` element.
@@ -187,7 +187,7 @@ Inside the `#past-events` section, you should have an `h2` element with the text
```js
const h2Element = document.querySelector('#past-events h2');
assert.strictEqual(h2Element?.innerText, "Past Events");
assert.strictEqual(h2Element?.innerText.trim(), "Past Events");
```
Inside the `#past-events` section, you should have two `article` elements below the `h2` element.
@@ -248,7 +248,7 @@ Each `h3` element should have the event title.
```js
const eventTitles = document.querySelectorAll('h3');
assert.isNotEmpty(eventTitles);
eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText)));
eventTitles.forEach((eventTitle => assert.isNotEmpty(eventTitle.innerText.trim())));
```
Each `p` element should have the event description.
@@ -256,7 +256,7 @@ Each `p` element should have the event description.
```js
const eventDescriptions = document.querySelectorAll('p');
assert.isNotEmpty(eventDescriptions);
eventDescriptions.forEach((eventDescription => assert.isNotEmpty(eventDescription.innerText)));
eventDescriptions.forEach((eventDescription => assert.isNotEmpty(eventDescription.innerText.trim())));
```
# --seed--

10
curriculum/challenges/english/25-front-end-development/lab-sorting-visualizer/6716249b5405164036fd0b0d.md
View File

@@ -115,7 +115,7 @@ const children = testDiv.children;
assert.lengthOf(children, 5);
Array.from(children).forEach((el, i) => {
assert.equal(el.tagName, "SPAN");
assert.equal(el.innerText, testArr[i])
assert.equal(el.innerText.trim(), testArr[i])
})
```
@@ -201,7 +201,7 @@ const children = document.querySelector("#starting-array").querySelectorAll("spa
assert.lengthOf(children, 5);
Array.from(children).forEach(el => {
assert.equal(el.tagName, "SPAN");
const num = Number(el.innerText);
const num = Number(el.innerText.trim());
assert.isAtMost(num, 100);
assert.isAtLeast(num, 1);
})
@@ -214,14 +214,14 @@ const genBtn = document.querySelector("#generate-btn");
const sortBtn = document.querySelector("#sort-btn");
genBtn.dispatchEvent(new Event("click"));
const prevNumbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
const prevNumbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText.trim()));
sortBtn.dispatchEvent(new Event("click"));
genBtn.dispatchEvent(new Event("click"));
const container = document.querySelector("#array-container");
assert.lengthOf(container.children, 1);
const numbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText));
const numbers = Array.from(document.querySelector("#starting-array").querySelectorAll("span")).map(el => Number(el.innerText.trim()));
assert.lengthOf(numbers, 5);
assert.isTrue(prevNumbers.some((num, index) => num !== numbers[index]))
```
@@ -275,7 +275,7 @@ try {
assert.isNotEmpty(container.children);
Array.from(container.children).forEach((el, i) => {
Array.from(el.children).forEach((j, k) => {
assert.strictEqual(Number(j.innerText), arrays[i][k])
assert.strictEqual(Number(j.innerText.trim()), arrays[i][k])
})
})
} finally {

10
curriculum/challenges/english/25-front-end-development/workshop-balance-sheet/61fd7a160ed17960e971f28b.md
View File

@@ -29,7 +29,7 @@ Your `th` element should have the text `Total Assets`.
```js
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableHeader = tableRow.querySelector('th');
assert.strictEqual(tableHeader.innerText, 'Total Assets');
assert.strictEqual(tableHeader.innerText.trim(), 'Total Assets');
```
You should wrap the text `Assets` in a `span` element.
@@ -37,7 +37,7 @@ You should wrap the text `Assets` in a `span` element.
```js
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const span = tableRow.querySelector('th > span');
assert.strictEqual(span.textContent, 'Assets');
assert.strictEqual(span.textContent.trim(), 'Assets');
```
Your `span` element should have the `class` attribute set to `sr-only`.
@@ -61,7 +61,7 @@ Your first `td` element should have the text `$579`.
```js
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[0];
assert.strictEqual(tableData?.textContent, '$579');
assert.strictEqual(tableData?.textContent.trim(), '$579');
```
Your second `td` element should have the text `$736`.
@@ -69,7 +69,7 @@ Your second `td` element should have the text `$736`.
```js
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[1];
assert.strictEqual(tableData?.textContent, '$736');
assert.strictEqual(tableData?.textContent.trim(), '$736');
```
Your third `td` element should have the text `$809`.
@@ -77,7 +77,7 @@ Your third `td` element should have the text `$809`.
```js
const tableRow = document.querySelector('tbody')?.querySelectorAll('tr')?.[3];
const tableData = tableRow.querySelectorAll('td')?.[2];
assert.strictEqual(tableData.textContent, '$809');
assert.strictEqual(tableData.textContent.trim(), '$809');
```
Your third `td` element should have the `class` attribute set to `current`.

2
curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd003cb89ee3c2402e041.md
View File

@@ -92,7 +92,7 @@ Your `figcaption` element should have a the text of `Mr. Whiskers Sleeping`.
```js
const figcaptionElement = document.querySelector('figcaption');
assert.strictEqual(figcaptionElement?.innerText, "Mr. Whiskers Sleeping")
assert.strictEqual(figcaptionElement?.innerText.trim(), "Mr. Whiskers Sleeping")
```
Your `figcaption` should be below the `img` element. You have them in the wrong order.

6
curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdc11c9b0263fe0814a7a.md
View File

@@ -21,7 +21,7 @@ Your first anchor element should have the text of `About` inside your first `li`
```js
const anchorElement = document.querySelector("ul li:first-child a");
assert.strictEqual(anchorElement?.innerText, "About");
assert.strictEqual(anchorElement?.innerText.trim(), "About");
```
Your first anchor element should have an `href` attribute set to `"#about"`.
@@ -36,7 +36,7 @@ Your second anchor element should have the text of `Posts` inside your second `l
```js
const anchorElement = document.querySelector("ul li:nth-child(2) a");
assert.strictEqual(anchorElement?.innerText, "Posts");
assert.strictEqual(anchorElement?.innerText.trim(), "Posts");
```
Your second anchor element should have an `href` attribute set to `"#posts"`.
@@ -51,7 +51,7 @@ Your third anchor element should have the text of `Contact` inside your third `l
```js
const anchorElement = document.querySelector("ul li:last-child a");
assert.strictEqual(anchorElement?.innerText, "Contact");
assert.strictEqual(anchorElement?.innerText.trim(), "Contact");
```
Your third anchor element should have an `href` attribute set to `"#contact"`.

2
curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fde2081f65141ad703fe4.md
View File

@@ -57,7 +57,7 @@ Your `h2` element should have the text of `About`. Double check your spelling.
```js
const h2Element = document.querySelector('body h2');
assert.strictEqual(h2Element?.innerText, "About");
assert.strictEqual(h2Element?.innerText.trim(), "About");
```
Your `h2` element should be within your `section` element.

2
curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdfc9a5e3da42d2376609.md
View File

@@ -53,7 +53,7 @@ Your `h2` element should have the text of `Posts`.
```js
const h2Element = document.querySelector('#posts h2');
assert.strictEqual(h2Element?.innerText, 'Posts');
assert.strictEqual(h2Element?.innerText.trim(), 'Posts');
```
# --seed--

2
curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a334a1a7cca6354999f9bf.md
View File

@@ -61,7 +61,7 @@ Your `h3` element should have the text of `Mr. Whiskers' First Day Home`.
```js
const h3Element = document.querySelector('h3');
assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Day Home");
assert.strictEqual(h3Element?.innerText.trim(), "Mr. Whiskers' First Day Home");
```
Your `h3` element should be within your `article` element.

6
curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a338be7f1dee383a0e0ecb.md
View File

@@ -26,7 +26,7 @@ You should have an `h3` element inside the `article` element with the text of `M
```js
const h3Element = document.querySelector('#posts article:nth-of-type(2) h3');
assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Bath");
assert.strictEqual(h3Element?.innerText.trim(), "Mr. Whiskers' First Bath");
```
Your `h3` element should be within your `article` element.
@@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel
const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:first-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`
assert.strictEqual(paragraphElement?.innerText, loremIpsum);
assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);
```
Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors.
@@ -58,7 +58,7 @@ Your second paragraph element should have lorem ipsum text. Double check for spe
const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:last-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`
assert.strictEqual(paragraphElement?.innerText, loremIpsum);
assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);
```
Your paragraphs should come after the `h3` element.

6
curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33a00514b40393a983c24.md
View File

@@ -26,7 +26,7 @@ You should have an `h3` element inside the `article` element with the text of `M
```js
const h3Element = document.querySelector('#posts article:nth-of-type(3) h3');
assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Birthday Party");
assert.strictEqual(h3Element?.innerText.trim(), "Mr. Whiskers' First Birthday Party");
```
Your `h3` element should be within your `article` element.
@@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel
const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:first-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`
assert.strictEqual(paragraphElement?.innerText, loremIpsum);
assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);
```
Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors.
@@ -58,7 +58,7 @@ Your second paragraph element should have lorem ipsum text. Double check for spe
const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:last-of-type');
const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`
assert.strictEqual(paragraphElement?.innerText, loremIpsum);
assert.strictEqual(paragraphElement?.innerText.trim(), loremIpsum);
```
Your paragraphs should come after the `h3` element.

2
curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33bd56208583aeb4837c4.md
View File

@@ -38,7 +38,7 @@ Your `h2` element should have the text of `Contact`.
```js
const h2Element = document.querySelector('#contact h2');
assert.strictEqual(h2Element?.innerText, 'Contact');
assert.strictEqual(h2Element?.innerText.trim(), 'Contact');
```

4
curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33e9bd3aa213cd23d9c57.md
View File

@@ -28,14 +28,14 @@ Your first `p` element should have the text of `Phone: 555-555-5555`.
```js
const pElement = document.querySelector('#contact p:first-child');
assert.strictEqual(pElement?.innerText, 'Phone: 555-555-5555');
assert.strictEqual(pElement?.innerText.trim(), 'Phone: 555-555-5555');
```
Your second `p` element should have the text of `Email: fake@email.com`.
```js
const pElement = document.querySelector('#contact p:last-child');
assert.strictEqual(pElement?.innerText, 'Email: fake@email.com');
assert.strictEqual(pElement?.innerText.trim(), 'Email: fake@email.com');
```
# --seed--

12
curriculum/challenges/english/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
View File

@@ -84,11 +84,11 @@ exerciseValueElement.value = 300;
const fakeEvent = { preventDefault: () => {} };
calculateCalories(fakeEvent);
assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed");
assert.strictEqual(output.children[3].innerText.trim(),"1800 Calories Consumed");
dinnerValueElement.value = 300;
calculateCalories(fakeEvent);
assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed");
assert.strictEqual(output.children[3].innerText.trim(),"1400 Calories Consumed");
```
Your second `p` element should have the text `${consumedCalories} Calories Consumed`.
@@ -124,11 +124,11 @@ exerciseValueElement.value = 300;
const fakeEvent = { preventDefault: () => {} };
calculateCalories(fakeEvent);
assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed");
assert.strictEqual(output.children[3].innerText.trim(),"1800 Calories Consumed");
dinnerValueElement.value = 300;
calculateCalories(fakeEvent);
assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed");
assert.strictEqual(output.children[3].innerText.trim(),"1400 Calories Consumed");
```
@@ -201,12 +201,12 @@ exerciseValueElement.value = 300;
const fakeEvent = { preventDefault: () => {} };
calculateCalories(fakeEvent);
assert.strictEqual(output.children[4].innerText,"300 Calories Burned");
assert.strictEqual(output.children[4].innerText.trim(),"300 Calories Burned");
exerciseValueElement.value = Math.floor(Math.random() * 500);
calculateCalories(fakeEvent);
assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
assert.strictEqual(output.children[4].innerText.trim(), exerciseValueElement.value.toString() + " Calories Burned");
```

2
curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md
View File

@@ -44,7 +44,7 @@ Your `caption` should have the text `Calculus Final Exam Grades`.
```js
const captionEl = document.querySelector('caption');
assert.strictEqual(captionEl.innerText, 'Calculus Final Exam Grades');
assert.strictEqual(captionEl.innerText.trim(), 'Calculus Final Exam Grades');
```
# --seed--

6
curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md
View File

@@ -55,21 +55,21 @@ Your first `th` element should have the text of `Last Name`.
```js
const thEl = document.querySelectorAll('th')[0];
assert.strictEqual(thEl?.textContent, 'Last Name');
assert.strictEqual(thEl?.textContent.trim(), 'Last Name');
```
Your second `th` element should have the text of `First Name`.
```js
const thEl = document.querySelectorAll('th')[1];
assert.strictEqual(thEl?.textContent, 'First Name');
assert.strictEqual(thEl?.textContent.trim(), 'First Name');
```
Your third `th` element should have the text of `Grade`.
```js
const thEl = document.querySelectorAll('th')[2];
assert.strictEqual(thEl?.textContent, 'Grade');
assert.strictEqual(thEl?.textContent.trim(), 'Grade');
```
All of your `th` elements should be inside your `tr` element.

4
curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83601cd819e37f0dccd14.md
View File

@@ -45,7 +45,7 @@ Your `h1` element should have the text `Hotel Feedback Form`.
```js
const h1 = document.querySelector('h1');
assert.strictEqual(h1?.innerText, 'Hotel Feedback Form');
assert.strictEqual(h1?.innerText.trim(), 'Hotel Feedback Form');
```
Your `h1` element should be inside the `header` element.
@@ -71,7 +71,7 @@ Your paragraph element should have the text `Thank you for staying with us. Plea
```js
const pElement = document.querySelector('header p');
assert.strictEqual(pElement?.innerText, 'Thank you for staying with us. Please provide feedback on your recent stay.');
assert.strictEqual(pElement?.innerText.trim(), 'Thank you for staying with us. Please provide feedback on your recent stay.');
```
Your paragraph element should be inside your `header`.

2
curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a83fec026a7a4631e084d2.md
View File

@@ -46,7 +46,7 @@ Your `legend` element should contain the text `Personal Information`.
```js
const legend = document.querySelector('fieldset legend');
assert.strictEqual(legend?.innerText, 'Personal Information');
assert.strictEqual(legend?.innerText.trim(), 'Personal Information');
```
# --seed--

2
curriculum/challenges/english/25-front-end-development/workshop-hotel-feedback-form/66a84111965a0c46df6bbd0a.md
View File

@@ -51,7 +51,7 @@ Your `label` element should have the text of `Name (required):`.
```js
const label = document.querySelector('fieldset legend + label');
assert.strictEqual(label?.innerText, 'Name (required):');
assert.strictEqual(label?.innerText.trim(), 'Name (required):');
```
You should have an `input` element below your `label` element.