Cerated the `build brick and break` puppeteer test + adjusted the script and the read me.

puppeteer/build-brick-and-break_test.js

@@ -0,0 +1,124 @@
+export const tests = []
+
+export const setup = async ({ page }) => {
+  const body = await page.$('body')
+  const hammer = await page.$('#hammer')
+  const dynamite = await page.$('#dynamite')
+
+  return {
+    body,
+    hammer,
+    dynamite,
+    getDivsLength: async () =>
+      await page.$$eval('div', (nodes) => nodes.length),
+    getBricksIds: async () =>
+      await page.$$eval('div', (nodes) =>
+        nodes.filter((node) => node.id.includes('brick')).map((n) => n.id),
+      ),
+    getMiddleBricksIds: async () =>
+      await page.$$eval('div', (nodes) =>
+        nodes
+          .filter(
+            (node) => node.id.includes('brick') && node.dataset.foundation,
+          )
+          .map((n) => n.id),
+      ),
+    getExpectedRepairedIds: async () =>
+      await page.$eval('body', (body) => {
+        const getIdInt = (str) => str.replace('brick-', '')
+        return body.dataset.reparations
+          .split(',')
+          .sort((a, b) => getIdInt(b) - getIdInt(a))
+          .map((id) => {
+            const isMiddleBrick = getIdInt(id) % 3 === 2
+            const status = isMiddleBrick ? 'in progress' : 'repaired'
+            return `${id}_${status}`
+          })
+      }),
+    getRepairedIds: async () =>
+      await page.$$eval('div', (nodes) => {
+        const getIdInt = (str) => str.replace('brick-', '')
+        return nodes
+          .filter(
+            (node) =>
+              node.dataset.repaired === 'true' ||
+              node.dataset.repaired === 'in progress',
+          )
+          .sort((a, b) => getIdInt(b.id) - getIdInt(a.id))
+          .map(({ id }) => {
+            const isMiddleBrick = getIdInt(id) % 3 === 2
+            const status = isMiddleBrick ? 'in progress' : 'repaired'
+            return `${id}_${status}`
+          })
+      }),
+  }
+}
+
+const between = (expected, min, max) => expected >= min && expected <= max
+
+tests.push(async ({ page, eq, getDivsLength }) => {
+  // check that the brick divs are built at a regular interval of 100ms
+  // the average of the divs built every 100ms must be close to 10
+  let repeat = 0
+  let buildSteps = []
+
+  while (repeat < 3) {
+    const divs = await getDivsLength()
+    buildSteps.push(divs)
+    await page.waitFor(1000)
+    repeat++
+  }
+
+  const diff1 = buildSteps[1] - buildSteps[0]
+  const diff2 = buildSteps[2] - buildSteps[1]
+  const average = Math.round((diff1 + diff2) / 2)
+
+  if (average < 9) {
+    console.log('too slow --> average built bricks / sec:', average)
+  }
+  if (average > 11) {
+    console.log('too fast --> average built bricks / sec:', average)
+  }
+
+  eq(between(average, 9, 11), between(10, 9, 11))
+})
+
+const allBricksIds = [...Array(54).keys()].map((i) => `brick-${i + 1}`)
+
+tests.push(async ({ page, eq, getBricksIds }) => {
+  // check that all the bricks are here and have the correct id
+  await page.waitFor(3000)
+  const bricksIds = await getBricksIds()
+  eq(bricksIds, allBricksIds)
+})
+
+tests.push(async ({ eq, getMiddleBricksIds }) => {
+  // check that the middle column bricks have the `foundation` attribute to `true`
+  const expectedIds = allBricksIds.filter(
+    (b) => b.replace('brick-', '') % 3 === 2,
+  )
+  const middleBricksIds = await getMiddleBricksIds()
+  eq(middleBricksIds, expectedIds)
+})
+
+tests.push(async ({ eq, hammer, getExpectedRepairedIds, getRepairedIds }) => {
+  // check that the bricks to repair have the right repaired attribute
+  await hammer.click()
+  eq(await getRepairedIds(), await getExpectedRepairedIds())
+})
+
+tests.push(async ({ eq, hammer, getExpectedRepairedIds, getRepairedIds }) => {
+  // check that the bricks to repair have the right repaired attribute
+  await hammer.click()
+  eq(await getRepairedIds(), await getExpectedRepairedIds())
+})
+
+tests.push(async ({ eq, dynamite, getBricksIds }) => {
+  // check that the last brick is removed on each dynamite click
+  for (const i of allBricksIds.keys()) {
+    await dynamite.click()
+    const { length } = allBricksIds
+    const expectedRemainingBricks = allBricksIds.slice(0, length - (i + 1))
+    eq(await getBricksIds(), expectedRemainingBricks)
+  }
+})

subjects/build-brick-and-break/README.md

@@ -6,7 +6,7 @@ Today, your mission is to build a 3-column brick tower, maintain it and finally
 
 - Create a function `build` which will create and display the given amount of bricks passed as argument:
 
-  - each brick has to be created and added to the page at a regular interval of time (at least 50ms),
+  - each brick has to be created as a `div` and added to the page at a regular interval of 100ms,
   - each brick will receive a unique `id` property, like following:
 
   ```html

subjects/build-brick-and-break/index.html

@@ -4,7 +4,6 @@
   <title>Build brick and break</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link id="fav" rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
-  <link rel="stylesheet" type="text/css" href="./style.css">
   <style type="text/css">
 :root {
   --background: hsl(0, 0%, 12%);
@@ -71,7 +70,7 @@ body {
 </head>
 <body>
   <script type="module">
-import { build, repair, destroy } from './build-bricks-and-break.js'
+import { build, repair, destroy } from './build-brick-and-break.js'
 
 build()
 
@@ -82,12 +81,14 @@ tools.id = 'tools'
 body.append(tools)
 
 const dynamite = document.createElement('div')
+dynamite.id = 'dynamite'
 dynamite.textContent = '🧨'
 dynamite.addEventListener('click', destroy)
 
 const hammer = document.createElement('div')
+hammer.id = 'hammer'
 hammer.textContent = '🔨'
-hammer.addEventListener('click', () => repair('brick-26', ...reparations))
+hammer.addEventListener('click', () => repair(...reparations))
 
 tools.append(dynamite, hammer)
 
@@ -97,7 +98,10 @@ const random = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
-const reparations = [...Array(15).keys()].map((e) => `brick-${random(0, 54)}`)
+const randomBricks = [...Array(15).keys()].map((e) => `brick-${random(1, 54)}`)
+const reparations = [...new Set(['brick-26', ...randomBricks])]
+
+body.dataset.reparations = reparations
 
   </script>
 </body>