summaryrefslogtreecommitdiff
path: root/spec/frontend
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-11-13 19:27:03 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-11-13 19:27:03 +0000
commit7f5f940041c8d1ee074be96cc64bdccdd95649b1 (patch)
tree334342b5d7c1898efcbe345c51838b63aa5106bc /spec/frontend
parentb16db1458f5e0f6b0427cf3e2471302657297427 (diff)
downloadgitlab-ce-7f5f940041c8d1ee074be96cc64bdccdd95649b1.tar.gz
Add latest changes from gitlab-org/gitlab@13-5-stable-eev13.5.4
Diffstat (limited to 'spec/frontend')
-rw-r--r--spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js75
-rw-r--r--spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js98
2 files changed, 79 insertions, 94 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
index a9350bc059d..e8a126d8774 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -1,9 +1,14 @@
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlButton, GlLoadingIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import {
+ GlIntersectionObserver,
+ GlButton,
+ GlLoadingIcon,
+ GlSearchBoxByType,
+ GlLink,
+} from '@gitlab/ui';
import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
import LabelItem from '~/vue_shared/components/sidebar/labels_select_vue/label_item.vue';
@@ -88,20 +93,25 @@ describe('DropdownContentsLabelsView', () => {
});
});
- describe('showListContainer', () => {
+ describe('showNoMatchingResultsMessage', () => {
it.each`
- variant | loading | showList
- ${'sidebar'} | ${false} | ${true}
- ${'sidebar'} | ${true} | ${false}
- ${'not-sidebar'} | ${true} | ${true}
- ${'not-sidebar'} | ${false} | ${true}
+ searchKey | labels | labelsDescription | returnValue
+ ${''} | ${[]} | ${'empty'} | ${false}
+ ${'bug'} | ${[]} | ${'empty'} | ${true}
+ ${''} | ${mockLabels} | ${'not empty'} | ${false}
+ ${'bug'} | ${mockLabels} | ${'not empty'} | ${false}
`(
- 'returns $showList if `state.variant` is "$variant" and `labelsFetchInProgress` is $loading',
- ({ variant, loading, showList }) => {
- createComponent({ ...mockConfig, variant });
- wrapper.vm.$store.state.labelsFetchInProgress = loading;
+ 'returns $returnValue when searchKey is "$searchKey" and visibleLabels is $labelsDescription',
+ async ({ searchKey, labels, returnValue }) => {
+ wrapper.setData({
+ searchKey,
+ });
- expect(wrapper.vm.showListContainer).toBe(showList);
+ wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels);
+
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue);
},
);
});
@@ -118,6 +128,28 @@ describe('DropdownContentsLabelsView', () => {
});
});
+ describe('handleComponentDisappear', () => {
+ it('calls action `receiveLabelsSuccess` with empty array', () => {
+ jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
+
+ wrapper.vm.handleComponentDisappear();
+
+ expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]);
+ });
+ });
+
+ describe('handleCreateLabelClick', () => {
+ it('calls actions `receiveLabelsSuccess` with empty array and `toggleDropdownContentsCreateView`', () => {
+ jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
+ jest.spyOn(wrapper.vm, 'toggleDropdownContentsCreateView');
+
+ wrapper.vm.handleCreateLabelClick();
+
+ expect(wrapper.vm.receiveLabelsSuccess).toHaveBeenCalledWith([]);
+ expect(wrapper.vm.toggleDropdownContentsCreateView).toHaveBeenCalled();
+ });
+ });
+
describe('handleKeyDown', () => {
it('decreases `currentHighlightItem` value by 1 when Up arrow key is pressed', () => {
wrapper.setData({
@@ -226,8 +258,8 @@ describe('DropdownContentsLabelsView', () => {
});
describe('template', () => {
- it('renders component container element with class `labels-select-contents-list`', () => {
- expect(wrapper.attributes('class')).toContain('labels-select-contents-list');
+ it('renders gl-intersection-observer as component root', () => {
+ expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true);
});
it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
@@ -272,15 +304,11 @@ describe('DropdownContentsLabelsView', () => {
expect(searchInputEl.attributes('autofocus')).toBe('true');
});
- it('renders smart-virtual-list element', () => {
- expect(wrapper.find(SmartVirtualList).exists()).toBe(true);
- });
-
it('renders label elements for all labels', () => {
expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length);
});
- it('renders label element with "is-focused" when value of `currentHighlightItem` is more than -1', () => {
+ it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => {
wrapper.setData({
currentHighlightItem: 0,
});
@@ -288,7 +316,7 @@ describe('DropdownContentsLabelsView', () => {
return wrapper.vm.$nextTick(() => {
const labelItemEl = findDropdownContent().find(LabelItem);
- expect(labelItemEl.props('highlight')).toBe(true);
+ expect(labelItemEl.attributes('highlight')).toBe('true');
});
});
@@ -310,9 +338,12 @@ describe('DropdownContentsLabelsView', () => {
return wrapper.vm.$nextTick(() => {
const dropdownContent = findDropdownContent();
+ const loadingIcon = findLoadingIcon();
expect(dropdownContent.exists()).toBe(true);
- expect(dropdownContent.isVisible()).toBe(false);
+ expect(dropdownContent.isVisible()).toBe(true);
+ expect(loadingIcon.exists()).toBe(true);
+ expect(loadingIcon.isVisible()).toBe(true);
});
});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
index ad3f073fdf9..a6ec01ad7e1 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/label_item_spec.js
@@ -6,11 +6,15 @@ import { mockRegularLabel } from './mock_data';
const mockLabel = { ...mockRegularLabel, set: true };
-const createComponent = ({ label = mockLabel, highlight = true } = {}) =>
+const createComponent = ({
+ label = mockLabel,
+ isLabelSet = mockLabel.set,
+ highlight = true,
+} = {}) =>
shallowMount(LabelItem, {
propsData: {
label,
- isLabelSet: label.set,
+ isLabelSet,
highlight,
},
});
@@ -26,94 +30,44 @@ describe('LabelItem', () => {
wrapper.destroy();
});
- describe('computed', () => {
- describe('labelBoxStyle', () => {
- it('returns an object containing `backgroundColor` based on `label` prop', () => {
- expect(wrapper.vm.labelBoxStyle).toEqual(
- expect.objectContaining({
- backgroundColor: mockLabel.color,
- }),
- );
- });
- });
- });
-
- describe('watchers', () => {
- describe('isLabelSet', () => {
- it('sets value of `isLabelSet` to `isSet` data prop', () => {
- expect(wrapper.vm.isSet).toBe(true);
-
- wrapper.setProps({
- isLabelSet: false,
- });
-
- return wrapper.vm.$nextTick(() => {
- expect(wrapper.vm.isSet).toBe(false);
- });
- });
- });
- });
-
- describe('methods', () => {
- describe('handleClick', () => {
- it('sets value of `isSet` data prop to opposite of its current value', () => {
- wrapper.setData({
- isSet: true,
- });
-
- wrapper.vm.handleClick();
- expect(wrapper.vm.isSet).toBe(false);
- wrapper.vm.handleClick();
- expect(wrapper.vm.isSet).toBe(true);
- });
-
- it('emits event `clickLabel` on component with `label` prop as param', () => {
- wrapper.vm.handleClick();
-
- expect(wrapper.emitted('clickLabel')).toBeTruthy();
- expect(wrapper.emitted('clickLabel')[0]).toEqual([mockLabel]);
- });
- });
- });
-
describe('template', () => {
it('renders gl-link component', () => {
expect(wrapper.find(GlLink).exists()).toBe(true);
});
- it('renders gl-link component with class `is-focused` when `highlight` prop is true', () => {
- wrapper.setProps({
+ it('renders component root with class `is-focused` when `highlight` prop is true', () => {
+ const wrapperTemp = createComponent({
highlight: true,
});
- return wrapper.vm.$nextTick(() => {
- expect(wrapper.find(GlLink).classes()).toContain('is-focused');
- });
+ expect(wrapperTemp.classes()).toContain('is-focused');
+
+ wrapperTemp.destroy();
});
- it('renders visible gl-icon component when `isSet` prop is true', () => {
- wrapper.setData({
- isSet: true,
+ it('renders visible gl-icon component when `isLabelSet` prop is true', () => {
+ const wrapperTemp = createComponent({
+ isLabelSet: true,
});
- return wrapper.vm.$nextTick(() => {
- const iconEl = wrapper.find(GlIcon);
+ const iconEl = wrapperTemp.find(GlIcon);
- expect(iconEl.isVisible()).toBe(true);
- expect(iconEl.props('name')).toBe('mobile-issue-close');
- });
+ expect(iconEl.isVisible()).toBe(true);
+ expect(iconEl.props('name')).toBe('mobile-issue-close');
+
+ wrapperTemp.destroy();
});
- it('renders visible span element as placeholder instead of gl-icon when `isSet` prop is false', () => {
- wrapper.setData({
- isSet: false,
+ it('renders visible span element as placeholder instead of gl-icon when `isLabelSet` prop is false', () => {
+ const wrapperTemp = createComponent({
+ isLabelSet: false,
});
- return wrapper.vm.$nextTick(() => {
- const placeholderEl = wrapper.find('[data-testid="no-icon"]');
+ const placeholderEl = wrapperTemp.find('[data-testid="no-icon"]');
- expect(placeholderEl.isVisible()).toBe(true);
- });
+ expect(placeholderEl.isVisible()).toBe(true);
+
+ wrapperTemp.destroy();
});
it('renders label color element', () => {