Test coverage, first working example

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["env"]
+}

build.js

@@ -22,14 +22,12 @@ function build(format) {
     }),
     babel({
       babelrc: false,
-      presets: [
-        [
-          'env',
-          {
-            modules: false
+      "presets": [
+        ["env", {
+          "targets": {
+            "browsers": ["last 2 versions", "safari >= 7"]
           }
-        ],
-        'stage-0'
+        }]
       ]
     }),
     filesize()

package.json

@@ -5,7 +5,7 @@
   "version": "1.3.0",
   "homepage": "https://github.com/ApoorvSaxena/lozad.js",
   "scripts": {
-    "test": "nyc mocha",
+    "test": "npm run serve & jest",
     "build": "cross-env NODE_ENV=production node build.js",
     "build:watch": "cross-env NODE_ENV=development node build.js",
     "prepublish": "npm run build",
@@ -51,18 +51,19 @@
   ],
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-0": "^6.24.1",
+    "babel-jest": "^22.4.3",
+    "babel-preset-env": "^1.6.1",
     "browser-sync": "^2.18.13",
     "chokidar": "^1.7.0",
     "cross-env": "^5.0.5",
     "husky": "^0.14.3",
+    "jest": "^22.4.3",
+    "jest-puppeteer": "^2.2.0",
     "jsdom": "^11.2.0",
     "jsdom-global": "^3.0.2",
-    "mocha": "^3.5.1",
     "npm-run-all": "^4.1.1",
-    "nyc": "^11.2.1",
     "prettier": "^1.6.1",
+    "puppeteer": "^1.2.0",
     "rollup": "^0.49.2",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-filesize": "^1.4.2",
@@ -77,5 +78,8 @@
     ],
     "semicolon": false,
     "space": true
+  },
+  "jest": {
+    "preset": "jest-puppeteer"
   }
 }

test/picture.spec.js

@@ -0,0 +1,92 @@
+import puppeteer from "puppeteer";
+
+const LOZAD_DEMO_URL = "http://localhost:3000";
+
+const LARGE_PICTURE_URLS = [
+  `${LOZAD_DEMO_URL}/images/thumbs/picture-01.jpg`,
+  `${LOZAD_DEMO_URL}/images/thumbs/picture-04.jpg`,
+  `${LOZAD_DEMO_URL}/images/thumbs/picture-07.jpg`
+];
+
+let page;
+let browser;
+const width = 1920;
+const height = 1080;
+
+function wait(ms) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms));
+}
+
+// Utility function to scroll the page (by increments) to the bottom, wait a little and scroll the page all the way up.
+// => in order to trigger lazy-loading behavior hooked to the intersection observer
+
+async function scrollUpAndDown(page) {
+  // Get the height of the rendered page
+  const bodyHandle = await page.$("body");
+  const { height } = await bodyHandle.boundingBox();
+  await bodyHandle.dispose();
+
+  // Scroll one viewport at a time, pausing to let content load
+  const viewportHeight = page.viewport().height;
+  let viewportIncr = 0;
+  while (viewportIncr + viewportHeight < height) {
+    await page.evaluate(_viewportHeight => {
+      window.scrollBy(0, _viewportHeight);
+    }, viewportHeight);
+    await wait(20);
+    viewportIncr = viewportIncr + viewportHeight;
+  }
+
+  // Scroll back to top
+  await page.evaluate(_ => {
+    window.scrollTo(0, 0);
+  });
+
+  // Some extra delay to let images load
+  await wait(100);
+}
+
+beforeAll(async () => {
+  browser = await puppeteer.launch({
+    headless: false,
+    slowMo: 80,
+    args: [`--window-size=${width},${height}`]
+  });
+  page = await browser.newPage();
+  await page.setViewport({ width, height });
+});
+afterAll(() => {
+  //browser.close();
+});
+
+describe("Picture elements", () => {
+  //just a dummy test, to delete ?
+  test("assert that demo page is loaded and correct (<title> is correct)", async () => {
+    await page.goto(LOZAD_DEMO_URL);
+    const title = await page.title();
+    expect(title).toBe("Lozad.js: Highly performant lazy loader");
+  });
+
+  test(
+    "lazyloaded picture tags should have an <img> injected, with correct src",
+    async () => {
+      await page.goto(LOZAD_DEMO_URL);
+
+      await scrollUpAndDown(page);
+
+      await page.waitForSelector("#pictures"); //?
+
+      const pictureImgsCurrentSrc = await page.$$eval(
+        ".lozad-picture img",
+        imgs => imgs.map(e => e.currentSrc)
+      );
+
+      // test if we have 3 <img> tags injected after scroll
+      expect(pictureImgsCurrentSrc.length).toBe(3);
+
+      // test if currentSrc attributes on imgs are relevant
+      expect(pictureImgsCurrentSrc).toEqual(LARGE_PICTURE_URLS);
+    },
+    16000
+  );
+});