Merge branch 'release/9.0.1'

.babelrc

@@ -0,0 +1,22 @@
+{
+    "ignore": [
+        "node_modules/**"
+    ],
+    "env": {
+        "test": {
+            "presets": [
+                "es2015"
+            ],
+            "plugins": ["transform-object-assign"]
+        },
+        "release": {
+            "presets": [
+                ["es2015", {
+                    "modules": false
+                }]
+            ],
+            "sourceMap": false,
+            "plugins": ["transform-object-assign"]
+        }
+    }
+}

CHANGELOG.md

@@ -0,0 +1,35 @@
+# CHANGELOG
+
+## Version 9
+
+#### 9.0.1
+
+- Restored tests using Jest
+- Squashed a bug which didn't make images inside `picture` load correctly
+
+#### 9.0.0 
+
+LazyLoad is now _faster_ thanks to the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). 
+
+**IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file.
+
+#### 8.1.0
+
+Updated from grunt to gulp (run with gulp scripts)
+
+#### 8.0.3
+
+Added quotes in background image URLs, as suggested in #114 (thanks to @vseva)
+
+#### 8.0.2
+
+Fixed a bug that affected performance
+
+#### 8.0.1
+
+Fixed reference to old names in demo files
+
+#### 8.0.0
+
+- The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`. 
+- The non-transpiled version is now named lazyload.es2015.js.

__tests__/lazyload.setSources.test.js

@@ -0,0 +1,189 @@
+import {setSources, setSourcesForPicture} from "../src/lazyLoad.setSources";
+
+const lazyloadSettings = {
+    data_src: "original",
+    data_srcset: "originalSet"
+};
+
+expect.extend({
+    toHaveAttributeValue: (element, attributeName, valueToVerify) => {
+        const actualValue = element.getAttribute(attributeName);
+        const pass = actualValue === valueToVerify;
+        return pass ? {
+            message: () => `${element.tagName} has attribute "${attributeName}" set to "${valueToVerify}"`,
+            pass: true
+        } : {
+            message: () => `expected ${element.tagName} to have attribute "${attributeName}" set to "${valueToVerify}", received "${actualValue}"`,
+            pass: false
+        }
+    }
+});
+
+test("setSources is defined", () => {
+    expect(typeof setSources).toBe("function");
+});
+
+describe("setSources for image", () => {
+    let img;
+    let img1 = "http://placehold.it/1x1";
+    let img200 = "http://placehold.it/200x200";
+    let img400 = "http://placehold.it/400x400";
+
+    beforeEach(() => {
+        // Parent is a div
+        let div = document.createElement("div");
+        div.appendChild(img = document.createElement("img"));
+    });
+
+    test("...with initially empty src and srcset", () => {
+        img.dataset = {
+            "original": img200,
+            "originalSet": img400
+        };
+        setSources(img, lazyloadSettings);
+        expect(img).toHaveAttributeValue("src", img200);
+        expect(img).toHaveAttributeValue("srcset", img400);
+    });
+
+    test("...with initial values in src and srcset", () => {
+        img.dataset = {
+            "original": img200,
+            "originalSet": img400
+        };
+        img.setAttribute("src", img1);
+        img.setAttribute("srcset", img1);
+        setSources(img, lazyloadSettings);
+        expect(img).toHaveAttributeValue("src", img200);
+        expect(img).toHaveAttributeValue("srcset", img400);
+    });
+    test("...with initial values in src and srcset and empty data-*", () => {
+        img.dataset = {
+            "original": "",
+            "originalSet": ""
+        };
+        img.setAttribute("src", img200);
+        img.setAttribute("srcset", img400);
+        setSources(img, lazyloadSettings);
+        expect(img).toHaveAttributeValue("src", img200);
+        expect(img).toHaveAttributeValue("srcset", img400);
+    });
+});
+
+describe("_setSources for iframe", () => {
+    let iframe;
+    let srcToLoad = "http://www.google.it";
+    let preloadedSrc = srcToLoad + "/doodle";
+
+    beforeEach(() => {
+        iframe = document.createElement("iframe");
+    });
+    test("...with initially empty src", () => {
+        iframe.dataset = {
+            "original": srcToLoad
+        };
+        setSources(iframe, lazyloadSettings);
+        expect(iframe).toHaveAttributeValue("src", srcToLoad);
+    });
+    test("...with initial value in src", () => {
+        iframe.dataset = {
+            "original": srcToLoad
+        };
+        iframe.setAttribute("src", preloadedSrc);
+        setSources(iframe, lazyloadSettings);
+        expect(iframe).toHaveAttributeValue("src", srcToLoad);
+    });
+    test("...with initial value in src and empty data-original", () => {
+        iframe.dataset = {
+            "original": ""
+        };
+        iframe.setAttribute("src", preloadedSrc);
+        setSources(iframe, lazyloadSettings);
+        expect(iframe).toHaveAttributeValue("src", preloadedSrc);
+    });
+});
+
+describe("_setSources for background image", () => {
+    let element;
+    let img100 = "http://placehold.it/100x100";
+    let img200 = "http://placehold.it/200x200";
+
+    beforeEach(() => {
+        element = document.createElement("div");
+    });
+
+    test("...with initially empty style attribute", () => {
+        element.dataset = {
+            "original": img200
+        };
+        setSources(element, lazyloadSettings);
+        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+        expect(element.style.backgroundImage).toBe(`url(${img200})`);
+    });
+    test("...with initially present style attribute", () => {
+        element.dataset = {
+            "original": img100
+        };
+        element.style = {
+            padding: "1px"
+        };
+        setSources(element, lazyloadSettings);
+        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+        expect(element.style.backgroundImage).toBe(`url(${img100})`);
+    });
+    test("...with initially present style and background", () => {
+        element.dataset = {
+            "original": img200
+        };
+        element.style = {
+            padding: "1px",
+            backgroundImage: "url(" + img100 + ")"
+        };
+        setSources(element, lazyloadSettings);
+        // Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
+        expect(element.style.backgroundImage).toBe(`url(${img200})`);
+    });
+});
+
+describe("setSourcesForPicture", () => {
+    let picture, source1, source2, img;
+    let img1 = "http://placehold.it/1x1";
+    let img100 = "http://placehold.it/100x100";
+    let img200 = "http://placehold.it/200x200";
+    let img400 = "http://placehold.it/400x400";
+
+    beforeEach(() => {
+        // Parent is a picture
+        picture = document.createElement("picture");
+        picture.appendChild(source1 = document.createElement("source"));
+        picture.appendChild(source2 = document.createElement("source"));
+        picture.appendChild(img = document.createElement("img"));
+    });
+
+    test("...with initially empty srcset", () => {
+        source1.dataset = {"originalSet": img200};
+        source2.dataset = {"originalSet": img400};
+        setSourcesForPicture(img, lazyloadSettings);
+        expect(source1).toHaveAttributeValue("srcset", img200);
+        expect(source2).toHaveAttributeValue("srcset", img400);
+    });
+
+    test("...with initial value in srcset", () => {
+        source1.dataset = {"originalSet": img200};
+        source2.dataset = {"originalSet": img400};
+        source1.setAttribute("srcset", img1);
+        source2.setAttribute("srcset", img1);
+        setSourcesForPicture(img, lazyloadSettings);
+        expect(source1).toHaveAttributeValue("srcset", img200);
+        expect(source2).toHaveAttributeValue("srcset", img400);
+    });
+
+    test("...with initial value in srcset and empty data-srcset", () => {
+        source1.dataset = {"originalSet": ""};
+        source2.dataset = {"originalSet": ""};
+        source1.setAttribute("srcset", img200);
+        source2.setAttribute("srcset", img400);
+        setSourcesForPicture(img, lazyloadSettings);
+        expect(source1).toHaveAttributeValue("srcset", img200);
+        expect(source2).toHaveAttributeValue("srcset", img400);
+    });
+});

dist/lazyload.es2015.js

@@ -48,7 +48,7 @@ var autoInitialize = function (classObj, options) {
 };
 
 const setSourcesForPicture = function (element, settings) {
-    const {dataSrcSet} = settings;
+    const {data_srcset: dataSrcSet} = settings;
     const parent = element.parentElement;
     if (parent.tagName !== "PICTURE") {
         return;
@@ -64,7 +64,7 @@ const setSourcesForPicture = function (element, settings) {
     }
 };
 
-var setSources = function (element, settings) {
+const setSources = function (element, settings) {
     const {data_src: dataSrc, data_srcset: dataSrcSet} = settings;
     const tagName = element.tagName;
     const elementSrc = element.dataset[dataSrc];

dist/lazyload.js

@@ -50,7 +50,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     };
 
     var setSourcesForPicture = function setSourcesForPicture(element, settings) {
-        var dataSrcSet = settings.dataSrcSet;
+        var dataSrcSet = settings.data_srcset;
 
         var parent = element.parentElement;
         if (parent.tagName !== "PICTURE") {

gulpfile.js

@@ -1,14 +1,13 @@
-var gulp = require('gulp');
-var uglify = require('gulp-uglify');
-var eslint = require('gulp-eslint');
-var rename = require('gulp-rename');
-var notify = require('gulp-notify');
-var babel = require('gulp-babel');
-var rollup = require('gulp-rollup');
-
+var gulp = require("gulp");
+var uglify = require("gulp-uglify");
+var eslint = require("gulp-eslint");
+var rename = require("gulp-rename");
+var babel = require("gulp-babel");
+var rollup = require("gulp-rollup");
 var destFolder = "./dist";
 
-gulp.task('scripts', function () {
+gulp.task("default", function () { 
+    process.env.NODE_ENV = "release";
     return gulp.src("./src/**/*.js")
         // ----------- linting --------------
         .pipe(eslint())
@@ -18,24 +17,16 @@ gulp.task('scripts', function () {
         .pipe(rollup({
             format: "umd",
             moduleName: "LazyLoad",
-            entry: './src/lazyload.js'
+            entry: "./src/lazyload.js"
         }))
         .pipe(rename("lazyload.es2015.js"))
         .pipe(gulp.dest(destFolder)) // --> writing rolledup
         // ----------- babelizing --------------
-        .pipe(babel({
-            presets: [["es2015", { "modules": false }]],
-            sourceMap: false,
-            plugins: ["transform-object-assign"]
-        }))
+        .pipe(babel())
         .pipe(rename("lazyload.js"))
         .pipe(gulp.dest(destFolder)) // --> writing babelized
         // ----------- minifying --------------
         .pipe(uglify())
         .pipe(rename("lazyload.min.js"))
-        .pipe(gulp.dest(destFolder)) // --> writing uglified
-        // ----------- notifying --------------
-        .pipe(notify({
-            message: 'Scripts task complete'
-        }));
+        .pipe(gulp.dest(destFolder)); // --> writing uglified
 });