public/js/tests/bring-it-to-life-dom_test.mjs

export const tests = []

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