From 7fd62cb802c0f7cb58737e6e63f869f54fed2eff Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sat, 7 Sep 2024 23:47:21 +0200
Subject: [PATCH 1/5] Cleanup unneeded test context types

---
 .../components/responsive-image-test.gts      | 69 ++++++++-----------
 ...ponsive-image-cloudinary-provider-test.gts | 22 +++---
 .../responsive-image-imgix-provider-test.gts  | 16 ++---
 .../helpers/responsive-image-resolve-test.gts | 11 +--
 4 files changed, 45 insertions(+), 73 deletions(-)

diff --git a/apps/ember-test-app/tests/integration/components/responsive-image-test.gts b/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
index 4e6244574..dbb39da13 100644
--- a/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
+++ b/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
@@ -14,15 +14,6 @@ import smallImage from "ember-test-app/images/tests/image.jpg?w=10;25&format=ori
 import type { RenderingTestContext } from "@ember/test-helpers";
 import { env } from "@responsive-image/core";
 
-interface TestContext extends RenderingTestContext {
-  cacheBreaker: () => string;
-  testImage: ImageData;
-  testImageLqipInline: ImageData;
-  testImageLqipColor: ImageData;
-  testImageLqipBlurhash: ImageData;
-  smallImage: ImageData;
-}
-
 const cacheBreaker = () => new Date().getTime() + "#" + Math.random();
 
 module("Integration: Responsive Image Component", function (hooks) {
@@ -31,7 +22,7 @@ module("Integration: Responsive Image Component", function (hooks) {
   module("source from local files", function () {
     module("responsive layout", function () {
       test("it has responsive layout by default", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{testImage}} /></template>,
         );
 
@@ -40,7 +31,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders width and height attributes", async function (this: RenderingTestContext, assert) {
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{testImage}} /></template>,
         );
 
@@ -60,7 +51,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the correct sourceset with width descriptors", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{testImage}} /></template>,
         );
 
@@ -124,7 +115,7 @@ module("Integration: Responsive Image Component", function (hooks) {
             new RegExp("/images/image-50w(-\\w+)?.avif 50w"),
           );
 
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{smallImage}} /></template>,
         );
         // png
@@ -173,28 +164,28 @@ module("Integration: Responsive Image Component", function (hooks) {
       // Blocked on https://github.com/embroider-build/ember-auto-import/issues/503
       skip("it renders the fallback src next to needed display size", async function (assert) {
         env.physicalWidth = 45;
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{testImage}} /></template>,
         );
         assert
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-50w(-\\w+)?.jpg"));
         env.physicalWidth = 51;
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{testImage}} /></template>,
         );
         assert
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
         env.physicalWidth = 9;
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{smallImage}} /></template>,
         );
         assert
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-10w(-\\w+)?.jpg"));
         env.physicalWidth = 11;
-        await render<TestContext>(
+        await render(
           <template><ResponsiveImage @src={{smallImage}} /></template>,
         );
         assert
@@ -203,7 +194,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders a given size as sizes", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @size={{40}} />
           </template>,
@@ -217,7 +208,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders with given sizes", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage
               @src={{testImage}}
@@ -236,7 +227,7 @@ module("Integration: Responsive Image Component", function (hooks) {
 
     module("fixed layout", function () {
       test("it has fixed layout when width or height is provided", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @width={{100}} />
           </template>,
@@ -245,7 +236,7 @@ module("Integration: Responsive Image Component", function (hooks) {
         assert.dom("img").hasClass("eri-fixed");
         assert.dom("img").hasNoClass("eri-responsive");
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @height={{100}} />
           </template>,
@@ -256,7 +247,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders width and height when given", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @width={{150}} @height={{50}} />
           </template>,
@@ -267,7 +258,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders height when width is given according to aspect ratio", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @width={{150}} />
           </template>,
@@ -278,7 +269,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders width when height is given according to aspect ratio", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @src={{testImage}} @height={{100}} />
           </template>,
@@ -289,7 +280,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the correct sourceset with pixel densities", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{50}} @src={{testImage}} />
           </template>,
@@ -336,7 +327,7 @@ module("Integration: Responsive Image Component", function (hooks) {
             new RegExp("/images/image-50w(-\\w+)?.avif 1x"),
           );
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{10}} @src={{smallImage}} />
           </template>,
@@ -385,7 +376,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the fallback src next to needed display size", async function (assert) {
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{320}} @src={{testImage}} />
           </template>,
@@ -394,7 +385,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-640w(-\\w+)?.jpg"));
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{101}} @src={{testImage}} />
           </template>,
@@ -403,7 +394,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-640w(-\\w+)?.jpg"));
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{100}} @src={{testImage}} />
           </template>,
@@ -412,7 +403,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{51}} @src={{testImage}} />
           </template>,
@@ -421,7 +412,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           .dom("img")
           .hasAttribute("src", new RegExp("/images/image-100w(-\\w+)?.jpg"));
 
-        await render<TestContext>(
+        await render(
           <template>
             <ResponsiveImage @width={{50}} @src={{testImage}} />
           </template>,
@@ -787,9 +778,7 @@ module("Integration: Responsive Image Component", function (hooks) {
   });
 
   test("it renders a source for every format", async function (assert) {
-    await render<TestContext>(
-      <template><ResponsiveImage @src={{testImage}} /></template>,
-    );
+    await render(<template><ResponsiveImage @src={{testImage}} /></template>);
 
     assert.dom("picture").exists({ count: 1 });
     assert.dom("picture source").exists({ count: 3 });
@@ -798,14 +787,12 @@ module("Integration: Responsive Image Component", function (hooks) {
   });
 
   test("it loads lazily by default", async function (assert) {
-    await render<TestContext>(
-      <template><ResponsiveImage @src={{testImage}} /></template>,
-    );
+    await render(<template><ResponsiveImage @src={{testImage}} /></template>);
     assert.dom("img").hasAttribute("loading", "lazy");
   });
 
   test("it can optionally load eager", async function (assert) {
-    await render<TestContext>(
+    await render(
       <template>
         <ResponsiveImage @src={{testImage}} loading="eager" />
       </template>,
@@ -814,14 +801,12 @@ module("Integration: Responsive Image Component", function (hooks) {
   });
 
   test("it decodes async", async function (assert) {
-    await render<TestContext>(
-      <template><ResponsiveImage @src={{testImage}} /></template>,
-    );
+    await render(<template><ResponsiveImage @src={{testImage}} /></template>);
     assert.dom("img").hasAttribute("decoding", "async");
   });
 
   test("it renders arbitrary HTML attributes", async function (assert) {
-    await render<TestContext>(
+    await render(
       <template>
         <ResponsiveImage
           @src={{testImage}}
diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
index d9f64e424..ddcd5fa91 100644
--- a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
+++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
@@ -1,14 +1,10 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { render, type RenderingTestContext } from "@ember/test-helpers";
+import { render } from "@ember/test-helpers";
 import { array, hash } from "@ember/helper";
 import responsiveImageCloudinaryProvider from "@responsive-image/ember/helpers/responsive-image-cloudinary-provider";
 import type { ImageData } from "@responsive-image/ember";
 
-interface TestContext extends RenderingTestContext {
-  dump: (argument: ImageData) => void;
-}
-
 module(
   "Integration | Helper | responsive-image-cloudinary-provider",
   function (hooks) {
@@ -20,7 +16,7 @@ module(
     };
 
     test("it supports all image types", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider "samples/animals/three-dogs")
@@ -32,7 +28,7 @@ module(
     });
 
     test("it returns correct upload image URLs", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider "samples/animals/three-dogs")
@@ -57,7 +53,7 @@ module(
     });
 
     test("it returns correct fetch image URLs", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
@@ -84,7 +80,7 @@ module(
     });
 
     test("it supports custom transformations", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
@@ -102,7 +98,7 @@ module(
     });
 
     test("it supports custom chained transformations", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
@@ -124,7 +120,7 @@ module(
     });
 
     test("it supports custom image formats", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
@@ -138,7 +134,7 @@ module(
     });
 
     test("it supports custom quality setting", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
@@ -155,7 +151,7 @@ module(
     });
 
     test("it supports remote fetching", async function (this: TestContext, assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageCloudinaryProvider
diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts
index 467044c29..b556da438 100644
--- a/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts
+++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-imgix-provider-test.gts
@@ -1,14 +1,10 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { render, type RenderingTestContext } from "@ember/test-helpers";
+import { render } from "@ember/test-helpers";
 import { array, hash } from "@ember/helper";
 import responsiveImageImgixProvider from "@responsive-image/ember/helpers/responsive-image-imgix-provider";
 import type { ImageData } from "@responsive-image/ember";
 
-interface TestContext extends RenderingTestContext {
-  dump: (argument: ImageData) => void;
-}
-
 module(
   "Integration | Helper | responsive-image-imgix-provider",
   function (hooks) {
@@ -19,7 +15,7 @@ module(
     };
 
     test("it supports jpg, png and webp image types", async function (assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump (responsiveImageImgixProvider "foo/bar.jpg")}}
         </template>,
@@ -29,7 +25,7 @@ module(
     });
 
     test("it returns correct image URLs", async function (assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump (responsiveImageImgixProvider "foo/bar.jpg")}}
         </template>,
@@ -52,7 +48,7 @@ module(
     });
 
     test("it supports custom params", async function (assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageImgixProvider
@@ -69,7 +65,7 @@ module(
     });
 
     test("it supports custom image formats", async function (assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump
             (responsiveImageImgixProvider
@@ -83,7 +79,7 @@ module(
     });
 
     test("it supports custom quality setting", async function (assert) {
-      await render<TestContext>(
+      await render(
         <template>
           {{dump (responsiveImageImgixProvider "foo/bar.jpg" quality=50)}}
         </template>,
diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-resolve-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-resolve-test.gts
index 9ace24c9b..492ac17be 100644
--- a/apps/ember-test-app/tests/integration/helpers/responsive-image-resolve-test.gts
+++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-resolve-test.gts
@@ -2,18 +2,13 @@ import { render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
 import responsiveImageResolve from "@responsive-image/ember/helpers/responsive-image-resolve";
-import type { ImageData } from "@responsive-image/ember";
 import testImage from "ember-test-app/images/tests/test.png?&w=640;2048&responsive";
 
-interface TestContext {
-  testImage: ImageData;
-}
-
 module("Helper: responsive-image-resolve", function (hooks) {
   setupRenderingTest(hooks);
 
   test("works without size", async function (assert) {
-    await render<TestContext>(
+    await render(
       <template>
         <h1>{{responsiveImageResolve testImage}}</h1>
       </template>,
@@ -22,7 +17,7 @@ module("Helper: responsive-image-resolve", function (hooks) {
   });
 
   test("supports size", async function (assert) {
-    await render<TestContext>(
+    await render(
       <template>
         <h1>{{responsiveImageResolve testImage size=10}}</h1>
       </template>,
@@ -33,7 +28,7 @@ module("Helper: responsive-image-resolve", function (hooks) {
   });
 
   test("supports format", async function (assert) {
-    await render<TestContext>(
+    await render(
       <template>
         <h1>{{responsiveImageResolve testImage format="webp"}}</h1>
       </template>,

From f201b6ddcc4c03d608309cd49efb2a72ae3bb14b Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sun, 8 Sep 2024 21:30:32 +0200
Subject: [PATCH 2/5] Add smoke tests in ember apps

---
 apps/ember-vite/app/controllers/index.js      |   2 -
 apps/ember-vite/app/templates/index.hbs       |  53 ++---
 .../tests/acceptance/local-images-test.js     | 222 ++++++++++++++++++
 apps/ember-webpack/app/controllers/index.ts   |   2 -
 apps/ember-webpack/app/templates/index.hbs    |  53 ++---
 .../tests/acceptance/local-images-test.js     | 220 +++++++++++++++++
 6 files changed, 492 insertions(+), 60 deletions(-)
 create mode 100644 apps/ember-vite/tests/acceptance/local-images-test.js
 create mode 100644 apps/ember-webpack/tests/acceptance/local-images-test.js

diff --git a/apps/ember-vite/app/controllers/index.js b/apps/ember-vite/app/controllers/index.js
index b3dafaf63..abd688e80 100644
--- a/apps/ember-vite/app/controllers/index.js
+++ b/apps/ember-vite/app/controllers/index.js
@@ -10,5 +10,3 @@ export default class IndexController extends Controller {
   dogImageLqipInline = dogImageLqipInline;
   dogImageLqipBlurhash = dogImageLqipBlurhash;
 }
-
-export const raw = true;
diff --git a/apps/ember-vite/app/templates/index.hbs b/apps/ember-vite/app/templates/index.hbs
index d75c3c45f..272722758 100644
--- a/apps/ember-vite/app/templates/index.hbs
+++ b/apps/ember-vite/app/templates/index.hbs
@@ -3,40 +3,37 @@
 <h2>Cloudinary</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
-    transformations=(hash e="grayscale")
-  }}
-/>
-<ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "samples/animals/three-dogs"
-    transformations=(hash e="grayscale")
-  }}
-/>
-
-<ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "samples/animals/three-dogs"
-    formats=(array "webp" "avif")
-  }}
-  @width={{160}}
+  @src={{responsive-image-cloudinary-provider "samples/animals/three-dogs"}}
+  data-test-cloudinary-image
 />
 
 <h2>imgix</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-imgix-provider
-    "pages/approach/agile_2000x1200.jpg"
-    params=(hash monochrome="44768B")
-  }}
-  @width={{320}}
+  @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg"}}
+  data-test-imgix-image
 />
 
 <h2>Local</h2>
 
-<ResponsiveImage @src={{this.dogImage}} />
-<ResponsiveImage @src={{this.dogImage}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipColor}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipInline}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipBlurhash}} @width={{320}} />
\ No newline at end of file
+<ResponsiveImage @src={{this.dogImage}} data-test-local-image="responsive" />
+<ResponsiveImage
+  @src={{this.dogImage}}
+  @width={{320}}
+  data-test-local-image="fixed"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipColor}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-color"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipInline}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-inline"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipBlurhash}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-blurhash"
+/>
\ No newline at end of file
diff --git a/apps/ember-vite/tests/acceptance/local-images-test.js b/apps/ember-vite/tests/acceptance/local-images-test.js
new file mode 100644
index 000000000..88185ef3e
--- /dev/null
+++ b/apps/ember-vite/tests/acceptance/local-images-test.js
@@ -0,0 +1,222 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from '../helpers';
+
+const sizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const imageTypes = [
+  ['jpeg', 'jpg'],
+  ['webp', 'webp'],
+];
+
+module('Acceptance | local images', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('responsive layout', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="responsive"]')
+      .hasClass('eri-responsive')
+      .hasAttribute(
+        'src',
+        new RegExp(`/assets/dog-3840w(-[a-zA-Z0-9-_]+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="responsive"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      for (const size of sizes) {
+        assert
+          .dom(`source[type="image/${type}"]`, picture)
+          .hasAttribute(
+            'srcset',
+            new RegExp(
+              `/assets/dog-${size}w(-[a-zA-Z0-9-_]+)?.${ext} ${size}w`,
+            ),
+            `has ${type} with a width of ${size}`,
+          );
+      }
+    }
+  });
+
+  test('fixed layout', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed"]')
+      .hasClass('eri-fixed')
+      .hasAttribute(
+        'src',
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  module('LQIP', function () {
+    test('color', async function (assert) {
+      await visit('/');
+
+      assert
+        .dom('[data-test-local-image="fixed,lqip-color"]')
+        .hasClass('eri-fixed')
+        // .hasClass('eri-lqip-color')
+        .hasAttribute(
+          'src',
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.jpg`),
+          `has default src`,
+        );
+
+      const picture = this.element.querySelector(
+        '[data-test-local-image="fixed,lqip-color"]',
+      ).parentNode;
+
+      for (const [type, ext] of imageTypes) {
+        assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+          'srcset',
+          // 640px is the smallest size for our defaults
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+          `has ${type} with a width of 1x`,
+        );
+
+        assert
+          .dom(`source[type="image/${type}"]`, picture)
+          .hasAttribute(
+            'srcset',
+            new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+            `has ${type} with a width of 1x`,
+          );
+      }
+    });
+  });
+
+  test('color', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-color"]')
+      .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-color')
+      // .hasClass('eri-dyn-0')
+      .hasAttribute(
+        'src',
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-color"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  test('inline', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-inline"]')
+      .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-inline')
+      // .hasClass('eri-dyn-1')
+      .hasAttribute(
+        'src',
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-inline"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  test('blurhash', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-blurhash"]')
+      // .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-blurhash')
+      .hasAttribute(
+        'src',
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-blurhash"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/assets/dog-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+});
diff --git a/apps/ember-webpack/app/controllers/index.ts b/apps/ember-webpack/app/controllers/index.ts
index b3dafaf63..abd688e80 100644
--- a/apps/ember-webpack/app/controllers/index.ts
+++ b/apps/ember-webpack/app/controllers/index.ts
@@ -10,5 +10,3 @@ export default class IndexController extends Controller {
   dogImageLqipInline = dogImageLqipInline;
   dogImageLqipBlurhash = dogImageLqipBlurhash;
 }
-
-export const raw = true;
diff --git a/apps/ember-webpack/app/templates/index.hbs b/apps/ember-webpack/app/templates/index.hbs
index d75c3c45f..272722758 100644
--- a/apps/ember-webpack/app/templates/index.hbs
+++ b/apps/ember-webpack/app/templates/index.hbs
@@ -3,40 +3,37 @@
 <h2>Cloudinary</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
-    transformations=(hash e="grayscale")
-  }}
-/>
-<ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "samples/animals/three-dogs"
-    transformations=(hash e="grayscale")
-  }}
-/>
-
-<ResponsiveImage
-  @src={{responsive-image-cloudinary-provider
-    "samples/animals/three-dogs"
-    formats=(array "webp" "avif")
-  }}
-  @width={{160}}
+  @src={{responsive-image-cloudinary-provider "samples/animals/three-dogs"}}
+  data-test-cloudinary-image
 />
 
 <h2>imgix</h2>
 
 <ResponsiveImage
-  @src={{responsive-image-imgix-provider
-    "pages/approach/agile_2000x1200.jpg"
-    params=(hash monochrome="44768B")
-  }}
-  @width={{320}}
+  @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg"}}
+  data-test-imgix-image
 />
 
 <h2>Local</h2>
 
-<ResponsiveImage @src={{this.dogImage}} />
-<ResponsiveImage @src={{this.dogImage}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipColor}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipInline}} @width={{320}} />
-<ResponsiveImage @src={{this.dogImageLqipBlurhash}} @width={{320}} />
\ No newline at end of file
+<ResponsiveImage @src={{this.dogImage}} data-test-local-image="responsive" />
+<ResponsiveImage
+  @src={{this.dogImage}}
+  @width={{320}}
+  data-test-local-image="fixed"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipColor}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-color"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipInline}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-inline"
+/>
+<ResponsiveImage
+  @src={{this.dogImageLqipBlurhash}}
+  @width={{320}}
+  data-test-local-image="fixed,lqip-blurhash"
+/>
\ No newline at end of file
diff --git a/apps/ember-webpack/tests/acceptance/local-images-test.js b/apps/ember-webpack/tests/acceptance/local-images-test.js
new file mode 100644
index 000000000..b22e5820a
--- /dev/null
+++ b/apps/ember-webpack/tests/acceptance/local-images-test.js
@@ -0,0 +1,220 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from '../helpers';
+
+const sizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const imageTypes = [
+  ['jpeg', 'jpg'],
+  ['webp', 'webp'],
+];
+
+module('Acceptance | local images', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('responsive layout', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="responsive"]')
+      .hasClass('eri-responsive')
+      .hasAttribute(
+        'src',
+        new RegExp(`/images/dog-3840w(-\\w+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="responsive"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      for (const size of sizes) {
+        assert
+          .dom(`source[type="image/${type}"]`, picture)
+          .hasAttribute(
+            'srcset',
+            new RegExp(`/images/dog-${size}w(-\\w+)?.${ext} ${size}w`),
+            `has ${type} with a width of ${size}`,
+          );
+      }
+    }
+  });
+
+  test('fixed layout', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed"]')
+      .hasClass('eri-fixed')
+      .hasAttribute(
+        'src',
+        new RegExp(`/images/dog-640w(-\\w+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/images/dog-640w(-\\w+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/images/dog-640w(-\\w+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  module('LQIP', function () {
+    test('color', async function (assert) {
+      await visit('/');
+
+      assert
+        .dom('[data-test-local-image="fixed,lqip-color"]')
+        .hasClass('eri-fixed')
+        // .hasClass('eri-lqip-color')
+        .hasAttribute(
+          'src',
+          new RegExp(`/images/dog-640w(-\\w+)?.jpg`),
+          `has default src`,
+        );
+
+      const picture = this.element.querySelector(
+        '[data-test-local-image="fixed,lqip-color"]',
+      ).parentNode;
+
+      for (const [type, ext] of imageTypes) {
+        assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+          'srcset',
+          // 640px is the smallest size for our defaults
+          new RegExp(`/images/dog-640w(-\\w+)?.${ext} 1x`),
+          `has ${type} with a width of 1x`,
+        );
+
+        assert
+          .dom(`source[type="image/${type}"]`, picture)
+          .hasAttribute(
+            'srcset',
+            new RegExp(`/images/dog-640w(-\\w+)?.${ext} 2x`),
+            `has ${type} with a width of 1x`,
+          );
+      }
+    });
+  });
+
+  test('color', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-color"]')
+      .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-color')
+      // .hasClass('eri-dyn-0')
+      .hasAttribute(
+        'src',
+        new RegExp(`/images/dog-640w(-\\w+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-color"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/images/dog-640w(-\\w+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/images/dog-640w(-\\w+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  test('inline', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-inline"]')
+      .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-inline')
+      // .hasClass('eri-dyn-1')
+      .hasAttribute(
+        'src',
+        new RegExp(`/images/dog-640w(-\\w+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-inline"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/images/dog-640w(-\\w+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/images/dog-640w(-\\w+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+
+  test('blurhash', async function (assert) {
+    await visit('/');
+
+    assert
+      .dom('[data-test-local-image="fixed,lqip-blurhash"]')
+      // .hasClass('eri-fixed')
+      // .hasClass('eri-lqip-blurhash')
+      .hasAttribute(
+        'src',
+        new RegExp(`/images/dog-640w(-\\w+)?.jpg`),
+        `has default src`,
+      );
+
+    const picture = this.element.querySelector(
+      '[data-test-local-image="fixed,lqip-blurhash"]',
+    ).parentNode;
+
+    for (const [type, ext] of imageTypes) {
+      assert.dom(`source[type="image/${type}"]`, picture).hasAttribute(
+        'srcset',
+        // 640px is the smallest size for our defaults
+        new RegExp(`/images/dog-640w(-\\w+)?.${ext} 1x`),
+        `has ${type} with a width of 1x`,
+      );
+
+      assert
+        .dom(`source[type="image/${type}"]`, picture)
+        .hasAttribute(
+          'srcset',
+          new RegExp(`/images/dog-640w(-\\w+)?.${ext} 2x`),
+          `has ${type} with a width of 1x`,
+        );
+    }
+  });
+});

From aa5ce1b9638409c193748bdf96ae714a74aaece6 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sun, 8 Sep 2024 21:32:33 +0200
Subject: [PATCH 3/5] Run only tests for ember-vite test script

---
 apps/ember-vite/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/ember-vite/package.json b/apps/ember-vite/package.json
index 4c36ebb37..3f7b076cc 100644
--- a/apps/ember-vite/package.json
+++ b/apps/ember-vite/package.json
@@ -21,8 +21,7 @@
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "vite",
-    "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
-    "test:ember": "vite build --mode test && ember test --path dist"
+    "test": "vite build --mode test && ember test --path dist"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",

From 18574cf347f4f5fb398d2a082ed247e5d3d98663 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sun, 8 Sep 2024 21:44:29 +0200
Subject: [PATCH 4/5] Fix linting

---
 apps/ember-test-app/.eslintrc.js              |  2 ++
 .../components/responsive-image-test.gts      | 36 +++++++++----------
 ...ponsive-image-cloudinary-provider-test.gts | 16 ++++-----
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/apps/ember-test-app/.eslintrc.js b/apps/ember-test-app/.eslintrc.js
index 01afa5400..f5341b4c9 100644
--- a/apps/ember-test-app/.eslintrc.js
+++ b/apps/ember-test-app/.eslintrc.js
@@ -32,8 +32,10 @@ module.exports = {
       parser: 'ember-eslint-parser',
       plugins: ['ember'],
       extends: [
+        'eslint:recommended',
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
         'plugin:ember/recommended-gts',
       ],
     },
diff --git a/apps/ember-test-app/tests/integration/components/responsive-image-test.gts b/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
index dbb39da13..00a56f4b2 100644
--- a/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
+++ b/apps/ember-test-app/tests/integration/components/responsive-image-test.gts
@@ -432,7 +432,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           });
           const onload = () => setTimeout(resolve, 0);
 
-          await render<TestContext & { onload: () => void }>(
+          await render(
             <template>
               <ResponsiveImage
                 @src={{testImageLqipInline}}
@@ -475,7 +475,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           });
           const onload = () => setTimeout(resolve, 0);
 
-          await render<TestContext & { onload: () => void }>(
+          await render(
             <template>
               <ResponsiveImage
                 @src={{testImageLqipColor}}
@@ -504,7 +504,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           });
           const onload = () => setTimeout(resolve, 0);
 
-          await render<TestContext & { onload: () => void }>(
+          await render(
             <template>
               <ResponsiveImage
                 @src={{testImageLqipBlurhash}}
@@ -549,13 +549,9 @@ module("Integration: Responsive Image Component", function (hooks) {
       },
     };
 
-    interface TestContextWithDefaultProvider extends TestContext {
-      defaultImageData: ImageData;
-    }
-
     module("responsive layout", function () {
       test("it has responsive layout by default", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template><ResponsiveImage @src={{defaultImageData}} /></template>,
         );
 
@@ -568,7 +564,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           ...defaultImageData,
           aspectRatio: 2,
         };
-        await render<TestContextWithDefaultProvider & { imageData: ImageData }>(
+        await render(
           <template><ResponsiveImage @src={{imageData}} /></template>,
         );
 
@@ -588,7 +584,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the sourceset based on deviceWidths", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template><ResponsiveImage @src={{defaultImageData}} /></template>,
         );
 
@@ -621,7 +617,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           availableWidths: [320, 640],
         };
 
-        await render<TestContextWithDefaultProvider & { imageData: ImageData }>(
+        await render(
           <template><ResponsiveImage @src={{imageData}} /></template>,
         );
 
@@ -645,7 +641,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       // Blocked on https://github.com/embroider-build/ember-auto-import/issues/503
       skip("it renders the fallback src next to needed display size", async function (assert) {
         env.physicalWidth = 100;
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template><ResponsiveImage @src={{defaultImageData}} /></template>,
         );
         assert
@@ -654,7 +650,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders a given size as sizes", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage @src={{defaultImageData}} @size={{40}} />
           </template>,
@@ -668,7 +664,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders with given sizes", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage
               @src={{defaultImageData}}
@@ -687,7 +683,7 @@ module("Integration: Responsive Image Component", function (hooks) {
 
     module("fixed layout", function () {
       test("it has fixed layout when width or height is provided", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage @src={{defaultImageData}} @width={{100}} />
           </template>,
@@ -698,7 +694,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders width and height when given", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage
               @src={{defaultImageData}}
@@ -717,7 +713,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           ...defaultImageData,
           aspectRatio: 2,
         };
-        await render<TestContextWithDefaultProvider & { imageData: ImageData }>(
+        await render(
           <template>
             <ResponsiveImage @src={{imageData}} @width={{150}} />
           </template>,
@@ -732,7 +728,7 @@ module("Integration: Responsive Image Component", function (hooks) {
           ...defaultImageData,
           aspectRatio: 2,
         };
-        await render<TestContextWithDefaultProvider & { imageData: ImageData }>(
+        await render(
           <template>
             <ResponsiveImage @src={{imageData}} @height={{100}} />
           </template>,
@@ -743,7 +739,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the correct sourceset with pixel densities", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage @width={{50}} @src={{defaultImageData}} />
           </template>,
@@ -767,7 +763,7 @@ module("Integration: Responsive Image Component", function (hooks) {
       });
 
       test("it renders the fallback src next to needed display size", async function (assert) {
-        await render<TestContextWithDefaultProvider>(
+        await render(
           <template>
             <ResponsiveImage @width={{320}} @src={{defaultImageData}} />
           </template>,
diff --git a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
index ddcd5fa91..8b036cbd0 100644
--- a/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
+++ b/apps/ember-test-app/tests/integration/helpers/responsive-image-cloudinary-provider-test.gts
@@ -15,7 +15,7 @@ module(
       data = argument;
     };
 
-    test("it supports all image types", async function (this: TestContext, assert) {
+    test("it supports all image types", async function (assert) {
       await render(
         <template>
           {{dump
@@ -27,7 +27,7 @@ module(
       assert.deepEqual(data?.imageTypes, ["png", "jpeg", "webp", "avif"]);
     });
 
-    test("it returns correct upload image URLs", async function (this: TestContext, assert) {
+    test("it returns correct upload image URLs", async function (assert) {
       await render(
         <template>
           {{dump
@@ -52,7 +52,7 @@ module(
       );
     });
 
-    test("it returns correct fetch image URLs", async function (this: TestContext, assert) {
+    test("it returns correct fetch image URLs", async function (assert) {
       await render(
         <template>
           {{dump
@@ -79,7 +79,7 @@ module(
       );
     });
 
-    test("it supports custom transformations", async function (this: TestContext, assert) {
+    test("it supports custom transformations", async function (assert) {
       await render(
         <template>
           {{dump
@@ -97,7 +97,7 @@ module(
       );
     });
 
-    test("it supports custom chained transformations", async function (this: TestContext, assert) {
+    test("it supports custom chained transformations", async function (assert) {
       await render(
         <template>
           {{dump
@@ -119,7 +119,7 @@ module(
       );
     });
 
-    test("it supports custom image formats", async function (this: TestContext, assert) {
+    test("it supports custom image formats", async function (assert) {
       await render(
         <template>
           {{dump
@@ -133,7 +133,7 @@ module(
       assert.deepEqual(data?.imageTypes, ["webp", "avif"]);
     });
 
-    test("it supports custom quality setting", async function (this: TestContext, assert) {
+    test("it supports custom quality setting", async function (assert) {
       await render(
         <template>
           {{dump
@@ -150,7 +150,7 @@ module(
       );
     });
 
-    test("it supports remote fetching", async function (this: TestContext, assert) {
+    test("it supports remote fetching", async function (assert) {
       await render(
         <template>
           {{dump

From 3e10ef00ba4de3bbf725da0e65ca4dc4608d9c7a Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Sun, 8 Sep 2024 21:49:54 +0200
Subject: [PATCH 5/5] Fix test to be resilient on browser size

---
 apps/ember-vite/tests/acceptance/local-images-test.js    | 2 +-
 apps/ember-webpack/tests/acceptance/local-images-test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ember-vite/tests/acceptance/local-images-test.js b/apps/ember-vite/tests/acceptance/local-images-test.js
index 88185ef3e..650c1a340 100644
--- a/apps/ember-vite/tests/acceptance/local-images-test.js
+++ b/apps/ember-vite/tests/acceptance/local-images-test.js
@@ -19,7 +19,7 @@ module('Acceptance | local images', function (hooks) {
       .hasClass('eri-responsive')
       .hasAttribute(
         'src',
-        new RegExp(`/assets/dog-3840w(-[a-zA-Z0-9-_]+)?.jpg`),
+        new RegExp(`/assets/dog-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
         `has default src`,
       );
 
diff --git a/apps/ember-webpack/tests/acceptance/local-images-test.js b/apps/ember-webpack/tests/acceptance/local-images-test.js
index b22e5820a..e6f44e9a8 100644
--- a/apps/ember-webpack/tests/acceptance/local-images-test.js
+++ b/apps/ember-webpack/tests/acceptance/local-images-test.js
@@ -19,7 +19,7 @@ module('Acceptance | local images', function (hooks) {
       .hasClass('eri-responsive')
       .hasAttribute(
         'src',
-        new RegExp(`/images/dog-3840w(-\\w+)?.jpg`),
+        new RegExp(`/images/dog-[0-9]+w(-\\w+)?.jpg`),
         `has default src`,
       );