From f007eb38d544c4d99428083edd2f8d6152cb5546 Mon Sep 17 00:00:00 2001
From: simonihmig <simon.ihmig@kaliber5.de>
Date: Mon, 22 Feb 2021 00:57:23 +0100
Subject: [PATCH 1/2] Apply LQIP styles with dynamically generated CSS, to
 support FastBoot

Instead of applying styles with JS *after* rehydration, which is too late.
---
 addon/components/responsive-image.hbs         |  4 +-
 addon/components/responsive-image.ts          | 57 ++++---------------
 addon/services/responsive-image.ts            |  6 +-
 addon/styles/ember-responsive-image.css       |  4 ++
 addon/utils/data-uri.ts                       |  7 ---
 index.js                                      | 16 ++++++
 lib/css-writer.js                             | 51 +++++++++++++++++
 lib/plugins/lqip-color.js                     | 16 +++++-
 lib/plugins/lqip-inline.js                    | 24 +++++++-
 .../blurry-svg.ts => lib/utils/blurry-svg.js  |  8 +--
 lib/utils/data-uri.js                         |  5 ++
 package.json                                  |  1 +
 tests/dummy/app/templates/image.hbs           |  6 +-
 tests/fastboot/image-test.js                  | 32 ++++++++++-
 .../components/responsive-image-test.js       | 35 +++++++-----
 yarn.lock                                     |  9 ++-
 16 files changed, 192 insertions(+), 89 deletions(-)
 delete mode 100644 addon/utils/data-uri.ts
 create mode 100644 lib/css-writer.js
 rename addon/utils/blurry-svg.ts => lib/utils/blurry-svg.js (85%)
 create mode 100644 lib/utils/data-uri.js

diff --git a/addon/components/responsive-image.hbs b/addon/components/responsive-image.hbs
index 3e12b1995..343d53c69 100644
--- a/addon/components/responsive-image.hbs
+++ b/addon/components/responsive-image.hbs
@@ -10,14 +10,12 @@
     src={{this.src}}
     width={{this.width}}
     height={{this.height}}
-    class="eri-{{this.layout}}"
+    class={{this.classNames}}
     loading="lazy"
     decoding="async"
     ...attributes
     {{style
-      (if this.showLqipImage (hash background-image=this.lqipImage background-size="cover"))
       (if this.showLqipBlurhash (hash background-image=this.lqipBlurhash background-size="cover"))
-      (if this.showLqipColor (hash background-color=this.lqipColor))
     }}
     {{on "load" this.onLoad}}
   />
diff --git a/addon/components/responsive-image.ts b/addon/components/responsive-image.ts
index ea5697f83..12627d23e 100644
--- a/addon/components/responsive-image.ts
+++ b/addon/components/responsive-image.ts
@@ -4,19 +4,12 @@ import ResponsiveImageService, {
   ImageMeta,
   ImageType,
   LqipBlurhash,
-  LqipColor,
-  LqipInline,
   Meta,
 } from 'ember-responsive-image/services/responsive-image';
 import { assert } from '@ember/debug';
-import dataUri from 'ember-responsive-image/utils/data-uri';
-import blurrySvg from 'ember-responsive-image/utils/blurry-svg';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import {
-  macroCondition,
-  getOwnConfig /*, importSync*/,
-} from '@embroider/macros';
+import { getOwnConfig, macroCondition } from '@embroider/macros';
 import { decode } from 'blurhash';
 
 declare module '@embroider/macros' {
@@ -187,47 +180,17 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
     }
   }
 
