172 lines
4.8 KiB
JavaScript
172 lines
4.8 KiB
JavaScript
|
import { mount } from '@vue/test-utils';
|
||
|
import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
|
||
|
import MockAdapter from 'axios-mock-adapter';
|
||
|
import waitForPromises from 'helpers/wait_for_promises';
|
||
|
import axios from '~/lib/utils/axios_utils';
|
||
|
|
||
|
import createFlash from '~/flash';
|
||
|
import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
|
||
|
|
||
|
import {
|
||
|
mockRegularLabel,
|
||
|
mockLabels,
|
||
|
} from 'jest/vue_shared/components/sidebar/labels_select_vue/mock_data';
|
||
|
|
||
|
import { mockLabelToken } from '../mock_data';
|
||
|
|
||
|
jest.mock('~/flash');
|
||
|
|
||
|
const createComponent = ({ config = mockLabelToken, value = { data: '' }, active = false } = {}) =>
|
||
|
mount(LabelToken, {
|
||
|
propsData: {
|
||
|
config,
|
||
|
value,
|
||
|
active,
|
||
|
},
|
||
|
provide: {
|
||
|
portalName: 'fake target',
|
||
|
alignSuggestions: function fakeAlignSuggestions() {},
|
||
|
},
|
||
|
stubs: {
|
||
|
Portal: {
|
||
|
template: '<div><slot></slot></div>',
|
||
|
},
|
||
|
GlFilteredSearchSuggestionList: {
|
||
|
template: '<div></div>',
|
||
|
methods: {
|
||
|
getValue: () => '=',
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
});
|
||
|
|
||
|
describe('LabelToken', () => {
|
||
|
let mock;
|
||
|
let wrapper;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
mock = new MockAdapter(axios);
|
||
|
wrapper = createComponent();
|
||
|
});
|
||
|
|
||
|
afterEach(() => {
|
||
|
mock.restore();
|
||
|
wrapper.destroy();
|
||
|
});
|
||
|
|
||
|
describe('computed', () => {
|
||
|
beforeEach(async () => {
|
||
|
// Label title with spaces is always enclosed in quotations by component.
|
||
|
wrapper = createComponent({ value: { data: `"${mockRegularLabel.title}"` } });
|
||
|
|
||
|
wrapper.setData({
|
||
|
labels: mockLabels,
|
||
|
});
|
||
|
|
||
|
await wrapper.vm.$nextTick();
|
||
|
});
|
||
|
|
||
|
describe('currentValue', () => {
|
||
|
it('returns lowercase string for `value.data`', () => {
|
||
|
expect(wrapper.vm.currentValue).toBe('"foo label"');
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('activeLabel', () => {
|
||
|
it('returns object for currently present `value.data`', () => {
|
||
|
expect(wrapper.vm.activeLabel).toEqual(mockRegularLabel);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('containerStyle', () => {
|
||
|
it('returns object containing `backgroundColor` and `color` properties based on `activeLabel` value', () => {
|
||
|
expect(wrapper.vm.containerStyle).toEqual({
|
||
|
backgroundColor: mockRegularLabel.color,
|
||
|
color: mockRegularLabel.textColor,
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('returns empty object when `activeLabel` is not set', async () => {
|
||
|
wrapper.setData({
|
||
|
labels: [],
|
||
|
});
|
||
|
|
||
|
await wrapper.vm.$nextTick();
|
||
|
|
||
|
expect(wrapper.vm.containerStyle).toEqual({});
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('methods', () => {
|
||
|
describe('fetchLabelBySearchTerm', () => {
|
||
|
it('calls `config.fetchLabels` with provided searchTerm param', () => {
|
||
|
jest.spyOn(wrapper.vm.config, 'fetchLabels');
|
||
|
|
||
|
wrapper.vm.fetchLabelBySearchTerm('foo');
|
||
|
|
||
|
expect(wrapper.vm.config.fetchLabels).toHaveBeenCalledWith('foo');
|
||
|
});
|
||
|
|
||
|
it('sets response to `labels` when request is succesful', () => {
|
||
|
jest.spyOn(wrapper.vm.config, 'fetchLabels').mockResolvedValue(mockLabels);
|
||
|
|
||
|
wrapper.vm.fetchLabelBySearchTerm('foo');
|
||
|
|
||
|
return waitForPromises().then(() => {
|
||
|
expect(wrapper.vm.labels).toEqual(mockLabels);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('calls `createFlash` with flash error message when request fails', () => {
|
||
|
jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
|
||
|
|
||
|
wrapper.vm.fetchLabelBySearchTerm('foo');
|
||
|
|
||
|
return waitForPromises().then(() => {
|
||
|
expect(createFlash).toHaveBeenCalledWith('There was a problem fetching labels.');
|
||
|
});
|
||
|
});
|
||
|
|
||
|
it('sets `loading` to false when request completes', () => {
|
||
|
jest.spyOn(wrapper.vm.config, 'fetchLabels').mockRejectedValue({});
|
||
|
|
||
|
wrapper.vm.fetchLabelBySearchTerm('foo');
|
||
|
|
||
|
return waitForPromises().then(() => {
|
||
|
expect(wrapper.vm.loading).toBe(false);
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('template', () => {
|
||
|
beforeEach(async () => {
|
||
|
wrapper = createComponent({ value: { data: `"${mockRegularLabel.title}"` } });
|
||
|
|
||
|
wrapper.setData({
|
||
|
labels: mockLabels,
|
||
|
});
|
||
|
|
||
|
await wrapper.vm.$nextTick();
|
||
|
});
|
||
|
|
||
|
it('renders gl-filtered-search-token component', () => {
|
||
|
expect(wrapper.find(GlFilteredSearchToken).exists()).toBe(true);
|
||
|
});
|
||
|
|
||
|
it('renders token item when value is selected', () => {
|
||
|
const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
|
||
|
|
||
|
expect(tokenSegments).toHaveLength(3); // Label, =, "Foo Label"
|
||
|
expect(tokenSegments.at(2).text()).toBe(`~${mockRegularLabel.title}`); // "Foo Label"
|
||
|
expect(
|
||
|
tokenSegments
|
||
|
.at(2)
|
||
|
.find('.gl-token')
|
||
|
.attributes('style'),
|
||
|
).toBe('background-color: rgb(186, 218, 85); color: rgb(255, 255, 255);');
|
||
|
});
|
||
|
});
|
||
|
});
|