add tests for harder-bigger-bolder-stronger

puppeteer/harder-bigger-bolder-stronger.js

@@ -1,25 +1,14 @@
 const body = document.querySelector('body')
 
-const shapes = [...Array(100).keys()]
-
-const random = (min, max) => {
-  min = Math.ceil(min)
-  max = Math.floor(max)
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-const alphabet = 'abcdefghijklmnopqrstuvwxyz'
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
 
 export const generateLetters = () => {
-  shapes.forEach((c) => {
+  body.append(...[...Array(120).keys()].map((c) => {
     const shape = document.createElement('div')
-    const third = shapes.length / 3
-    const firstThird = c < third
-    const secondThird = c > third && c < third * 2
 
-    shape.textContent = alphabet[random(0, alphabet.length - 1)]
-    shape.style.fontSize = `${c + 10 * 2}px`
-    shape.style.fontWeight = (firstThird && 300) || (secondThird && 400) || 600
-    body.append(shape)
-  })
+    shape.textContent = alphabet[Math.floor(Math.random() * alphabet.length)]
+    shape.style.fontSize = `${c + 11}px`
+    shape.style.fontWeight = [300,400,600][Math.floor(c / 40)]
+    return shape
+  }))
 }

puppeteer/harder-bigger-bolder-stronger_test.js

@@ -0,0 +1,67 @@
+export const tests = []
+
+export const setup = async ({ page }) => ({
+  content: await page.$$eval('div', nodes => nodes.map(n => ({
+    text: n.textContent,
+    size: Number((n.style.fontSize || '').slice(0, -2)),
+    weight: Number(n.style.fontWeight),
+  })))
+})
+
+tests.push(({ eq, content }) => {
+  // should contain 120 items
+  eq(content.length, 120)
+})
+
+tests.push(({ eq, content }) => {
+  // content should only be one letter long
+  eq(content.reduce((total, { text }) => total + text.length, 0), 120)
+})
+
+tests.push(({ eq, content }) => {
+  // we expect random to yield at least 10 different letters
+  eq(new Set(content).size > 10, true)
+})
+
+tests.push(({ eq, content }) => {
+  // only letters from 'A' to 'Z'
+  eq(content.every(({ text }) => text >= 'A' && text <= 'Z'), true)
+})
+
+tests.push(({ eq, content }) => {
+  // letter size should grow
+
+  // first should be 11
+  eq(content[0].size, 11)
+
+  // last should be 120
+  eq(content[119].size, 130)
+
+  // each letter should be bigger than the previous
+  let prev = 0
+  for (const { size } of content) {
+    if (prev >= size) {
+      throw Error('Letters should grow')
+    } 
+  }
+})
+
+tests.push(({ eq, content }) => {
+  // letter weight should increase in thirds
+  const third = n => ({ weight }) => weight === n
+
+  // first third should be 300
+  eq(content[0].weight, 300)
+  eq(content[39].weight, 300)
+  eq(content.slice(0, 40).every(third(300)), true)
+
+  // second third should be 400
+  eq(content[40].weight, 400)
+  eq(content[79].weight, 400)
+  eq(content.slice(40, 80).every(third(400)), true)
+
+  // last third should be 600
+  eq(content[80].weight, 600)
+  eq(content[119].weight, 600)
+  eq(content.slice(80).every(third(600)), true)
+})

subjects/harder-bigger-bolder-stronger/README.md

@@ -6,9 +6,9 @@ Being stuck at home, bored, desperate and coming up with a lot of weird ideas, a
 
 Generate a board where each new letter is harder, bigger, bolder and stronger!
 
-Write the function `generateLetters` which creates 100 `div`, each containing a letter randomly picked through the alphabet, and whose style properties have to be increased:
+Write the function `generateLetters` which creates 120 `div`, each containing a letter randomly picked through the **uppercase** alphabet, and whose style properties have to be increased:
 
-- `font-size` has to grow from `20` to at least `100` pixels
+- each letter `font-size` has to grow from `11` to `130` pixels
 - `font-weigth` has to be `300` for the first third of the letters, `400` for the second third, and `600` for the last third
 
 ### Provided files