Created the `keycodes symphony` test + precised the instructions.

puppeteer/keycodes-symphony_test.js

@@ -0,0 +1,54 @@
+export const tests = []
+
+export const setup = async ({ page }) => ({
+  getNotes: async () =>
+    await page.$$eval('.note', (nodes) => {
+      return nodes.map((note) => note.textContent)
+    }),
+  getNotesBg: async () =>
+    await page.$$eval('.note', (nodes) => {
+      return nodes.map((note) => note.style.background)
+    }),
+})
+
+const characters = `did you handle the keydown event correctly ?`
+
+tests.push(async ({ page, eq, getNotes }) => {
+  // check that a note is created and matches the right letter when a key is pressed
+  for (const [i, character] of characters.split('').entries()) {
+    await page.keyboard.down(character)
+    const typed = characters.slice(0, i + 1).split('')
+    eq(await getNotes(), typed)
+  }
+})
+
+tests.push(async ({ page, eq, getNotes }) => {
+  // check that the last note is removed when Backspace key is pressed
+  let step = 1
+  while (step < 10) {
+    await page.keyboard.down('Backspace')
+    const typed = characters.slice(0, characters.length - step).split('')
+    eq(await getNotes(), typed)
+    step++
+  }
+})
+
+tests.push(async ({ page, eq, getNotes }) => {
+  // check that all the notes are cleared when Escape key is pressed
+  await page.keyboard.down('Escape')
+  const cleared = (await getNotes()).length === 0
+  eq(await cleared, true)
+})
+
+tests.push(async ({ page, eq, getNotesBg }) => {
+  // check that notes have different background colors
+  const test = 'abcdefghijklmnopqrstuvwxyz'
+  let step = 0
+  while (step < test.length) {
+    await page.keyboard.down(test[step])
+    step++
+  }
+  const colors = [...new Set(await getNotesBg())]
+  const allDifferent = colors.length === test.length
+  eq(allDifferent, true)
+})

subjects/keycodes-symphony/README.md

@@ -7,7 +7,7 @@ Like an inspired Beethoven who's going to write his Moonlight Sonata, you're abo
 Write the function `compose`:
 
 - Make it fire every time a key is pressed
-- Create a new `note`, which has a background color generated using its `key`, and displays the corresponding letter pressed
+- Create a new `div` with the class `note` when a letter of the lowercase alphabet is pressed, which has a unique background color generated using the `key` of the `event`, and displays the corresponding letter pressed
 - If the pressed key is the `Delete` one, delete the last note
 - If the pressed key is the `Escape` one, clear all the notes