diff --git a/dom/select-and-style_test.js b/dom/select-and-style_test.js index 7fca5626..08cab01f 100644 --- a/dom/select-and-style_test.js +++ b/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, - ) }) diff --git a/dom/test.js b/dom/test.js index 290df022..af6c3458 100644 --- a/dom/test.js +++ b/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,