Merge remote-tracking branch 'upstream/master' into 27377-preload-pipeline-entity27377-preload-pipeline-entity

* upstream/master: (2534 commits)
  Update VERSION to 9.3.0-pre
  Update CHANGELOG.md for 9.2.0
  removes unnecessary redundacy in usage ping doc
  Respect the typo as rubocop said
  Add a test to ensure this works on MySQL
  Change pipelines schedules help page path
  change domain to hostname in usage ping doc
  Fixes broken MySQL migration for retried
  Show password field mask while editing service settings
  Add notes for supported schedulers and cloud providers
  Move environment monitoring to environments doc
  Add docs for change of Cache/Artifact restore order"
  Avoid resource intensive login checks if password is not provided
  Change translation for 'coding' by 'desarrollo' for Spanish
  Add to docs: issues multiple assignees
  rename "Add emoji" and "Award emoji" to "Add reaction" where appropriate
  Add project and group notification settings info
  32570 Fix border-bottom for project activity tab
  Add users endpoint to frontend API class
  Rename users on mysql
  ...

9 files changed, 849 insertions, 10 deletions

diff --git a/spec/javascripts/blob/3d_viewer/mesh_object_spec.js b/spec/javascripts/blob/3d_viewer/mesh_object_spec.js
new file mode 100644
index 00000000000..d1ebae33dab
--- /dev/null
+++ b/spec/javascripts/blob/3d_viewer/mesh_object_spec.js
@@ -0,0 +1,42 @@
+import {
+  BoxGeometry,
+} from 'three/build/three.module';
+import MeshObject from '~/blob/3d_viewer/mesh_object';
+
+describe('Mesh object', () => {
+  it('defaults to non-wireframe material', () => {
+    const object = new MeshObject(
+      new BoxGeometry(10, 10, 10),
+    );
+
+    expect(object.material.wireframe).toBeFalsy();
+  });
+
+  it('changes to wirefame material', () => {
+    const object = new MeshObject(
+      new BoxGeometry(10, 10, 10),
+    );
+
+    object.changeMaterial('wireframe');
+
+    expect(object.material.wireframe).toBeTruthy();
+  });
+
+  it('scales object down', () => {
+    const object = new MeshObject(
+      new BoxGeometry(10, 10, 10),
+    );
+    const radius = object.geometry.boundingSphere.radius;
+
+    expect(radius).not.toBeGreaterThan(4);
+  });
+
+  it('does not scale object down', () => {
+    const object = new MeshObject(
+      new BoxGeometry(1, 1, 1),
+    );
+    const radius = object.geometry.boundingSphere.radius;
+
+    expect(radius).toBeLessThan(1);
+  });
+});
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js
new file mode 100644
index 00000000000..acd0aaf2a86
--- /dev/null
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_integration_spec.js
@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+
+import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';
+import bmprPath from '../../fixtures/blob/balsamiq/test.bmpr';
+
+describe('Balsamiq integration spec', () => {
+  let container;
+  let endpoint;
+  let balsamiqViewer;
+
+  preloadFixtures('static/balsamiq_viewer.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/balsamiq_viewer.html.raw');
+
+    container = document.getElementById('js-balsamiq-viewer');
+    balsamiqViewer = new BalsamiqViewer(container);
+  });
+
+  describe('successful response', () => {
+    beforeEach((done) => {
+      endpoint = bmprPath;
+
+      balsamiqViewer.loadFile(endpoint).then(done).catch(done.fail);
+    });
+
+    it('does not show loading icon', () => {
+      expect(document.querySelector('.loading')).toBeNull();
+    });
+
+    it('renders the balsamiq previews', () => {
+      expect(document.querySelectorAll('.previews .preview').length).not.toEqual(0);
+    });
+  });
+
+  describe('error getting file', () => {
+    beforeEach((done) => {
+      endpoint = 'invalid/path/to/file.bmpr';
+
+      balsamiqViewer.loadFile(endpoint).then(done.fail, null).catch(done);
+    });
+
+    it('does not show loading icon', () => {
+      expect(document.querySelector('.loading')).toBeNull();
+    });
+
+    it('does not render the balsamiq previews', () => {
+      expect(document.querySelectorAll('.previews .preview').length).toEqual(0);
+    });
+  });
+});
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
new file mode 100644
index 00000000000..aa87956109f
--- /dev/null
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
@@ -0,0 +1,326 @@
+import sqljs from 'sql.js';
+import BalsamiqViewer from '~/blob/balsamiq/balsamiq_viewer';
+import ClassSpecHelper from '../../helpers/class_spec_helper';
+
+describe('BalsamiqViewer', () => {
+  let balsamiqViewer;
+  let viewer;
+
+  describe('class constructor', () => {
+    beforeEach(() => {
+      viewer = {};
+
+      balsamiqViewer = new BalsamiqViewer(viewer);
+    });
+
+    it('should set .viewer', () => {
+      expect(balsamiqViewer.viewer).toBe(viewer);
+    });
+  });
+
+  describe('fileLoaded', () => {
+
+  });
+
+  describe('loadFile', () => {
+    let xhr;
+    let loadFile;
+    const endpoint = 'endpoint';
+
+    beforeEach(() => {
+      xhr = jasmine.createSpyObj('xhr', ['open', 'send']);
+
+      balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderFile']);
+
+      spyOn(window, 'XMLHttpRequest').and.returnValue(xhr);
+
+      loadFile = BalsamiqViewer.prototype.loadFile.call(balsamiqViewer, endpoint);
+    });
+
+    it('should call .open', () => {
+      expect(xhr.open).toHaveBeenCalledWith('GET', endpoint, true);
+    });
+
+    it('should set .responseType', () => {
+      expect(xhr.responseType).toBe('arraybuffer');
+    });
+
+    it('should call .send', () => {
+      expect(xhr.send).toHaveBeenCalled();
+    });
+
+    it('should return a promise', () => {
+      expect(loadFile).toEqual(jasmine.any(Promise));
+    });
+  });
+
+  describe('renderFile', () => {
+    let container;
+    let loadEvent;
+    let previews;
+
+    beforeEach(() => {
+      loadEvent = { target: { response: {} } };
+      viewer = jasmine.createSpyObj('viewer', ['appendChild']);
+      previews = [document.createElement('ul'), document.createElement('ul')];
+
+      balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['initDatabase', 'getPreviews', 'renderPreview']);
+      balsamiqViewer.viewer = viewer;
+
+      balsamiqViewer.getPreviews.and.returnValue(previews);
+      balsamiqViewer.renderPreview.and.callFake(preview => preview);
+      viewer.appendChild.and.callFake((containerElement) => {
+        container = containerElement;
+      });
+
+      BalsamiqViewer.prototype.renderFile.call(balsamiqViewer, loadEvent);
+    });
+
+    it('should call .initDatabase', () => {
+      expect(balsamiqViewer.initDatabase).toHaveBeenCalledWith(loadEvent.target.response);
+    });
+
+    it('should call .getPreviews', () => {
+      expect(balsamiqViewer.getPreviews).toHaveBeenCalled();
+    });
+
+    it('should call .renderPreview for each preview', () => {
+      const allArgs = balsamiqViewer.renderPreview.calls.allArgs();
+
+      expect(allArgs.length).toBe(2);
+
+      previews.forEach((preview, i) => {
+        expect(allArgs[i][0]).toBe(preview);
+      });
+    });
+
+    it('should set the container HTML', () => {
+      expect(container.innerHTML).toBe('<ul></ul><ul></ul>');
+    });
+
+    it('should add inline preview classes', () => {
+      expect(container.classList[0]).toBe('list-inline');
+      expect(container.classList[1]).toBe('previews');
+    });
+
+    it('should call viewer.appendChild', () => {
+      expect(viewer.appendChild).toHaveBeenCalledWith(container);
+    });
+  });
+
+  describe('initDatabase', () => {
+    let database;
+    let uint8Array;
+    let data;
+
+    beforeEach(() => {
+      uint8Array = {};
+      database = {};
+      data = 'data';
+
+      balsamiqViewer = {};
+
+      spyOn(window, 'Uint8Array').and.returnValue(uint8Array);
+      spyOn(sqljs, 'Database').and.returnValue(database);
+
+      BalsamiqViewer.prototype.initDatabase.call(balsamiqViewer, data);
+    });
+
+    it('should instantiate Uint8Array', () => {
+      expect(window.Uint8Array).toHaveBeenCalledWith(data);
+    });
+
+    it('should call sqljs.Database', () => {
+      expect(sqljs.Database).toHaveBeenCalledWith(uint8Array);
+    });
+
+    it('should set .database', () => {
+      expect(balsamiqViewer.database).toBe(database);
+    });
+  });
+
+  describe('getPreviews', () => {
+    let database;
+    let thumbnails;
+    let getPreviews;
+
+    beforeEach(() => {
+      database = jasmine.createSpyObj('database', ['exec']);
+      thumbnails = [{ values: [0, 1, 2] }];
+
+      balsamiqViewer = {
+        database,
+      };
+
+      spyOn(BalsamiqViewer, 'parsePreview').and.callFake(preview => preview.toString());
+      database.exec.and.returnValue(thumbnails);
+
+      getPreviews = BalsamiqViewer.prototype.getPreviews.call(balsamiqViewer);
+    });
+
+    it('should call database.exec', () => {
+      expect(database.exec).toHaveBeenCalledWith('SELECT * FROM thumbnails');
+    });
+
+    it('should call .parsePreview for each value', () => {
+      const allArgs = BalsamiqViewer.parsePreview.calls.allArgs();
+
+      expect(allArgs.length).toBe(3);
+
+      thumbnails[0].values.forEach((value, i) => {
+        expect(allArgs[i][0]).toBe(value);
+      });
+    });
+
+    it('should return an array of parsed values', () => {
+      expect(getPreviews).toEqual(['0', '1', '2']);
+    });
+  });
+
+  describe('getResource', () => {
+    let database;
+    let resourceID;
+    let resource;
+    let getResource;
+
+    beforeEach(() => {
+      database = jasmine.createSpyObj('database', ['exec']);
+      resourceID = 4;
+      resource = ['resource'];
+
+      balsamiqViewer = {
+        database,
+      };
+
+      database.exec.and.returnValue(resource);
+
+      getResource = BalsamiqViewer.prototype.getResource.call(balsamiqViewer, resourceID);
+    });
+
+    it('should call database.exec', () => {
+      expect(database.exec).toHaveBeenCalledWith(`SELECT * FROM resources WHERE id = '${resourceID}'`);
+    });
+
+    it('should return the selected resource', () => {
+      expect(getResource).toBe(resource[0]);
+    });
+  });
+
+  describe('renderPreview', () => {
+    let previewElement;
+    let innerHTML;
+    let preview;
+    let renderPreview;
+
+    beforeEach(() => {
+      innerHTML = '<a>innerHTML</a>';
+      previewElement = {
+        outerHTML: '<p>outerHTML</p>',
+        classList: jasmine.createSpyObj('classList', ['add']),
+      };
+      preview = {};
+
+      balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['renderTemplate']);
+
+      spyOn(document, 'createElement').and.returnValue(previewElement);
+      balsamiqViewer.renderTemplate.and.returnValue(innerHTML);
+
+      renderPreview = BalsamiqViewer.prototype.renderPreview.call(balsamiqViewer, preview);
+    });
+
+    it('should call classList.add', () => {
+      expect(previewElement.classList.add).toHaveBeenCalledWith('preview');
+    });
+
+    it('should call .renderTemplate', () => {
+      expect(balsamiqViewer.renderTemplate).toHaveBeenCalledWith(preview);
+    });
+
+    it('should set .innerHTML', () => {
+      expect(previewElement.innerHTML).toBe(innerHTML);
+    });
+
+    it('should return element', () => {
+      expect(renderPreview).toBe(previewElement);
+    });
+  });
+
+  describe('renderTemplate', () => {
+    let preview;
+    let name;
+    let resource;
+    let template;
+    let renderTemplate;
+
+    beforeEach(() => {
+      preview = { resourceID: 1, image: 'image' };
+      name = 'name';
+      resource = 'resource';
+      template = `
+        <div class="panel panel-default">
+          <div class="panel-heading">name</div>
+          <div class="panel-body">
+            <img class="img-thumbnail" src="data:image/png;base64,image"/>
+          </div>
+        </div>
+      `;
+
+      balsamiqViewer = jasmine.createSpyObj('balsamiqViewer', ['getResource']);
+
+      spyOn(BalsamiqViewer, 'parseTitle').and.returnValue(name);
+      balsamiqViewer.getResource.and.returnValue(resource);
+
+      renderTemplate = BalsamiqViewer.prototype.renderTemplate.call(balsamiqViewer, preview);
+    });
+
+    it('should call .getResource', () => {
+      expect(balsamiqViewer.getResource).toHaveBeenCalledWith(preview.resourceID);
+    });
+
+    it('should call .parseTitle', () => {
+      expect(BalsamiqViewer.parseTitle).toHaveBeenCalledWith(resource);
+    });
+
+    it('should return the template string', function () {
+      expect(renderTemplate.replace(/\s/g, '')).toEqual(template.replace(/\s/g, ''));
+    });
+  });
+
+  describe('parsePreview', () => {
+    let preview;
+    let parsePreview;
+
+    beforeEach(() => {
+      preview = ['{}', '{ "id": 1 }'];
+
+      spyOn(JSON, 'parse').and.callThrough();
+
+      parsePreview = BalsamiqViewer.parsePreview(preview);
+    });
+
+    ClassSpecHelper.itShouldBeAStaticMethod(BalsamiqViewer, 'parsePreview');
+
+    it('should return the parsed JSON', () => {
+      expect(parsePreview).toEqual(JSON.parse('{ "id": 1 }'));
+    });
+  });
+
+  describe('parseTitle', () => {
+    let title;
+    let parseTitle;
+
+    beforeEach(() => {
+      title = { values: [['{}', '{}', '{"name":"name"}']] };
+
+      spyOn(JSON, 'parse').and.callThrough();
+
+      parseTitle = BalsamiqViewer.parseTitle(title);
+    });
+
+    ClassSpecHelper.itShouldBeAStaticMethod(BalsamiqViewer, 'parsePreview');
+
+    it('should return the name value', () => {
+      expect(parseTitle).toBe('name');
+    });
+  });
+});
diff --git a/spec/javascripts/blob/blob_fork_suggestion_spec.js b/spec/javascripts/blob/blob_fork_suggestion_spec.js
new file mode 100644
index 00000000000..d1ab0a32f85
--- /dev/null
+++ b/spec/javascripts/blob/blob_fork_suggestion_spec.js
@@ -0,0 +1,38 @@
+import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
+
+describe('BlobForkSuggestion', () => {
+  let blobForkSuggestion;
+
+  const openButton = document.createElement('div');
+  const forkButton = document.createElement('a');
+  const cancelButton = document.createElement('div');
+  const suggestionSection = document.createElement('div');
+  const actionTextPiece = document.createElement('div');
+
+  beforeEach(() => {
+    blobForkSuggestion = new BlobForkSuggestion({
+      openButtons: openButton,
+      forkButtons: forkButton,
+      cancelButtons: cancelButton,
+      suggestionSections: suggestionSection,
+      actionTextPieces: actionTextPiece,
+    })
+      .init();
+  });
+
+  afterEach(() => {
+    blobForkSuggestion.destroy();
+  });
+
+  it('showSuggestionSection', () => {
+    blobForkSuggestion.showSuggestionSection('/foo', 'foo');
+    expect(suggestionSection.classList.contains('hidden')).toEqual(false);
+    expect(forkButton.getAttribute('href')).toEqual('/foo');
+    expect(actionTextPiece.textContent).toEqual('foo');
+  });
+
+  it('hideSuggestionSection', () => {
+    blobForkSuggestion.hideSuggestionSection();
+    expect(suggestionSection.classList.contains('hidden')).toEqual(true);
+  });
+});
diff --git a/spec/javascripts/blob/create_branch_dropdown_spec.js b/spec/javascripts/blob/create_branch_dropdown_spec.js
index c1179e572ae..6dbaa47c544 100644
--- a/spec/javascripts/blob/create_branch_dropdown_spec.js
+++ b/spec/javascripts/blob/create_branch_dropdown_spec.js
@@ -1,7 +1,6 @@
-require('~/gl_dropdown');
-require('~/lib/utils/type_utility');
-require('~/blob/create_branch_dropdown');
-require('~/blob/target_branch_dropdown');
+import '~/gl_dropdown';
+import '~/blob/create_branch_dropdown';
+import '~/blob/target_branch_dropdown';
 
 describe('CreateBranchDropdown', () => {
   const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
diff --git a/spec/javascripts/blob/pdf/index_spec.js b/spec/javascripts/blob/pdf/index_spec.js
new file mode 100644
index 00000000000..bbeaf95e68d
--- /dev/null
+++ b/spec/javascripts/blob/pdf/index_spec.js
@@ -0,0 +1,82 @@
+/* eslint-disable import/no-unresolved */
+
+import renderPDF from '~/blob/pdf';
+import testPDF from '../../fixtures/blob/pdf/test.pdf';
+
+describe('PDF renderer', () => {
+  let viewer;
+  let app;
+
+  const checkLoaded = (done) => {
+    if (app.loading) {
+      setTimeout(() => {
+        checkLoaded(done);
+      }, 100);
+    } else {
+      done();
+    }
+  };
+
+  preloadFixtures('static/pdf_viewer.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/pdf_viewer.html.raw');
+    viewer = document.getElementById('js-pdf-viewer');
+    viewer.dataset.endpoint = testPDF;
+  });
+
+  it('shows loading icon', () => {
+    renderPDF();
+
+    expect(
+      document.querySelector('.loading'),
+    ).not.toBeNull();
+  });
+
+  describe('successful response', () => {
+    beforeEach((done) => {
+      app = renderPDF();
+
+      checkLoaded(done);
+    });
+
+    it('does not show loading icon', () => {
+      expect(
+        document.querySelector('.loading'),
+      ).toBeNull();
+    });
+
+    it('renders the PDF', () => {
+      expect(
+        document.querySelector('.pdf-viewer'),
+      ).not.toBeNull();
+    });
+
+    it('renders the PDF page', () => {
+      expect(
+        document.querySelector('.pdf-page'),
+      ).not.toBeNull();
+    });
+  });
+
+  describe('error getting file', () => {
+    beforeEach((done) => {
+      viewer.dataset.endpoint = 'invalid/path/to/file.pdf';
+      app = renderPDF();
+
+      checkLoaded(done);
+    });
+
+    it('does not show loading icon', () => {
+      expect(
+        document.querySelector('.loading'),
+      ).toBeNull();
+    });
+
+    it('shows error message', () => {
+      expect(
+        document.querySelector('.md').textContent.trim(),
+      ).toBe('An error occured whilst loading the file. Please try again later.');
+    });
+  });
+});
diff --git a/spec/javascripts/blob/sketch/index_spec.js b/spec/javascripts/blob/sketch/index_spec.js
new file mode 100644
index 00000000000..79f40559817
--- /dev/null
+++ b/spec/javascripts/blob/sketch/index_spec.js
@@ -0,0 +1,118 @@
+/* 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);
+      });
+  };
+
+  preloadFixtures('static/sketch_viewer.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/sketch_viewer.html.raw');
+  });
+
+  describe('with error message', () => {
+    beforeEach((done) => {
+      spyOn(SketchLoader.prototype, 'getZipFile').and.callFake(() => new Promise((resolve, reject) => {
+        reject();
+
+        setTimeout(() => {
+          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.');
+    });
+
+    it('removes render 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,
+          });
+
+        generateZipFileArrayBuffer(zipFile, resolve, done);
+      }));
+
+      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', () => {
+      expect(
+        document.querySelector('.js-loading-icon'),
+      ).toBeNull();
+    });
+
+    it('renders preview img', () => {
+      const img = document.querySelector('#js-sketch-viewer img');
+
+      expect(img).not.toBeNull();
+      expect(img.classList.contains('img-responsive')).toBeTruthy();
+    });
+
+    it('renders link to image', () => {
+      const img = document.querySelector('#js-sketch-viewer img');
+      const link = document.querySelector('#js-sketch-viewer a');
+
+      expect(link.href).toBe(img.src);
+      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.');
+    });
+  });
+});
diff --git a/spec/javascripts/blob/target_branch_dropdown_spec.js b/spec/javascripts/blob/target_branch_dropdown_spec.js
index 4fb79663c51..99c9537d2ec 100644
--- a/spec/javascripts/blob/target_branch_dropdown_spec.js
+++ b/spec/javascripts/blob/target_branch_dropdown_spec.js
@@ -1,7 +1,6 @@
-require('~/gl_dropdown');
-require('~/lib/utils/type_utility');
-require('~/blob/create_branch_dropdown');
-require('~/blob/target_branch_dropdown');
+import '~/gl_dropdown';
+import '~/blob/create_branch_dropdown';
+import '~/blob/target_branch_dropdown';
 
 describe('TargetBranchDropdown', () => {
   const fixtureTemplate = 'static/target_branch_dropdown.html.raw';
@@ -63,7 +62,7 @@ describe('TargetBranchDropdown', () => {
     expect('change.branch').toHaveBeenTriggeredOn(dropdown.$dropdown);
   });
 
-  describe('#dropdownData', () => {
+  describe('dropdownData', () => {
     it('cache the refs', () => {
       const refs = dropdown.cachedRefs;
       dropdown.cachedRefs = null;
@@ -88,7 +87,7 @@ describe('TargetBranchDropdown', () => {
     });
   });
 
-  describe('#setNewBranch', () => {
+  describe('setNewBranch', () => {
     it('adds the new branch and select it', () => {
       const branchName = 'new_branch';
 
diff --git a/spec/javascripts/blob/viewer/index_spec.js b/spec/javascripts/blob/viewer/index_spec.js
new file mode 100644
index 00000000000..af04e7c1e72
--- /dev/null
+++ b/spec/javascripts/blob/viewer/index_spec.js
@@ -0,0 +1,184 @@
+/* eslint-disable no-new */
+import BlobViewer from '~/blob/viewer/index';
+
+describe('Blob viewer', () => {
+  let blob;
+  preloadFixtures('blob/show.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('blob/show.html.raw');
+    $('#modal-upload-blob').remove();
+
+    blob = new BlobViewer();
+
+    spyOn($, 'ajax').and.callFake(() => {
+      const d = $.Deferred();
+
+      d.resolve({
+        html: '<div>testing</div>',
+      });
+
+      return d.promise();
+    });
+  });
+
+  afterEach(() => {
+    location.hash = '';
+  });
+
+  it('loads source file after switching views', (done) => {
+    document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+    setTimeout(() => {
+      expect($.ajax).toHaveBeenCalled();
+      expect(
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+          .classList.contains('hidden'),
+      ).toBeFalsy();
+
+      done();
+    });
+  });
+
+  it('loads source file when line number is in hash', (done) => {
+    location.hash = '#L1';
+
+    new BlobViewer();
+
+    setTimeout(() => {
+      expect($.ajax).toHaveBeenCalled();
+      expect(
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
+          .classList.contains('hidden'),
+      ).toBeFalsy();
+
+      done();
+    });
+  });
+
+  it('doesnt reload file if already loaded', (done) => {
+    const asyncClick = () => new Promise((resolve) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(resolve);
+    });
+
+    asyncClick()
+      .then(() => {
+        expect($.ajax).toHaveBeenCalled();
+        return asyncClick();
+      })
+      .then(() => {
+        expect($.ajax.calls.count()).toBe(1);
+        expect(
+          document.querySelector('.blob-viewer[data-type="simple"]').getAttribute('data-loaded'),
+        ).toBe('true');
+
+        done();
+      })
+      .catch(() => {
+        fail();
+        done();
+      });
+  });
+
+  describe('copy blob button', () => {
+    let copyButton;
+
+    beforeEach(() => {
+      copyButton = document.querySelector('.js-copy-blob-source-btn');
+    });
+
+    it('disabled on load', () => {
+      expect(
+        copyButton.classList.contains('disabled'),
+      ).toBeTruthy();
+    });
+
+    it('has tooltip when disabled', () => {
+      expect(
+        copyButton.getAttribute('data-original-title'),
+      ).toBe('Switch to the source to copy it to the clipboard');
+    });
+
+    it('is blurred when clicked and disabled', () => {
+      spyOn(copyButton, 'blur');
+
+      copyButton.click();
+
+      expect(copyButton.blur).toHaveBeenCalled();
+    });
+
+    it('is not blurred when clicked and not disabled', () => {
+      spyOn(copyButton, 'blur');
+
+      copyButton.classList.remove('disabled');
+      copyButton.click();
+
+      expect(copyButton.blur).not.toHaveBeenCalled();
+    });
+
+    it('enables after switching to simple view', (done) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(() => {
+        expect($.ajax).toHaveBeenCalled();
+        expect(
+          copyButton.classList.contains('disabled'),
+        ).toBeFalsy();
+
+        done();
+      });
+    });
+
+    it('updates tooltip after switching to simple view', (done) => {
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
+
+      setTimeout(() => {
+        expect($.ajax).toHaveBeenCalled();
+
+        expect(
+          copyButton.getAttribute('data-original-title'),
+        ).toBe('Copy source to clipboard');
+
+        done();
+      });
+    });
+  });
+
+  describe('switchToViewer', () => {
+    it('removes active class from old viewer button', () => {
+      blob.switchToViewer('simple');
+
+      expect(
+        document.querySelector('.js-blob-viewer-switch-btn.active[data-viewer="rich"]'),
+      ).toBeNull();
+    });
+
+    it('adds active class to new viewer button', () => {
+      const simpleBtn = document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]');
+
+      spyOn(simpleBtn, 'blur');
+
+      blob.switchToViewer('simple');
+
+      expect(
+        simpleBtn.classList.contains('active'),
+      ).toBeTruthy();
+      expect(simpleBtn.blur).toHaveBeenCalled();
+    });
+
+    it('sends AJAX request when switching to simple view', () => {
+      blob.switchToViewer('simple');
+
+      expect($.ajax).toHaveBeenCalled();
+    });
+
+    it('does not send AJAX request when switching to rich view', () => {
+      blob.switchToViewer('simple');
+      blob.switchToViewer('rich');
+
+      expect($.ajax.calls.count()).toBe(1);
+    });
+  });
+});