debian-mirror-gitlab/spec/frontend/monitoring/components/dashboards_dropdown_spec.js

174 lines
5.6 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlDropdownItem, GlIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
2020-03-13 15:44:24 +05:30
import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
2020-10-24 23:57:45 +05:30
import { dashboardGitResponse } from '../mock_data';
2020-03-13 15:44:24 +05:30
2021-06-08 01:23:25 +05:30
const defaultBranch = 'main';
2020-05-24 23:13:21 +05:30
const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred);
const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred);
2020-03-13 15:44:24 +05:30
describe('DashboardsDropdown', () => {
let wrapper;
2020-05-24 23:13:21 +05:30
let mockDashboards;
let mockSelectedDashboard;
function createComponent(props, opts = {}) {
const storeOpts = {
computed: {
allDashboards: () => mockDashboards,
selectedDashboard: () => mockSelectedDashboard,
},
};
2020-10-24 23:57:45 +05:30
wrapper = shallowMount(DashboardsDropdown, {
2020-05-24 23:13:21 +05:30
propsData: {
...props,
defaultBranch,
},
...storeOpts,
...opts,
});
}
2020-03-13 15:44:24 +05:30
2020-11-24 15:15:51 +05:30
const findItems = () => wrapper.findAll(GlDropdownItem);
2021-03-08 18:12:59 +05:30
const findItemAt = (i) => wrapper.findAll(GlDropdownItem).at(i);
2020-03-13 15:44:24 +05:30
const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
2020-05-24 23:13:21 +05:30
const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
2022-03-02 08:16:31 +05:30
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
2021-03-08 18:12:59 +05:30
const setSearchTerm = (searchTerm) => wrapper.setData({ searchTerm });
2020-03-13 15:44:24 +05:30
2020-05-24 23:13:21 +05:30
beforeEach(() => {
mockDashboards = dashboardGitResponse;
mockSelectedDashboard = null;
});
2020-03-13 15:44:24 +05:30
describe('when it receives dashboards data', () => {
beforeEach(() => {
2020-10-24 23:57:45 +05:30
createComponent();
2020-03-13 15:44:24 +05:30
});
it('displays an item for each dashboard', () => {
expect(findItems().length).toEqual(dashboardGitResponse.length);
});
2020-05-24 23:13:21 +05:30
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);
2020-03-13 15:44:24 +05:30
});
it('displays a search input', () => {
expect(findSearchInput().isVisible()).toBe(true);
});
it('hides no message text by default', () => {
expect(findNoItemsMsg().isVisible()).toBe(false);
});
2021-03-08 18:12:59 +05:30
it('filters dropdown items when searched for item exists in the list', async () => {
2020-10-24 23:57:45 +05:30
const searchTerm = 'Overview';
2020-03-13 15:44:24 +05:30
setSearchTerm(searchTerm);
2021-03-08 18:12:59 +05:30
await nextTick();
2020-03-13 15:44:24 +05:30
2021-03-08 18:12:59 +05:30
expect(findItems()).toHaveLength(1);
2020-03-13 15:44:24 +05:30
});
2021-03-08 18:12:59 +05:30
it('shows no items found message when searched for item does not exists in the list', async () => {
2020-03-13 15:44:24 +05:30
const searchTerm = 'does-not-exist';
setSearchTerm(searchTerm);
2021-03-08 18:12:59 +05:30
await nextTick();
2020-03-13 15:44:24 +05:30
2021-03-08 18:12:59 +05:30
expect(findNoItemsMsg().isVisible()).toBe(true);
2020-03-13 15:44:24 +05:30
});
});
2020-10-24 23:57:45 +05:30
describe('when a dashboard is selected', () => {
beforeEach(() => {
[mockSelectedDashboard] = starredDashboards;
createComponent();
});
it('dashboard item is selected', () => {
expect(findItemAt(0).props('isChecked')).toBe(true);
expect(findItemAt(1).props('isChecked')).toBe(false);
});
});
2020-05-24 23:13:21 +05:30
describe('when the dashboard is missing a display name', () => {
beforeEach(() => {
2021-03-08 18:12:59 +05:30
mockDashboards = dashboardGitResponse.map((d) => ({ ...d, display_name: undefined }));
2020-10-24 23:57:45 +05:30
createComponent();
2020-05-24 23:13:21 +05:30
});
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;
2020-10-24 23:57:45 +05:30
createComponent();
2020-05-24 23:13:21 +05:30
});
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;
2020-10-24 23:57:45 +05:30
createComponent();
2020-05-24 23:13:21 +05:30
});
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);
});
});
2020-03-13 15:44:24 +05:30
describe('when a dashboard gets selected by the user', () => {
beforeEach(() => {
2020-10-24 23:57:45 +05:30
createComponent();
2020-03-13 15:44:24 +05:30
findItemAt(1).vm.$emit('click');
});
it('emits a "selectDashboard" event', () => {
expect(wrapper.emitted().selectDashboard).toBeTruthy();
});
it('emits a "selectDashboard" event with dashboard information', () => {
2020-05-24 23:13:21 +05:30
expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[0]]);
2020-03-13 15:44:24 +05:30
});
});
});