diff --git a/puppeteer/keycodes-symphony_test.js b/puppeteer/keycodes-symphony_test.js new file mode 100644 index 00000000..dedcb42c --- /dev/null +++ b/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) +}) diff --git a/subjects/keycodes-symphony/README.md b/subjects/keycodes-symphony/README.md index 01f4c2e7..35e80cc2 100644 --- a/subjects/keycodes-symphony/README.md +++ b/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