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 <sherwin@imgix.com>
imgix · Mar 10, 2022 · 78ce8cf · 78ce8cf
1 parent 500600d
commit 78ce8cf
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 76 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -13,13 +13,16 @@
     <advanced-build-url />
     <h2>buildSrcSet</h2>
     <advanced-build-src-set />
+    <h2>_buildSrcSet</h2>
+    <static-build-src-set />
   </div>
 </template>
 
 <script>
 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
@@ -0,0 +1,27 @@
+<template>
+  <img
+    :src="advancedSrc"
+    :srcset="advancedSrcSet"
+    data-testid="static-build-src-set"
+  />
+</template>
+
+<script>
+import { buildUrl, buildSrcSet } from '@/plugins/vue-imgix';
+
+// NB: Make sure initVueImgix has been called before this code runs
+export default {
+  name: 'static-build-src-set',
+
+  computed: {
+    advancedSrc: () =>
+      buildUrl('https://sdk-test.imgix.net/amsterdam.jpg', {
+        auto: 'format',
+      }),
+    advancedSrcSet: () =>
+      buildSrcSet('https://sdk-test.imgix.net/amsterdam.jpg', {
+        auto: 'format',
+      }),
+  },
+};
+</script>
diff --git 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,21 +78,16 @@ 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 = (
     url: string,
     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
@@ -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
@@ -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
@@ -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',
       {},
     );