From d56a056dfa649d2959eb4d894adec15c19780911 Mon Sep 17 00:00:00 2001
From: Marie Malarme <malarmemarie@gmail.com>
Date: Tue, 2 Mar 2021 23:57:59 +0000
Subject: [PATCH] Test for bring-it-to-life

---
 dom/bring-it-to-life_test.js | 43 ++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 dom/bring-it-to-life_test.js

diff --git a/dom/bring-it-to-life_test.js b/dom/bring-it-to-life_test.js
new file mode 100644
index 000000000..a9e25ffb2
--- /dev/null
+++ b/dom/bring-it-to-life_test.js
@@ -0,0 +1,43 @@
+export const tests = []
+
+tests.push(async ({ eq, page }) => {
+  // check the JS script has been linked
+  await eq.$('script', { type: 'module' })
+
+  // check the JS script has a valid src
+  const source = await page.$eval(
+    'script',
+    (node) => node.src.includes('.js') && node.src,
+  )
+  if (!source.length) throw Error('missing script src')
+})
+
+tests.push(async ({ eq, page }) => {
+  // check the class 'eye-closed' has been added in the CSS
+  eq.css('.eye-closed', {
+    height: '4px',
+    padding: '0px 5px',
+    borderRadius: '10px',
+  })
+})
+
+tests.push(async ({ eq, page }) => {
+  // check the class of left eye before the JS is loaded
+  await page.setJavaScriptEnabled(false)
+  await page.reload()
+  await eq.$('p#eye-left', { className: 'eye' })
+})
+
+tests.push(async ({ eq, page }) => {
+  // check the class of left eye has been updated after the JS is loaded
+  await page.setJavaScriptEnabled(true)
+  await page.reload()
+  await eq.$('p#eye-left', { className: 'eye eye-closed' })
+
+  // check the background color of left eye has changed after the JS is loaded
+  const eyeLeftBg = await page.$eval(
+    '#eye-left',
+    (node) => node.style.backgroundColor,
+  )
+  eq(eyeLeftBg, 'black')
+})