mirror of https://github.com/01-edu/public.git
dom: add utilty functions eq.css and eq.$
This commit is contained in:
parent
260b964cf4
commit
694f1c5c83
|
@ -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)
|
||||
|
||||
// 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.$('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
|
||||
|
||||
return eq.css('*', {
|
||||
margin: '0px',
|
||||
opacity: '0.85',
|
||||
boxSizing: 'border-box',
|
||||
})
|
||||
eq(
|
||||
{ margin: '0px', opacity: '0.85', boxSizing: 'border-box' },
|
||||
universalSelectorStyle,
|
||||
)
|
||||
})
|
||||
|
|
28
dom/test.js
28
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,
|
||||
|
|
Loading…
Reference in New Issue