diff --git a/dom/nesting-organs_test.js b/dom/nesting-organs_test.js new file mode 100644 index 000000000..397b2f52a --- /dev/null +++ b/dom/nesting-organs_test.js @@ -0,0 +1,94 @@ +export const tests = [] + +tests.push(async ({ page, eq }) => { + // check that the HTML structure is correct & elements are nested properly + const elements = await page.$$eval('body', (nodes) => { + const toNode = (el) => { + const node = {} + node.tag = el.tagName.toLowerCase() + node.id = el.id + if (el.children.length) { + node.children = [...el.children].map(toNode) + } + return node + } + return [...nodes[0].children].map(toNode) + }) + eq(expectedStructure, elements) + + // check the section selector style has been updated properly + const sectionSelectorStyle = await page.evaluate(() => { + const target = [...window.document.styleSheets[0].cssRules].find( + (rule) => rule.selectorText === 'section', + ) + const { display, justifyContent } = target.style + return { display, justifyContent } + }) + eq({ display: 'flex', justifyContent: 'center' }, sectionSelectorStyle) + + // check if the given CSS has been correctly copy pasted + + // div, + // p { + // border: solid 1px black; + // padding: 10px; + // margin: 0; + // border-radius: 30px; + // } + + // #face { + // align-items: center; + // } + + // #eyes { + // display: flex; + // background-color: yellow; + // justify-content: space-between; + // align-items: center; + // border-radius: 50px; + // width: 200px; + // } + + // #torso { + // width: 200px; + // background-color: violet; + // } +}) + +const expectedStructure = [ + { + tag: 'section', + + id: 'face', + children: [ + { + tag: 'div', + + id: 'eyes', + children: [ + { tag: 'p', id: 'eye-left' }, + { tag: 'p', id: 'eye-right' }, + ], + }, + ], + }, + { + tag: 'section', + + id: 'upper-body', + children: [ + { tag: 'div', id: 'arm-left' }, + { tag: 'div', id: 'torso' }, + { tag: 'div', id: 'arm-right' }, + ], + }, + { + tag: 'section', + + id: 'lower-body', + children: [ + { tag: 'div', id: 'leg-left' }, + { tag: 'div', id: 'leg-right' }, + ], + }, +]