-  get hasLqipImage(): boolean {
-    return this.meta.lqip?.type === 'inline';
-  }
-
-  get showLqipImage(): boolean {
-    return !this.isLoaded && this.hasLqipImage;
-  }
-
-  get lqipImage(): string | undefined {
-    if (!this.hasLqipImage) {
-      return undefined;
-    }
-    const lqip = (this.meta as Required<Meta>).lqip as LqipInline;
-
-    const uri = dataUri(
-      blurrySvg(
-        dataUri(lqip.image, 'image/png', true),
-        lqip.width,
-        lqip.height
-      ),
-      'image/svg+xml'
-    );
-
-    return `url("${uri}")`;
-  }
-
-  get hasLqipColor(): boolean {
-    return this.meta.lqip?.type === 'color';
-  }
-
-  get showLqipColor(): boolean {
-    return !this.isLoaded && this.hasLqipColor;
-  }
-
-  get lqipColor(): string | undefined {
-    if (!this.hasLqipColor) {
-      return undefined;
+  get classNames(): string {
+    const classNames = [`eri-${this.layout}`];
+    const lqip = this.meta.lqip;
+    if (lqip && !this.isLoaded) {
+      classNames.push(`eri-lqip-${lqip.type}`);
+      if (lqip.type === 'color' || lqip.type === 'inline') {
+        classNames.push(lqip.class);
+      }
     }
-    const lqip = (this.meta as Required<Meta>).lqip as LqipColor;
 
-    return lqip.color;
+    return classNames.join(' ');
   }
 
   get hasLqipBlurhash(): boolean {
diff --git a/addon/services/responsive-image.ts b/addon/services/responsive-image.ts
index 9f12b5565..78aa016ca 100644
--- a/addon/services/responsive-image.ts
+++ b/addon/services/responsive-image.ts
@@ -13,14 +13,12 @@ export interface LqipBase {
 
 export interface LqipInline extends LqipBase {
   type: 'inline';
-  image: string;
-  width: number;
-  height: number;
+  class: string;
 }
 
 export interface LqipColor extends LqipBase {
   type: 'color';
-  color: string;
+  class: string;
 }
 
 export interface LqipBlurhash extends LqipBase {
diff --git a/addon/styles/ember-responsive-image.css b/addon/styles/ember-responsive-image.css
index ea6b02fbc..a59125afd 100644
--- a/addon/styles/ember-responsive-image.css
+++ b/addon/styles/ember-responsive-image.css
@@ -7,3 +7,7 @@
 .eri-responsive {
   content-visibility: auto;
 }
+
+.eri-lqip-inline {
+  background-size: cover;
+}
diff --git a/addon/utils/data-uri.ts b/addon/utils/data-uri.ts
deleted file mode 100644
index 6fa1dd976..000000000
--- a/addon/utils/data-uri.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function dataUri(
-  data: string,
-  type: string,
-  base64 = false
-): string {
-  return `data:${type};base64,${base64 ? data : btoa(data)}`;
-}
diff --git a/index.js b/index.js
index 712e23c03..cfd823bec 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,7 @@
 const path = require('path');
 const Funnel = require('broccoli-funnel');
 const Writer = require('./lib/image-writer');
+const CssWriter = require('./lib/css-writer');
 const fs = require('fs-extra');
 const map = require('broccoli-stew').map;
 const mergeTrees = require('broccoli-merge-trees');
@@ -26,6 +27,7 @@ module.exports = {
   metaData: {},
   configData: {},
   app: null,
+  cssExtensions: [],
   metadataExtensions: [],
   extendedMetaData: null,
   imagePreProcessors: [],
@@ -62,6 +64,10 @@ module.exports = {
     this.metadataExtensions.push({ callback, target });
   },
 
+  addCssExtension(callback, target) {
+    this.cssExtensions.push({ callback, target });
+  },
+
   /**
    * Add a callback function to hook into image processing before the addon's image processes are executed.
    * The callback method you provide must have the following signature:
@@ -223,6 +229,7 @@ module.exports = {
     // we write our image meta data as a script tag into the app's index.html, which the service will read from
     // (that happens only in the browser, where we have easy access to the DOM. For FastBoot this is different, see below)
     if (type === 'head-footer') {
+      console.log('content');
       return [
         '<script id="ember_responsive_image_meta" type="application/json">',
         JSON.stringify(this.extendMetadata()),
@@ -231,6 +238,15 @@ module.exports = {
     }
   },
 
+  treeForAddonStyles(tree) {
+    const dynTree = new CssWriter(
+      [this.processingTree],
+      () => this.metaData,
+      this.cssExtensions
+    );
+    return mergeTrees([tree, dynTree]);
+  },
+
   treeForFastBoot() {
     // we have to rename our own fastboot tree so that our dummy app works correctly, due to this bug in ember-cli-fastboot:
     // https://github.com/ember-fastboot/ember-cli-fastboot/issues/807
diff --git a/lib/css-writer.js b/lib/css-writer.js
new file mode 100644
index 000000000..c8b855f87
--- /dev/null
+++ b/lib/css-writer.js
@@ -0,0 +1,51 @@
+'use strict';
+
+const CachingWriter = require('broccoli-caching-writer');
+const path = require('path');
+const fs = require('fs-extra');
+const baseN = require('base-n');
+
+const b64 = baseN.create();
+
+class CssWriter extends CachingWriter {
+  constructor(inputNodes, getMeta, cssExtensions, options) {
+    options = options || {};
+    options.cacheInclude = [/.*/];
+    super(inputNodes, options);
+
+    this.getMeta = getMeta;
+    this.cssExtensions = cssExtensions;
+  }
+
+  async build() {
+    const destinationPath = path.join(
+      this.outputPath,
+      'ember-responsive-image-dynamic.css'
+    );
+
+    await fs.writeFile(destinationPath, this.generateCss());
+  }
+
+  generateCss() {
+    const meta = this.getMeta();
+    let cssEntries = [];
+
+    let classCounter = 0;
+    const generateClassName = () => `eri-dyn-${b64.encode(classCounter++)}`;
+
+    for (const [image, imageMeta] of Object.entries(meta)) {
+      for (const { callback, target } of this.cssExtensions) {
+        const css = callback.call(target, image, imageMeta, {
+          generateClassName,
+        });
+        if (css) {
+          cssEntries.push(css);
+        }
+      }
+    }
+
+    return cssEntries.join(`\n`);
+  }
+}
+
+module.exports = CssWriter;
diff --git a/lib/plugins/lqip-color.js b/lib/plugins/lqip-color.js
index 891349430..c3f77b79a 100644
--- a/lib/plugins/lqip-color.js
+++ b/lib/plugins/lqip-color.js
@@ -5,6 +5,7 @@ class LqipColorPlugin {
 
     addon.addMetadataExtension(this.addMetaData, this);
     addon.addImagePreProcessor(this.imagePreProcessor, this);
+    addon.addCssExtension(this.addCss, this);
   }
 
   canProcessImage(config) {
@@ -24,7 +25,7 @@ class LqipColorPlugin {
       dominant.g.toString(16) +
       dominant.b.toString(16);
 
-    this.metaData.set(image, { type: 'color', color });
+    this.metaData.set(image, { color });
 
     return sharped;
   }
@@ -32,11 +33,22 @@ class LqipColorPlugin {
   addMetaData(image, metadata /*, config*/) {
     const ourMeta = this.metaData.get(image);
     if (ourMeta) {
-      metadata.lqip = ourMeta;
+      metadata.lqip = { type: 'color', class: ourMeta.class };
     }
 
     return metadata;
   }
+
+  addCss(image, metaData, { generateClassName }) {
+    const ourMeta = this.metaData.get(image);
+    if (ourMeta) {
+      const className = generateClassName();
+      ourMeta.class = className;
+      return `.${className} { background-color: ${ourMeta.color}; }`;
+    }
+
+    return undefined;
+  }
 }
 
 module.exports = LqipColorPlugin;
diff --git a/lib/plugins/lqip-inline.js b/lib/plugins/lqip-inline.js
index 4466855d6..60f41f54c 100644
--- a/lib/plugins/lqip-inline.js
+++ b/lib/plugins/lqip-inline.js
@@ -1,4 +1,6 @@
 const sharp = require('sharp');
+const dataUri = require('../utils/data-uri');
+const blurrySvg = require('../utils/blurry-svg');
 
 class LqipInlinePlugin {
   constructor(addon) {
@@ -7,6 +9,7 @@ class LqipInlinePlugin {
 
     addon.addMetadataExtension(this.addMetaData, this);
     addon.addImagePreProcessor(this.imagePreProcessor, this);
+    addon.addCssExtension(this.addCss, this);
   }
 
   canProcessImage(config) {
@@ -57,11 +60,30 @@ class LqipInlinePlugin {
   addMetaData(image, metadata /*, config*/) {
     const ourMeta = this.metaData.get(image);
     if (ourMeta) {
-      metadata.lqip = ourMeta;
+      metadata.lqip = { type: 'inline', class: ourMeta.class };
     }
 
     return metadata;
   }
+
+  addCss(image, metaData, { generateClassName }) {
+    const ourMeta = this.metaData.get(image);
+    if (ourMeta) {
+      const className = generateClassName();
+      ourMeta.class = className;
+      const uri = dataUri(
+        blurrySvg(
+          dataUri(ourMeta.image, 'image/png', true),
+          ourMeta.width,
+          ourMeta.height
+        ),
+        'image/svg+xml'
+      );
+      return `.${className} { background-image: url(${uri}); }`;
+    }
+
+    return undefined;
+  }
 }
 
 module.exports = LqipInlinePlugin;
diff --git a/addon/utils/blurry-svg.ts b/lib/utils/blurry-svg.js
similarity index 85%
rename from addon/utils/blurry-svg.ts
rename to lib/utils/blurry-svg.js
index 5705b7f4f..0d113fd2e 100644
--- a/addon/utils/blurry-svg.ts
+++ b/lib/utils/blurry-svg.js
@@ -1,12 +1,8 @@
 // taken from https://github.com/google/eleventy-high-performance-blog/blob/5ed39db7fd3f21ae82ac1a8e833bf283355bd3d0/_11ty/blurry-placeholder.js#L51
 
-export default function blurrySvg(
-  src: string,
-  width: number,
-  height: number
-): string {
+module.exports = function blurrySvg(src, width, height) {
   return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}">
 <filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation=".5"></feGaussianBlur><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"></feFuncA></feComponentTransfer></filter>
 <image filter="url(#b)" preserveAspectRatio="none" height="100%" width="100%" xlink:href="${src}"></image>
 </svg>`;
-}
+};
diff --git a/lib/utils/data-uri.js b/lib/utils/data-uri.js
new file mode 100644
index 000000000..dcf9fcebe
--- /dev/null
+++ b/lib/utils/data-uri.js
@@ -0,0 +1,5 @@
+module.exports = function dataUri(data, type, base64 = false) {
+  return `data:${type};base64,${
+    base64 ? data : Buffer.from(data).toString('base64')
+  }`;
+};
diff --git a/package.json b/package.json
index 9b079ed53..70c754645 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@glimmer/component": "^1.0.3",
     "@glimmer/tracking": "^1.0.3",
     "async-q": "^0.3.1",
+    "base-n": "^3.0.0",
     "blurhash": "^1.1.3",
     "broccoli-caching-writer": "^3.0.3",
     "broccoli-funnel": "^3.0.3",
diff --git a/tests/dummy/app/templates/image.hbs b/tests/dummy/app/templates/image.hbs
index e1f31a0ca..55ad28924 100644
--- a/tests/dummy/app/templates/image.hbs
+++ b/tests/dummy/app/templates/image.hbs
@@ -1 +1,5 @@
-<ResponsiveImage @src="assets/images/tests/test.png"/>
+<ResponsiveImage @src="assets/images/tests/test.png" data-test-simple-image/>
+
+<ResponsiveImage @src="assets/images/tests/lqip/color.jpg" data-test-lqip-image="color"/>
+<ResponsiveImage @src="assets/images/tests/lqip/inline.jpg" data-test-lqip-image="inline"/>
+<ResponsiveImage @src="assets/images/tests/lqip/blurhash.jpg" data-test-lqip-image="blurhash"/>
\ No newline at end of file
diff --git a/tests/fastboot/image-test.js b/tests/fastboot/image-test.js
index afd826bb9..2314cc66e 100644
--- a/tests/fastboot/image-test.js
+++ b/tests/fastboot/image-test.js
@@ -10,7 +10,35 @@ module('FastBoot | image', function (hooks) {
   test('it renders an image', async function (assert) {
     await visit('/image');
 
-    assert.dom('img').exists();
-    assert.dom('img').hasAttribute('src', '/assets/images/tests/test640w.png');
+    assert.dom('img[data-test-simple-image]').exists();
+    assert
+      .dom('img[data-test-simple-image]')
+      .hasAttribute('src', '/assets/images/tests/test640w.png');
+  });
+
+  test('it renders lqip color', async function (assert) {
+    await visit('/image');
+
+    assert.dom('img[data-test-lqip-image=color]').exists();
+    assert
+      .dom('img[data-test-lqip-image=color]')
+      .hasStyle({ 'background-color': 'rgb(88, 72, 56)' });
+  });
+
+  test('it renders lqip inline', async function (assert) {
+    await visit('/image');
+
+    assert.dom('img[data-test-lqip-image=inline]').exists();
+    assert
+      .dom('img[data-test-lqip-image=inline]')
+      .hasStyle({ 'background-size': 'cover' });
+    assert.ok(
+      window
+        .getComputedStyle(
+          document.querySelector('img[data-test-lqip-image=inline]')
+        )
+        .backgroundImage?.match(/data:image\/svg/),
+      'it has a background SVG'
+    );
   });
 });
diff --git a/tests/integration/components/responsive-image-test.js b/tests/integration/components/responsive-image-test.js
index 9cdfa3c48..36bd60da2 100644
--- a/tests/integration/components/responsive-image-test.js
+++ b/tests/integration/components/responsive-image-test.js
@@ -1,4 +1,4 @@
-import { render } from '@ember/test-helpers';
+import { render, settled } from '@ember/test-helpers';
 import { setupRenderingTest } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { module, test } from 'qunit';
@@ -478,21 +478,25 @@ module('Integration: Responsive Image Component', function (hooks) {
         );
 
         assert.ok(
-          this.element
-            .querySelector('img')
-            .style.backgroundImage?.match(/data:image\/svg/),
+          window
+            .getComputedStyle(this.element.querySelector('img'))
+            .backgroundImage?.match(/data:image\/svg/),
           'it has a background SVG'
         );
         assert.dom('img').hasStyle({ 'background-size': 'cover' });
         assert.ok(
-          this.element.querySelector('img').style.backgroundImage?.length > 100,
+          window.getComputedStyle(this.element.querySelector('img'))
+            .backgroundImage?.length > 100,
           'the background SVG has a reasonable length'
         );
 
         await waitUntilLoaded;
+        await settled();
 
-        assert.notOk(
-          this.element.querySelector('img').style.backgroundImage,
+        assert.equal(
+          window.getComputedStyle(this.element.querySelector('img'))
+            .backgroundImage,
+          'none',
           'after image is loaded the background SVG is removed'
         );
       });
@@ -513,11 +517,9 @@ module('Integration: Responsive Image Component', function (hooks) {
         assert.dom('img').hasStyle({ 'background-color': 'rgb(88, 72, 56)' });
 
         await waitUntilLoaded;
+        await settled();
 
-        assert.notOk(
-          this.element.querySelector('img').style.backgroundColor,
-          'after image is loaded the background color is removed'
-        );
+        assert.dom('img').hasStyle({ 'background-color': 'rgba(0, 0, 0, 0)' });
       });
 
       module('blurhash', function () {
@@ -540,15 +542,18 @@ module('Integration: Responsive Image Component', function (hooks) {
           );
           assert.dom('img').hasStyle({ 'background-size': 'cover' });
           assert.ok(
-            this.element.querySelector('img').style.backgroundImage?.length >
-              100,
+            window.getComputedStyle(this.element.querySelector('img'))
+              .backgroundImage?.length > 100,
             'the background SVG has a reasonable length'
           );
 
           await waitUntilLoaded;
+          await settled();
 
-          assert.notOk(
-            this.element.querySelector('img').style.backgroundImage,
+          assert.equal(
+            window.getComputedStyle(this.element.querySelector('img'))
+              .backgroundImage,
+            'none',
             'after image is loaded the background PNG is removed'
           );
         });
diff --git a/yarn.lock b/yarn.lock
index 1820a9966..583bf3df7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3719,6 +3719,13 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base-n@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/base-n/-/base-n-3.0.0.tgz#a451480303130eaf73c749057e83eb272fd51377"
+  integrity sha512-u+HQjUyXwqZLbDDlunZUoFlWSZWIwIpNpDErBMOCkBU/VOMpVYMLYih/+FRFCkfrgXrdnbI46fTkUIu1C22v7Q==
+  dependencies:
+    dashdash "^1.14.1"
+
 base64-arraybuffer@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
@@ -5539,7 +5546,7 @@ dag-map@^2.0.2:
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-2.0.2.tgz#9714b472de82a1843de2fba9b6876938cab44c68"
   integrity sha1-lxS0ct6CoYQ94vuptodpOMq0TGg=
 
-dashdash@^1.12.0:
+dashdash@^1.12.0, dashdash@^1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
   integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=

From a5084fceb9e0c0d3e01f3e21ac01a3b32ceefa05 Mon Sep 17 00:00:00 2001
From: simonihmig <simon.ihmig@kaliber5.de>
Date: Mon, 22 Feb 2021 10:48:05 +0100
Subject: [PATCH 2/2] Fix flakey test by introducing a cacheBreaker arg

color lqip test was somehow failing when other tests that loaded the same image ran before, as the lqip was already removed before testing that it exists.
---
 addon/components/responsive-image.ts          | 18 ++++-
 .../components/responsive-image-test.js       | 76 ++++++++++---------
 2 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/addon/components/responsive-image.ts b/addon/components/responsive-image.ts
index 12627d23e..fa63bd863 100644
--- a/addon/components/responsive-image.ts
+++ b/addon/components/responsive-image.ts
@@ -22,6 +22,7 @@ interface ResponsiveImageComponentArgs {
   sizes?: string;
   width?: number;
   height?: number;
+  cacheBreaker?: string;
 }
 
 interface PictureSource {
@@ -76,7 +77,12 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
         .map((type) => {
           const sources: string[] = this.responsiveImage
             .getImages(this.args.src, type)
-            .map((imageMeta) => `${imageMeta.image} ${imageMeta.width}w`);
+            .map(
+              (imageMeta) =>
+                `${imageMeta.image}${
+                  this.args.cacheBreaker ? '?' + this.args.cacheBreaker : ''
+                } ${imageMeta.width}w`
+            );
 
           return {
             srcset: sources.join(', '),
@@ -103,7 +109,9 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
               type
             )!;
 
-            return `${imageMeta.image} ${density}x`;
+            return `${imageMeta.image}${
+              this.args.cacheBreaker ? '?' + this.args.cacheBreaker : ''
+            } ${density}x`;
           }).filter((source) => source !== undefined);
 
           return {
@@ -143,7 +151,11 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
    * the image source which fits at best for the size and screen
    */
   get src(): string | undefined {
-    return this.imageMeta?.image;
+    return this.imageMeta
+      ? `${this.imageMeta.image}${
+          this.args.cacheBreaker ? '?' + this.args.cacheBreaker : ''
+        }`
+      : undefined;
   }
 
   get width(): number | undefined {
diff --git a/tests/integration/components/responsive-image-test.js b/tests/integration/components/responsive-image-test.js
index 36bd60da2..2786bf41c 100644
--- a/tests/integration/components/responsive-image-test.js
+++ b/tests/integration/components/responsive-image-test.js
@@ -6,6 +6,10 @@ import { module, test } from 'qunit';
 module('Integration: Responsive Image Component', function (hooks) {
   setupRenderingTest(hooks);
 
+  hooks.beforeEach(function () {
+    this.set('cacheBreaker', new Date().getTime());
+  });
+
   module('responsive layout', function () {
     test('it has responsive layout by default', async function (assert) {
       await render(hbs`<ResponsiveImage @src="assets/images/tests/test.png"/>`);
@@ -474,7 +478,7 @@ module('Integration: Responsive Image Component', function (hooks) {
         this.onload = () => setTimeout(resolve, 0);
 
         await render(
-          hbs`<ResponsiveImage @src="assets/images/tests/lqip/inline.jpg" {{on "load" this.onload}}/>`
+          hbs`<ResponsiveImage @src="assets/images/tests/lqip/inline.jpg" @cacheBreaker={{this.cacheBreaker}} {{on "load" this.onload}}/>`
         );
 
         assert.ok(
@@ -511,7 +515,7 @@ module('Integration: Responsive Image Component', function (hooks) {
         this.onload = () => setTimeout(resolve, 0);
 
         await render(
-          hbs`<ResponsiveImage @src="assets/images/tests/lqip/color.jpg" {{on "load" this.onload}}/>`
+          hbs`<ResponsiveImage @src="assets/images/tests/lqip/color.jpg" @cacheBreaker={{this.cacheBreaker}} {{on "load" this.onload}}/>`
         );
 
         assert.dom('img').hasStyle({ 'background-color': 'rgb(88, 72, 56)' });
@@ -521,42 +525,42 @@ module('Integration: Responsive Image Component', function (hooks) {
 
         assert.dom('img').hasStyle({ 'background-color': 'rgba(0, 0, 0, 0)' });
       });
+    });
 
-      module('blurhash', function () {
-        test('it sets LQIP from blurhash as background', async function (assert) {
-          let resolve;
-          const waitUntilLoaded = new Promise((r) => {
-            resolve = r;
-          });
-          this.onload = () => setTimeout(resolve, 0);
-
-          await render(
-            hbs`<ResponsiveImage @src="assets/images/tests/lqip/blurhash.jpg" {{on "load" this.onload}}/>`
-          );
-
-          assert.ok(
-            this.element
-              .querySelector('img')
-              .style.backgroundImage?.match(/data:image\/png/),
-            'it has a background PNG'
-          );
-          assert.dom('img').hasStyle({ 'background-size': 'cover' });
-          assert.ok(
-            window.getComputedStyle(this.element.querySelector('img'))
-              .backgroundImage?.length > 100,
-            'the background SVG has a reasonable length'
-          );
-
-          await waitUntilLoaded;
-          await settled();
-
-          assert.equal(
-            window.getComputedStyle(this.element.querySelector('img'))
-              .backgroundImage,
-            'none',
-            'after image is loaded the background PNG is removed'
-          );
+    module('blurhash', function () {
+      test('it sets LQIP from blurhash as background', async function (assert) {
+        let resolve;
+        const waitUntilLoaded = new Promise((r) => {
+          resolve = r;
         });
+        this.onload = () => setTimeout(resolve, 0);
+
+        await render(
+          hbs`<ResponsiveImage @src="assets/images/tests/lqip/blurhash.jpg" @cacheBreaker={{this.cacheBreaker}} {{on "load" this.onload}}/>`
+        );
+
+        assert.ok(
+          this.element
+            .querySelector('img')
+            .style.backgroundImage?.match(/data:image\/png/),
+          'it has a background PNG'
+        );
+        assert.dom('img').hasStyle({ 'background-size': 'cover' });
+        assert.ok(
+          window.getComputedStyle(this.element.querySelector('img'))
+            .backgroundImage?.length > 100,
+          'the background SVG has a reasonable length'
+        );
+
+        await waitUntilLoaded;
+        await settled();
+
+        assert.equal(
+          window.getComputedStyle(this.element.querySelector('img'))
+            .backgroundImage,
+          'none',
+          'after image is loaded the background PNG is removed'
+        );
       });
     });
   });