Migrate sketch index_spec to jest

- migrate index_spec
- rename balsamiq_viewer to browser_spec

spec/javascripts/blob/sketch/index_spec.js → spec/frontend/blob/sketch/index_spec.js

-/* eslint-disable no-new, promise/catch-or-return */
 import JSZip from 'jszip';
 import SketchLoader from '~/blob/sketch';
 
-describe('Sketch viewer', () => {
-  const generateZipFileArrayBuffer = (zipFile, resolve, done) => {
-    zipFile.generateAsync({ type: 'arrayBuffer' }).then(content => {
-      resolve(content);
-
-      setTimeout(() => {
-        done();
-      }, 100);
-    });
-  };
+jest.mock('jszip');
 
+describe('Sketch viewer', () => {
   preloadFixtures('static/sketch_viewer.html');
 
   beforeEach(() => {
     loadFixtures('static/sketch_viewer.html');
+    window.URL = {
+      createObjectURL: jest.fn(() => 'http://foo/bar'),
+    };
+  });
+
+  afterEach(() => {
+    window.URL = {};
   });
 
   describe('with error message', () => {
     beforeEach(done => {
-      spyOn(SketchLoader.prototype, 'getZipFile').and.callFake(
+      jest.spyOn(SketchLoader.prototype, 'getZipFile').mockImplementation(
         () =>
           new Promise((resolve, reject) => {
             reject();
-
-            setTimeout(() => {
             done();
-            });
           }),
       );
 
-      new SketchLoader(document.getElementById('js-sketch-viewer'));
+      return new SketchLoader(document.getElementById('js-sketch-viewer'));
     });
 
     it('renders error message', () => {
@@ -43,39 +38,39 @@ describe('Sketch viewer', () => {
       );
     });
 
-    it('removes render the loading icon', () => {
+    it('removes the loading icon', () => {
       expect(document.querySelector('.js-loading-icon')).toBeNull();
     });
   });
 
   describe('success', () => {
     beforeEach(done => {
-      spyOn(SketchLoader.prototype, 'getZipFile').and.callFake(
-        () =>
-          new Promise(resolve => {
-            const zipFile = new JSZip();
-            zipFile
-              .folder('previews')
-              .file(
-                'preview.png',
-                'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=',
-                {
-                  base64: true,
+      const loadAsyncMock = {
+        files: {
+          'previews/preview.png': {
+            async: jest.fn(),
           },
-              );
+        },
+      };
 
-            generateZipFileArrayBuffer(zipFile, resolve, done);
+      loadAsyncMock.files['previews/preview.png'].async.mockImplementation(
+        () =>
+          new Promise(resolve => {
+            resolve('foo');
+            done();
           }),
       );
 
-      new SketchLoader(document.getElementById('js-sketch-viewer'));
+      jest.spyOn(SketchLoader.prototype, 'getZipFile').mockResolvedValue();
+      jest.spyOn(JSZip, 'loadAsync').mockResolvedValue(loadAsyncMock);
+      return new SketchLoader(document.getElementById('js-sketch-viewer'));
     });
 
     it('does not render error message', () => {
       expect(document.querySelector('#js-sketch-viewer p')).toBeNull();
     });
 
-    it('removes render the loading icon', () => {
+    it('removes the loading icon', () => {
       expect(document.querySelector('.js-loading-icon')).toBeNull();
     });
 
@@ -94,27 +89,4 @@ describe('Sketch viewer', () => {
       expect(link.target).toBe('_blank');
     });
   });
-
-  describe('incorrect file', () => {
-    beforeEach(done => {
-      spyOn(SketchLoader.prototype, 'getZipFile').and.callFake(
-        () =>
-          new Promise(resolve => {
-            const zipFile = new JSZip();
-
-            generateZipFileArrayBuffer(zipFile, resolve, done);
-          }),
-      );
-
-      new SketchLoader(document.getElementById('js-sketch-viewer'));
-    });
-
-    it('renders error message', () => {
-      expect(document.querySelector('#js-sketch-viewer p')).not.toBeNull();
-
-      expect(document.querySelector('#js-sketch-viewer p').textContent.trim()).toContain(
-        'Cannot show preview.',
-      );
-    });
-  });
 });

spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js → spec/javascripts/blob/balsamiq/balsamiq_viewer_browser_spec.js

+// this file can't be migrated to jest because it relies on the browser to perform integration tests:
+//  see: https://gitlab.com/gitlab-org/gitlab/-/issues/194207#note_301878738
 import { FIXTURES_PATH } from 'spec/test_constants';
 import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';