Merge pull request #826 from frontity/amp-aware-image

Make the `Image` component AMP-aware

.changeset/big-beds-do.md

@@ -0,0 +1,5 @@
+---
+"@frontity/components": minor
+---
+
+Make the Image component from `@frontity/components` AMP-aware and remove the Intersection Observer fallback which used to lazily load images in the absence of native lazy loading.

e2e/integration/frontity-01/image.spec.js

@@ -1,75 +1,23 @@
-import expect from "expect";
-
-describe("Image lazy-loading (with Intersection Observer)", () => {
+describe("Image lazy-loading (with native lazy-load)", () => {
   beforeEach(() => {
     cy.viewport(360, 640);
-    cy.visit("http://localhost:3001?frontity_name=image", {
-      onBeforeLoad(win) {
-        // Remove the "loading" prop from the HTMLImageElement prototype
-        Object.defineProperty(win.HTMLImageElement.prototype, "loading", {
-          configurable: true,
-          writable: true,
-        });
-        // win.HTMLImageElement.prototype.loading = undefined;
-        delete win.HTMLImageElement.prototype.loading;
-      },
-    });
-  });
-
-  it("native lazy load should not exist", () => {
-    return cy
-      .window()
-      .its("HTMLImageElement")
-      .then((htmlImageElement) => {
-        expect("loading" in htmlImageElement.prototype).toBe(false);
-      });
-  });
-
-  it("should work scrolling from top to bottom", () => {
-    cy.scrollTo("topLeft");
-    cy.get("img:not(.top.left)").should("not.be.visible");
-    cy.get("img.bottom.left")
-      .scrollIntoView({ duration: 300 })
-      .should("be.visible");
-    cy.get("img.right").should("not.be.visible");
-  });
-
-  it("should work scrolling from bottom to top", () => {
-    cy.scrollTo("bottomLeft");
-    cy.get("img:not(.bottom.left)").should("not.be.visible");
-    cy.get("img.top.left")
-      .scrollIntoView({ duration: 300 })
-      .should("be.visible");
-    cy.get("img.right").should("not.be.visible");
+    cy.visit("http://localhost:3001?frontity_name=image");
   });
 
-  it("should work scrolling from left to right", () => {
+  it("should render an image with loading=lazy", () => {
     cy.scrollTo("topLeft");
-    cy.get("img:not(.bottom.left)").should("not.be.visible");
-    cy.get("img.top.right")
-      .scrollIntoView({ duration: 300 })
-      .should("be.visible");
-    cy.get("img.bottom").should("not.be.visible");
+    cy.get("img[height]").should("have.attr", "loading", "lazy");
   });
 });
 
-describe("Image lazy-loading (with native lazy-load)", () => {
+describe("amp-image", () => {
   beforeEach(() => {
     cy.viewport(360, 640);
-    cy.visit("http://localhost:3001?frontity_name=image");
+    cy.visit("http://localhost:3001/amp-image/?frontity_name=amp-image");
   });
 
-  it("should render an image without loading if it doesn't have height", () => {
+  it("should render an amp-image", () => {
     cy.scrollTo("topLeft");
-    cy.get("img:not([height])").should("not.have.attr", "loading");
-    cy.get("img:not([height])").should("not.be.visible");
-    cy.get("img:not([height])")
-      .scrollIntoView({ duration: 300 })
-      .should("be.visible");
-  });
-
-  it("should render an image with loading=lazy if it has a height", () => {
-    cy.scrollTo("topLeft");
-    cy.get("img[height]").should("have.attr", "loading", "lazy");
+    cy.get("amp-img[height]").should("have.attr", "layout", "fill");
   });
 });

e2e/project/frontity.settings.ts

@@ -29,6 +29,11 @@ const settings: Settings<
     name: "image",
     packages: ["e2e-image"],
   },
+  {
+    name: "amp-image",
+    mode: "amp",
+    packages: ["@frontity/amp", "e2e-image"],
+  },
   {
     name: "fonts",
     packages: [