Browse Source

skeleton: test and review

pull/748/head
Clement Denis 3 years ago committed by Clément
parent
commit
d759f3de48
  1. 35
      dom/skeleton_test.js
  2. 4
      subjects/skeleton/README.md

35
dom/skeleton_test.js

@ -2,27 +2,24 @@ export const tests = []
tests.push(async ({ page, eq }) => { tests.push(async ({ page, eq }) => {
// check that the title tag is present & is set with some text // check that the title tag is present & is set with some text
const title = await page.$$eval( const title = await page.$eval('title', (node) => node.textContent)
'title', if (!title.length) throw Error('missing title')
(nodes) => nodes[0] && nodes[0].innerHTML,
)
const isValidTitle = title !== undefined && title.length !== 0
eq(isValidTitle, true)
}) })
tests.push(async ({ page, eq }) => { tests.push(async ({ page, eq }) => {
// check the 3 sections have been created with the correct text // check the face
const elements = await page.$$eval('body', (nodes) =>
[...nodes[0].children].map((node) => ({ return eq.$('section:nth-child(1)', { textContent: 'face' })
tag: node.tagName.toLowerCase(), })
text: node.textContent,
})), tests.push(async ({ page, eq }) => {
) // check the upper-body
eq(expectedSections, elements)
return eq.$('section:nth-child(2)', { textContent: 'upper-body' })
}) })
const expectedSections = [ tests.push(async ({ page, eq }) => {
{ tag: 'section', text: 'face' }, // check the lower-body, my favorite part
{ tag: 'section', text: 'upper-body' },
{ tag: 'section', text: 'lower-body' }, return eq.$('section:nth-child(3)', { textContent: 'lower-body' })
] })

4
subjects/skeleton/README.md

@ -7,7 +7,7 @@ In this new digital world you're gonna discover, it is possible to create beings
Like a modern Dr Frankenstein, you're about to dive into the `world-wide-what` and give birth to a new entity on the virtual space of your browser. Like a modern Dr Frankenstein, you're about to dive into the `world-wide-what` and give birth to a new entity on the virtual space of your browser.
During this quest, step by step, you are going to shape it. During this quest, step by step, you are going to shape it.
But before coding anything, make sure you checked the 2 videos of the playlist ; you need to have a server running on your computer. But before coding anything, make sure you checked the videos of the playlist; you need to have a server running on your computer.
For the whole quest, the principle is to iterate over your code: when you finish an exercise, copy-paste your code to use it in the next one. For the whole quest, the principle is to iterate over your code: when you finish an exercise, copy-paste your code to use it in the next one.
Naming of the files: Naming of the files:
@ -35,7 +35,7 @@ Remember this as a general rule for any further project you will start: a good w
Let's define the first level of elements that your entity will be made of ; we're going to split it into 3 main chunks: the face, the upper body, and the lower body. Let's define the first level of elements that your entity will be made of ; we're going to split it into 3 main chunks: the face, the upper body, and the lower body.
Inside the `<body>` tag of your HTML file, create 3 divisions using `<section>` tags, putting the following text content inside for each: 'face', 'upper-body', 'lower-body'. Inside the `<body>` tag of your HTML file, create 3 divisions using `<section>` tags, putting the following text content inside for each: `face`, `upper-body`, `lower-body`.
If you open you HTML file in the browser, you should see those 3 texts appear on the screen. If you open you HTML file in the browser, you should see those 3 texts appear on the screen.

Loading…
Cancel
Save