Test for bring-it-to-life

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')
+})