mirror of https://github.com/01-edu/public.git
Fixed the test of `mouse-trap` + made the instructions more strict. (#609)
This commit is contained in:
parent
2a82f17c7b
commit
ee8604fc14
|
@ -3,10 +3,10 @@ export const tests = []
|
||||||
export const setup = async ({ page }) => {
|
export const setup = async ({ page }) => {
|
||||||
return {
|
return {
|
||||||
getCirclesPos: async () =>
|
getCirclesPos: async () =>
|
||||||
await page.$$eval('.circle', (nodes) => {
|
await page.$$eval('.circle', nodes => {
|
||||||
const circleRadius = 25
|
const circleRadius = 25
|
||||||
const formatPos = (pos) => Number(pos.replace('px', '')) + circleRadius
|
const formatPos = pos => Number(pos.replace('px', '')) + circleRadius
|
||||||
return nodes.map((node) => [
|
return nodes.map(node => [
|
||||||
formatPos(node.style.left),
|
formatPos(node.style.left),
|
||||||
formatPos(node.style.top),
|
formatPos(node.style.top),
|
||||||
])
|
])
|
||||||
|
@ -21,10 +21,7 @@ tests.push(async ({ page, viewport, eq, getCirclesPos }) => {
|
||||||
height: document.documentElement.clientHeight,
|
height: document.documentElement.clientHeight,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const clicks = [...Array(10).keys()].map((e) => [
|
const clicks = [...Array(10).keys()].map(e => [random(width), random(height)])
|
||||||
random(width),
|
|
||||||
random(height),
|
|
||||||
])
|
|
||||||
|
|
||||||
for (const [i, click] of clicks.entries()) {
|
for (const [i, click] of clicks.entries()) {
|
||||||
const [posX, posY] = click
|
const [posX, posY] = click
|
||||||
|
@ -50,7 +47,7 @@ tests.push(async ({ page, eq, getCirclesPos }) => {
|
||||||
|
|
||||||
tests.push(async ({ page, eq, getCirclesPos }) => {
|
tests.push(async ({ page, eq, getCirclesPos }) => {
|
||||||
// check that a circle is trapped and purple when inside the box
|
// check that a circle is trapped and purple when inside the box
|
||||||
const box = await page.$eval('.box', (box) => ({
|
const box = await page.$eval('.box', box => ({
|
||||||
top: box.getBoundingClientRect().top,
|
top: box.getBoundingClientRect().top,
|
||||||
right: box.getBoundingClientRect().right,
|
right: box.getBoundingClientRect().right,
|
||||||
left: box.getBoundingClientRect().left,
|
left: box.getBoundingClientRect().left,
|
||||||
|
@ -74,7 +71,7 @@ tests.push(async ({ page, eq, getCirclesPos }) => {
|
||||||
|
|
||||||
const bg = await page.$$eval(
|
const bg = await page.$$eval(
|
||||||
'.circle',
|
'.circle',
|
||||||
(nodes) => nodes[nodes.length - 1].style.background,
|
nodes => nodes[nodes.length - 1].style.background,
|
||||||
)
|
)
|
||||||
|
|
||||||
const insideX = x > box.left + circleRadius && x < box.right - circleRadius
|
const insideX = x > box.left + circleRadius && x < box.right - circleRadius
|
||||||
|
@ -96,6 +93,8 @@ tests.push(async ({ page, eq, getCirclesPos }) => {
|
||||||
} else {
|
} else {
|
||||||
const maxY =
|
const maxY =
|
||||||
currentCircle[1] === box.top + circleRadius + 1 ||
|
currentCircle[1] === box.top + circleRadius + 1 ||
|
||||||
|
currentCircle[1] === box.top + circleRadius ||
|
||||||
|
currentCircle[1] === box.bottom - circleRadius ||
|
||||||
currentCircle[1] === box.bottom - circleRadius - 1
|
currentCircle[1] === box.bottom - circleRadius - 1
|
||||||
eq(maxY, true)
|
eq(maxY, true)
|
||||||
}
|
}
|
||||||
|
@ -103,7 +102,9 @@ tests.push(async ({ page, eq, getCirclesPos }) => {
|
||||||
eq(currentCircle[0], x)
|
eq(currentCircle[0], x)
|
||||||
} else {
|
} else {
|
||||||
const maxX =
|
const maxX =
|
||||||
|
currentCircle[0] === box.left + circleRadius ||
|
||||||
currentCircle[0] === box.left + circleRadius + 1 ||
|
currentCircle[0] === box.left + circleRadius + 1 ||
|
||||||
|
currentCircle[0] === box.right - circleRadius ||
|
||||||
currentCircle[0] === box.right - circleRadius - 1
|
currentCircle[0] === box.right - circleRadius - 1
|
||||||
eq(maxX, true)
|
eq(maxX, true)
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,8 @@ Develop a trap to capture the elements when the mouse is getting too close to th
|
||||||
|
|
||||||
- Create a function `setBox` which sets a box with the class `box` in the center of the page ; when a circle is inside that box, it has to be purple ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.
|
- Create a function `setBox` which sets a box with the class `box` in the center of the page ; when a circle is inside that box, it has to be purple ; once a circle enters the box, it is trapped inside and cannot go out of it anymore.
|
||||||
|
|
||||||
|
> Hint: do not use operators like `<=` or `=>`, a circle has to be trapped **strictly** inside the box
|
||||||
|
|
||||||
### Notions
|
### Notions
|
||||||
|
|
||||||
- [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener): `click`, `mousemove`
|
- [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener): `click`, `mousemove`
|
||||||
|
|
Loading…
Reference in New Issue