From e218615d8d7f84b8de4a9f0482ce354176e456b3 Mon Sep 17 00:00:00 2001
From: Marie Malarme <malarmemarie@gmail.com>
Date: Wed, 3 Mar 2021 15:31:49 +0000
Subject: [PATCH] action-reaction: fix test & subject

---
 dom/action-reaction_test.js        | 26 ++++++++++++++++++--------
 subjects/action-reaction/README.md |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/dom/action-reaction_test.js b/dom/action-reaction_test.js
index c7eeba6d..65d52e3d 100644
--- a/dom/action-reaction_test.js
+++ b/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)
-  eq(eyeLeft, 'eye eye-closed')
+  await page.waitForSelector('#eye-left.eye.eye-closed', { timeout: 150 })
+
+  // 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)
-  eq(eyeLeft, 'eye')
+  await page.waitForSelector('#eye-left.eye:not(.eye-closed)', { timeout: 150 })
+
+  // 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')
 })
diff --git a/subjects/action-reaction/README.md b/subjects/action-reaction/README.md
index aa9cd1d6..f030fa3a 100644
--- a/subjects/action-reaction/README.md
+++ b/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