Add latest changes from gitlab-org/gitlab@master

7 files changed, 878 insertions, 690 deletions

diff --git a/spec/controllers/application_controller_spec.rb b/spec/controllers/application_controller_spec.rb
index ed2e61d6cf6..ca04e2d0578 100644
--- a/spec/controllers/application_controller_spec.rb
+++ b/spec/controllers/application_controller_spec.rb
@@ -310,13 +310,6 @@ describe ApplicationController do
 
         expect(subject).to be_truthy
       end
-
-      it 'returns true if user has signed up using omniauth-ultraauth' do
-        user = create(:omniauth_user, provider: 'ultraauth')
-        allow(controller).to receive(:current_user).and_return(user)
-
-        expect(subject).to be_truthy
-      end
     end
 
     describe '#two_factor_grace_period' do
diff --git a/spec/frontend/droplab/drop_down_spec.js b/spec/frontend/droplab/drop_down_spec.js
new file mode 100644
index 00000000000..d33d6bb70f1
--- /dev/null
+++ b/spec/frontend/droplab/drop_down_spec.js
@@ -0,0 +1,662 @@
+import DropDown from '~/droplab/drop_down';
+import utils from '~/droplab/utils';
+import { SELECTED_CLASS } from '~/droplab/constants';
+
+describe('DropLab DropDown', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
+  describe('class constructor', () => {
+    beforeEach(() => {
+      jest.spyOn(DropDown.prototype, 'getItems').mockImplementation(() => {});
+      jest.spyOn(DropDown.prototype, 'initTemplateString').mockImplementation(() => {});
+      jest.spyOn(DropDown.prototype, 'addEvents').mockImplementation(() => {});
+
+      testContext.list = { innerHTML: 'innerHTML' };
+      testContext.dropdown = new DropDown(testContext.list);
+    });
+
+    it('sets the .hidden property to true', () => {
+      expect(testContext.dropdown.hidden).toBe(true);
+    });
+
+    it('sets the .list property', () => {
+      expect(testContext.dropdown.list).toBe(testContext.list);
+    });
+
+    it('calls .getItems', () => {
+      expect(DropDown.prototype.getItems).toHaveBeenCalled();
+    });
+
+    it('calls .initTemplateString', () => {
+      expect(DropDown.prototype.initTemplateString).toHaveBeenCalled();
+    });
+
+    it('calls .addEvents', () => {
+      expect(DropDown.prototype.addEvents).toHaveBeenCalled();
+    });
+
+    it('sets the .initialState property to the .list.innerHTML', () => {
+      expect(testContext.dropdown.initialState).toBe(testContext.list.innerHTML);
+    });
+
+    describe('if the list argument is a string', () => {
+      beforeEach(() => {
+        testContext.element = {};
+        testContext.selector = '.selector';
+
+        jest.spyOn(Document.prototype, 'querySelector').mockReturnValue(testContext.element);
+
+        testContext.dropdown = new DropDown(testContext.selector);
+      });
+
+      it('calls .querySelector with the selector string', () => {
+        expect(Document.prototype.querySelector).toHaveBeenCalledWith(testContext.selector);
+      });
+
+      it('sets the .list property element', () => {
+        expect(testContext.dropdown.list).toBe(testContext.element);
+      });
+    });
+  });
+
+  describe('getItems', () => {
+    beforeEach(() => {
+      testContext.list = { querySelectorAll: () => {} };
+      testContext.dropdown = { list: testContext.list };
+      testContext.nodeList = [];
+
+      jest.spyOn(testContext.list, 'querySelectorAll').mockReturnValue(testContext.nodeList);
+
+      testContext.getItems = DropDown.prototype.getItems.call(testContext.dropdown);
+    });
+
+    it('calls .querySelectorAll with a list item query', () => {
+      expect(testContext.list.querySelectorAll).toHaveBeenCalledWith('li');
+    });
+
+    it('sets the .items property to the returned list items', () => {
+      expect(testContext.dropdown.items).toEqual(expect.any(Array));
+    });
+
+    it('returns the .items', () => {
+      expect(testContext.getItems).toEqual(expect.any(Array));
+    });
+  });
+
+  describe('initTemplateString', () => {
+    beforeEach(() => {
+      testContext.items = [{ outerHTML: '<a></a>' }, { outerHTML: '<img>' }];
+      testContext.dropdown = { items: testContext.items };
+
+      DropDown.prototype.initTemplateString.call(testContext.dropdown);
+    });
+
+    it('should set .templateString to the last items .outerHTML', () => {
+      expect(testContext.dropdown.templateString).toBe(testContext.items[1].outerHTML);
+    });
+
+    it('should not set .templateString to a non-last items .outerHTML', () => {
+      expect(testContext.dropdown.templateString).not.toBe(testContext.items[0].outerHTML);
+    });
+
+    describe('if .items is not set', () => {
+      beforeEach(() => {
+        testContext.dropdown = { getItems: () => {} };
+
+        jest.spyOn(testContext.dropdown, 'getItems').mockReturnValue([]);
+
+        DropDown.prototype.initTemplateString.call(testContext.dropdown);
+      });
+
+      it('should call .getItems', () => {
+        expect(testContext.dropdown.getItems).toHaveBeenCalled();
+      });
+    });
+
+    describe('if items array is empty', () => {
+      beforeEach(() => {
+        testContext.dropdown = { items: [] };
+
+        DropDown.prototype.initTemplateString.call(testContext.dropdown);
+      });
+
+      it('should set .templateString to an empty string', () => {
+        expect(testContext.dropdown.templateString).toBe('');
+      });
+    });
+  });
+
+  describe('clickEvent', () => {
+    beforeEach(() => {
+      testContext.classList = {
+        contains: jest.fn(),
+      };
+      testContext.list = { dispatchEvent: () => {} };
+      testContext.dropdown = {
+        hideOnClick: true,
+        hide: () => {},
+        list: testContext.list,
+        addSelectedClass: () => {},
+      };
+      testContext.event = {
+        preventDefault: () => {},
+        target: {
+          classList: testContext.classList,
+          closest: () => null,
+        },
+      };
+
+      testContext.dummyListItem = document.createElement('li');
+      jest.spyOn(testContext.event.target, 'closest').mockImplementation(selector => {
+        if (selector === 'li') {
+          return testContext.dummyListItem;
+        }
+
+        return null;
+      });
+
+      jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {});
+      jest.spyOn(testContext.dropdown, 'addSelectedClass').mockImplementation(() => {});
+      jest.spyOn(testContext.list, 'dispatchEvent').mockImplementation(() => {});
+      jest.spyOn(testContext.event, 'preventDefault').mockImplementation(() => {});
+      window.CustomEvent = jest.fn();
+      testContext.classList.contains.mockReturnValue(false);
+    });
+
+    describe('normal click event', () => {
+      beforeEach(() => {
+        DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event);
+      });
+      it('should call event.target.closest', () => {
+        expect(testContext.event.target.closest).toHaveBeenCalledWith('.droplab-item-ignore');
+        expect(testContext.event.target.closest).toHaveBeenCalledWith('li');
+      });
+
+      it('should call addSelectedClass', () => {
+        expect(testContext.dropdown.addSelectedClass).toHaveBeenCalledWith(
+          testContext.dummyListItem,
+        );
+      });
+
+      it('should call .preventDefault', () => {
+        expect(testContext.event.preventDefault).toHaveBeenCalled();
+      });
+
+      it('should call .hide', () => {
+        expect(testContext.dropdown.hide).toHaveBeenCalled();
+      });
+
+      it('should construct CustomEvent', () => {
+        expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', expect.any(Object));
+      });
+
+      it('should call .dispatchEvent with the customEvent', () => {
+        expect(testContext.list.dispatchEvent).toHaveBeenCalledWith({});
+      });
+    });
+
+    describe('if the target is a UL element', () => {
+      beforeEach(() => {
+        testContext.event.target = document.createElement('ul');
+
+        jest.spyOn(testContext.event.target, 'closest').mockImplementation(() => {});
+      });
+
+      it('should return immediately', () => {
+        DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event);
+
+        expect(testContext.event.target.closest).not.toHaveBeenCalled();
+        expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('if the target has the droplab-item-ignore class', () => {
+      beforeEach(() => {
+        testContext.ignoredButton = document.createElement('button');
+        testContext.ignoredButton.classList.add('droplab-item-ignore');
+        testContext.event.target = testContext.ignoredButton;
+
+        jest.spyOn(testContext.ignoredButton, 'closest');
+      });
+
+      it('does not select element', () => {
+        DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event);
+
+        expect(testContext.ignoredButton.closest.mock.calls.length).toBe(1);
+        expect(testContext.ignoredButton.closest).toHaveBeenCalledWith('.droplab-item-ignore');
+        expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('if no selected element exists', () => {
+      beforeEach(() => {
+        testContext.event.preventDefault.mockReset();
+        testContext.dummyListItem = null;
+      });
+
+      it('should return before .preventDefault is called', () => {
+        DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event);
+
+        expect(testContext.event.preventDefault).not.toHaveBeenCalled();
+        expect(testContext.dropdown.addSelectedClass).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('if hideOnClick is false', () => {
+      beforeEach(() => {
+        testContext.dropdown.hideOnClick = false;
+        testContext.dropdown.hide.mockReset();
+      });
+
+      it('should not call .hide', () => {
+        DropDown.prototype.clickEvent.call(testContext.dropdown, testContext.event);
+
+        expect(testContext.dropdown.hide).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('addSelectedClass', () => {
+    beforeEach(() => {
+      testContext.items = Array(4).forEach((item, i) => {
+        testContext.items[i] = { classList: { add: () => {} } };
+        jest.spyOn(testContext.items[i].classList, 'add').mockImplementation(() => {});
+      });
+      testContext.selected = { classList: { add: () => {} } };
+      testContext.dropdown = { removeSelectedClasses: () => {} };
+
+      jest.spyOn(testContext.dropdown, 'removeSelectedClasses').mockImplementation(() => {});
+      jest.spyOn(testContext.selected.classList, 'add').mockImplementation(() => {});
+
+      DropDown.prototype.addSelectedClass.call(testContext.dropdown, testContext.selected);
+    });
+
+    it('should call .removeSelectedClasses', () => {
+      expect(testContext.dropdown.removeSelectedClasses).toHaveBeenCalled();
+    });
+
+    it('should call .classList.add', () => {
+      expect(testContext.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS);
+    });
+  });
+
+  describe('removeSelectedClasses', () => {
+    beforeEach(() => {
+      testContext.items = [...Array(4)];
+      testContext.items.forEach((item, i) => {
+        testContext.items[i] = { classList: { add: jest.fn(), remove: jest.fn() } };
+      });
+      testContext.dropdown = { items: testContext.items };
+
+      DropDown.prototype.removeSelectedClasses.call(testContext.dropdown);
+    });
+
+    it('should call .classList.remove for all items', () => {
+      testContext.items.forEach((_, i) => {
+        expect(testContext.items[i].classList.remove).toHaveBeenCalledWith(SELECTED_CLASS);
+      });
+    });
+
+    describe('if .items is not set', () => {
+      beforeEach(() => {
+        testContext.dropdown = { getItems: () => {} };
+
+        jest.spyOn(testContext.dropdown, 'getItems').mockReturnValue([]);
+
+        DropDown.prototype.removeSelectedClasses.call(testContext.dropdown);
+      });
+
+      it('should call .getItems', () => {
+        expect(testContext.dropdown.getItems).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('addEvents', () => {
+    beforeEach(() => {
+      testContext.list = {
+        addEventListener: () => {},
+        querySelectorAll: () => [],
+      };
+      testContext.dropdown = {
+        list: testContext.list,
+        clickEvent: () => {},
+        closeDropdown: () => {},
+        eventWrapper: {},
+      };
+    });
+
+    it('should call .addEventListener', () => {
+      jest.spyOn(testContext.list, 'addEventListener').mockImplementation(() => {});
+
+      DropDown.prototype.addEvents.call(testContext.dropdown);
+
+      expect(testContext.list.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));
+      expect(testContext.list.addEventListener).toHaveBeenCalledWith('keyup', expect.any(Function));
+    });
+  });
+
+  describe('setData', () => {
+    beforeEach(() => {
+      testContext.dropdown = { render: () => {} };
+      testContext.data = ['data'];
+
+      jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {});
+
+      DropDown.prototype.setData.call(testContext.dropdown, testContext.data);
+    });
+
+    it('should set .data', () => {
+      expect(testContext.dropdown.data).toBe(testContext.data);
+    });
+
+    it('should call .render with the .data', () => {
+      expect(testContext.dropdown.render).toHaveBeenCalledWith(testContext.data);
+    });
+  });
+
+  describe('addData', () => {
+    beforeEach(() => {
+      testContext.dropdown = { render: () => {}, data: ['data1'] };
+      testContext.data = ['data2'];
+
+      jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {});
+      jest.spyOn(Array.prototype, 'concat');
+
+      DropDown.prototype.addData.call(testContext.dropdown, testContext.data);
+    });
+
+    it('should call .concat with data', () => {
+      expect(Array.prototype.concat).toHaveBeenCalledWith(testContext.data);
+    });
+
+    it('should set .data with concatination', () => {
+      expect(testContext.dropdown.data).toStrictEqual(['data1', 'data2']);
+    });
+
+    it('should call .render with the .data', () => {
+      expect(testContext.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']);
+    });
+
+    describe('if .data is undefined', () => {
+      beforeEach(() => {
+        testContext.dropdown = { render: () => {}, data: undefined };
+        testContext.data = ['data2'];
+
+        jest.spyOn(testContext.dropdown, 'render').mockImplementation(() => {});
+
+        DropDown.prototype.addData.call(testContext.dropdown, testContext.data);
+      });
+
+      it('should set .data with concatination', () => {
+        expect(testContext.dropdown.data).toStrictEqual(['data2']);
+      });
+    });
+  });
+
+  describe('render', () => {
+    beforeEach(() => {
+      testContext.renderableList = {};
+      testContext.list = {
+        querySelector: q => {
+          if (q === '.filter-dropdown-loading') {
+            return false;
+          }
+          return testContext.renderableList;
+        },
+        dispatchEvent: () => {},
+      };
+      testContext.dropdown = { renderChildren: () => {}, list: testContext.list };
+      testContext.data = [0, 1];
+      testContext.customEvent = {};
+
+      jest.spyOn(testContext.dropdown, 'renderChildren').mockImplementation(data => data);
+      jest.spyOn(testContext.list, 'dispatchEvent').mockImplementation(() => {});
+      jest.spyOn(testContext.data, 'map');
+      jest.spyOn(window, 'CustomEvent').mockReturnValue(testContext.customEvent);
+
+      DropDown.prototype.render.call(testContext.dropdown, testContext.data);
+    });
+
+    it('should call .map', () => {
+      expect(testContext.data.map).toHaveBeenCalledWith(expect.any(Function));
+    });
+
+    it('should call .renderChildren for each data item', () => {
+      expect(testContext.dropdown.renderChildren.mock.calls.length).toBe(testContext.data.length);
+    });
+
+    it('sets the renderableList .innerHTML', () => {
+      expect(testContext.renderableList.innerHTML).toBe('01');
+    });
+
+    it('should call render.dl', () => {
+      expect(window.CustomEvent).toHaveBeenCalledWith('render.dl', expect.any(Object));
+    });
+
+    it('should call dispatchEvent with the customEvent', () => {
+      expect(testContext.list.dispatchEvent).toHaveBeenCalledWith(testContext.customEvent);
+    });
+
+    describe('if no data argument is passed', () => {
+      beforeEach(() => {
+        testContext.data.map.mockReset();
+        testContext.dropdown.renderChildren.mockReset();
+
+        DropDown.prototype.render.call(testContext.dropdown, undefined);
+      });
+
+      it('should not call .map', () => {
+        expect(testContext.data.map).not.toHaveBeenCalled();
+      });
+
+      it('should not call .renderChildren', () => {
+        expect(testContext.dropdown.renderChildren).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('if no dynamic list is present', () => {
+      beforeEach(() => {
+        testContext.list = { querySelector: () => {}, dispatchEvent: () => {} };
+        testContext.dropdown = { renderChildren: () => {}, list: testContext.list };
+        testContext.data = [0, 1];
+
+        jest.spyOn(testContext.dropdown, 'renderChildren').mockImplementation(data => data);
+        jest.spyOn(testContext.list, 'querySelector').mockImplementation(() => {});
+        jest.spyOn(testContext.data, 'map');
+
+        DropDown.prototype.render.call(testContext.dropdown, testContext.data);
+      });
+
+      it('sets the .list .innerHTML', () => {
+        expect(testContext.list.innerHTML).toBe('01');
+      });
+    });
+  });
+
+  describe('renderChildren', () => {
+    beforeEach(() => {
+      testContext.templateString = 'templateString';
+      testContext.dropdown = { templateString: testContext.templateString };
+      testContext.data = { droplab_hidden: true };
+      testContext.html = 'html';
+      testContext.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
+
+      jest.spyOn(utils, 'template').mockReturnValue(testContext.html);
+      jest.spyOn(document, 'createElement').mockReturnValue(testContext.template);
+      jest.spyOn(DropDown, 'setImagesSrc').mockImplementation(() => {});
+
+      testContext.renderChildren = DropDown.prototype.renderChildren.call(
+        testContext.dropdown,
+        testContext.data,
+      );
+    });
+
+    it('should call utils.t with .templateString and data', () => {
+      expect(utils.template).toHaveBeenCalledWith(testContext.templateString, testContext.data);
+    });
+
+    it('should call document.createElement', () => {
+      expect(document.createElement).toHaveBeenCalledWith('div');
+    });
+
+    it('should set the templates .innerHTML to the HTML', () => {
+      expect(testContext.template.innerHTML).toBe(testContext.html);
+    });
+
+    it('should call .setImagesSrc with the template', () => {
+      expect(DropDown.setImagesSrc).toHaveBeenCalledWith(testContext.template);
+    });
+
+    it('should set the template display to none', () => {
+      expect(testContext.template.firstChild.style.display).toBe('none');
+    });
+
+    it('should return the templates .firstChild.outerHTML', () => {
+      expect(testContext.renderChildren).toBe(testContext.template.firstChild.outerHTML);
+    });
+
+    describe('if droplab_hidden is false', () => {
+      beforeEach(() => {
+        testContext.data = { droplab_hidden: false };
+        testContext.renderChildren = DropDown.prototype.renderChildren.call(
+          testContext.dropdown,
+          testContext.data,
+        );
+      });
+
+      it('should set the template display to block', () => {
+        expect(testContext.template.firstChild.style.display).toBe('block');
+      });
+    });
+  });
+
+  describe('setImagesSrc', () => {
+    beforeEach(() => {
+      testContext.template = { querySelectorAll: () => {} };
+
+      jest.spyOn(testContext.template, 'querySelectorAll').mockReturnValue([]);
+
+      DropDown.setImagesSrc(testContext.template);
+    });
+
+    it('should call .querySelectorAll', () => {
+      expect(testContext.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]');
+    });
+  });
+
+  describe('show', () => {
+    beforeEach(() => {
+      testContext.list = { style: {} };
+      testContext.dropdown = { list: testContext.list, hidden: true };
+
+      DropDown.prototype.show.call(testContext.dropdown);
+    });
+
+    it('it should set .list display to block', () => {
+      expect(testContext.list.style.display).toBe('block');
+    });
+
+    it('it should set .hidden to false', () => {
+      expect(testContext.dropdown.hidden).toBe(false);
+    });
+
+    describe('if .hidden is false', () => {
+      beforeEach(() => {
+        testContext.list = { style: {} };
+        testContext.dropdown = { list: testContext.list, hidden: false };
+
+        testContext.show = DropDown.prototype.show.call(testContext.dropdown);
+      });
+
+      it('should return undefined', () => {
+        expect(testContext.show).toBeUndefined();
+      });
+
+      it('should not set .list display to block', () => {
+        expect(testContext.list.style.display).not.toBe('block');
+      });
+    });
+  });
+
+  describe('hide', () => {
+    beforeEach(() => {
+      testContext.list = { style: {} };
+      testContext.dropdown = { list: testContext.list };
+
+      DropDown.prototype.hide.call(testContext.dropdown);
+    });
+
+    it('it should set .list display to none', () => {
+      expect(testContext.list.style.display).toBe('none');
+    });
+
+    it('it should set .hidden to true', () => {
+      expect(testContext.dropdown.hidden).toBe(true);
+    });
+  });
+
+  describe('toggle', () => {
+    beforeEach(() => {
+      testContext.hidden = true;
+      testContext.dropdown = { hidden: testContext.hidden, show: () => {}, hide: () => {} };
+
+      jest.spyOn(testContext.dropdown, 'show').mockImplementation(() => {});
+      jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {});
+
+      DropDown.prototype.toggle.call(testContext.dropdown);
+    });
+
+    it('should call .show', () => {
+      expect(testContext.dropdown.show).toHaveBeenCalled();
+    });
+
+    describe('if .hidden is false', () => {
+      beforeEach(() => {
+        testContext.hidden = false;
+        testContext.dropdown = { hidden: testContext.hidden, show: () => {}, hide: () => {} };
+
+        jest.spyOn(testContext.dropdown, 'show').mockImplementation(() => {});
+        jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {});
+
+        DropDown.prototype.toggle.call(testContext.dropdown);
+      });
+
+      it('should call .hide', () => {
+        expect(testContext.dropdown.hide).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('destroy', () => {
+    beforeEach(() => {
+      testContext.list = { removeEventListener: () => {} };
+      testContext.eventWrapper = { clickEvent: 'clickEvent' };
+      testContext.dropdown = {
+        list: testContext.list,
+        hide: () => {},
+        eventWrapper: testContext.eventWrapper,
+      };
+
+      jest.spyOn(testContext.list, 'removeEventListener').mockImplementation(() => {});
+      jest.spyOn(testContext.dropdown, 'hide').mockImplementation(() => {});
+
+      DropDown.prototype.destroy.call(testContext.dropdown);
+    });
+
+    it('it should call .hide', () => {
+      expect(testContext.dropdown.hide).toHaveBeenCalled();
+    });
+
+    it('it should call .removeEventListener', () => {
+      expect(testContext.list.removeEventListener).toHaveBeenCalledWith(
+        'click',
+        testContext.eventWrapper.clickEvent,
+      );
+    });
+  });
+});
diff --git a/spec/frontend/pipelines/components/dag/mock_data.js b/spec/frontend/pipelines/components/dag/mock_data.js
new file mode 100644
index 00000000000..723cdd3f525
--- /dev/null
+++ b/spec/frontend/pipelines/components/dag/mock_data.js
@@ -0,0 +1,44 @@
+/*
+  It is important that the simple base include parallel jobs
+  as well as non-parallel jobs with spaces in the name to prevent
+  us relying on spaces as an indicator.
+*/
+export default {
+  stages: [
+    {
+      name: 'test',
+      groups: [
+        {
+          name: 'jest',
+          size: 2,
+          jobs: [{ name: 'jest 1/2', needs: ['frontend fixtures'] }, { name: 'jest 2/2' }],
+        },
+        {
+          name: 'rspec',
+          size: 1,
+          jobs: [{ name: 'rspec', needs: ['frontend fixtures'] }],
+        },
+      ],
+    },
+    {
+      name: 'fixtures',
+      groups: [
+        {
+          name: 'frontend fixtures',
+          size: 1,
+          jobs: [{ name: 'frontend fixtures' }],
+        },
+      ],
+    },
+    {
+      name: 'un-needed',
+      groups: [
+        {
+          name: 'un-needed',
+          size: 1,
+          jobs: [{ name: 'un-needed' }],
+        },
+      ],
+    },
+  ],
+};
diff --git a/spec/frontend/pipelines/components/dag/utils_spec.js b/spec/frontend/pipelines/components/dag/utils_spec.js
new file mode 100644
index 00000000000..41bb91b4800
--- /dev/null
+++ b/spec/frontend/pipelines/components/dag/utils_spec.js
@@ -0,0 +1,171 @@
+import {
+  createNodesStructure,
+  makeLinksFromNodes,
+  filterByAncestors,
+  parseData,
+  createSankey,
+  removeOrphanNodes,
+  getMaxNodes,
+} from '~/pipelines/components/dag/utils';
+
+import mockGraphData from './mock_data';
+
+describe('DAG visualization parsing utilities', () => {
+  const { nodes, nodeDict } = createNodesStructure(mockGraphData.stages);
+  const unfilteredLinks = makeLinksFromNodes(nodes, nodeDict);
+  const parsed = parseData(mockGraphData.stages);
+
+  const layoutSettings = {
+    width: 200,
+    height: 200,
+    nodeWidth: 10,
+    nodePadding: 20,
+    paddingForLabels: 100,
+  };
+
+  const sankeyLayout = createSankey(layoutSettings)(parsed);
+
+  describe('createNodesStructure', () => {
+    const parallelGroupName = 'jest';
+    const parallelJobName = 'jest 1/2';
+    const singleJobName = 'frontend fixtures';
+
+    const { name, jobs, size } = mockGraphData.stages[0].groups[0];
+
+    it('returns the expected node structure', () => {
+      expect(nodes[0]).toHaveProperty('category', mockGraphData.stages[0].name);
+      expect(nodes[0]).toHaveProperty('name', name);
+      expect(nodes[0]).toHaveProperty('jobs', jobs);
+      expect(nodes[0]).toHaveProperty('size', size);
+    });
+
+    it('adds needs to top level of nodeDict entries', () => {
+      expect(nodeDict[parallelGroupName]).toHaveProperty('needs');
+      expect(nodeDict[parallelJobName]).toHaveProperty('needs');
+      expect(nodeDict[singleJobName]).toHaveProperty('needs');
+    });
+
+    it('makes entries in nodeDict for jobs and parallel jobs', () => {
+      const nodeNames = Object.keys(nodeDict);
+
+      expect(nodeNames.includes(parallelGroupName)).toBe(true);
+      expect(nodeNames.includes(parallelJobName)).toBe(true);
+      expect(nodeNames.includes(singleJobName)).toBe(true);
+    });
+  });
+
+  describe('makeLinksFromNodes', () => {
+    it('returns the expected link structure', () => {
+      expect(unfilteredLinks[0]).toHaveProperty('source', 'frontend fixtures');
+      expect(unfilteredLinks[0]).toHaveProperty('target', 'jest');
+      expect(unfilteredLinks[0]).toHaveProperty('value', 10);
+    });
+  });
+
+  describe('filterByAncestors', () => {
+    const allLinks = [
+      { source: 'job1', target: 'job4' },
+      { source: 'job1', target: 'job2' },
+      { source: 'job2', target: 'job4' },
+    ];
+
+    const dedupedLinks = [{ source: 'job1', target: 'job2' }, { source: 'job2', target: 'job4' }];
+
+    const nodeLookup = {
+      job1: {
+        name: 'job1',
+      },
+      job2: {
+        name: 'job2',
+        needs: ['job1'],
+      },
+      job4: {
+        name: 'job4',
+        needs: ['job1', 'job2'],
+        category: 'build',
+      },
+    };
+
+    it('dedupes links', () => {
+      expect(filterByAncestors(allLinks, nodeLookup)).toMatchObject(dedupedLinks);
+    });
+  });
+
+  describe('parseData parent function', () => {
+    it('returns an object containing a list of nodes and links', () => {
+      // an array of nodes exist and the values are defined
+      expect(parsed).toHaveProperty('nodes');
+      expect(Array.isArray(parsed.nodes)).toBe(true);
+      expect(parsed.nodes.filter(Boolean)).not.toHaveLength(0);
+
+      // an array of links exist and the values are defined
+      expect(parsed).toHaveProperty('links');
+      expect(Array.isArray(parsed.links)).toBe(true);
+      expect(parsed.links.filter(Boolean)).not.toHaveLength(0);
+    });
+  });
+
+  describe('createSankey', () => {
+    it('returns a nodes data structure with expected d3-added properties', () => {
+      expect(sankeyLayout.nodes[0]).toHaveProperty('sourceLinks');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('targetLinks');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('depth');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('layer');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('x0');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('x1');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('y0');
+      expect(sankeyLayout.nodes[0]).toHaveProperty('y1');
+    });
+
+    it('returns a links data structure with expected d3-added properties', () => {
+      expect(sankeyLayout.links[0]).toHaveProperty('source');
+      expect(sankeyLayout.links[0]).toHaveProperty('target');
+      expect(sankeyLayout.links[0]).toHaveProperty('width');
+      expect(sankeyLayout.links[0]).toHaveProperty('y0');
+      expect(sankeyLayout.links[0]).toHaveProperty('y1');
+    });
+
+    describe('data structure integrity', () => {
+      const newObject = { name: 'bad-actor' };
+
+      beforeEach(() => {
+        sankeyLayout.nodes.unshift(newObject);
+      });
+
+      it('sankey does not propagate changes back to the original', () => {
+        expect(sankeyLayout.nodes[0]).toBe(newObject);
+        expect(parsed.nodes[0]).not.toBe(newObject);
+      });
+
+      afterEach(() => {
+        sankeyLayout.nodes.shift();
+      });
+    });
+  });
+
+  describe('removeOrphanNodes', () => {
+    it('removes sankey nodes that have no needs and are not needed', () => {
+      const cleanedNodes = removeOrphanNodes(sankeyLayout.nodes);
+      expect(cleanedNodes).toHaveLength(sankeyLayout.nodes.length - 1);
+    });
+  });
+
+  describe('getMaxNodes', () => {
+    it('returns the number of nodes in the most populous generation', () => {
+      const layerNodes = [
+        { layer: 0 },
+        { layer: 0 },
+        { layer: 1 },
+        { layer: 1 },
+        { layer: 0 },
+        { layer: 3 },
+        { layer: 2 },
+        { layer: 4 },
+        { layer: 1 },
+        { layer: 3 },
+        { layer: 4 },
+      ];
+      expect(getMaxNodes(layerNodes)).toBe(3);
+    });
+  });
+});
diff --git a/spec/javascripts/droplab/drop_down_spec.js b/spec/javascripts/droplab/drop_down_spec.js
deleted file mode 100644
index 22346c10547..00000000000
--- a/spec/javascripts/droplab/drop_down_spec.js
+++ /dev/null
@@ -1,650 +0,0 @@
-import DropDown from '~/droplab/drop_down';
-import utils from '~/droplab/utils';
-import { SELECTED_CLASS } from '~/droplab/constants';
-
-describe('DropLab DropDown', function() {
-  describe('class constructor', function() {
-    beforeEach(function() {
-      spyOn(DropDown.prototype, 'getItems');
-      spyOn(DropDown.prototype, 'initTemplateString');
-      spyOn(DropDown.prototype, 'addEvents');
-
-      this.list = { innerHTML: 'innerHTML' };
-      this.dropdown = new DropDown(this.list);
-    });
-
-    it('sets the .hidden property to true', function() {
-      expect(this.dropdown.hidden).toBe(true);
-    });
-
-    it('sets the .list property', function() {
-      expect(this.dropdown.list).toBe(this.list);
-    });
-
-    it('calls .getItems', function() {
-      expect(DropDown.prototype.getItems).toHaveBeenCalled();
-    });
-
-    it('calls .initTemplateString', function() {
-      expect(DropDown.prototype.initTemplateString).toHaveBeenCalled();
-    });
-
-    it('calls .addEvents', function() {
-      expect(DropDown.prototype.addEvents).toHaveBeenCalled();
-    });
-
-    it('sets the .initialState property to the .list.innerHTML', function() {
-      expect(this.dropdown.initialState).toBe(this.list.innerHTML);
-    });
-
-    describe('if the list argument is a string', function() {
-      beforeEach(function() {
-        this.element = {};
-        this.selector = '.selector';
-
-        spyOn(Document.prototype, 'querySelector').and.returnValue(this.element);
-
-        this.dropdown = new DropDown(this.selector);
-      });
-
-      it('calls .querySelector with the selector string', function() {
-        expect(Document.prototype.querySelector).toHaveBeenCalledWith(this.selector);
-      });
-
-      it('sets the .list property element', function() {
-        expect(this.dropdown.list).toBe(this.element);
-      });
-    });
-  });
-
-  describe('getItems', function() {
-    beforeEach(function() {
-      this.list = { querySelectorAll: () => {} };
-      this.dropdown = { list: this.list };
-      this.nodeList = [];
-
-      spyOn(this.list, 'querySelectorAll').and.returnValue(this.nodeList);
-
-      this.getItems = DropDown.prototype.getItems.call(this.dropdown);
-    });
-
-    it('calls .querySelectorAll with a list item query', function() {
-      expect(this.list.querySelectorAll).toHaveBeenCalledWith('li');
-    });
-
-    it('sets the .items property to the returned list items', function() {
-      expect(this.dropdown.items).toEqual(jasmine.any(Array));
-    });
-
-    it('returns the .items', function() {
-      expect(this.getItems).toEqual(jasmine.any(Array));
-    });
-  });
-
-  describe('initTemplateString', function() {
-    beforeEach(function() {
-      this.items = [{ outerHTML: '<a></a>' }, { outerHTML: '<img>' }];
-      this.dropdown = { items: this.items };
-
-      DropDown.prototype.initTemplateString.call(this.dropdown);
-    });
-
-    it('should set .templateString to the last items .outerHTML', function() {
-      expect(this.dropdown.templateString).toBe(this.items[1].outerHTML);
-    });
-
-    it('should not set .templateString to a non-last items .outerHTML', function() {
-      expect(this.dropdown.templateString).not.toBe(this.items[0].outerHTML);
-    });
-
-    describe('if .items is not set', function() {
-      beforeEach(function() {
-        this.dropdown = { getItems: () => {} };
-
-        spyOn(this.dropdown, 'getItems').and.returnValue([]);
-
-        DropDown.prototype.initTemplateString.call(this.dropdown);
-      });
-
-      it('should call .getItems', function() {
-        expect(this.dropdown.getItems).toHaveBeenCalled();
-      });
-    });
-
-    describe('if items array is empty', function() {
-      beforeEach(function() {
-        this.dropdown = { items: [] };
-
-        DropDown.prototype.initTemplateString.call(this.dropdown);
-      });
-
-      it('should set .templateString to an empty string', function() {
-        expect(this.dropdown.templateString).toBe('');
-      });
-    });
-  });
-
-  describe('clickEvent', function() {
-    beforeEach(function() {
-      this.classList = jasmine.createSpyObj('classList', ['contains']);
-      this.list = { dispatchEvent: () => {} };
-      this.dropdown = {
-        hideOnClick: true,
-        hide: () => {},
-        list: this.list,
-        addSelectedClass: () => {},
-      };
-      this.event = {
-        preventDefault: () => {},
-        target: {
-          classList: this.classList,
-          closest: () => null,
-        },
-      };
-      this.customEvent = {};
-      this.dummyListItem = document.createElement('li');
-      spyOn(this.event.target, 'closest').and.callFake(selector => {
-        if (selector === 'li') {
-          return this.dummyListItem;
-        }
-
-        return null;
-      });
-
-      spyOn(this.dropdown, 'hide');
-      spyOn(this.dropdown, 'addSelectedClass');
-      spyOn(this.list, 'dispatchEvent');
-      spyOn(this.event, 'preventDefault');
-      spyOn(window, 'CustomEvent').and.returnValue(this.customEvent);
-      this.classList.contains.and.returnValue(false);
-    });
-
-    it('should call event.target.closest', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(this.event.target.closest).toHaveBeenCalledWith('.droplab-item-ignore');
-      expect(this.event.target.closest).toHaveBeenCalledWith('li');
-    });
-
-    it('should call addSelectedClass', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.dummyListItem);
-    });
-
-    it('should call .preventDefault', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(this.event.preventDefault).toHaveBeenCalled();
-    });
-
-    it('should call .hide', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(this.dropdown.hide).toHaveBeenCalled();
-    });
-
-    it('should construct CustomEvent', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', jasmine.any(Object));
-    });
-
-    it('should call .dispatchEvent with the customEvent', function() {
-      DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-      expect(this.list.dispatchEvent).toHaveBeenCalledWith(this.customEvent);
-    });
-
-    describe('if the target is a UL element', function() {
-      beforeEach(function() {
-        this.event.target = document.createElement('ul');
-
-        spyOn(this.event.target, 'closest');
-      });
-
-      it('should return immediately', function() {
-        DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-        expect(this.event.target.closest).not.toHaveBeenCalled();
-        expect(this.dropdown.addSelectedClass).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if the target has the droplab-item-ignore class', function() {
-      beforeEach(function() {
-        this.ignoredButton = document.createElement('button');
-        this.ignoredButton.classList.add('droplab-item-ignore');
-        this.event.target = this.ignoredButton;
-
-        spyOn(this.ignoredButton, 'closest').and.callThrough();
-      });
-
-      it('does not select element', function() {
-        DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-        expect(this.ignoredButton.closest.calls.count()).toBe(1);
-        expect(this.ignoredButton.closest).toHaveBeenCalledWith('.droplab-item-ignore');
-        expect(this.dropdown.addSelectedClass).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if no selected element exists', function() {
-      beforeEach(function() {
-        this.event.preventDefault.calls.reset();
-        this.dummyListItem = null;
-      });
-
-      it('should return before .preventDefault is called', function() {
-        DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-        expect(this.event.preventDefault).not.toHaveBeenCalled();
-        expect(this.dropdown.addSelectedClass).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if hideOnClick is false', () => {
-      beforeEach(function() {
-        this.dropdown.hideOnClick = false;
-        this.dropdown.hide.calls.reset();
-      });
-
-      it('should not call .hide', function() {
-        DropDown.prototype.clickEvent.call(this.dropdown, this.event);
-
-        expect(this.dropdown.hide).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('addSelectedClass', function() {
-    beforeEach(function() {
-      this.items = Array(4).forEach((item, i) => {
-        this.items[i] = { classList: { add: () => {} } };
-        spyOn(this.items[i].classList, 'add');
-      });
-      this.selected = { classList: { add: () => {} } };
-      this.dropdown = { removeSelectedClasses: () => {} };
-
-      spyOn(this.dropdown, 'removeSelectedClasses');
-      spyOn(this.selected.classList, 'add');
-
-      DropDown.prototype.addSelectedClass.call(this.dropdown, this.selected);
-    });
-
-    it('should call .removeSelectedClasses', function() {
-      expect(this.dropdown.removeSelectedClasses).toHaveBeenCalled();
-    });
-
-    it('should call .classList.add', function() {
-      expect(this.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS);
-    });
-  });
-
-  describe('removeSelectedClasses', function() {
-    beforeEach(function() {
-      this.items = Array(4);
-      this.items.forEach((item, i) => {
-        this.items[i] = { classList: { add: () => {} } };
-        spyOn(this.items[i].classList, 'add');
-      });
-      this.dropdown = { items: this.items };
-
-      DropDown.prototype.removeSelectedClasses.call(this.dropdown);
-    });
-
-    it('should call .classList.remove for all items', function() {
-      this.items.forEach((item, i) => {
-        expect(this.items[i].classList.add).toHaveBeenCalledWith(SELECTED_CLASS);
-      });
-    });
-
-    describe('if .items is not set', function() {
-      beforeEach(function() {
-        this.dropdown = { getItems: () => {} };
-
-        spyOn(this.dropdown, 'getItems').and.returnValue([]);
-
-        DropDown.prototype.removeSelectedClasses.call(this.dropdown);
-      });
-
-      it('should call .getItems', function() {
-        expect(this.dropdown.getItems).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('addEvents', function() {
-    beforeEach(function() {
-      this.list = {
-        addEventListener: () => {},
-        querySelectorAll: () => [],
-      };
-      this.dropdown = {
-        list: this.list,
-        clickEvent: () => {},
-        closeDropdown: () => {},
-        eventWrapper: {},
-      };
-    });
-
-    it('should call .addEventListener', function() {
-      spyOn(this.list, 'addEventListener');
-
-      DropDown.prototype.addEvents.call(this.dropdown);
-
-      expect(this.list.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function));
-      expect(this.list.addEventListener).toHaveBeenCalledWith('keyup', jasmine.any(Function));
-    });
-  });
-
-  describe('setData', function() {
-    beforeEach(function() {
-      this.dropdown = { render: () => {} };
-      this.data = ['data'];
-
-      spyOn(this.dropdown, 'render');
-
-      DropDown.prototype.setData.call(this.dropdown, this.data);
-    });
-
-    it('should set .data', function() {
-      expect(this.dropdown.data).toBe(this.data);
-    });
-
-    it('should call .render with the .data', function() {
-      expect(this.dropdown.render).toHaveBeenCalledWith(this.data);
-    });
-  });
-
-  describe('addData', function() {
-    beforeEach(function() {
-      this.dropdown = { render: () => {}, data: ['data1'] };
-      this.data = ['data2'];
-
-      spyOn(this.dropdown, 'render');
-      spyOn(Array.prototype, 'concat').and.callThrough();
-
-      DropDown.prototype.addData.call(this.dropdown, this.data);
-    });
-
-    it('should call .concat with data', function() {
-      expect(Array.prototype.concat).toHaveBeenCalledWith(this.data);
-    });
-
-    it('should set .data with concatination', function() {
-      expect(this.dropdown.data).toEqual(['data1', 'data2']);
-    });
-
-    it('should call .render with the .data', function() {
-      expect(this.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']);
-    });
-
-    describe('if .data is undefined', function() {
-      beforeEach(function() {
-        this.dropdown = { render: () => {}, data: undefined };
-        this.data = ['data2'];
-
-        spyOn(this.dropdown, 'render');
-
-        DropDown.prototype.addData.call(this.dropdown, this.data);
-      });
-
-      it('should set .data with concatination', function() {
-        expect(this.dropdown.data).toEqual(['data2']);
-      });
-    });
-  });
-
-  describe('render', function() {
-    beforeEach(function() {
-      this.renderableList = {};
-      this.list = {
-        querySelector: q => {
-          if (q === '.filter-dropdown-loading') {
-            return false;
-          }
-          return this.renderableList;
-        },
-        dispatchEvent: () => {},
-      };
-      this.dropdown = { renderChildren: () => {}, list: this.list };
-      this.data = [0, 1];
-      this.customEvent = {};
-
-      spyOn(this.dropdown, 'renderChildren').and.callFake(data => data);
-      spyOn(this.list, 'dispatchEvent');
-      spyOn(this.data, 'map').and.callThrough();
-      spyOn(window, 'CustomEvent').and.returnValue(this.customEvent);
-
-      DropDown.prototype.render.call(this.dropdown, this.data);
-    });
-
-    it('should call .map', function() {
-      expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function));
-    });
-
-    it('should call .renderChildren for each data item', function() {
-      expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length);
-    });
-
-    it('sets the renderableList .innerHTML', function() {
-      expect(this.renderableList.innerHTML).toBe('01');
-    });
-
-    it('should call render.dl', function() {
-      expect(window.CustomEvent).toHaveBeenCalledWith('render.dl', jasmine.any(Object));
-    });
-
-    it('should call dispatchEvent with the customEvent', function() {
-      expect(this.list.dispatchEvent).toHaveBeenCalledWith(this.customEvent);
-    });
-
-    describe('if no data argument is passed', function() {
-      beforeEach(function() {
-        this.data.map.calls.reset();
-        this.dropdown.renderChildren.calls.reset();
-
-        DropDown.prototype.render.call(this.dropdown, undefined);
-      });
-
-      it('should not call .map', function() {
-        expect(this.data.map).not.toHaveBeenCalled();
-      });
-
-      it('should not call .renderChildren', function() {
-        expect(this.dropdown.renderChildren).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('if no dynamic list is present', function() {
-      beforeEach(function() {
-        this.list = { querySelector: () => {}, dispatchEvent: () => {} };
-        this.dropdown = { renderChildren: () => {}, list: this.list };
-        this.data = [0, 1];
-
-        spyOn(this.dropdown, 'renderChildren').and.callFake(data => data);
-        spyOn(this.list, 'querySelector');
-        spyOn(this.data, 'map').and.callThrough();
-
-        DropDown.prototype.render.call(this.dropdown, this.data);
-      });
-
-      it('sets the .list .innerHTML', function() {
-        expect(this.list.innerHTML).toBe('01');
-      });
-    });
-  });
-
-  describe('renderChildren', function() {
-    beforeEach(function() {
-      this.templateString = 'templateString';
-      this.dropdown = { templateString: this.templateString };
-      this.data = { droplab_hidden: true };
-      this.html = 'html';
-      this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } };
-
-      spyOn(utils, 'template').and.returnValue(this.html);
-      spyOn(document, 'createElement').and.returnValue(this.template);
-      spyOn(DropDown, 'setImagesSrc');
-
-      this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
-    });
-
-    it('should call utils.t with .templateString and data', function() {
-      expect(utils.template).toHaveBeenCalledWith(this.templateString, this.data);
-    });
-
-    it('should call document.createElement', function() {
-      expect(document.createElement).toHaveBeenCalledWith('div');
-    });
-
-    it('should set the templates .innerHTML to the HTML', function() {
-      expect(this.template.innerHTML).toBe(this.html);
-    });
-
-    it('should call .setImagesSrc with the template', function() {
-      expect(DropDown.setImagesSrc).toHaveBeenCalledWith(this.template);
-    });
-
-    it('should set the template display to none', function() {
-      expect(this.template.firstChild.style.display).toBe('none');
-    });
-
-    it('should return the templates .firstChild.outerHTML', function() {
-      expect(this.renderChildren).toBe(this.template.firstChild.outerHTML);
-    });
-
-    describe('if droplab_hidden is false', function() {
-      beforeEach(function() {
-        this.data = { droplab_hidden: false };
-        this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data);
-      });
-
-      it('should set the template display to block', function() {
-        expect(this.template.firstChild.style.display).toBe('block');
-      });
-    });
-  });
-
-  describe('setImagesSrc', function() {
-    beforeEach(function() {
-      this.template = { querySelectorAll: () => {} };
-
-      spyOn(this.template, 'querySelectorAll').and.returnValue([]);
-
-      DropDown.setImagesSrc(this.template);
-    });
-
-    it('should call .querySelectorAll', function() {
-      expect(this.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]');
-    });
-  });
-
-  describe('show', function() {
-    beforeEach(function() {
-      this.list = { style: {} };
-      this.dropdown = { list: this.list, hidden: true };
-
-      DropDown.prototype.show.call(this.dropdown);
-    });
-
-    it('it should set .list display to block', function() {
-      expect(this.list.style.display).toBe('block');
-    });
-
-    it('it should set .hidden to false', function() {
-      expect(this.dropdown.hidden).toBe(false);
-    });
-
-    describe('if .hidden is false', function() {
-      beforeEach(function() {
-        this.list = { style: {} };
-        this.dropdown = { list: this.list, hidden: false };
-
-        this.show = DropDown.prototype.show.call(this.dropdown);
-      });
-
-      it('should return undefined', function() {
-        expect(this.show).toEqual(undefined);
-      });
-
-      it('should not set .list display to block', function() {
-        expect(this.list.style.display).not.toEqual('block');
-      });
-    });
-  });
-
-  describe('hide', function() {
-    beforeEach(function() {
-      this.list = { style: {} };
-      this.dropdown = { list: this.list };
-
-      DropDown.prototype.hide.call(this.dropdown);
-    });
-
-    it('it should set .list display to none', function() {
-      expect(this.list.style.display).toBe('none');
-    });
-
-    it('it should set .hidden to true', function() {
-      expect(this.dropdown.hidden).toBe(true);
-    });
-  });
-
-  describe('toggle', function() {
-    beforeEach(function() {
-      this.hidden = true;
-      this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
-
-      spyOn(this.dropdown, 'show');
-      spyOn(this.dropdown, 'hide');
-
-      DropDown.prototype.toggle.call(this.dropdown);
-    });
-
-    it('should call .show', function() {
-      expect(this.dropdown.show).toHaveBeenCalled();
-    });
-
-    describe('if .hidden is false', function() {
-      beforeEach(function() {
-        this.hidden = false;
-        this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} };
-
-        spyOn(this.dropdown, 'show');
-        spyOn(this.dropdown, 'hide');
-
-        DropDown.prototype.toggle.call(this.dropdown);
-      });
-
-      it('should call .hide', function() {
-        expect(this.dropdown.hide).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('destroy', function() {
-    beforeEach(function() {
-      this.list = { removeEventListener: () => {} };
-      this.eventWrapper = { clickEvent: 'clickEvent' };
-      this.dropdown = { list: this.list, hide: () => {}, eventWrapper: this.eventWrapper };
-
-      spyOn(this.list, 'removeEventListener');
-      spyOn(this.dropdown, 'hide');
-
-      DropDown.prototype.destroy.call(this.dropdown);
-    });
-
-    it('it should call .hide', function() {
-      expect(this.dropdown.hide).toHaveBeenCalled();
-    });
-
-    it('it should call .removeEventListener', function() {
-      expect(this.list.removeEventListener).toHaveBeenCalledWith(
-        'click',
-        this.eventWrapper.clickEvent,
-      );
-    });
-  });
-});
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index a90d7893c79..cea5ac58f60 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -2197,26 +2197,6 @@ describe User do
     end
   end
 
-  describe '#ultraauth_user?' do
-    it 'is true if provider is ultraauth' do
-      user = create(:omniauth_user, provider: 'ultraauth')
-
-      expect(user.ultraauth_user?).to be_truthy
-    end
-
-    it 'is false with othe provider' do
-      user = create(:omniauth_user, provider: 'not-ultraauth')
-
-      expect(user.ultraauth_user?).to be_falsey
-    end
-
-    it 'is false if no extern_uid is provided' do
-      user = create(:omniauth_user, extern_uid: nil)
-
-      expect(user.ldap_user?).to be_falsey
-    end
-  end
-
   describe '#full_website_url' do
     let(:user) { create(:user) }
 
@@ -3492,12 +3472,6 @@ describe User do
 
       expect(user.allow_password_authentication_for_web?).to be_falsey
     end
-
-    it 'returns false for ultraauth user' do
-      user = create(:omniauth_user, provider: 'ultraauth')
-
-      expect(user.allow_password_authentication_for_web?).to be_falsey
-    end
   end
 
   describe '#allow_password_authentication_for_git?' do
@@ -3520,12 +3494,6 @@ describe User do
 
       expect(user.allow_password_authentication_for_git?).to be_falsey
     end
-
-    it 'returns false for ultraauth user' do
-      user = create(:omniauth_user, provider: 'ultraauth')
-
-      expect(user.allow_password_authentication_for_git?).to be_falsey
-    end
   end
 
   describe '#assigned_open_merge_requests_count' do
diff --git a/spec/uploaders/uploader_helper_spec.rb b/spec/uploaders/uploader_helper_spec.rb
index 753f32a9570..7bc6caf8224 100644
--- a/spec/uploaders/uploader_helper_spec.rb
+++ b/spec/uploaders/uploader_helper_spec.rb
@@ -14,7 +14,7 @@ describe UploaderHelper do
   end
 
   describe '#extension_match?' do
-    it 'returns false if file does not exists' do
+    it 'returns false if file does not exist' do
       expect(uploader.file).to be_nil
       expect(uploader.send(:extension_match?, 'jpg')).to eq false
     end