diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js b/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js new file mode 100644 index 00000000000..96be5b345a1 --- /dev/null +++ b/spec/frontend/vue_shared/components/list_selector/deploy_key_item_spec.js @@ -0,0 +1,61 @@ +import { GlIcon, GlButton } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import DeployKeyItem from '~/vue_shared/components/list_selector/deploy_key_item.vue'; + +describe('DeployKeyItem spec', () => { + let wrapper; + + const MOCK_DATA = { title: 'Some key', owner: 'root', id: '123' }; + + const createComponent = (props) => { + wrapper = shallowMountExtended(DeployKeyItem, { + propsData: { + data: MOCK_DATA, + ...props, + }, + }); + }; + + const findIcon = () => wrapper.findComponent(GlIcon); + const findDeleteButton = () => wrapper.findComponent(GlButton); + const findWrapper = () => wrapper.findByTestId('deploy-key-wrapper'); + + beforeEach(() => createComponent()); + + it('renders a key icon component', () => { + expect(findIcon().props('name')).toBe('key'); + }); + + it('renders a title and username', () => { + expect(wrapper.text()).toContain('Some key'); + expect(wrapper.text()).toContain('@root'); + }); + + it('does not render a delete button by default', () => { + expect(findDeleteButton().exists()).toBe(false); + }); + + it('emits a select event when the wrapper is clicked', () => { + findWrapper().trigger('click'); + + expect(wrapper.emitted('select')).toEqual([[MOCK_DATA.id]]); + }); + + describe('Delete button', () => { + beforeEach(() => createComponent({ canDelete: true })); + + it('renders a delete button', () => { + expect(findDeleteButton().exists()).toBe(true); + expect(findDeleteButton().props('icon')).toBe('remove'); + }); + + it('emits a delete event if the delete button is clicked', () => { + const stopPropagation = jest.fn(); + + findDeleteButton().vm.$emit('click', { stopPropagation }); + + expect(stopPropagation).toHaveBeenCalled(); + expect(wrapper.emitted('delete')).toEqual([[MOCK_DATA.id]]); + }); + }); +}); |