From 78ce8cf886b852065523fe36b7d8acfa07fc9a0f Mon Sep 17 00:00:00 2001 From: Luis Ball Date: Wed, 9 Mar 2022 15:13:07 -0800 Subject: [PATCH] test(_buildSrcSet): add e2e test and remove skipped mocks This commit adds an e2e test for buildSrcSet advanced ussage that ensures absolute URLs are parsed correctly for srcset generation. It also removed skipped mocked tests for the static method. Co-authored-by: Sherwin Heydarbeygi --- src/App.vue | 4 ++ src/components/advanced/_buildSrcSet.vue | 27 ++++++++++ src/plugins/vue-imgix/vue-imgix.ts | 11 ++-- tests/e2e/specs/static-api.spec.js | 22 ++++++-- tests/unit/build-src-set.spec.ts | 66 ++---------------------- tests/unit/build-url.spec.ts | 6 +-- 6 files changed, 60 insertions(+), 76 deletions(-) create mode 100644 src/components/advanced/_buildSrcSet.vue diff --git a/src/App.vue b/src/App.vue index 44ca56c7..1220929d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,6 +13,8 @@

buildSrcSet

+

_buildSrcSet

+ @@ -20,6 +22,7 @@ import advancedBuildUrlObject from './components/advanced/buildUrlObject'; import advancedBuildUrl from './components/advanced/buildUrl'; import advancedBuildSrcSet from './components/advanced/buildSrcSet'; +import staticBuildSrcSet from './components/advanced/_buildSrcSet'; import advancedApi from './components/advanced/advanced'; import simple from './components/simple/simple'; import staticApi from './components/simple/static-api'; @@ -31,6 +34,7 @@ export default { advancedBuildUrlObject, advancedBuildUrl, advancedBuildSrcSet, + staticBuildSrcSet, advancedApi, simple, staticApi, diff --git a/src/components/advanced/_buildSrcSet.vue b/src/components/advanced/_buildSrcSet.vue new file mode 100644 index 00000000..4d193284 --- /dev/null +++ b/src/components/advanced/_buildSrcSet.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/plugins/vue-imgix/vue-imgix.ts b/src/plugins/vue-imgix/vue-imgix.ts index b926daeb..c006761f 100644 --- a/src/plugins/vue-imgix/vue-imgix.ts +++ b/src/plugins/vue-imgix/vue-imgix.ts @@ -9,7 +9,7 @@ import { IBuildUrlObjectOptions, IBuildUrlObjectResult, IImgixClientOptions, - IImgixParams + IImgixParams, } from './types'; // Do not change this @@ -78,9 +78,8 @@ class VueImgixClient implements IVueImgixClient { if (!url.includes('://')) { return this.client.buildURL(url, this.buildIxParams(ixParams)); } else { - return ImgixClient._buildURL(url, this.buildIxParams(ixParams) ); + return ImgixClient._buildURL(url, this.buildIxParams(ixParams)); } - }; buildSrcSet = ( @@ -88,11 +87,7 @@ class VueImgixClient implements IVueImgixClient { ixParams?: IImgixParams, options?: IBuildSrcSetOptions, ): string => { - return this.client.buildSrcSet( - url, - this.buildIxParams(ixParams), - options, - ); + return this.client.buildSrcSet(url, this.buildIxParams(ixParams), options); }; _buildSrcSet = ( diff --git a/tests/e2e/specs/static-api.spec.js b/tests/e2e/specs/static-api.spec.js index e769b956..392324c0 100644 --- a/tests/e2e/specs/static-api.spec.js +++ b/tests/e2e/specs/static-api.spec.js @@ -5,13 +5,27 @@ describe('Static API', () => { expect($image.attr('src')).to.match(/assets.imgix.net/); expect($image.attr('srcset')).to.match(/assets.imgix.net/); }); - }) + }); it('should render image with an absolute URL', () => { cy.visit('/'); cy.findByTestId('static-api-absolute').should(($image) => { - expect($image.attr('src')).to.match(/https:\/\/sdk-test.imgix.net\/amsterdam.jpg/, + expect($image.attr('src')).to.match( + /https:\/\/sdk-test.imgix.net\/amsterdam.jpg/, + ); + expect($image.attr('srcset')).to.match( + /https:\/\/sdk-test.imgix.net\/amsterdam.jpg/, + ); + }); + }); + it('advanced buildSrcSet should accept absolute URLs', () => { + cy.visit('/'); + cy.findByTestId('static-build-src-set').should(($image) => { + expect($image.attr('src')).to.match( + /https:\/\/sdk-test.imgix.net\/amsterdam.jpg/, + ); + expect($image.attr('srcset')).to.match( + /https:\/\/sdk-test.imgix.net\/amsterdam.jpg/, ); - expect($image.attr('srcset')).to.match(/sdk-test.imgix.net\/amsterdam.jpg/); }); - }) + }); }); diff --git a/tests/unit/build-src-set.spec.ts b/tests/unit/build-src-set.spec.ts index d77e9094..179a8624 100644 --- a/tests/unit/build-src-set.spec.ts +++ b/tests/unit/build-src-set.spec.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import { buildImgixClient, - IVueImgixClient + IVueImgixClient, } from '@/plugins/vue-imgix/vue-imgix'; describe('buildSrcSet', () => { @@ -89,70 +89,14 @@ describe('_buildSrcSet', () => { }); it('builds an srcset list', () => { - const url = client._buildSrcSet('https://sdk-test.imgix.net/amsterdam.jpg', {}); + const url = client._buildSrcSet( + 'https://sdk-test.imgix.net/amsterdam.jpg', + {}, + ); const firstSrcSet = url.split(',')[0].split(' '); expect(firstSrcSet[0]).toMatch(/sdk-test.imgix.net\/amsterdam.jpg/); expect(firstSrcSet[0]).toMatch(/w=[0-9]/); expect(firstSrcSet[1]).toMatch(/^[0-9]+w$/); }); - - // TODO: fix these tests - describe.skip('srcset generation', () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - let mockImgixClient: any; - let vueImgixClient: IVueImgixClient; - beforeEach(() => { - jest.resetModules(); - jest.mock('@imgix/js-core'); - const { buildImgixClient } = require('@/plugins/vue-imgix/'); - const ImgixClient = require('@imgix/js-core'); - mockImgixClient = { - settings: {}, - _buildSrcSet: jest.fn(), - _buildURL: jest.fn(), - }; - ImgixClient.mockImplementation(() => mockImgixClient); - vueImgixClient = buildImgixClient({ - domain: 'testing.imgix.net', - }); - }); - afterAll(() => { - jest.resetAllMocks(); - jest.resetModules(); - }); - it('custom widths are passed to @imgix/js-core', () => { - vueImgixClient._buildSrcSet('https://sdk-test.imgix.net/amsterdam.jpg', {}, { widths: [100, 200] }); - - expect(mockImgixClient._buildSrcSet).toHaveBeenCalledWith( - expect.anything(), - expect.anything(), - expect.objectContaining({ - widths: [100, 200], - }), - ); - }); - it('a custom width tolerance is passed to @imgix/js-core', () => { - vueImgixClient._buildSrcSet('https://sdk-test.imgix.net/amsterdam.jpg', {}, { widthTolerance: 0.2 }); - - expect(mockImgixClient._buildSrcSet).toHaveBeenCalledWith( - expect.anything(), - expect.anything(), - expect.objectContaining({ widthTolerance: 0.2 }), - ); - }); - it('custom min/max widths are passed to @imgix/js-core', () => { - vueImgixClient._buildSrcSet( - 'https://sdk-test.imgix.net/amsterdam.jpg', - {}, - { minWidth: 500, maxWidth: 2000 }, - ); - - expect(mockImgixClient._buildSrcSet).toHaveBeenCalledWith( - expect.anything(), - expect.anything(), - expect.objectContaining({ minWidth: 500, maxWidth: 2000 }), - ); - }); - }); }); diff --git a/tests/unit/build-url.spec.ts b/tests/unit/build-url.spec.ts index 852e56a5..80037f66 100644 --- a/tests/unit/build-url.spec.ts +++ b/tests/unit/build-url.spec.ts @@ -1,6 +1,6 @@ import { - buildImgixClient, - IVueImgixClient + buildImgixClient, + IVueImgixClient, } from '@/plugins/vue-imgix/vue-imgix'; describe('buildUrl', () => { @@ -17,7 +17,7 @@ describe('buildUrl', () => { }); it('should accept absolute URLs', () => { - let customUrl = client._buildUrl( + const customUrl = client._buildUrl( 'https://sdk-test.imgix.net/amsterdam.jpg', {}, );