diff --git a/addon/helpers/responsive-image-imgix-provider.ts b/addon/helpers/responsive-image-imgix-provider.ts index 6a5afee48..b803bb020 100644 --- a/addon/helpers/responsive-image-imgix-provider.ts +++ b/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); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 576ae8309..7f674e427 100644 --- a/tests/dummy/app/router.js +++ b/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'); }); diff --git a/tests/dummy/app/templates/cloudinary.hbs b/tests/dummy/app/templates/cloudinary.hbs new file mode 100644 index 000000000..f90bbb451 --- /dev/null +++ b/tests/dummy/app/templates/cloudinary.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tests/dummy/app/templates/imgix.hbs b/tests/dummy/app/templates/imgix.hbs new file mode 100644 index 000000000..e1a369faa --- /dev/null +++ b/tests/dummy/app/templates/imgix.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tests/fastboot/cloudinary-test.js b/tests/fastboot/cloudinary-test.js new file mode 100644 index 000000000..2af3e3d8e --- /dev/null +++ b/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/')); + }); +}); diff --git a/tests/fastboot/imgix-test.js b/tests/fastboot/imgix-test.js new file mode 100644 index 000000000..2c342653a --- /dev/null +++ b/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/')); + }); +});