Responsive image example (#720)

* add example with responsive image

* add new ci job

* add new recipe to the root readme

README.md

@@ -46,6 +46,7 @@ Recipe | Description
 [Pagination](./examples/testing-dom__pagination) | Clicking the "Next" link until we reach the last page
 [Clipboard](./examples/testing-dom__clipboard) | Copy and paste text into the clipboard from the test
 [Page source](./examples/testing-dom__page-source) | Get the source of the page under test
+[Responsive image](./examples/testing-dom__responsive-image) | Uses `cy.intercept` to confirm the image loaded by the `<picture>` element
 
 ## Logging in recipes
 

circle.yml

@@ -318,6 +318,8 @@ jobs:
     <<: *defaults
   testing-dom__page-source:
     <<: *defaults
+  testing-dom__responsive-image:
+    <<: *defaults
   unit-testing__application-code:
     <<: *defaults
   server-communication__bootstrapping-your-app:
@@ -615,6 +617,9 @@ all_jobs: &all_jobs
   - testing-dom__page-source:
       requires:
         - build
+  - testing-dom__responsive-image:
+      requires:
+        - build
   - unit-testing__application-code:
       requires:
         - build
@@ -738,6 +743,7 @@ all_jobs: &all_jobs
         - testing-dom__pagination
         - testing-dom__clipboard
         - testing-dom__page-source
+        - testing-dom__responsive-image
         - unit-testing__application-code
         # "meta" jobs
         - test-examples

examples/testing-dom__responsive-image/README.md

@@ -0,0 +1,19 @@
+# Responsive image
+> Testing how the browser loads images depending on viewport
+
+The test in [cypress/integration/spec.js](./cypress/integration/spec.js) observes the images loaded by the `<picture>` element to confirm that the mobile version is requested for mobile viewport. The desktop viewport causes the page to request the desktop image version.
+
+![The test](./images/picture.gif)
+
+The loaded image resolution is confirmed using `naturalWidth` property.
+
+```js
+cy.intercept('elva-480w-close-portrait.jpg').as('mobileImage')
+cy.visit('responsive-images/picture.html')
+// the mobile image was loaded
+cy.wait('@mobileImage')
+// check the native resolution of the loaded image
+cy.get('img').should('have.prop', 'naturalWidth', 480)
+```
+
+The folder [responsive-images](./responsive-images) copied from [mdn/learning-area](https://github.com/mdn/learning-area). The responsive HTML markup is described at [MDN: Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

examples/testing-dom__responsive-image/cypress.json

@@ -0,0 +1,5 @@
+{
+  "fixturesFolder": false,
+  "supportFile": false,
+  "pluginsFile": false
+}

examples/testing-dom__responsive-image/cypress/integration/spec.js

@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+
+describe('Responsive image', () => {
+  it('loads the mobile image', { viewportWidth: 400 }, () => {
+    cy.intercept('elva-480w-close-portrait.jpg').as('mobileImage')
+    cy.visit('responsive-images/picture.html')
+
+    // the mobile image was loaded
+    cy.wait('@mobileImage')
+    // check the native resolution of the loaded image
+    cy.get('img').should('have.prop', 'naturalWidth', 480)
+  })
+
+  it('loads the desktop image', { viewportWidth: 1000 }, () => {
+    cy.intercept('elva-800w.jpg').as('desktopImage')
+    cy.visit('responsive-images/picture.html')
+    // the desktop image was loaded
+    cy.wait('@desktopImage')
+    // check the native resolution of the loaded image
+    cy.get('img').should('have.prop', 'naturalWidth', 800)
+  })
+
+  it('asks for mobile image on resize', { viewportWidth: 1000 }, () => {
+    cy.intercept('elva-480w-close-portrait.jpg').as('mobileImage')
+    cy.intercept('elva-800w.jpg').as('desktopImage')
+
+    cy.visit('responsive-images/picture.html')
+
+    // the desktop image was loaded
+    cy.wait('@desktopImage')
+    .wait(1000) // just for demo purposes
+    .log('resizing to mobile')
+
+    cy.viewport('iphone-3')
+    // the mobile image was loaded
+    cy.wait('@mobileImage')
+  })
+})

examples/testing-dom__responsive-image/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "responsive-image",
+  "version": "1.0.0",
+  "description": "Testing how the browser loads images depending on viewport",
+  "private": true,
+  "scripts": {
+    "cypress:open": "../../node_modules/.bin/cypress open",
+    "cypress:run": "../../node_modules/.bin/cypress run",
+    "start": "echo nothing to start",
+    "test:ci": "npm run cypress:run"
+  }
+}

examples/testing-dom__responsive-image/responsive-images/img-srcset.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Responsive HTML images demo</title>
+    <style>
+      html {
+        font-family: sans-serif;
+        background-color: gray;
+      }
+
+      body {
+        max-width: 1200px;
+        margin: 0 auto;
+        background-color: white;
+      }
+
+      header {
+        background: url(header.jpg) no-repeat center;
+        height: 200px;
+      }
+
+      section {
+        padding: 20px;
+      }
+
+      p {
+        line-height: 1.5;
+      }
+
+      img {
+        display: block;
+        margin: 0 auto;
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+
+    </header>
+
+    <main>
+      <section>
+        <h1>My website</h1>
+
+        <img srcset="elva-fairy-480w.jpg 480w,
+                     elva-fairy-800w.jpg 800w"
+             sizes="(max-width: 600px) 480px,
+                    800px"
+             src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+      </section>
+    </main>
+  </body>
+</html>

examples/testing-dom__responsive-image/responsive-images/not-responsive.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Not responsive demo</title>
+    <style>
+      html {
+        font-family: sans-serif;
+        background-color: gray;
+      }
+
+      body {
+        width: 100%;
+        max-width: 1200px;
+        margin: 0 auto;
+        background-color: white;
+      }
+
+      header {
+        background: url(header.jpg) no-repeat center;
+        height: 200px;
+      }
+
+      section {
+        padding: 20px;
+      }
+
+      p {
+        line-height: 1.5;
+      }
+
+      img {
+        display: block;
+        margin: 0 auto;
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+
+    </header>
+
+    <main>
+      <section>
+        <h1>My website</h1>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget venenatis ligula. Ut lacinia at dolor vitae pulvinar. Aliquam pretium dignissim eros. Integer faucibus, dui non aliquet bibendum, lectus orci lobortis odio, ornare porttitor est tellus eget velit. Nulla eros elit, malesuada id neque vel, viverra vehicula neque. Nullam auctor turpis non leo iaculis finibus. Quisque blandit arcu venenatis libero tempor, ac pulvinar ligula dapibus.</p>
+
+        <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+
+        <p>Suspendisse potenti. Ut in luctus eros. Mauris pulvinar vehicula aliquet. Etiam imperdiet eleifend luctus. Duis ut justo nec eros ornare consectetur. Vestibulum convallis condimentum varius. Maecenas rutrum porta varius. Phasellus volutpat sem id sagittis luctus. Morbi vitae quam vitae nisi iaculis dignissim.</p>
+
+        <img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+
+        <p>Header image originally by <a href="https://www.flickr.com/photos/miwok/17086751527/">Miwok</a>.</p>
+      </section>
+    </main>
+  </body>
+</html>

examples/testing-dom__responsive-image/responsive-images/picture.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Responsive HTML images demo</title>
+    <style>
+      html {
+        font-family: sans-serif;
+        background-color: gray;
+      }
+
+      body {
+        max-width: 1200px;
+        margin: 0 auto;
+        background-color: white;
+      }
+
+      section {
+        padding: 20px;
+      }
+
+      p {
+        line-height: 1.5;
+      }
+
+      img {
+        display: block;
+        margin: 0 auto;
+        max-width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>My website</h1>
+
+        <picture>
+          <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+          <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+          <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+        </picture>
+      </section>
+    </main>
+  </body>
+</html>

examples/testing-dom__responsive-image/responsive-images/srcset-resolutions.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Responsive HTML images demo</title>
+    <style>
+
+      img {
+        width: 320px;
+      }
+
+    </style>
+  </head>
+  <body>
+
+
+        <img srcset="elva-fairy-320w.jpg,
+                     elva-fairy-480w.jpg 1.5x,
+                     elva-fairy-640w.jpg 2x"
+             src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> 
+
+
+  </body>
+</html>