action-reaction: fix test & subject

dom/action-reaction_test.js

@@ -5,8 +5,8 @@ tests.push(async ({ eq, page }) => {
   const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
   eq(eyeLeft, 'eye')
 
-  const buttonText = await page.$eval('button', (node) => node.textContent)
   // check that the text of the button says 'close'
+  const buttonText = await page.$eval('button', (node) => node.textContent)
   eq(buttonText, 'Click to close the left eye')
 })
 
@@ -14,11 +14,16 @@ tests.push(async ({ eq, page }) => {
   // click the button to close the left eye
   const button = await page.$('button')
   button.click()
-  await page.waitForTimeout(150)
 
   // check that the class has been added
-  const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
+  await page.waitForSelector('#eye-left.eye.eye-closed', { timeout: 150 })
-  eq(eyeLeft, 'eye eye-closed')
+
+  // check the background color has changed
+  const eyeLeft = await page.$eval(
+    '#eye-left.eye.eye-closed',
+    (node) => node.style.backgroundColor,
+  )
+  eq(eyeLeft, 'black')
 
   // check that the text of the button changed to 'open'
   const buttonText = await page.$eval('button', (node) => node.textContent)
@@ -29,13 +34,18 @@ tests.push(async ({ eq, page }) => {
   // click the button a second time to open the left eye
   const button = await page.$('button')
   button.click()
-  await page.waitForTimeout(150)
 
   // check that the class has been removed
-  const eyeLeft = await page.$eval('#eye-left', (node) => node.className)
+  await page.waitForSelector('#eye-left.eye:not(.eye-closed)', { timeout: 150 })
-  eq(eyeLeft, 'eye')
+
+  // check the background color has changed
+  const eyeLeft = await page.$eval(
+    '#eye-left.eye:not(.eye-closed)',
+    (node) => node.style.backgroundColor,
+  )
+  eq(eyeLeft, 'red')
 
-  const buttonText = await page.$eval('button', (node) => node.textContent)
   // check that the text of the button changed to 'close'
+  const buttonText = await page.$eval('button', (node) => node.textContent)
   eq(buttonText, 'Click to close the left eye')
 })

subjects/action-reaction/README.md

@@ -26,7 +26,7 @@ In the JS file, get the HTML button element with [`querySelector`](https://devel
 
 - change the [text content](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye"
 - [toggle](https://css-tricks.com/snippets/javascript/the-classlist-api/) the class `eye-open` in the `classList` of the `eye-left` HTML element
-- change the background color of the `eye-left`: if the eye is open, to "orange", if the eye is closed, to "black"
+- change the background color of the `eye-left`: if the eye is open, to "red", if the eye is closed, to "black"
 
 ### Expected output