kapy
/
public
mirror of https://github.com/01-edu/public.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

the-calling: test and review

This commit is contained in:
Clement Denis 2021-03-02 22:08:18 +00:00 committed by Clément
parent d759f3de48
commit 913c01184e
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dom/the-calling_test.js
View File

@ -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: '' })
})
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 upper-body
return eq.$('section#upper-body', { textContent: '' })
})
tests.push(async ({ page, eq }) => {
// check the lower-body, my favorite part
return eq.$('section#lower-body', { textContent: '' })
})

31
subjects/the-calling/README.md
View File

@ -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