Skip to content

G
gitlab-ce
Commit 5ca73b66 authored by Denys Mishunov's avatar Denys Mishunov
Browse files
Options

Merge branch 'mrincon/move-environemnts-dropdown-test-to-header-spec' into 'master' 

Move env dropdown tests to header specs

See merge request gitlab-org/gitlab!37061
parents 09346dab 8d3cf014
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 186 deletions
app/assets/javascripts/monitoring/components/dashboard_header.vue
View file @ 5ca73b66
......@@ -254,16 +254,8 @@ export default {
{{ __('Environment') }}
</gl-dropdown-header>
<gl-dropdown-divider />
<gl-search-box-by-type
ref="monitorEnvironmentsDropdownSearch"
class="m-2"
@input="debouncedEnvironmentsSearch"
/>
<gl-loading-icon
v-if="environmentsLoading"
ref="monitorEnvironmentsDropdownLoading"
:inline="true"
/>
<gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
<gl-loading-icon v-if="environmentsLoading" :inline="true" />
<div v-else class="flex-fill overflow-auto">
<gl-dropdown-item
v-for="environment in filteredEnvironments"
......
spec/frontend/monitoring/components/dashboard_header_spec.js
View file @ 5ca73b66
import { shallowMount } from '@vue/test-utils';
import { createStore } from '~/monitoring/stores';
import * as types from '~/monitoring/stores/mutation_types';
import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
import { setupAllDashboards } from '../store_utils';
import { setupAllDashboards, setupStoreWithDashboard, setupStoreWithData } from '../store_utils';
import {
environmentData,
dashboardGitResponse,
selfMonitoringDashboardGitResponse,
dashboardHeaderProps,
} from '../mock_data';
import { redirectTo } from '~/lib/utils/url_utility';
const mockProjectPath = 'https://path/to/project';
jest.mock('~/lib/utils/url_utility', () => ({
redirectTo: jest.fn(),
queryToObject: jest.fn(),
......@@ -21,6 +26,12 @@ describe('Dashboard header', () => {
let store;
let wrapper;
const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem);
const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
const findActionsMenu = () => wrapper.find('[data-testid="actions-menu"]');
const findCreateDashboardMenuItem = () =>
findActionsMenu().find('[data-testid="action-create-dashboard"]');
......@@ -29,6 +40,10 @@ describe('Dashboard header', () => {
const findDuplicateDashboardModal = () => wrapper.find(DuplicateDashboardModal);
const findCreateDashboardModal = () => wrapper.find('[data-testid="create-dashboard-modal"]');
const setSearchTerm = searchTerm => {
store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
};
const createShallowWrapper = (props = {}, options = {}) => {
wrapper = shallowMount(DashboardHeader, {
propsData: { ...dashboardHeaderProps, ...props },
......@@ -45,6 +60,113 @@ describe('Dashboard header', () => {
wrapper.destroy();
});
describe('environments dropdown', () => {
beforeEach(() => {
createShallowWrapper();
});
it('shows the environments dropdown', () => {
expect(findEnvsDropdown().exists()).toBe(true);
});
it('renders a search input', () => {
expect(findEnvsDropdownSearch().exists()).toBe(true);
});
describe('when environments data is not loaded', () => {
beforeEach(() => {
setupStoreWithDashboard(store);
return wrapper.vm.$nextTick();
});
it('there are no environments listed', () => {
expect(findEnvsDropdownItems().length).toBe(0);
});
});
describe('when environments data is loaded', () => {
const currentDashboard = dashboardGitResponse[0].path;
beforeEach(() => {
setupStoreWithData(store);
store.state.monitoringDashboard.projectPath = mockProjectPath;
store.state.monitoringDashboard.currentDashboard = currentDashboard;
return wrapper.vm.$nextTick();
});
it('renders dropdown items with the environment name', () => {
const path = `${mockProjectPath}/-/metrics/${encodeURIComponent(currentDashboard)}`;
findEnvsDropdownItems().wrappers.forEach((itemWrapper, index) => {
const { name, id } = environmentData[index];
const idParam = encodeURIComponent(id);
expect(itemWrapper.text()).toBe(name);
expect(itemWrapper.attributes('href')).toBe(`${path}?environment=${idParam}`);
});
});
// Note: This test is not working, .active does not show the active environment
// https://gitlab.com/gitlab-org/gitlab/-/issues/230615
// eslint-disable-next-line jest/no-disabled-tests
it.skip('renders the environments dropdown with a single active element', () => {
const activeItem = findEnvsDropdownItems().wrappers.filter(itemWrapper =>
itemWrapper.find('.active').exists(),
);
expect(activeItem.length).toBe(1);
});
it('filters rendered dropdown items', () => {
const searchTerm = 'production';
const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1);
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick().then(() => {
expect(findEnvsDropdownItems().length).toBe(resultEnvs.length);
});
});
it('does not filter dropdown items if search term is empty string', () => {
const searchTerm = '';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
expect(findEnvsDropdownItems().length).toBe(environmentData.length);
});
});
it("shows error message if search term doesn't match", () => {
const searchTerm = 'does-not-exist';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
expect(findEnvsDropdownSearchMsg().isVisible()).toBe(true);
});
});
it('shows loading element when environments fetch is still loading', () => {
store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
return wrapper.vm
.$nextTick()
.then(() => {
expect(findEnvsDropdownLoadingIcon().exists()).toBe(true);
})
.then(() => {
store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
})
.then(() => {
expect(findEnvsDropdownLoadingIcon().exists()).toBe(false);
});
});
});
});
describe('when a dashboard has been duplicated in the duplicate dashboard modal', () => {
beforeEach(() => {
store.state.monitoringDashboard.projectPath = 'root/sandbox';
......@@ -81,7 +203,7 @@ describe('Dashboard header', () => {
});
it('is rendered if projectPath is set in store', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
store.state.monitoringDashboard.projectPath = mockProjectPath;
return wrapper.vm.$nextTick().then(() => {
expect(findActionsMenu().exists()).toBe(true);
......@@ -93,7 +215,7 @@ describe('Dashboard header', () => {
});
it('contains a modal', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
store.state.monitoringDashboard.projectPath = mockProjectPath;
return wrapper.vm.$nextTick().then(() => {
expect(findActionsMenu().contains(CreateDashboardModal)).toBe(true);
......@@ -111,7 +233,7 @@ describe('Dashboard header', () => {
'when the selected dashboard can be duplicated',
dashboardPath => {
it('contains a "Create New" menu item and a "Duplicate Dashboard" menu item', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
store.state.monitoringDashboard.projectPath = mockProjectPath;
setupAllDashboards(store, dashboardPath);
return wrapper.vm.$nextTick().then(() => {
......@@ -131,7 +253,7 @@ describe('Dashboard header', () => {
'when the selected dashboard cannot be duplicated',
dashboardPath => {
it('contains a "Create New" menu item and no "Duplicate Dashboard" menu item', () => {
store.state.monitoringDashboard.projectPath = 'https://path/to/project';
store.state.monitoringDashboard.projectPath = mockProjectPath;
setupAllDashboards(store, dashboardPath);
return wrapper.vm.$nextTick().then(() => {
......@@ -144,10 +266,8 @@ describe('Dashboard header', () => {
});
describe('actions menu modals', () => {
const url = 'https://path/to/project';
beforeEach(() => {
store.state.monitoringDashboard.projectPath = url;
store.state.monitoringDashboard.projectPath = mockProjectPath;
setupAllDashboards(store);
createShallowWrapper();
......@@ -166,7 +286,7 @@ describe('Dashboard header', () => {
});
it('"Create new dashboard" modal contains correct buttons', () => {
expect(findCreateDashboardModal().props('projectPath')).toBe(url);
expect(findCreateDashboardModal().props('projectPath')).toBe(mockProjectPath);
});
it('"Duplicate Dashboard" opens up a modal', () => {
......
spec/frontend/monitoring/components/dashboard_spec.js
View file @ 5ca73b66
import { shallowMount, mount } from '@vue/test-utils';
import Tracking from '~/tracking';
import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
import { GlModal, GlDropdownItem, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
import { GlModal, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
import { objectToQuery } from '~/lib/utils/url_utility';
import VueDraggable from 'vuedraggable';
import MockAdapter from 'axios-mock-adapter';
......@@ -29,7 +29,7 @@ import {
setupStoreWithDataForPanelCount,
setupStoreWithLinks,
} from '../store_utils';
import { environmentData, dashboardGitResponse, storeVariables } from '../mock_data';
import { dashboardGitResponse, storeVariables } from '../mock_data';
import {
metricsDashboardViewModel,
metricsDashboardPanelCount,
......@@ -46,12 +46,6 @@ describe('Dashboard', () => {
let mock;
const findDashboardHeader = () => wrapper.find(DashboardHeader);
const findEnvironmentsDropdown = () =>
findDashboardHeader().find({ ref: 'monitorEnvironmentsDropdown' });
const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
const setSearchTerm = searchTerm => {
store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm);
};
const createShallowWrapper = (props = {}, options = {}) => {
wrapper = shallowMount(Dashboard, {
......@@ -90,28 +84,6 @@ describe('Dashboard', () => {
}
});
describe('no metrics are available yet', () => {
beforeEach(() => {
createShallowWrapper();
});
it('shows the environment selector', () => {
expect(findEnvironmentsDropdown().exists()).toBe(true);
});
});
describe('no data found', () => {
beforeEach(() => {
createShallowWrapper();
return wrapper.vm.$nextTick();
});
it('shows the environment selector dropdown', () => {
expect(findEnvironmentsDropdown().exists()).toBe(true);
});
});
describe('request information to the server', () => {
it('calls to set time range and fetch data', () => {
createShallowWrapper({ hasMetrics: true });
......@@ -149,17 +121,14 @@ describe('Dashboard', () => {
});
it('fetches the metrics data with proper time window', () => {
jest.spyOn(store, 'dispatch');
createMountedWrapper({ hasMetrics: true });
store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
return wrapper.vm.$nextTick().then(() => {
expect(store.dispatch).toHaveBeenCalled();
expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/fetchData', undefined);
expect(store.dispatch).toHaveBeenCalledWith(
'monitoringDashboard/setTimeRange',
expect.objectContaining({ duration: { seconds: 28800 } }),
);
});
});
});
......@@ -500,21 +469,6 @@ describe('Dashboard', () => {
return wrapper.vm.$nextTick();
});
it('renders the environments dropdown with a number of environments', () => {
expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
const anchorEl = itemWrapper.find('a');
if (anchorEl.exists()) {
const href = anchorEl.attributes('href');
const currentDashboard = encodeURIComponent(dashboardGitResponse[0].path);
const environmentId = encodeURIComponent(environmentData[index].id);
const url = `${TEST_HOST}/-/metrics/${currentDashboard}?environment=${environmentId}`;
expect(href).toBe(url);
}
});
});
it('it does not show loading icons in any group', () => {
setupStoreWithData(store);
......@@ -524,16 +478,6 @@ describe('Dashboard', () => {
});
});
});
// Note: This test is not working, .active does not show the active environment
// eslint-disable-next-line jest/no-disabled-tests
it.skip('renders the environments dropdown with a single active element', () => {
const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper =>
itemWrapper.find('.active').exists(),
);
expect(activeItem.length).toBe(1);
});
});
describe('star dashboards', () => {
......@@ -615,16 +559,6 @@ describe('Dashboard', () => {
});
});
it('hides the environments dropdown list when there is no environments', () => {
createMountedWrapper({ hasMetrics: true });
setupStoreWithDashboard(store);
return wrapper.vm.$nextTick().then(() => {
expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
});
});
it('renders the datetimepicker dropdown', () => {
createMountedWrapper({ hasMetrics: true });
......@@ -811,100 +745,6 @@ describe('Dashboard', () => {
});
});
describe('searchable environments dropdown', () => {
beforeEach(() => {
createMountedWrapper({ hasMetrics: true }, { attachToDocument: true });
setupStoreWithData(store);
return wrapper.vm.$nextTick();
});
afterEach(() => {
wrapper.destroy();
});
it('renders a search input', () => {
expect(
wrapper
.find(DashboardHeader)
.find({ ref: 'monitorEnvironmentsDropdownSearch' })
.exists(),
).toBe(true);
});
it('renders dropdown items', () => {
findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
const anchorEl = itemWrapper.find('a');
if (anchorEl.exists()) {
expect(anchorEl.text()).toBe(environmentData[index].name);
}
});
});
it('filters rendered dropdown items', () => {
const searchTerm = 'production';
const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1);
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick().then(() => {
expect(findAllEnvironmentsDropdownItems().length).toEqual(resultEnvs.length);
});
});
it('does not filter dropdown items if search term is empty string', () => {
const searchTerm = '';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
});
});
it("shows error message if search term doesn't match", () => {
const searchTerm = 'does-not-exist';
setSearchTerm(searchTerm);
return wrapper.vm.$nextTick(() => {
expect(
wrapper
.find(DashboardHeader)
.find({ ref: 'monitorEnvironmentsDropdownMsg' })
.isVisible(),
).toBe(true);
});
});
it('shows loading element when environments fetch is still loading', () => {
store.commit(`monitoringDashboard/${types.REQUEST_ENVIRONMENTS_DATA}`);
return wrapper.vm
.$nextTick()
.then(() => {
expect(
wrapper
.find(DashboardHeader)
.find({ ref: 'monitorEnvironmentsDropdownLoading' })
.exists(),
).toBe(true);
})
.then(() => {
store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
})
.then(() => {
expect(
wrapper
.find(DashboardHeader)
.find({ ref: 'monitorEnvironmentsDropdownLoading' })
.exists(),
).toBe(false);
});
});
});
describe('drag and drop function', () => {
const findDraggables = () => wrapper.findAll(VueDraggable);
const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7