Browse Source

add tests for harder-bigger-bolder-stronger

pull/603/head
Clement Denis 4 years ago committed by Clément
parent
commit
4073797751
  1. 25
      puppeteer/harder-bigger-bolder-stronger.js
  2. 67
      puppeteer/harder-bigger-bolder-stronger_test.js
  3. 4
      subjects/harder-bigger-bolder-stronger/README.md

25
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
}))
}

67
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)
})

4
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

Loading…
Cancel
Save