mirror of https://github.com/01-edu/public.git
the-calling: test and review
This commit is contained in:
parent
d759f3de48
commit
913c01184e
|
@ -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: '' })
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue