diff --git a/dom/the-calling_test.js b/dom/the-calling_test.js index bd96f49e..e6aaea82 100644 --- a/dom/the-calling_test.js +++ b/dom/the-calling_test.js @@ -1,19 +1,19 @@ export const tests = [] tests.push(async ({ page, eq }) => { - // check the 3 sections have the correct id and no text - const elements = await page.$$eval('body', (nodes) => - [...nodes[0].children].map((node) => ({ - tag: node.tagName.toLowerCase(), - text: node.textContent, - id: node.id, - })), - ) - eq(expectedSections, elements) + // check the face + + return eq.$('section#face', { textContent: '' }) +}) + +tests.push(async ({ page, eq }) => { + // check the upper-body + + return eq.$('section#upper-body', { textContent: '' }) }) -const expectedSections = [ - { tag: 'section', text: '', id: 'face' }, - { tag: 'section', text: '', id: 'upper-body' }, - { tag: 'section', text: '', id: 'lower-body' }, -] +tests.push(async ({ page, eq }) => { + // check the lower-body, my favorite part + + return eq.$('section#lower-body', { textContent: '' }) +}) diff --git a/subjects/the-calling/README.md b/subjects/the-calling/README.md index 49c55fbc..c2593bd4 100644 --- a/subjects/the-calling/README.md +++ b/subjects/the-calling/README.md @@ -1,12 +1,31 @@ -### The calling +## The calling -Congrats! You created the very first base for your being and you witnessed its appearance on the digital world - your browser. But so far, it's a tiny seed of the marvelous thing it could become ; be patient, there still is a bit of work. -First of all, instead of writing down what things are - you're not writing down on your hand the word 'hand', are you?) - we're going to identify them semantically with the very practical [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute. This `id` has to be a unique identifier in your webpage, which will allow you to target your element if needed. -Your can compare it to your name & surname ; this is what is identifying you to other people, and if someone's calling you by your name, you answer. +Congrats! You created the very first base for your being and you witnessed its +appearance on the digital world - your browser. But so far, it's a tiny seed of +the marvelous thing it could become ; be patient, there still is a bit of work. -So let's identify the 3 elements we have so far: in each section, remove the text content from inside the tag and set it as the value of the `id` attribute of the corresponding `section` tag. +### Instructions -Open the page in the browser: you don't see anything? Don't freak out! Inspect the HTML that have been created with your [browser inspector tool](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), & if you worked well, you should see inside the `body` the 3 sections with the `id` attribute set in your HTML structure. +First of all, instead of writing down what things are _(you're not writing down +on your hand the word 'hand', are you?)_ we're going to identify them +semantically with the very practical +[`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) +attribute. \ +This `id` has to be a **unique** identifier in your webpage, which will allow you +to target your element if needed. Your can compare it to your name & surname ; this +is what is identifying you to other people, and if someone's calling you by your +name, you answer. + +So let's identify the 3 elements we have so far: in each section, remove the +text content from inside the tag and set it as the value of the `id` attribute +of the corresponding `section` text. + +**Open the page in the browser:** \ +you don't see _anything_? Don't freak out! \ +Inspect the HTML that have been created with your +[browser inspector tool](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), +& if you done it correctly, you should see inside the `body` the 3 sections with +the `id` attribute set in your HTML structure. ### Notions