dom: add utilty functions eq.css and eq.$

dom/select-and-style_test.js

@@ -1,24 +1,22 @@
+
+
 export const tests = []
 
-tests.push(async ({ page, eq }) => {
+tests.push(async ({ eq }) => {
   // check the CSS stylesheet is linked in the head tag
-  const CSSLink = await page.$$eval('head', (nodes) =>
-    [...nodes[0].children].some(
-      (node) => node.tagName === 'LINK' && node.rel === 'stylesheet',
-    ),
-  )
-  eq(CSSLink, true)
 
+  return eq.$('head link', {
+    rel: 'stylesheet',
+    href: 'http://localhost:9898/select-and-style/select-and-style.css',
+  })
+})
+
+tests.push(async ({ eq }) => {
   // check the universal selector has been declared properly
-  const universalSelectorStyle = await page.evaluate(() => {
-    const target = [...window.document.styleSheets[0].cssRules].find(
-      (rule) => rule.selectorText === '*',
-    )
-    const { margin, opacity, boxSizing } = target.style
-    return { margin, opacity, boxSizing }
+
+  return eq.css('*', {
+    margin: '0px',
+    opacity: '0.85',
+    boxSizing: 'border-box',
   })
-  eq(
-    { margin: '0px', opacity: '0.85', boxSizing: 'border-box' },
-    universalSelectorStyle,
-  )
 })

dom/test.js

@@ -101,6 +101,34 @@ const server = http
 
       const [page] = await browser.pages()
       await page.goto(`http://localhost:${PORT}/${exercise}/index.html`)
+      deepStrictEqual.$ = async (selector, props) => {
+        const keys = Object.keys(props)
+        const extractProps = (node, props) => {
+          const fromProps = (a, b) => Object.fromEntries(Object.keys(b).map(k => [
+            k,
+            typeof b[k] === 'object' ? fromProps(a[k], b[k]) : a[k],
+          ]))
+          return fromProps(node, props)
+        }
+        const domProps = await page.$eval(selector, extractProps, props)
+        return deepStrictEqual(props, domProps)
+      }
+
+      deepStrictEqual.css = async (selector, props) => {
+        const cssProps = await page.evaluate((selector, props) => {
+          const styles = Object.fromEntries([...document.styleSheets]
+            .flatMap(({ cssRules }) => [...cssRules].map(r => [r.selectorText, r.style])))
+
+          if (!styles[selector]) {
+            throw Error(`css ${selector} did not match any declarations`)
+          }
+
+          return Object.fromEntries(Object.keys(props).map(k => [k, styles[selector][k]]))
+        }, selector, props)
+
+        return deepStrictEqual(props, cssProps)
+      }
+
       const baseContext = {
         page,
         browser,