1 files changed, 98 insertions, 29 deletions

diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index 0bcfabe6415..b29d86cbc5b 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
@@ -9,36 +9,48 @@ import { dashboardGitResponse } from '../mock_data';
 
 const defaultBranch = 'master';
 
-function createComponent(props, opts = {}) {
-  const storeOpts = {
-    methods: {
-      duplicateSystemDashboard: jest.fn(),
-    },
-    computed: {
-      allDashboards: () => dashboardGitResponse,
-    },
-  };
-
-  return shallowMount(DashboardsDropdown, {
-    propsData: {
-      ...props,
-      defaultBranch,
-    },
-    sync: false,
-    ...storeOpts,
-    ...opts,
-  });
-}
+const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred);
+const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred);
 
 describe('DashboardsDropdown', () => {
   let wrapper;
+  let mockDashboards;
+  let mockSelectedDashboard;
+
+  function createComponent(props, opts = {}) {
+    const storeOpts = {
+      methods: {
+        duplicateSystemDashboard: jest.fn(),
+      },
+      computed: {
+        allDashboards: () => mockDashboards,
+        selectedDashboard: () => mockSelectedDashboard,
+      },
+    };
+
+    return shallowMount(DashboardsDropdown, {
+      propsData: {
+        ...props,
+        defaultBranch,
+      },
+      sync: false,
+      ...storeOpts,
+      ...opts,
+    });
+  }
 
   const findItems = () => wrapper.findAll(GlDropdownItem);
   const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
+  const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
   const setSearchTerm = searchTerm => wrapper.setData({ searchTerm });
 
+  beforeEach(() => {
+    mockDashboards = dashboardGitResponse;
+    mockSelectedDashboard = null;
+  });
+
   describe('when it receives dashboards data', () => {
     beforeEach(() => {
       wrapper = createComponent();
@@ -48,10 +60,14 @@ describe('DashboardsDropdown', () => {
       expect(findItems().length).toEqual(dashboardGitResponse.length);
     });
 
-    it('displays items with the dashboard display name', () => {
-      expect(findItemAt(0).text()).toBe(dashboardGitResponse[0].display_name);
-      expect(findItemAt(1).text()).toBe(dashboardGitResponse[1].display_name);
-      expect(findItemAt(2).text()).toBe(dashboardGitResponse[2].display_name);
+    it('displays items with the dashboard display name, with starred dashboards first', () => {
+      expect(findItemAt(0).text()).toBe(starredDashboards[0].display_name);
+      expect(findItemAt(1).text()).toBe(notStarredDashboards[0].display_name);
+      expect(findItemAt(2).text()).toBe(notStarredDashboards[1].display_name);
+    });
+
+    it('displays separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(true);
     });
 
     it('displays a search input', () => {
@@ -81,18 +97,71 @@ describe('DashboardsDropdown', () => {
     });
   });
 
+  describe('when the dashboard is missing a display name', () => {
+    beforeEach(() => {
+      mockDashboards = dashboardGitResponse.map(d => ({ ...d, display_name: undefined }));
+      wrapper = createComponent();
+    });
+
+    it('displays items with the dashboard path, with starred dashboards first', () => {
+      expect(findItemAt(0).text()).toBe(starredDashboards[0].path);
+      expect(findItemAt(1).text()).toBe(notStarredDashboards[0].path);
+      expect(findItemAt(2).text()).toBe(notStarredDashboards[1].path);
+    });
+  });
+
+  describe('when it receives starred dashboards', () => {
+    beforeEach(() => {
+      mockDashboards = starredDashboards;
+      wrapper = createComponent();
+    });
+
+    it('displays an item for each dashboard', () => {
+      expect(findItems().length).toEqual(starredDashboards.length);
+    });
+
+    it('displays a star icon', () => {
+      const star = findItemAt(0).find(GlIcon);
+      expect(star.exists()).toBe(true);
+      expect(star.attributes('name')).toBe('star');
+    });
+
+    it('displays no separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(false);
+    });
+  });
+
+  describe('when it receives only not-starred dashboards', () => {
+    beforeEach(() => {
+      mockDashboards = notStarredDashboards;
+      wrapper = createComponent();
+    });
+
+    it('displays an item for each dashboard', () => {
+      expect(findItems().length).toEqual(notStarredDashboards.length);
+    });
+
+    it('displays no star icon', () => {
+      const star = findItemAt(0).find(GlIcon);
+      expect(star.exists()).toBe(false);
+    });
+
+    it('displays no separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(false);
+    });
+  });
+
   describe('when a system dashboard is selected', () => {
     let duplicateDashboardAction;
     let modalDirective;
 
     beforeEach(() => {
+      [mockSelectedDashboard] = dashboardGitResponse;
       modalDirective = jest.fn();
       duplicateDashboardAction = jest.fn().mockResolvedValue();
 
       wrapper = createComponent(
-        {
-          selectedDashboard: dashboardGitResponse[0],
-        },
+        {},
         {
           directives: {
             GlModal: modalDirective,
@@ -260,7 +329,7 @@ describe('DashboardsDropdown', () => {
       expect(wrapper.emitted().selectDashboard).toBeTruthy();
     });
     it('emits a "selectDashboard" event with dashboard information', () => {
-      expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[1]]);
+      expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[0]]);
     });
   });
 });