Merge pull request #330 from kaliber5/fix-fastboot-imgix

Fix broken FastBoot rendering of imgix provider

Author: simonihmig

addon/helpers/responsive-image-imgix-provider.ts

@@ -30,7 +30,14 @@ export const provider = (
   return {
     imageTypes: options.formats ?? ['png', 'jpeg', 'webp'],
     imageUrlFor(width: number, type: ImageType = 'jpeg'): string {
-      const url = new URL(`https://${domain}/${normalizeSrc(image)}`);
+      // In the FastBoot sandbox, the URL global is shadowed by the `url` module. :-(
+      // See https://github.com/ember-fastboot/ember-cli-fastboot/issues/816
+      const URLConstructor: typeof URL =
+        typeof URL === 'function' ? URL : (URL as { URL: typeof URL }).URL;
+
+      const url = new URLConstructor(
+        `https://${domain}/${normalizeSrc(image)}`
+      );
       const params = url.searchParams;
 
       params.set('fm', formatMap[type] ?? type);

tests/dummy/app/router.js

@@ -8,4 +8,6 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('image');
+  this.route('cloudinary');
+  this.route('imgix');
 });

tests/dummy/app/templates/cloudinary.hbs

@@ -0,0 +1 @@
+<ResponsiveImage @src={{responsive-image-cloudinary-provider "samples/animals/three-dogs"}} data-test-image/>

tests/dummy/app/templates/imgix.hbs

@@ -0,0 +1 @@
+<ResponsiveImage @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg"}} data-test-image/>

tests/fastboot/cloudinary-test.js

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import {
+  setup,
+  visit /* mockServer */,
+} from 'ember-cli-fastboot-testing/test-support';
+
+module('FastBoot | Cloudinary', function (hooks) {
+  setup(hooks);
+
+  test('it renders an image', async function (assert) {
+    await visit('/cloudinary');
+
+    assert.dom('img[data-test-image]').exists();
+    assert
+      .dom('img[data-test-image]')
+      .hasAttribute('src', new RegExp('https://res.cloudinary.com/kaliber5/'));
+  });
+});

tests/fastboot/imgix-test.js

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import {
+  setup,
+  visit /* mockServer */,
+} from 'ember-cli-fastboot-testing/test-support';
+
+module('FastBoot | Imgix', function (hooks) {
+  setup(hooks);
+
+  test('it renders an image', async function (assert) {
+    await visit('/imgix');
+
+    assert.dom('img[data-test-image]').exists();
+    assert
+      .dom('img[data-test-image]')
+      .hasAttribute('src', new RegExp('https://kaliber5.imgix.net/'));
+  });
+});