Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

added puppeteer test for DOM manipulation and fixed the layoutDepende…

…ncy type to only use attached layout behaviors, references #32
  • Loading branch information...
Prinzhorn committed Jun 19, 2018
1 parent 8bc4165 commit 9630dbc963a41fec8ffe4473b52efaabafd290f8
@@ -0,0 +1 @@
package.json
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollmeister</title>
<style>
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
}
* {
margin: 0;
padding: 0;
}
h1 {
padding-bottom: 1em;
}
scroll-meister, element-meister {
display: block;
}
scroll-meister[fadein] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
element-meister {
background: rgba(0, 255, 0, 0.5);
box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
}
element-meister.follower {
background: rgba(0, 0, 255, 0.5);
}
.cover > img {
width: 100%;
height: 100%;
object-fit: cover;
}
img {
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<scroll-meister scroll guides-layout>
<element-meister layout="height: 100px;" id="one"></element-meister>

<element-meister layout="height: 100px;" id="two"></element-meister>
</scroll-meister>
<script src="../dist/scrollmeister-extras.js"></script>
</body>
</html>
@@ -0,0 +1,40 @@
describe('DOM manipulation', () => {
beforeEach(async () => {
await page.goto('http://localhost:4444/__tests__/dom-manipulation.test.html', {
waitUntil: 'domcontentloaded'
});

//Wait for Scrollmeister to do the first layout.
await page.evaluate(() => {
return new Promise(resolve => {
document.querySelector('scroll-meister').addEventListener('guides-layout:change', resolve, false);
});
});
});

test('insertBefore with flow elements', async () => {
await page.evaluate(() => {
let wrapper = document.querySelector('scroll-meister');
let element = document.createElement('element-meister');
element.id = 'new';
element.setAttribute('layout', 'height: 100px;');

let promise = new Promise(resolve => {
element.addEventListener('layout:change', resolve, false);
});

wrapper.insertBefore(element, wrapper.querySelector('element-meister'));

return promise;
});

let rects = await page.evaluate(() => {
let elements = document.querySelectorAll('element-meister');
return Array.from(elements).map(el => {
return el.getBoundingClientRect().y;
});
});

expect(rects).toEqual([0, 100, 200]);
});
});
@@ -0,0 +1,9 @@
module.exports = {
server: {
command: 'http-server -p 4444',
port: 4444
},
launch: {
devtools: false
}
};

0 comments on commit 9630dbc

Please sign in to comment.
You can’t perform that action at this time.