Commit d5b08bd5 authored by Dave Pisek's avatar Dave Pisek

Add specs for hidden groups item component

* Make sure we display the correct icons
* Check for the correct text
* Test that the help-tooltip is wired up
parent 9d7c81ee
......@@ -14,7 +14,7 @@ export default {
<template>
<div class="d-flex align-items-center">
<div class="square s24 d-flex-center mr-2 text-tertiary">
<gl-icon name="folder-o" :size="16" />
<gl-icon name="folder-o" :size="16" data-testid="folder-icon" />
</div>
<span>{{ __('Private group(s)') }}</span>
<gl-icon
......@@ -23,6 +23,7 @@ export default {
class="ml-1 gl-text-gray-500"
name="question-o"
:size="16"
data-testid="help-icon"
/>
</div>
</template>
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlIcon } from '@gitlab/ui';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
const localVue = createLocalVue();
......@@ -7,20 +10,48 @@ describe('Approvals HiddenGroupsItem', () => {
let wrapper;
const factory = (options = {}) => {
wrapper = shallowMount(localVue.extend(HiddenGroupsItem), {
...options,
localVue,
});
wrapper = extendedWrapper(
shallowMount(localVue.extend(HiddenGroupsItem), {
...options,
localVue,
directives: {
GlTooltip: createMockDirective(),
},
}),
);
};
const findFolderIcon = () => wrapper.findByTestId('folder-icon');
const findHelpIcon = () => wrapper.findByTestId('help-icon');
beforeEach(() => {
factory();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('renders successfully', () => {
factory();
it('contains the correct text', () => {
expect(wrapper.text()).toContain('Private group(s)');
});
it('shows a folder icon', () => {
const folderIcon = findFolderIcon();
expect(folderIcon.is(GlIcon)).toBe(true);
expect(folderIcon.props('name')).toBe('folder-o');
});
it('shows a help-icon with a tooltip', () => {
const helpIcon = findHelpIcon();
const tooltip = getBinding(helpIcon.element, 'gl-tooltip');
expect(helpIcon.is(GlIcon)).toBe(true);
expect(helpIcon.props('name')).toBe('question-o');
expect(wrapper.exists()).toBe(true);
expect(tooltip).not.toBe(undefined);
expect(helpIcon.attributes('title')).toBe(`One or more groups that you don't have access to.`);
});
});
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